@charset "UTF-8";

/* node_modules/primeicons/primeicons.css */
@font-face {
  font-family: "primeicons";
  font-display: block;
  src: url("./media/primeicons.eot");
  src:
    url("./media/primeicons.eot?#iefix") format("embedded-opentype"),
    url("./media/primeicons.woff2") format("woff2"),
    url("./media/primeicons.woff") format("woff"),
    url("./media/primeicons.ttf") format("truetype"),
    url("./media/primeicons.svg?#primeicons") format("svg");
  font-weight: normal;
  font-style: normal;
}
.pi {
  font-family: "primeicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.pi:before {
  --webkit-backface-visibility:hidden;
  backface-visibility: hidden;
}
.pi-fw {
  width: 1.28571429em;
  text-align: center;
}
.pi-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
@media (prefers-reduced-motion: reduce) {
  .pi-spin {
    -webkit-animation-delay: -1ms;
    animation-delay: -1ms;
    -webkit-animation-duration: 1ms;
    animation-duration: 1ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.pi-folder-plus:before {
  content: "\ea05";
}
.pi-receipt:before {
  content: "\ea06";
}
.pi-asterisk:before {
  content: "\ea07";
}
.pi-face-smile:before {
  content: "\ea08";
}
.pi-pinterest:before {
  content: "\ea09";
}
.pi-expand:before {
  content: "\ea0a";
}
.pi-pen-to-square:before {
  content: "\ea0b";
}
.pi-wave-pulse:before {
  content: "\ea0c";
}
.pi-turkish-lira:before {
  content: "\ea0d";
}
.pi-spinner-dotted:before {
  content: "\ea0e";
}
.pi-crown:before {
  content: "\ea0f";
}
.pi-pause-circle:before {
  content: "\ea10";
}
.pi-warehouse:before {
  content: "\ea11";
}
.pi-objects-column:before {
  content: "\ea12";
}
.pi-clipboard:before {
  content: "\ea13";
}
.pi-play-circle:before {
  content: "\ea14";
}
.pi-venus:before {
  content: "\ea15";
}
.pi-cart-minus:before {
  content: "\ea16";
}
.pi-file-plus:before {
  content: "\ea17";
}
.pi-microchip:before {
  content: "\ea18";
}
.pi-twitch:before {
  content: "\ea19";
}
.pi-building-columns:before {
  content: "\ea1a";
}
.pi-file-check:before {
  content: "\ea1b";
}
.pi-microchip-ai:before {
  content: "\ea1c";
}
.pi-trophy:before {
  content: "\ea1d";
}
.pi-barcode:before {
  content: "\ea1e";
}
.pi-file-arrow-up:before {
  content: "\ea1f";
}
.pi-mars:before {
  content: "\ea20";
}
.pi-tiktok:before {
  content: "\ea21";
}
.pi-arrow-up-right-and-arrow-down-left-from-center:before {
  content: "\ea22";
}
.pi-ethereum:before {
  content: "\ea23";
}
.pi-list-check:before {
  content: "\ea24";
}
.pi-thumbtack:before {
  content: "\ea25";
}
.pi-arrow-down-left-and-arrow-up-right-to-center:before {
  content: "\ea26";
}
.pi-equals:before {
  content: "\ea27";
}
.pi-lightbulb:before {
  content: "\ea28";
}
.pi-star-half:before {
  content: "\ea29";
}
.pi-address-book:before {
  content: "\ea2a";
}
.pi-chart-scatter:before {
  content: "\ea2b";
}
.pi-indian-rupee:before {
  content: "\ea2c";
}
.pi-star-half-fill:before {
  content: "\ea2d";
}
.pi-cart-arrow-down:before {
  content: "\ea2e";
}
.pi-calendar-clock:before {
  content: "\ea2f";
}
.pi-sort-up-fill:before {
  content: "\ea30";
}
.pi-sparkles:before {
  content: "\ea31";
}
.pi-bullseye:before {
  content: "\ea32";
}
.pi-sort-down-fill:before {
  content: "\ea33";
}
.pi-graduation-cap:before {
  content: "\ea34";
}
.pi-hammer:before {
  content: "\ea35";
}
.pi-bell-slash:before {
  content: "\ea36";
}
.pi-gauge:before {
  content: "\ea37";
}
.pi-shop:before {
  content: "\ea38";
}
.pi-headphones:before {
  content: "\ea39";
}
.pi-eraser:before {
  content: "\ea04";
}
.pi-stopwatch:before {
  content: "\ea01";
}
.pi-verified:before {
  content: "\ea02";
}
.pi-delete-left:before {
  content: "\ea03";
}
.pi-hourglass:before {
  content: "\e9fe";
}
.pi-truck:before {
  content: "\ea00";
}
.pi-wrench:before {
  content: "\e9ff";
}
.pi-microphone:before {
  content: "\e9fa";
}
.pi-megaphone:before {
  content: "\e9fb";
}
.pi-arrow-right-arrow-left:before {
  content: "\e9fc";
}
.pi-bitcoin:before {
  content: "\e9fd";
}
.pi-file-edit:before {
  content: "\e9f6";
}
.pi-language:before {
  content: "\e9f7";
}
.pi-file-export:before {
  content: "\e9f8";
}
.pi-file-import:before {
  content: "\e9f9";
}
.pi-file-word:before {
  content: "\e9f1";
}
.pi-gift:before {
  content: "\e9f2";
}
.pi-cart-plus:before {
  content: "\e9f3";
}
.pi-thumbs-down-fill:before {
  content: "\e9f4";
}
.pi-thumbs-up-fill:before {
  content: "\e9f5";
}
.pi-arrows-alt:before {
  content: "\e9f0";
}
.pi-calculator:before {
  content: "\e9ef";
}
.pi-sort-alt-slash:before {
  content: "\e9ee";
}
.pi-arrows-h:before {
  content: "\e9ec";
}
.pi-arrows-v:before {
  content: "\e9ed";
}
.pi-pound:before {
  content: "\e9eb";
}
.pi-prime:before {
  content: "\e9ea";
}
.pi-chart-pie:before {
  content: "\e9e9";
}
.pi-reddit:before {
  content: "\e9e8";
}
.pi-code:before {
  content: "\e9e7";
}
.pi-sync:before {
  content: "\e9e6";
}
.pi-shopping-bag:before {
  content: "\e9e5";
}
.pi-server:before {
  content: "\e9e4";
}
.pi-database:before {
  content: "\e9e3";
}
.pi-hashtag:before {
  content: "\e9e2";
}
.pi-bookmark-fill:before {
  content: "\e9df";
}
.pi-filter-fill:before {
  content: "\e9e0";
}
.pi-heart-fill:before {
  content: "\e9e1";
}
.pi-flag-fill:before {
  content: "\e9de";
}
.pi-circle:before {
  content: "\e9dc";
}
.pi-circle-fill:before {
  content: "\e9dd";
}
.pi-bolt:before {
  content: "\e9db";
}
.pi-history:before {
  content: "\e9da";
}
.pi-box:before {
  content: "\e9d9";
}
.pi-at:before {
  content: "\e9d8";
}
.pi-arrow-up-right:before {
  content: "\e9d4";
}
.pi-arrow-up-left:before {
  content: "\e9d5";
}
.pi-arrow-down-left:before {
  content: "\e9d6";
}
.pi-arrow-down-right:before {
  content: "\e9d7";
}
.pi-telegram:before {
  content: "\e9d3";
}
.pi-stop-circle:before {
  content: "\e9d2";
}
.pi-stop:before {
  content: "\e9d1";
}
.pi-whatsapp:before {
  content: "\e9d0";
}
.pi-building:before {
  content: "\e9cf";
}
.pi-qrcode:before {
  content: "\e9ce";
}
.pi-car:before {
  content: "\e9cd";
}
.pi-instagram:before {
  content: "\e9cc";
}
.pi-linkedin:before {
  content: "\e9cb";
}
.pi-send:before {
  content: "\e9ca";
}
.pi-slack:before {
  content: "\e9c9";
}
.pi-sun:before {
  content: "\e9c8";
}
.pi-moon:before {
  content: "\e9c7";
}
.pi-vimeo:before {
  content: "\e9c6";
}
.pi-youtube:before {
  content: "\e9c5";
}
.pi-flag:before {
  content: "\e9c4";
}
.pi-wallet:before {
  content: "\e9c3";
}
.pi-map:before {
  content: "\e9c2";
}
.pi-link:before {
  content: "\e9c1";
}
.pi-credit-card:before {
  content: "\e9bf";
}
.pi-discord:before {
  content: "\e9c0";
}
.pi-percentage:before {
  content: "\e9be";
}
.pi-euro:before {
  content: "\e9bd";
}
.pi-book:before {
  content: "\e9ba";
}
.pi-shield:before {
  content: "\e9b9";
}
.pi-paypal:before {
  content: "\e9bb";
}
.pi-amazon:before {
  content: "\e9bc";
}
.pi-phone:before {
  content: "\e9b8";
}
.pi-filter-slash:before {
  content: "\e9b7";
}
.pi-facebook:before {
  content: "\e9b4";
}
.pi-github:before {
  content: "\e9b5";
}
.pi-twitter:before {
  content: "\e9b6";
}
.pi-step-backward-alt:before {
  content: "\e9ac";
}
.pi-step-forward-alt:before {
  content: "\e9ad";
}
.pi-forward:before {
  content: "\e9ae";
}
.pi-backward:before {
  content: "\e9af";
}
.pi-fast-backward:before {
  content: "\e9b0";
}
.pi-fast-forward:before {
  content: "\e9b1";
}
.pi-pause:before {
  content: "\e9b2";
}
.pi-play:before {
  content: "\e9b3";
}
.pi-compass:before {
  content: "\e9ab";
}
.pi-id-card:before {
  content: "\e9aa";
}
.pi-ticket:before {
  content: "\e9a9";
}
.pi-file-o:before {
  content: "\e9a8";
}
.pi-reply:before {
  content: "\e9a7";
}
.pi-directions-alt:before {
  content: "\e9a5";
}
.pi-directions:before {
  content: "\e9a6";
}
.pi-thumbs-up:before {
  content: "\e9a3";
}
.pi-thumbs-down:before {
  content: "\e9a4";
}
.pi-sort-numeric-down-alt:before {
  content: "\e996";
}
.pi-sort-numeric-up-alt:before {
  content: "\e997";
}
.pi-sort-alpha-down-alt:before {
  content: "\e998";
}
.pi-sort-alpha-up-alt:before {
  content: "\e999";
}
.pi-sort-numeric-down:before {
  content: "\e99a";
}
.pi-sort-numeric-up:before {
  content: "\e99b";
}
.pi-sort-alpha-down:before {
  content: "\e99c";
}
.pi-sort-alpha-up:before {
  content: "\e99d";
}
.pi-sort-alt:before {
  content: "\e99e";
}
.pi-sort-amount-up:before {
  content: "\e99f";
}
.pi-sort-amount-down:before {
  content: "\e9a0";
}
.pi-sort-amount-down-alt:before {
  content: "\e9a1";
}
.pi-sort-amount-up-alt:before {
  content: "\e9a2";
}
.pi-palette:before {
  content: "\e995";
}
.pi-undo:before {
  content: "\e994";
}
.pi-desktop:before {
  content: "\e993";
}
.pi-sliders-v:before {
  content: "\e991";
}
.pi-sliders-h:before {
  content: "\e992";
}
.pi-search-plus:before {
  content: "\e98f";
}
.pi-search-minus:before {
  content: "\e990";
}
.pi-file-excel:before {
  content: "\e98e";
}
.pi-file-pdf:before {
  content: "\e98d";
}
.pi-check-square:before {
  content: "\e98c";
}
.pi-chart-line:before {
  content: "\e98b";
}
.pi-user-edit:before {
  content: "\e98a";
}
.pi-exclamation-circle:before {
  content: "\e989";
}
.pi-android:before {
  content: "\e985";
}
.pi-google:before {
  content: "\e986";
}
.pi-apple:before {
  content: "\e987";
}
.pi-microsoft:before {
  content: "\e988";
}
.pi-heart:before {
  content: "\e984";
}
.pi-mobile:before {
  content: "\e982";
}
.pi-tablet:before {
  content: "\e983";
}
.pi-key:before {
  content: "\e981";
}
.pi-shopping-cart:before {
  content: "\e980";
}
.pi-comments:before {
  content: "\e97e";
}
.pi-comment:before {
  content: "\e97f";
}
.pi-briefcase:before {
  content: "\e97d";
}
.pi-bell:before {
  content: "\e97c";
}
.pi-paperclip:before {
  content: "\e97b";
}
.pi-share-alt:before {
  content: "\e97a";
}
.pi-envelope:before {
  content: "\e979";
}
.pi-volume-down:before {
  content: "\e976";
}
.pi-volume-up:before {
  content: "\e977";
}
.pi-volume-off:before {
  content: "\e978";
}
.pi-eject:before {
  content: "\e975";
}
.pi-money-bill:before {
  content: "\e974";
}
.pi-images:before {
  content: "\e973";
}
.pi-image:before {
  content: "\e972";
}
.pi-sign-in:before {
  content: "\e970";
}
.pi-sign-out:before {
  content: "\e971";
}
.pi-wifi:before {
  content: "\e96f";
}
.pi-sitemap:before {
  content: "\e96e";
}
.pi-chart-bar:before {
  content: "\e96d";
}
.pi-camera:before {
  content: "\e96c";
}
.pi-dollar:before {
  content: "\e96b";
}
.pi-lock-open:before {
  content: "\e96a";
}
.pi-table:before {
  content: "\e969";
}
.pi-map-marker:before {
  content: "\e968";
}
.pi-list:before {
  content: "\e967";
}
.pi-eye-slash:before {
  content: "\e965";
}
.pi-eye:before {
  content: "\e966";
}
.pi-folder-open:before {
  content: "\e964";
}
.pi-folder:before {
  content: "\e963";
}
.pi-video:before {
  content: "\e962";
}
.pi-inbox:before {
  content: "\e961";
}
.pi-lock:before {
  content: "\e95f";
}
.pi-unlock:before {
  content: "\e960";
}
.pi-tags:before {
  content: "\e95d";
}
.pi-tag:before {
  content: "\e95e";
}
.pi-power-off:before {
  content: "\e95c";
}
.pi-save:before {
  content: "\e95b";
}
.pi-question-circle:before {
  content: "\e959";
}
.pi-question:before {
  content: "\e95a";
}
.pi-copy:before {
  content: "\e957";
}
.pi-file:before {
  content: "\e958";
}
.pi-clone:before {
  content: "\e955";
}
.pi-calendar-times:before {
  content: "\e952";
}
.pi-calendar-minus:before {
  content: "\e953";
}
.pi-calendar-plus:before {
  content: "\e954";
}
.pi-ellipsis-v:before {
  content: "\e950";
}
.pi-ellipsis-h:before {
  content: "\e951";
}
.pi-bookmark:before {
  content: "\e94e";
}
.pi-globe:before {
  content: "\e94f";
}
.pi-replay:before {
  content: "\e94d";
}
.pi-filter:before {
  content: "\e94c";
}
.pi-print:before {
  content: "\e94b";
}
.pi-align-right:before {
  content: "\e946";
}
.pi-align-left:before {
  content: "\e947";
}
.pi-align-center:before {
  content: "\e948";
}
.pi-align-justify:before {
  content: "\e949";
}
.pi-cog:before {
  content: "\e94a";
}
.pi-cloud-download:before {
  content: "\e943";
}
.pi-cloud-upload:before {
  content: "\e944";
}
.pi-cloud:before {
  content: "\e945";
}
.pi-pencil:before {
  content: "\e942";
}
.pi-users:before {
  content: "\e941";
}
.pi-clock:before {
  content: "\e940";
}
.pi-user-minus:before {
  content: "\e93e";
}
.pi-user-plus:before {
  content: "\e93f";
}
.pi-trash:before {
  content: "\e93d";
}
.pi-external-link:before {
  content: "\e93c";
}
.pi-window-maximize:before {
  content: "\e93b";
}
.pi-window-minimize:before {
  content: "\e93a";
}
.pi-refresh:before {
  content: "\e938";
}
.pi-user:before {
  content: "\e939";
}
.pi-exclamation-triangle:before {
  content: "\e922";
}
.pi-calendar:before {
  content: "\e927";
}
.pi-chevron-circle-left:before {
  content: "\e928";
}
.pi-chevron-circle-down:before {
  content: "\e929";
}
.pi-chevron-circle-right:before {
  content: "\e92a";
}
.pi-chevron-circle-up:before {
  content: "\e92b";
}
.pi-angle-double-down:before {
  content: "\e92c";
}
.pi-angle-double-left:before {
  content: "\e92d";
}
.pi-angle-double-right:before {
  content: "\e92e";
}
.pi-angle-double-up:before {
  content: "\e92f";
}
.pi-angle-down:before {
  content: "\e930";
}
.pi-angle-left:before {
  content: "\e931";
}
.pi-angle-right:before {
  content: "\e932";
}
.pi-angle-up:before {
  content: "\e933";
}
.pi-upload:before {
  content: "\e934";
}
.pi-download:before {
  content: "\e956";
}
.pi-ban:before {
  content: "\e935";
}
.pi-star-fill:before {
  content: "\e936";
}
.pi-star:before {
  content: "\e937";
}
.pi-chevron-left:before {
  content: "\e900";
}
.pi-chevron-right:before {
  content: "\e901";
}
.pi-chevron-down:before {
  content: "\e902";
}
.pi-chevron-up:before {
  content: "\e903";
}
.pi-caret-left:before {
  content: "\e904";
}
.pi-caret-right:before {
  content: "\e905";
}
.pi-caret-down:before {
  content: "\e906";
}
.pi-caret-up:before {
  content: "\e907";
}
.pi-search:before {
  content: "\e908";
}
.pi-check:before {
  content: "\e909";
}
.pi-check-circle:before {
  content: "\e90a";
}
.pi-times:before {
  content: "\e90b";
}
.pi-times-circle:before {
  content: "\e90c";
}
.pi-plus:before {
  content: "\e90d";
}
.pi-plus-circle:before {
  content: "\e90e";
}
.pi-minus:before {
  content: "\e90f";
}
.pi-minus-circle:before {
  content: "\e910";
}
.pi-circle-on:before {
  content: "\e911";
}
.pi-circle-off:before {
  content: "\e912";
}
.pi-sort-down:before {
  content: "\e913";
}
.pi-sort-up:before {
  content: "\e914";
}
.pi-sort:before {
  content: "\e915";
}
.pi-step-backward:before {
  content: "\e916";
}
.pi-step-forward:before {
  content: "\e917";
}
.pi-th-large:before {
  content: "\e918";
}
.pi-arrow-down:before {
  content: "\e919";
}
.pi-arrow-left:before {
  content: "\e91a";
}
.pi-arrow-right:before {
  content: "\e91b";
}
.pi-arrow-up:before {
  content: "\e91c";
}
.pi-bars:before {
  content: "\e91d";
}
.pi-arrow-circle-down:before {
  content: "\e91e";
}
.pi-arrow-circle-left:before {
  content: "\e91f";
}
.pi-arrow-circle-right:before {
  content: "\e920";
}
.pi-arrow-circle-up:before {
  content: "\e921";
}
.pi-info:before {
  content: "\e923";
}
.pi-info-circle:before {
  content: "\e924";
}
.pi-home:before {
  content: "\e925";
}
.pi-spinner:before {
  content: "\e926";
}

/* src/styles.scss */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/Inter-roman-var.woff2?v=3.19) format("woff2");
  font-named-instance: "Regular";
}
@font-face {
  font-family: "Inter var";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/Inter-italic-var.woff2?v=3.19) format("woff2");
  font-named-instance: "Italic";
}
.dark {
  --vex-sidenav-background: #111827;
  --vex-sidenav-color: #fff;
  --vex-sidenav-toolbar-background: #111827;
  --vex-sidenav-section-divider-color: rgb(255 255 255 / 0.12);
  --vex-sidenav-item-background-hover: rgb(3 7 18 / 30%);
  --vex-sidenav-item-background-active: rgb(3 7 18 / 30%);
  --vex-sidenav-item-color: #d1d5db;
  --vex-sidenav-item-color-hover: #fff;
  --vex-sidenav-item-color-active: #fff;
  --vex-sidenav-item-icon-color: rgb(var(--vex-color-primary-600) / 50%);
  --vex-sidenav-item-icon-color-hover: rgb(var(--vex-color-primary-600) / 1);
  --vex-sidenav-item-icon-color-active: rgb(var(--vex-color-primary-600) / 1);
  --vex-sidenav-item-dropdown-background: var( --vex-sidenav-item-background-active );
  --vex-sidenav-item-dropdown-background-hover: rgb(3 7 18 / 80%);
  --vex-sidenav-item-dropdown-color-hover: var(--vex-sidenav-item-color-hover);
  --vex-sidenav-item-dropdown-background-active: var( --vex-sidenav-item-dropdown-background-hover );
  --vex-sidenav-item-dropdown-color-active: var( --vex-sidenav-item-color-active );
  --vex-sidenav-item-ripple-color: rgb(255 255 255 / 10%);
  --vex-sidenav-subheading-color: #6b7280;
  --vex-toolbar-background: var(--vex-background-background);
  --vex-toolbar-icon-color: rgb(var(--vex-color-primary-600));
  --vex-secondary-toolbar-background: var(--vex-background-background);
  --vex-navigation-color: rgb(var(--vex-foreground-text-rgb) / 1);
  --vex-navigation-background: #111827;
}
.vex-style-light .vex-sidenav {
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.vex-style-light .vex-sidenav .vex-sidenav-user .vex-sidenav-user__subtitle,
.vex-style-light .vex-sidenav .vex-sidenav-user .vex-sidenav-user__dropdown-icon {
  color: rgb(0 0 0 / 0.5);
}
.vex-style-light .vex-sidenav .vex-sidenav-user:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.vex-style-light .vex-sidenav .vex-sidenav-search {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
.vex-style-light .vex-sidenav .vex-sidenav-search:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
.vex-style-light .vex-sidenav-user--open {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
body {
  --vex-sidenav-background: #111827;
  --vex-sidenav-color: #fff;
  --vex-sidenav-toolbar-background: #111827;
  --vex-sidenav-section-divider-color: rgb(255 255 255 / 0.12);
  --vex-sidenav-item-background-hover: rgb(3 7 18 / 30%);
  --vex-sidenav-item-background-active: rgb(3 7 18 / 30%);
  --vex-sidenav-item-color: #d1d5db;
  --vex-sidenav-item-color-hover: #fff;
  --vex-sidenav-item-color-active: #fff;
  --vex-sidenav-item-icon-color: rgb(var(--vex-color-primary-400) / 60%);
  --vex-sidenav-item-icon-color-hover: rgb(var(--vex-color-primary-600) / 1);
  --vex-sidenav-item-icon-color-active: rgb(var(--vex-color-primary-600) / 1);
  --vex-sidenav-item-dropdown-background: var( --vex-sidenav-item-background-active );
  --vex-sidenav-item-dropdown-background-hover: rgb(3 7 18 / 80%);
  --vex-sidenav-item-dropdown-color-hover: var(--vex-sidenav-item-color-hover);
  --vex-sidenav-item-dropdown-background-active: var( --vex-sidenav-item-dropdown-background-hover );
  --vex-sidenav-item-dropdown-color-active: var( --vex-sidenav-item-color-active );
  --vex-sidenav-item-ripple-color: rgb(255 255 255 / 10%);
  --vex-sidenav-subheading-color: rgb(var(--vex-color-primary-300) / 80%);
  --vex-toolbar-background: rgb(var(--vex-background-card-rgb) / 70%);
  --vex-toolbar-icon-color: rgb(var(--vex-color-primary-600));
  --vex-secondary-toolbar-background: var(--vex-toolbar-background);
  --vex-navigation-color: rgb(var(--vex-foreground-text-rgb) / 1);
  --vex-navigation-background: var(--vex-background-card);
}
html {
  --mat-card-elevated-container-shape: 4px;
  --mat-card-outlined-container-shape: 4px;
  --mat-card-filled-container-shape: 4px;
  --mat-card-outlined-outline-width: 1px;
  --mat-progress-bar-active-indicator-height: 4px;
  --mat-progress-bar-track-height: 4px;
  --mat-progress-bar-track-shape: 0;
  --mat-tooltip-container-shape: 4px;
  --mat-tooltip-supporting-text-line-height: 16px;
  --mat-form-field-filled-active-indicator-height: 1px;
  --mat-form-field-filled-focus-active-indicator-height: 2px;
  --mat-form-field-filled-container-shape: 4px;
  --mat-form-field-outlined-outline-width: 1px;
  --mat-form-field-outlined-focus-outline-width: 2px;
  --mat-form-field-outlined-container-shape: 4px;
  --mat-form-field-container-height: 56px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 16px;
  --mat-form-field-filled-with-label-container-padding-top: 24px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px;
  --mat-select-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-select-arrow-transform: translateY(-8px);
  --mat-autocomplete-container-shape: 4px;
  --mat-autocomplete-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-dialog-container-shape: 4px;
  --mat-dialog-container-elevation-shadow:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-dialog-container-max-width: 80vw;
  --mat-dialog-container-small-max-width: 80vw;
  --mat-dialog-container-min-width: 0;
  --mat-dialog-actions-alignment: start;
  --mat-dialog-actions-padding: 8px;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-dialog-headline-padding: 0 24px 9px;
}
.mat-mdc-standard-chip {
  --mat-chip-container-shape-radius: 16px;
  --mat-chip-disabled-container-opacity: 0.4;
  --mat-chip-disabled-outline-color: transparent;
  --mat-chip-flat-selected-outline-width: 0;
  --mat-chip-focus-outline-color: transparent;
  --mat-chip-outline-color: transparent;
  --mat-chip-outline-width: 0;
  --mat-chip-selected-trailing-action-state-layer-color: transparent;
  --mat-chip-trailing-action-focus-opacity: 1;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-opacity: 0.54;
  --mat-chip-trailing-action-state-layer-color: transparent;
  --mat-chip-with-avatar-avatar-shape-radius: 14px;
  --mat-chip-with-avatar-avatar-size: 28px;
  --mat-chip-with-avatar-disabled-avatar-opacity: 1;
  --mat-chip-with-icon-disabled-icon-opacity: 1;
  --mat-chip-with-icon-icon-size: 18px;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
}
.mat-mdc-chip.mat-mdc-standard-chip {
  --mat-chip-container-height: 32px;
}
html {
  --mat-slide-toggle-disabled-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-selected-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-selected-icon-opacity: 0.38;
  --mat-slide-toggle-disabled-track-opacity: 0.12;
  --mat-slide-toggle-disabled-unselected-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-unselected-icon-opacity: 0.38;
  --mat-slide-toggle-disabled-unselected-track-outline-color: transparent;
  --mat-slide-toggle-disabled-unselected-track-outline-width: 1px;
  --mat-slide-toggle-handle-height: 20px;
  --mat-slide-toggle-handle-shape: 10px;
  --mat-slide-toggle-handle-width: 20px;
  --mat-slide-toggle-hidden-track-opacity: 1;
  --mat-slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  --mat-slide-toggle-pressed-handle-size: 20px;
  --mat-slide-toggle-selected-handle-horizontal-margin: 0;
  --mat-slide-toggle-selected-handle-size: 20px;
  --mat-slide-toggle-selected-icon-size: 18px;
  --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;
  --mat-slide-toggle-selected-track-outline-color: transparent;
  --mat-slide-toggle-selected-track-outline-width: 1px;
  --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;
  --mat-slide-toggle-track-height: 14px;
  --mat-slide-toggle-track-outline-color: transparent;
  --mat-slide-toggle-track-outline-width: 1px;
  --mat-slide-toggle-track-shape: 7px;
  --mat-slide-toggle-track-width: 36px;
  --mat-slide-toggle-unselected-handle-horizontal-margin: 0;
  --mat-slide-toggle-unselected-handle-size: 20px;
  --mat-slide-toggle-unselected-icon-size: 18px;
  --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;
  --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.1;
  --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;
  --mat-slide-toggle-visible-track-opacity: 1;
  --mat-slide-toggle-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  --mat-slide-toggle-with-icon-handle-size: 20px;
  --mat-slide-toggle-touch-target-size: 48px;
  --mat-slide-toggle-state-layer-size: 40px;
  --mat-slide-toggle-touch-target-display: block;
  --mat-radio-disabled-selected-icon-opacity: 0.38;
  --mat-radio-disabled-unselected-icon-opacity: 0.38;
  --mat-radio-touch-target-size: 48px;
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
  --mat-slider-active-track-height: 6px;
  --mat-slider-active-track-shape: 9999px;
  --mat-slider-handle-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-handle-height: 20px;
  --mat-slider-handle-shape: 50%;
  --mat-slider-handle-width: 20px;
  --mat-slider-inactive-track-height: 4px;
  --mat-slider-inactive-track-shape: 9999px;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-width: auto;
  --mat-slider-with-overlap-handle-outline-width: 1px;
  --mat-slider-with-tick-marks-active-container-opacity: 0.6;
  --mat-slider-with-tick-marks-container-shape: 50%;
  --mat-slider-with-tick-marks-container-size: 2px;
  --mat-slider-with-tick-marks-inactive-container-opacity: 0.6;
  --mat-slider-value-indicator-transform-origin: bottom;
  --mat-menu-container-shape: 4px;
  --mat-menu-divider-bottom-spacing: 0;
  --mat-menu-divider-top-spacing: 0;
  --mat-menu-item-spacing: 16px;
  --mat-menu-item-icon-size: 24px;
  --mat-menu-item-leading-spacing: 16px;
  --mat-menu-item-trailing-spacing: 16px;
  --mat-menu-item-with-icon-leading-spacing: 16px;
  --mat-menu-item-with-icon-trailing-spacing: 16px;
  --mat-menu-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-list-active-indicator-color: transparent;
  --mat-list-active-indicator-shape: 4px;
  --mat-list-list-item-container-shape: 0;
  --mat-list-list-item-leading-avatar-shape: 50%;
  --mat-list-list-item-container-color: transparent;
  --mat-list-list-item-selected-container-color: transparent;
  --mat-list-list-item-leading-avatar-color: transparent;
  --mat-list-list-item-leading-icon-size: 24px;
  --mat-list-list-item-leading-avatar-size: 40px;
  --mat-list-list-item-trailing-icon-size: 24px;
  --mat-list-list-item-disabled-state-layer-color: transparent;
  --mat-list-list-item-disabled-state-layer-opacity: 0;
  --mat-list-list-item-disabled-label-text-opacity: 0.38;
  --mat-list-list-item-disabled-leading-icon-opacity: 0.38;
  --mat-list-list-item-disabled-trailing-icon-opacity: 0.38;
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
  --mat-list-list-item-one-line-container-height: 48px;
  --mat-list-list-item-two-line-container-height: 64px;
  --mat-list-list-item-three-line-container-height: 88px;
}
.mdc-list-item__start,
.mdc-list-item__end {
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 56px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 72px;
}
html {
  --mat-paginator-page-size-select-width: 84px;
  --mat-paginator-page-size-select-touch-target-height: 48px;
  --mat-paginator-container-size: 56px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
  --mat-paginator-touch-target-display: block;
  --mat-tab-container-height: 48px;
  --mat-tab-divider-color: transparent;
  --mat-tab-divider-height: 0;
  --mat-tab-active-indicator-height: 2px;
  --mat-tab-active-indicator-shape: 0;
}
.mat-mdc-tab-header {
  --mat-tab-container-height: 48px;
}
html {
  --mat-checkbox-touch-target-size: 48px;
  --mat-checkbox-touch-target-display: block;
  --mat-checkbox-state-layer-size: 40px;
  --mat-button-filled-container-shape: 4px;
  --mat-button-filled-horizontal-padding: 16px;
  --mat-button-filled-icon-offset: -4px;
  --mat-button-filled-icon-spacing: 8px;
  --mat-button-filled-touch-target-size: 48px;
  --mat-button-outlined-container-shape: 4px;
  --mat-button-outlined-horizontal-padding: 15px;
  --mat-button-outlined-icon-offset: -4px;
  --mat-button-outlined-icon-spacing: 8px;
  --mat-button-outlined-keep-touch-target: false;
  --mat-button-outlined-outline-width: 1px;
  --mat-button-outlined-touch-target-size: 48px;
  --mat-button-protected-container-elevation-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-container-shape: 4px;
  --mat-button-protected-disabled-container-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-focus-container-elevation-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-horizontal-padding: 16px;
  --mat-button-protected-hover-container-elevation-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-icon-offset: -4px;
  --mat-button-protected-icon-spacing: 8px;
  --mat-button-protected-pressed-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-button-protected-touch-target-size: 48px;
  --mat-button-text-container-shape: 4px;
  --mat-button-text-horizontal-padding: 8px;
  --mat-button-text-icon-offset: 0;
  --mat-button-text-icon-spacing: 8px;
  --mat-button-text-with-icon-horizontal-padding: 8px;
  --mat-button-text-touch-target-size: 48px;
  --mat-button-tonal-container-shape: 4px;
  --mat-button-tonal-horizontal-padding: 16px;
  --mat-button-tonal-icon-offset: -4px;
  --mat-button-tonal-icon-spacing: 8px;
  --mat-button-tonal-touch-target-size: 48px;
  --mat-button-filled-container-height: 36px;
  --mat-button-filled-touch-target-display: block;
  --mat-button-outlined-container-height: 36px;
  --mat-button-outlined-touch-target-display: block;
  --mat-button-protected-container-height: 36px;
  --mat-button-protected-touch-target-display: block;
  --mat-button-text-container-height: 36px;
  --mat-button-text-touch-target-display: block;
  --mat-button-tonal-container-height: 36px;
  --mat-button-tonal-touch-target-display: block;
  --mat-button-filled-label-text-transform: none;
  --mat-button-outlined-label-text-transform: none;
  --mat-button-protected-label-text-transform: none;
  --mat-button-text-label-text-transform: none;
  --mat-button-tonal-label-text-transform: none;
  --mat-icon-button-icon-size: 24px;
  --mat-icon-button-container-shape: 50%;
  --mat-icon-button-touch-target-size: 48px;
  --mat-icon-button-touch-target-display: block;
}
.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 48px;
  --mat-icon-button-state-layer-size: 48px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 12px;
}
html {
  --mat-fab-container-elevation-shadow:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-container-shape: 50%;
  --mat-fab-touch-target-size: 48px;
  --mat-fab-extended-container-elevation-shadow:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-container-height: 48px;
  --mat-fab-extended-container-shape: 24px;
  --mat-fab-extended-focus-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-hover-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-pressed-container-elevation-shadow:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-focus-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-hover-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-pressed-container-elevation-shadow:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-small-container-elevation-shadow:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-small-container-shape: 50%;
  --mat-fab-small-touch-target-size: 48px;
  --mat-fab-small-focus-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-small-hover-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-small-pressed-container-elevation-shadow:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-small-touch-target-display: block;
  --mat-fab-touch-target-display: block;
  --mat-snack-bar-container-shape: 4px;
  --mat-table-row-item-outline-width: 1px;
  --mat-table-header-container-height: 56px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 52px;
  --mat-progress-spinner-active-indicator-width: 4px;
  --mat-progress-spinner-size: 48px;
  --mat-badge-container-shape: 50%;
  --mat-badge-container-size: unset;
  --mat-badge-small-size-container-size: unset;
  --mat-badge-large-size-container-size: unset;
  --mat-badge-legacy-container-size: 22px;
  --mat-badge-legacy-small-size-container-size: 16px;
  --mat-badge-legacy-large-size-container-size: 28px;
  --mat-badge-container-offset: -11px 0;
  --mat-badge-small-size-container-offset: -8px 0;
  --mat-badge-large-size-container-offset: -14px 0;
  --mat-badge-container-overlap-offset: -11px;
  --mat-badge-small-size-container-overlap-offset: -8px;
  --mat-badge-large-size-container-overlap-offset: -14px;
  --mat-badge-container-padding: 0;
  --mat-badge-small-size-container-padding: 0;
  --mat-badge-large-size-container-padding: 0;
  --mat-badge-line-height: 22px;
  --mat-badge-text-size: 12px;
  --mat-badge-text-weight: 600;
  --mat-badge-small-size-text-size: 9px;
  --mat-badge-small-size-line-height: 16px;
  --mat-badge-large-size-text-size: 24px;
  --mat-badge-large-size-line-height: 28px;
  --mat-bottom-sheet-container-shape: 4px;
  --mat-button-toggle-legacy-focus-state-layer-opacity: 1;
  --mat-button-toggle-legacy-height: 36px;
  --mat-button-toggle-legacy-shape: 2px;
  --mat-button-toggle-shape: 4px;
  --mat-button-toggle-height: 48px;
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  --mat-icon-button-state-layer-size: 40px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 8px;
}
html {
  --mat-datepicker-calendar-text-size: 13px;
  --mat-datepicker-calendar-header-text-size: 11px;
  --mat-divider-width: 1px;
  --mat-expansion-container-shape: 4px;
  --mat-expansion-container-elevation-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-expansion-legacy-header-indicator-display: inline-block;
  --mat-expansion-header-indicator-display: none;
  --mat-expansion-header-collapsed-state-height: 48px;
  --mat-expansion-header-expanded-state-height: 64px;
  --mat-expansion-header-text-line-height: inherit;
  --mat-expansion-header-text-tracking: inherit;
  --mat-sidenav-container-shape: 0;
  --mat-sidenav-container-elevation-shadow:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-width: auto;
  --mat-stepper-header-focus-state-layer-shape: 0;
  --mat-stepper-header-hover-state-layer-shape: 0;
  --mat-stepper-header-height: 72px;
  --mat-toolbar-standard-height: 64px;
  --mat-toolbar-mobile-height: 56px;
  --mat-tree-node-min-height: 48px;
  --mat-timepicker-container-shape: 4px;
  --mat-timepicker-container-elevation-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #075473;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-default .mat-accent,
.vex-theme-default.light .mat-accent,
.vex-theme-default .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-default .mat-warn,
.vex-theme-default.light .mat-warn,
.vex-theme-default .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-default .mat-primary,
.vex-theme-default.light .mat-primary,
.vex-theme-default .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #075473;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #075473;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-default .mat-accent,
.vex-theme-default.light .mat-accent,
.vex-theme-default .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-default .mat-warn,
.vex-theme-default.light .mat-warn,
.vex-theme-default .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-default .mat-mdc-progress-bar,
.vex-theme-default.light .mat-mdc-progress-bar,
.vex-theme-default .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #075473;
  --mat-progress-bar-track-color: rgba(7, 84, 115, 0.25);
}
.vex-theme-default .mat-mdc-progress-bar.mat-accent,
.vex-theme-default.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-default .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-default .mat-mdc-progress-bar.mat-warn,
.vex-theme-default.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-default .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #075473 87%, transparent);
  --mat-form-field-filled-caret-color: #075473;
  --mat-form-field-filled-focus-active-indicator-color: #075473;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #075473 87%, transparent);
  --mat-form-field-outlined-caret-color: #075473;
  --mat-form-field-outlined-focus-outline-color: #075473;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #075473 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-default .mat-mdc-form-field.mat-accent,
.vex-theme-default.light .mat-mdc-form-field.mat-accent,
.vex-theme-default .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-default .mat-mdc-form-field.mat-warn,
.vex-theme-default.light .mat-mdc-form-field.mat-warn,
.vex-theme-default .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #075473;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-default .mat-mdc-form-field.mat-accent,
.vex-theme-default.light .mat-mdc-form-field.mat-accent,
.vex-theme-default .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-default .mat-mdc-form-field.mat-warn,
.vex-theme-default.light .mat-mdc-form-field.mat-warn,
.vex-theme-default .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-default .mat-mdc-standard-chip,
.vex-theme-default.light .mat-mdc-standard-chip,
.vex-theme-default .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-default .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-default.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-default.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-default .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-default .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #075473;
  --mat-chip-elevated-disabled-container-color: #075473;
  --mat-chip-elevated-selected-container-color: #075473;
  --mat-chip-flat-disabled-selected-container-color: #075473;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-default .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-default .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-default.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-default.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-default .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-default .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-default .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-default .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-default.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-default.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-default .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-default .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #075473;
  --mat-slide-toggle-selected-handle-color: #075473;
  --mat-slide-toggle-selected-hover-state-layer-color: #075473;
  --mat-slide-toggle-selected-pressed-state-layer-color: #075473;
  --mat-slide-toggle-selected-focus-handle-color: #075473;
  --mat-slide-toggle-selected-hover-handle-color: #075473;
  --mat-slide-toggle-selected-pressed-handle-color: #075473;
  --mat-slide-toggle-selected-focus-track-color: #a2c5d2;
  --mat-slide-toggle-selected-hover-track-color: #a2c5d2;
  --mat-slide-toggle-selected-pressed-track-color: #a2c5d2;
  --mat-slide-toggle-selected-track-color: #a2c5d2;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-default .mat-mdc-slide-toggle.mat-accent,
.vex-theme-default.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-default .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-default .mat-mdc-slide-toggle.mat-warn,
.vex-theme-default.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-default .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-default .mat-mdc-radio-button.mat-primary,
.vex-theme-default.light .mat-mdc-radio-button.mat-primary,
.vex-theme-default .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #075473;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #075473;
  --mat-radio-selected-hover-icon-color: #075473;
  --mat-radio-selected-icon-color: #075473;
  --mat-radio-selected-pressed-icon-color: #075473;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-radio-button.mat-accent,
.vex-theme-default.light .mat-mdc-radio-button.mat-accent,
.vex-theme-default .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-radio-button.mat-warn,
.vex-theme-default.light .mat-mdc-radio-button.mat-warn,
.vex-theme-default .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-slider-active-track-color: #075473;
  --mat-slider-focus-handle-color: #075473;
  --mat-slider-handle-color: #075473;
  --mat-slider-hover-handle-color: #075473;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #075473 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #075473 4%, transparent);
  --mat-slider-inactive-track-color: #075473;
  --mat-slider-ripple-color: #075473;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #075473;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-accent,
.vex-theme-default.light .mat-accent,
.vex-theme-default .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-default .mat-warn,
.vex-theme-default.light .mat-warn,
.vex-theme-default .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-default .mdc-list-item__start,
.vex-theme-default .mdc-list-item__end,
.vex-theme-default.light .mdc-list-item__start,
.vex-theme-default.light .mdc-list-item__end,
.vex-theme-default .light .mdc-list-item__start,
.vex-theme-default .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #075473;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #075473;
  --mat-radio-selected-hover-icon-color: #075473;
  --mat-radio-selected-icon-color: #075473;
  --mat-radio-selected-pressed-icon-color: #075473;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-accent .mdc-list-item__start,
.vex-theme-default .mat-accent .mdc-list-item__end,
.vex-theme-default.light .mat-accent .mdc-list-item__start,
.vex-theme-default.light .mat-accent .mdc-list-item__end,
.vex-theme-default .light .mat-accent .mdc-list-item__start,
.vex-theme-default .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-warn .mdc-list-item__start,
.vex-theme-default .mat-warn .mdc-list-item__end,
.vex-theme-default.light .mat-warn .mdc-list-item__start,
.vex-theme-default.light .mat-warn .mdc-list-item__end,
.vex-theme-default .light .mat-warn .mdc-list-item__start,
.vex-theme-default .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-list-option,
.vex-theme-default.light .mat-mdc-list-option,
.vex-theme-default .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #075473;
  --mat-checkbox-selected-hover-icon-color: #075473;
  --mat-checkbox-selected-icon-color: #075473;
  --mat-checkbox-selected-pressed-icon-color: #075473;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #075473;
  --mat-checkbox-selected-hover-state-layer-color: #075473;
  --mat-checkbox-selected-pressed-state-layer-color: #075473;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-list-option.mat-accent,
.vex-theme-default.light .mat-mdc-list-option.mat-accent,
.vex-theme-default .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-list-option.mat-warn,
.vex-theme-default.light .mat-mdc-list-option.mat-warn,
.vex-theme-default .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-default.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-default.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-default.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-default.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-default .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-default .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-default .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-default .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #075473;
}
.vex-theme-default .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-default .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-default .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-default.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-default.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-default.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-default .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-default .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-default .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-default .mat-mdc-tab-group,
.vex-theme-default .mat-mdc-tab-nav-bar,
.vex-theme-default.light .mat-mdc-tab-group,
.vex-theme-default.light .mat-mdc-tab-nav-bar,
.vex-theme-default .light .mat-mdc-tab-group,
.vex-theme-default .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #075473;
  --mat-tab-active-ripple-color: #075473;
  --mat-tab-inactive-ripple-color: #075473;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #075473;
  --mat-tab-active-hover-label-text-color: #075473;
  --mat-tab-active-focus-indicator-color: #075473;
  --mat-tab-active-hover-indicator-color: #075473;
  --mat-tab-active-indicator-color: #075473;
}
.vex-theme-default .mat-mdc-tab-group.mat-accent,
.vex-theme-default .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-default.light .mat-mdc-tab-group.mat-accent,
.vex-theme-default.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-default .light .mat-mdc-tab-group.mat-accent,
.vex-theme-default .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-default .mat-mdc-tab-group.mat-warn,
.vex-theme-default .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-default.light .mat-mdc-tab-group.mat-warn,
.vex-theme-default.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-default .light .mat-mdc-tab-group.mat-warn,
.vex-theme-default .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-default .mat-mdc-tab-group.mat-background-primary,
.vex-theme-default .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-default.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-default.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-default .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-default .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #075473;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-default .mat-mdc-tab-group.mat-background-accent,
.vex-theme-default .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-default.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-default.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-default .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-default .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-default .mat-mdc-tab-group.mat-background-warn,
.vex-theme-default .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-default.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-default.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-default .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-default .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-checkbox.mat-primary,
.vex-theme-default.light .mat-mdc-checkbox.mat-primary,
.vex-theme-default .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #075473;
  --mat-checkbox-selected-hover-icon-color: #075473;
  --mat-checkbox-selected-icon-color: #075473;
  --mat-checkbox-selected-pressed-icon-color: #075473;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #075473;
  --mat-checkbox-selected-hover-state-layer-color: #075473;
  --mat-checkbox-selected-pressed-state-layer-color: #075473;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-checkbox.mat-warn,
.vex-theme-default.light .mat-mdc-checkbox.mat-warn,
.vex-theme-default .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-button.mat-primary,
.vex-theme-default .mat-mdc-unelevated-button.mat-primary,
.vex-theme-default .mat-mdc-raised-button.mat-primary,
.vex-theme-default .mat-mdc-outlined-button.mat-primary,
.vex-theme-default .mat-tonal-button.mat-primary,
.vex-theme-default.light .mat-mdc-button.mat-primary,
.vex-theme-default.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-default.light .mat-mdc-raised-button.mat-primary,
.vex-theme-default.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-default.light .mat-tonal-button.mat-primary,
.vex-theme-default .light .mat-mdc-button.mat-primary,
.vex-theme-default .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-default .light .mat-mdc-raised-button.mat-primary,
.vex-theme-default .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-default .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #075473;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #075473;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #075473 12%, transparent);
  --mat-button-outlined-state-layer-color: #075473;
  --mat-button-protected-container-color: #075473;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #075473;
  --mat-button-text-ripple-color: color-mix(in srgb, #075473 12%, transparent);
  --mat-button-text-state-layer-color: #075473;
  --mat-button-tonal-container-color: #075473;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-default .mat-mdc-button.mat-accent,
.vex-theme-default .mat-mdc-unelevated-button.mat-accent,
.vex-theme-default .mat-mdc-raised-button.mat-accent,
.vex-theme-default .mat-mdc-outlined-button.mat-accent,
.vex-theme-default .mat-tonal-button.mat-accent,
.vex-theme-default.light .mat-mdc-button.mat-accent,
.vex-theme-default.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-default.light .mat-mdc-raised-button.mat-accent,
.vex-theme-default.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-default.light .mat-tonal-button.mat-accent,
.vex-theme-default .light .mat-mdc-button.mat-accent,
.vex-theme-default .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-default .light .mat-mdc-raised-button.mat-accent,
.vex-theme-default .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-default .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-default .mat-mdc-button.mat-warn,
.vex-theme-default .mat-mdc-unelevated-button.mat-warn,
.vex-theme-default .mat-mdc-raised-button.mat-warn,
.vex-theme-default .mat-mdc-outlined-button.mat-warn,
.vex-theme-default .mat-tonal-button.mat-warn,
.vex-theme-default.light .mat-mdc-button.mat-warn,
.vex-theme-default.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-default.light .mat-mdc-raised-button.mat-warn,
.vex-theme-default.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-default.light .mat-tonal-button.mat-warn,
.vex-theme-default .light .mat-mdc-button.mat-warn,
.vex-theme-default .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-default .light .mat-mdc-raised-button.mat-warn,
.vex-theme-default .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-default .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-icon-button.mat-primary,
.vex-theme-default.light .mat-mdc-icon-button.mat-primary,
.vex-theme-default .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #075473;
  --mat-icon-button-state-layer-color: #075473;
  --mat-icon-button-ripple-color: color-mix(in srgb, #075473 12%, transparent);
}
.vex-theme-default .mat-mdc-icon-button.mat-accent,
.vex-theme-default.light .mat-mdc-icon-button.mat-accent,
.vex-theme-default .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-default .mat-mdc-icon-button.mat-warn,
.vex-theme-default.light .mat-mdc-icon-button.mat-warn,
.vex-theme-default .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-mdc-fab.mat-primary,
.vex-theme-default .mat-mdc-mini-fab.mat-primary,
.vex-theme-default.light .mat-mdc-fab.mat-primary,
.vex-theme-default.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-default .light .mat-mdc-fab.mat-primary,
.vex-theme-default .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #075473;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #075473 12%, transparent);
  --mat-fab-small-container-color: #075473;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-default .mat-mdc-fab.mat-accent,
.vex-theme-default .mat-mdc-mini-fab.mat-accent,
.vex-theme-default.light .mat-mdc-fab.mat-accent,
.vex-theme-default.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-default .light .mat-mdc-fab.mat-accent,
.vex-theme-default .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-default .mat-mdc-fab.mat-warn,
.vex-theme-default .mat-mdc-mini-fab.mat-warn,
.vex-theme-default.light .mat-mdc-fab.mat-warn,
.vex-theme-default.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-default .light .mat-mdc-fab.mat-warn,
.vex-theme-default .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #a2c5d2;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #075473;
}
.vex-theme-default .mat-accent,
.vex-theme-default.light .mat-accent,
.vex-theme-default .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-default .mat-warn,
.vex-theme-default.light .mat-warn,
.vex-theme-default .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-badge-background-color: #075473;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-default .mat-badge-accent,
.vex-theme-default.light .mat-badge-accent,
.vex-theme-default .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-default .mat-badge-warn,
.vex-theme-default.light .mat-badge-warn,
.vex-theme-default .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #075473 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #075473;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #075473 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #075473 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #075473 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #075473;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-datepicker-content.mat-accent,
.vex-theme-default .mat-datepicker-toggle-active.mat-accent,
.vex-theme-default.light .mat-datepicker-content.mat-accent,
.vex-theme-default.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-default .light .mat-datepicker-content.mat-accent,
.vex-theme-default .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-datepicker-content.mat-warn,
.vex-theme-default .mat-datepicker-toggle-active.mat-warn,
.vex-theme-default.light .mat-datepicker-content.mat-warn,
.vex-theme-default.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-default .light .mat-datepicker-content.mat-warn,
.vex-theme-default .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-default .mat-icon.mat-primary,
.vex-theme-default.light .mat-icon.mat-primary,
.vex-theme-default .light .mat-icon.mat-primary {
  --mat-icon-color: #075473;
}
.vex-theme-default .mat-icon.mat-accent,
.vex-theme-default.light .mat-icon.mat-accent,
.vex-theme-default .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-default .mat-icon.mat-warn,
.vex-theme-default.light .mat-icon.mat-warn,
.vex-theme-default .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #075473;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #075473;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #075473;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-default .mat-step-header.mat-accent,
.vex-theme-default.light .mat-step-header.mat-accent,
.vex-theme-default .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-default .mat-step-header.mat-warn,
.vex-theme-default.light .mat-step-header.mat-warn,
.vex-theme-default .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-default .mat-toolbar.mat-primary,
.vex-theme-default.light .mat-toolbar.mat-primary,
.vex-theme-default .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #075473;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-default .mat-toolbar.mat-accent,
.vex-theme-default.light .mat-toolbar.mat-accent,
.vex-theme-default .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-default .mat-toolbar.mat-warn,
.vex-theme-default.light .mat-toolbar.mat-warn,
.vex-theme-default .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-default,
.vex-theme-default.light,
.vex-theme-default .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #4d7f8b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-default.dark .mat-accent,
.vex-theme-default .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-default.dark .mat-warn,
.vex-theme-default .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-default.dark .mat-primary,
.vex-theme-default .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #4d7f8b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #4d7f8b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-default.dark .mat-accent,
.vex-theme-default .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-default.dark .mat-warn,
.vex-theme-default .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-default.dark .mat-mdc-progress-bar,
.vex-theme-default .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #4d7f8b;
  --mat-progress-bar-track-color: rgba(77, 127, 139, 0.25);
}
.vex-theme-default.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-default .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-default.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-default .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #4d7f8b 87%, transparent);
  --mat-form-field-filled-caret-color: #4d7f8b;
  --mat-form-field-filled-focus-active-indicator-color: #4d7f8b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #4d7f8b 87%, transparent);
  --mat-form-field-outlined-caret-color: #4d7f8b;
  --mat-form-field-outlined-focus-outline-color: #4d7f8b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #4d7f8b 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-default.dark .mat-mdc-form-field.mat-accent,
.vex-theme-default .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-default.dark .mat-mdc-form-field.mat-warn,
.vex-theme-default .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #4d7f8b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-default.dark .mat-mdc-form-field.mat-accent,
.vex-theme-default .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-default.dark .mat-mdc-form-field.mat-warn,
.vex-theme-default .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-default.dark .mat-mdc-standard-chip,
.vex-theme-default .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-default.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-default.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-default .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-default .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #4d7f8b;
  --mat-chip-elevated-disabled-container-color: #4d7f8b;
  --mat-chip-elevated-selected-container-color: #4d7f8b;
  --mat-chip-flat-disabled-selected-container-color: #4d7f8b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-default.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-default.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-default .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-default .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-default.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-default.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-default .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-default .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #4d7f8b;
  --mat-slide-toggle-selected-handle-color: #4d7f8b;
  --mat-slide-toggle-selected-hover-state-layer-color: #4d7f8b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #4d7f8b;
  --mat-slide-toggle-selected-focus-handle-color: #4d7f8b;
  --mat-slide-toggle-selected-hover-handle-color: #4d7f8b;
  --mat-slide-toggle-selected-pressed-handle-color: #4d7f8b;
  --mat-slide-toggle-selected-focus-track-color: #075473;
  --mat-slide-toggle-selected-hover-track-color: #075473;
  --mat-slide-toggle-selected-pressed-track-color: #075473;
  --mat-slide-toggle-selected-track-color: #075473;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-default.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-default .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-default.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-default .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-default.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-default .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #4d7f8b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #4d7f8b;
  --mat-radio-selected-hover-icon-color: #4d7f8b;
  --mat-radio-selected-icon-color: #4d7f8b;
  --mat-radio-selected-pressed-icon-color: #4d7f8b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-default.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-default .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-default.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-default .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-slider-active-track-color: #4d7f8b;
  --mat-slider-focus-handle-color: #4d7f8b;
  --mat-slider-handle-color: #4d7f8b;
  --mat-slider-hover-handle-color: #4d7f8b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #4d7f8b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #4d7f8b 4%, transparent);
  --mat-slider-inactive-track-color: #4d7f8b;
  --mat-slider-ripple-color: #4d7f8b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #4d7f8b;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-default.dark .mat-accent,
.vex-theme-default .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-default.dark .mat-warn,
.vex-theme-default .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-default.dark .mdc-list-item__start,
.vex-theme-default.dark .mdc-list-item__end,
.vex-theme-default .dark .mdc-list-item__start,
.vex-theme-default .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #4d7f8b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #4d7f8b;
  --mat-radio-selected-hover-icon-color: #4d7f8b;
  --mat-radio-selected-icon-color: #4d7f8b;
  --mat-radio-selected-pressed-icon-color: #4d7f8b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-default.dark .mat-accent .mdc-list-item__start,
.vex-theme-default.dark .mat-accent .mdc-list-item__end,
.vex-theme-default .dark .mat-accent .mdc-list-item__start,
.vex-theme-default .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-default.dark .mat-warn .mdc-list-item__start,
.vex-theme-default.dark .mat-warn .mdc-list-item__end,
.vex-theme-default .dark .mat-warn .mdc-list-item__start,
.vex-theme-default .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-default.dark .mat-mdc-list-option,
.vex-theme-default .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #4d7f8b;
  --mat-checkbox-selected-hover-icon-color: #4d7f8b;
  --mat-checkbox-selected-icon-color: #4d7f8b;
  --mat-checkbox-selected-pressed-icon-color: #4d7f8b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #4d7f8b;
  --mat-checkbox-selected-hover-state-layer-color: #4d7f8b;
  --mat-checkbox-selected-pressed-state-layer-color: #4d7f8b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-list-option.mat-accent,
.vex-theme-default .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-list-option.mat-warn,
.vex-theme-default .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-default.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-default.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-default.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-default .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-default .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-default .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-default .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #4d7f8b;
}
.vex-theme-default.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-default.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-default.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-default .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-default .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-default .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-default.dark .mat-mdc-tab-group,
.vex-theme-default.dark .mat-mdc-tab-nav-bar,
.vex-theme-default .dark .mat-mdc-tab-group,
.vex-theme-default .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #4d7f8b;
  --mat-tab-active-ripple-color: #4d7f8b;
  --mat-tab-inactive-ripple-color: #4d7f8b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #4d7f8b;
  --mat-tab-active-hover-label-text-color: #4d7f8b;
  --mat-tab-active-focus-indicator-color: #4d7f8b;
  --mat-tab-active-hover-indicator-color: #4d7f8b;
  --mat-tab-active-indicator-color: #4d7f8b;
}
.vex-theme-default.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-default.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-default .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-default .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-default.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-default.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-default .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-default .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-default.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-default.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-default .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-default .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #4d7f8b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-default.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-default.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-default .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-default .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-default.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-default.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-default .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-default .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-default .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #4d7f8b;
  --mat-checkbox-selected-hover-icon-color: #4d7f8b;
  --mat-checkbox-selected-icon-color: #4d7f8b;
  --mat-checkbox-selected-pressed-icon-color: #4d7f8b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #4d7f8b;
  --mat-checkbox-selected-hover-state-layer-color: #4d7f8b;
  --mat-checkbox-selected-pressed-state-layer-color: #4d7f8b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-default .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-button.mat-primary,
.vex-theme-default.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-default.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-default.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-default.dark .mat-tonal-button.mat-primary,
.vex-theme-default .dark .mat-mdc-button.mat-primary,
.vex-theme-default .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-default .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-default .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-default .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #4d7f8b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #4d7f8b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #4d7f8b 12%, transparent);
  --mat-button-outlined-state-layer-color: #4d7f8b;
  --mat-button-protected-container-color: #4d7f8b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #4d7f8b;
  --mat-button-text-ripple-color: color-mix(in srgb, #4d7f8b 12%, transparent);
  --mat-button-text-state-layer-color: #4d7f8b;
  --mat-button-tonal-container-color: #4d7f8b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-default.dark .mat-mdc-button.mat-accent,
.vex-theme-default.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-default.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-default.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-default.dark .mat-tonal-button.mat-accent,
.vex-theme-default .dark .mat-mdc-button.mat-accent,
.vex-theme-default .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-default .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-default .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-default .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-default.dark .mat-mdc-button.mat-warn,
.vex-theme-default.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-default.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-default.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-default.dark .mat-tonal-button.mat-warn,
.vex-theme-default .dark .mat-mdc-button.mat-warn,
.vex-theme-default .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-default .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-default .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-default .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-default .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #4d7f8b;
  --mat-icon-button-state-layer-color: #4d7f8b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #4d7f8b 12%, transparent);
}
.vex-theme-default.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-default .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-default.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-default .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-default.dark .mat-mdc-fab.mat-primary,
.vex-theme-default.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-default .dark .mat-mdc-fab.mat-primary,
.vex-theme-default .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #4d7f8b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #4d7f8b 12%, transparent);
  --mat-fab-small-container-color: #4d7f8b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-default.dark .mat-mdc-fab.mat-accent,
.vex-theme-default.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-default .dark .mat-mdc-fab.mat-accent,
.vex-theme-default .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-default.dark .mat-mdc-fab.mat-warn,
.vex-theme-default.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-default .dark .mat-mdc-fab.mat-warn,
.vex-theme-default .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #075473;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #4d7f8b;
}
.vex-theme-default.dark .mat-accent,
.vex-theme-default .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-default.dark .mat-warn,
.vex-theme-default .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-badge-background-color: #4d7f8b;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-default.dark .mat-badge-accent,
.vex-theme-default .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-default.dark .mat-badge-warn,
.vex-theme-default .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #4d7f8b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #4d7f8b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #4d7f8b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #4d7f8b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #4d7f8b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #4d7f8b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-default.dark .mat-datepicker-content.mat-accent,
.vex-theme-default.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-default .dark .mat-datepicker-content.mat-accent,
.vex-theme-default .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-default.dark .mat-datepicker-content.mat-warn,
.vex-theme-default.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-default .dark .mat-datepicker-content.mat-warn,
.vex-theme-default .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-default.dark .mat-icon.mat-primary,
.vex-theme-default .dark .mat-icon.mat-primary {
  --mat-icon-color: #4d7f8b;
}
.vex-theme-default.dark .mat-icon.mat-accent,
.vex-theme-default .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-default.dark .mat-icon.mat-warn,
.vex-theme-default .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #4d7f8b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #4d7f8b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #4d7f8b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-default.dark .mat-step-header.mat-accent,
.vex-theme-default .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-default.dark .mat-step-header.mat-warn,
.vex-theme-default .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-default.dark .mat-toolbar.mat-primary,
.vex-theme-default .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #4d7f8b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-default.dark .mat-toolbar.mat-accent,
.vex-theme-default .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-default.dark .mat-toolbar.mat-warn,
.vex-theme-default .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #dc2626;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-red .mat-accent,
.vex-theme-red.light .mat-accent,
.vex-theme-red .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-red .mat-warn,
.vex-theme-red.light .mat-warn,
.vex-theme-red .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-red .mat-primary,
.vex-theme-red.light .mat-primary,
.vex-theme-red .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #dc2626;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #dc2626;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-red .mat-accent,
.vex-theme-red.light .mat-accent,
.vex-theme-red .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-red .mat-warn,
.vex-theme-red.light .mat-warn,
.vex-theme-red .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-red .mat-mdc-progress-bar,
.vex-theme-red.light .mat-mdc-progress-bar,
.vex-theme-red .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #dc2626;
  --mat-progress-bar-track-color: rgba(220, 38, 38, 0.25);
}
.vex-theme-red .mat-mdc-progress-bar.mat-accent,
.vex-theme-red.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-red .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-red .mat-mdc-progress-bar.mat-warn,
.vex-theme-red.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-red .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #dc2626 87%, transparent);
  --mat-form-field-filled-caret-color: #dc2626;
  --mat-form-field-filled-focus-active-indicator-color: #dc2626;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #dc2626 87%, transparent);
  --mat-form-field-outlined-caret-color: #dc2626;
  --mat-form-field-outlined-focus-outline-color: #dc2626;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #dc2626 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-red .mat-mdc-form-field.mat-accent,
.vex-theme-red.light .mat-mdc-form-field.mat-accent,
.vex-theme-red .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-red .mat-mdc-form-field.mat-warn,
.vex-theme-red.light .mat-mdc-form-field.mat-warn,
.vex-theme-red .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #dc2626;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-red .mat-mdc-form-field.mat-accent,
.vex-theme-red.light .mat-mdc-form-field.mat-accent,
.vex-theme-red .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-red .mat-mdc-form-field.mat-warn,
.vex-theme-red.light .mat-mdc-form-field.mat-warn,
.vex-theme-red .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-red .mat-mdc-standard-chip,
.vex-theme-red.light .mat-mdc-standard-chip,
.vex-theme-red .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-red .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-red.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-red.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-red .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-red .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #dc2626;
  --mat-chip-elevated-disabled-container-color: #dc2626;
  --mat-chip-elevated-selected-container-color: #dc2626;
  --mat-chip-flat-disabled-selected-container-color: #dc2626;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-red .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-red .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-red.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-red.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-red .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-red .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-red .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-red .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-red.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-red.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-red .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-red .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #dc2626;
  --mat-slide-toggle-selected-handle-color: #dc2626;
  --mat-slide-toggle-selected-hover-state-layer-color: #dc2626;
  --mat-slide-toggle-selected-pressed-state-layer-color: #dc2626;
  --mat-slide-toggle-selected-focus-handle-color: #dc2626;
  --mat-slide-toggle-selected-hover-handle-color: #dc2626;
  --mat-slide-toggle-selected-pressed-handle-color: #dc2626;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-red .mat-mdc-slide-toggle.mat-accent,
.vex-theme-red.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-red .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-red .mat-mdc-slide-toggle.mat-warn,
.vex-theme-red.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-red .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-red .mat-mdc-radio-button.mat-primary,
.vex-theme-red.light .mat-mdc-radio-button.mat-primary,
.vex-theme-red .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #dc2626;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #dc2626;
  --mat-radio-selected-hover-icon-color: #dc2626;
  --mat-radio-selected-icon-color: #dc2626;
  --mat-radio-selected-pressed-icon-color: #dc2626;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-radio-button.mat-accent,
.vex-theme-red.light .mat-mdc-radio-button.mat-accent,
.vex-theme-red .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-radio-button.mat-warn,
.vex-theme-red.light .mat-mdc-radio-button.mat-warn,
.vex-theme-red .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-slider-active-track-color: #dc2626;
  --mat-slider-focus-handle-color: #dc2626;
  --mat-slider-handle-color: #dc2626;
  --mat-slider-hover-handle-color: #dc2626;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #dc2626 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #dc2626 4%, transparent);
  --mat-slider-inactive-track-color: #dc2626;
  --mat-slider-ripple-color: #dc2626;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #dc2626;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-accent,
.vex-theme-red.light .mat-accent,
.vex-theme-red .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-red .mat-warn,
.vex-theme-red.light .mat-warn,
.vex-theme-red .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-red .mdc-list-item__start,
.vex-theme-red .mdc-list-item__end,
.vex-theme-red.light .mdc-list-item__start,
.vex-theme-red.light .mdc-list-item__end,
.vex-theme-red .light .mdc-list-item__start,
.vex-theme-red .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #dc2626;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #dc2626;
  --mat-radio-selected-hover-icon-color: #dc2626;
  --mat-radio-selected-icon-color: #dc2626;
  --mat-radio-selected-pressed-icon-color: #dc2626;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-accent .mdc-list-item__start,
.vex-theme-red .mat-accent .mdc-list-item__end,
.vex-theme-red.light .mat-accent .mdc-list-item__start,
.vex-theme-red.light .mat-accent .mdc-list-item__end,
.vex-theme-red .light .mat-accent .mdc-list-item__start,
.vex-theme-red .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-warn .mdc-list-item__start,
.vex-theme-red .mat-warn .mdc-list-item__end,
.vex-theme-red.light .mat-warn .mdc-list-item__start,
.vex-theme-red.light .mat-warn .mdc-list-item__end,
.vex-theme-red .light .mat-warn .mdc-list-item__start,
.vex-theme-red .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-list-option,
.vex-theme-red.light .mat-mdc-list-option,
.vex-theme-red .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #dc2626;
  --mat-checkbox-selected-hover-icon-color: #dc2626;
  --mat-checkbox-selected-icon-color: #dc2626;
  --mat-checkbox-selected-pressed-icon-color: #dc2626;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #dc2626;
  --mat-checkbox-selected-hover-state-layer-color: #dc2626;
  --mat-checkbox-selected-pressed-state-layer-color: #dc2626;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-list-option.mat-accent,
.vex-theme-red.light .mat-mdc-list-option.mat-accent,
.vex-theme-red .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-list-option.mat-warn,
.vex-theme-red.light .mat-mdc-list-option.mat-warn,
.vex-theme-red .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-red .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-red .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-red .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-red.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-red.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-red.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-red.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-red .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-red .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-red .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-red .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #dc2626;
}
.vex-theme-red .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-red .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-red .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-red.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-red.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-red.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-red .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-red .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-red .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-red .mat-mdc-tab-group,
.vex-theme-red .mat-mdc-tab-nav-bar,
.vex-theme-red.light .mat-mdc-tab-group,
.vex-theme-red.light .mat-mdc-tab-nav-bar,
.vex-theme-red .light .mat-mdc-tab-group,
.vex-theme-red .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #dc2626;
  --mat-tab-active-ripple-color: #dc2626;
  --mat-tab-inactive-ripple-color: #dc2626;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #dc2626;
  --mat-tab-active-hover-label-text-color: #dc2626;
  --mat-tab-active-focus-indicator-color: #dc2626;
  --mat-tab-active-hover-indicator-color: #dc2626;
  --mat-tab-active-indicator-color: #dc2626;
}
.vex-theme-red .mat-mdc-tab-group.mat-accent,
.vex-theme-red .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-red.light .mat-mdc-tab-group.mat-accent,
.vex-theme-red.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-red .light .mat-mdc-tab-group.mat-accent,
.vex-theme-red .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-red .mat-mdc-tab-group.mat-warn,
.vex-theme-red .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-red.light .mat-mdc-tab-group.mat-warn,
.vex-theme-red.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-red .light .mat-mdc-tab-group.mat-warn,
.vex-theme-red .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-red .mat-mdc-tab-group.mat-background-primary,
.vex-theme-red .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-red.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-red.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-red .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-red .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #dc2626;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-red .mat-mdc-tab-group.mat-background-accent,
.vex-theme-red .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-red.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-red.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-red .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-red .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-red .mat-mdc-tab-group.mat-background-warn,
.vex-theme-red .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-red.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-red.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-red .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-red .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-checkbox.mat-primary,
.vex-theme-red.light .mat-mdc-checkbox.mat-primary,
.vex-theme-red .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #dc2626;
  --mat-checkbox-selected-hover-icon-color: #dc2626;
  --mat-checkbox-selected-icon-color: #dc2626;
  --mat-checkbox-selected-pressed-icon-color: #dc2626;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #dc2626;
  --mat-checkbox-selected-hover-state-layer-color: #dc2626;
  --mat-checkbox-selected-pressed-state-layer-color: #dc2626;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-checkbox.mat-warn,
.vex-theme-red.light .mat-mdc-checkbox.mat-warn,
.vex-theme-red .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-button.mat-primary,
.vex-theme-red .mat-mdc-unelevated-button.mat-primary,
.vex-theme-red .mat-mdc-raised-button.mat-primary,
.vex-theme-red .mat-mdc-outlined-button.mat-primary,
.vex-theme-red .mat-tonal-button.mat-primary,
.vex-theme-red.light .mat-mdc-button.mat-primary,
.vex-theme-red.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-red.light .mat-mdc-raised-button.mat-primary,
.vex-theme-red.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-red.light .mat-tonal-button.mat-primary,
.vex-theme-red .light .mat-mdc-button.mat-primary,
.vex-theme-red .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-red .light .mat-mdc-raised-button.mat-primary,
.vex-theme-red .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-red .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #dc2626;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #dc2626;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #dc2626 12%, transparent);
  --mat-button-outlined-state-layer-color: #dc2626;
  --mat-button-protected-container-color: #dc2626;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #dc2626;
  --mat-button-text-ripple-color: color-mix(in srgb, #dc2626 12%, transparent);
  --mat-button-text-state-layer-color: #dc2626;
  --mat-button-tonal-container-color: #dc2626;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-red .mat-mdc-button.mat-accent,
.vex-theme-red .mat-mdc-unelevated-button.mat-accent,
.vex-theme-red .mat-mdc-raised-button.mat-accent,
.vex-theme-red .mat-mdc-outlined-button.mat-accent,
.vex-theme-red .mat-tonal-button.mat-accent,
.vex-theme-red.light .mat-mdc-button.mat-accent,
.vex-theme-red.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-red.light .mat-mdc-raised-button.mat-accent,
.vex-theme-red.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-red.light .mat-tonal-button.mat-accent,
.vex-theme-red .light .mat-mdc-button.mat-accent,
.vex-theme-red .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-red .light .mat-mdc-raised-button.mat-accent,
.vex-theme-red .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-red .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-red .mat-mdc-button.mat-warn,
.vex-theme-red .mat-mdc-unelevated-button.mat-warn,
.vex-theme-red .mat-mdc-raised-button.mat-warn,
.vex-theme-red .mat-mdc-outlined-button.mat-warn,
.vex-theme-red .mat-tonal-button.mat-warn,
.vex-theme-red.light .mat-mdc-button.mat-warn,
.vex-theme-red.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-red.light .mat-mdc-raised-button.mat-warn,
.vex-theme-red.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-red.light .mat-tonal-button.mat-warn,
.vex-theme-red .light .mat-mdc-button.mat-warn,
.vex-theme-red .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-red .light .mat-mdc-raised-button.mat-warn,
.vex-theme-red .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-red .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-icon-button.mat-primary,
.vex-theme-red.light .mat-mdc-icon-button.mat-primary,
.vex-theme-red .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #dc2626;
  --mat-icon-button-state-layer-color: #dc2626;
  --mat-icon-button-ripple-color: color-mix(in srgb, #dc2626 12%, transparent);
}
.vex-theme-red .mat-mdc-icon-button.mat-accent,
.vex-theme-red.light .mat-mdc-icon-button.mat-accent,
.vex-theme-red .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-red .mat-mdc-icon-button.mat-warn,
.vex-theme-red.light .mat-mdc-icon-button.mat-warn,
.vex-theme-red .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-mdc-fab.mat-primary,
.vex-theme-red .mat-mdc-mini-fab.mat-primary,
.vex-theme-red.light .mat-mdc-fab.mat-primary,
.vex-theme-red.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-red .light .mat-mdc-fab.mat-primary,
.vex-theme-red .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #dc2626;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #dc2626 12%, transparent);
  --mat-fab-small-container-color: #dc2626;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-red .mat-mdc-fab.mat-accent,
.vex-theme-red .mat-mdc-mini-fab.mat-accent,
.vex-theme-red.light .mat-mdc-fab.mat-accent,
.vex-theme-red.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-red .light .mat-mdc-fab.mat-accent,
.vex-theme-red .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-red .mat-mdc-fab.mat-warn,
.vex-theme-red .mat-mdc-mini-fab.mat-warn,
.vex-theme-red.light .mat-mdc-fab.mat-warn,
.vex-theme-red.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-red .light .mat-mdc-fab.mat-warn,
.vex-theme-red .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #fca5a5;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #dc2626;
}
.vex-theme-red .mat-accent,
.vex-theme-red.light .mat-accent,
.vex-theme-red .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-red .mat-warn,
.vex-theme-red.light .mat-warn,
.vex-theme-red .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-badge-background-color: #dc2626;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-red .mat-badge-accent,
.vex-theme-red.light .mat-badge-accent,
.vex-theme-red .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-red .mat-badge-warn,
.vex-theme-red.light .mat-badge-warn,
.vex-theme-red .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #dc2626 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #dc2626;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #dc2626 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #dc2626 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #dc2626 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #dc2626;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-datepicker-content.mat-accent,
.vex-theme-red .mat-datepicker-toggle-active.mat-accent,
.vex-theme-red.light .mat-datepicker-content.mat-accent,
.vex-theme-red.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-red .light .mat-datepicker-content.mat-accent,
.vex-theme-red .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-datepicker-content.mat-warn,
.vex-theme-red .mat-datepicker-toggle-active.mat-warn,
.vex-theme-red.light .mat-datepicker-content.mat-warn,
.vex-theme-red.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-red .light .mat-datepicker-content.mat-warn,
.vex-theme-red .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-red .mat-icon.mat-primary,
.vex-theme-red.light .mat-icon.mat-primary,
.vex-theme-red .light .mat-icon.mat-primary {
  --mat-icon-color: #dc2626;
}
.vex-theme-red .mat-icon.mat-accent,
.vex-theme-red.light .mat-icon.mat-accent,
.vex-theme-red .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-red .mat-icon.mat-warn,
.vex-theme-red.light .mat-icon.mat-warn,
.vex-theme-red .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #dc2626;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #dc2626;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #dc2626;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-red .mat-step-header.mat-accent,
.vex-theme-red.light .mat-step-header.mat-accent,
.vex-theme-red .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-red .mat-step-header.mat-warn,
.vex-theme-red.light .mat-step-header.mat-warn,
.vex-theme-red .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-red .mat-toolbar.mat-primary,
.vex-theme-red.light .mat-toolbar.mat-primary,
.vex-theme-red .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #dc2626;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-red .mat-toolbar.mat-accent,
.vex-theme-red.light .mat-toolbar.mat-accent,
.vex-theme-red .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-red .mat-toolbar.mat-warn,
.vex-theme-red.light .mat-toolbar.mat-warn,
.vex-theme-red .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-red,
.vex-theme-red.light,
.vex-theme-red .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-red.dark .mat-accent,
.vex-theme-red .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-red.dark .mat-warn,
.vex-theme-red .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-red.dark .mat-primary,
.vex-theme-red .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-red.dark .mat-accent,
.vex-theme-red .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-red.dark .mat-warn,
.vex-theme-red .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-red.dark .mat-mdc-progress-bar,
.vex-theme-red .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-red.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-red .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-red.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-red .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-red.dark .mat-mdc-form-field.mat-accent,
.vex-theme-red .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-red.dark .mat-mdc-form-field.mat-warn,
.vex-theme-red .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-red.dark .mat-mdc-form-field.mat-accent,
.vex-theme-red .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-red.dark .mat-mdc-form-field.mat-warn,
.vex-theme-red .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-red.dark .mat-mdc-standard-chip,
.vex-theme-red .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-red.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-red.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-red .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-red .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-red.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-red.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-red .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-red .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-red.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-red.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-red .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-red .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-red.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-red .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-red.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-red .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-red.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-red .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-red.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-red .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-red.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-red .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-red.dark .mat-accent,
.vex-theme-red .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-red.dark .mat-warn,
.vex-theme-red .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-red.dark .mdc-list-item__start,
.vex-theme-red.dark .mdc-list-item__end,
.vex-theme-red .dark .mdc-list-item__start,
.vex-theme-red .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-red.dark .mat-accent .mdc-list-item__start,
.vex-theme-red.dark .mat-accent .mdc-list-item__end,
.vex-theme-red .dark .mat-accent .mdc-list-item__start,
.vex-theme-red .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-red.dark .mat-warn .mdc-list-item__start,
.vex-theme-red.dark .mat-warn .mdc-list-item__end,
.vex-theme-red .dark .mat-warn .mdc-list-item__start,
.vex-theme-red .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-red.dark .mat-mdc-list-option,
.vex-theme-red .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-list-option.mat-accent,
.vex-theme-red .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-list-option.mat-warn,
.vex-theme-red .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-red.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-red.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-red.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-red .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-red .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-red .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-red .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #ef4444;
}
.vex-theme-red.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-red.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-red.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-red .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-red .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-red .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-red.dark .mat-mdc-tab-group,
.vex-theme-red.dark .mat-mdc-tab-nav-bar,
.vex-theme-red .dark .mat-mdc-tab-group,
.vex-theme-red .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-red.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-red.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-red .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-red .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-red.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-red.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-red .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-red .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-red.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-red.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-red .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-red .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-red.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-red.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-red .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-red .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-red.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-red.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-red .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-red .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-red .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-red .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-button.mat-primary,
.vex-theme-red.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-red.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-red.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-red.dark .mat-tonal-button.mat-primary,
.vex-theme-red .dark .mat-mdc-button.mat-primary,
.vex-theme-red .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-red .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-red .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-red .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-red.dark .mat-mdc-button.mat-accent,
.vex-theme-red.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-red.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-red.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-red.dark .mat-tonal-button.mat-accent,
.vex-theme-red .dark .mat-mdc-button.mat-accent,
.vex-theme-red .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-red .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-red .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-red .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-red.dark .mat-mdc-button.mat-warn,
.vex-theme-red.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-red.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-red.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-red.dark .mat-tonal-button.mat-warn,
.vex-theme-red .dark .mat-mdc-button.mat-warn,
.vex-theme-red .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-red .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-red .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-red .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-red .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-red.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-red .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-red.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-red .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-red.dark .mat-mdc-fab.mat-primary,
.vex-theme-red.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-red .dark .mat-mdc-fab.mat-primary,
.vex-theme-red .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-red.dark .mat-mdc-fab.mat-accent,
.vex-theme-red.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-red .dark .mat-mdc-fab.mat-accent,
.vex-theme-red .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-red.dark .mat-mdc-fab.mat-warn,
.vex-theme-red.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-red .dark .mat-mdc-fab.mat-warn,
.vex-theme-red .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #dc2626;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-red.dark .mat-accent,
.vex-theme-red .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-red.dark .mat-warn,
.vex-theme-red .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-red.dark .mat-badge-accent,
.vex-theme-red .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-red.dark .mat-badge-warn,
.vex-theme-red .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-red.dark .mat-datepicker-content.mat-accent,
.vex-theme-red.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-red .dark .mat-datepicker-content.mat-accent,
.vex-theme-red .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-red.dark .mat-datepicker-content.mat-warn,
.vex-theme-red.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-red .dark .mat-datepicker-content.mat-warn,
.vex-theme-red .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-red.dark .mat-icon.mat-primary,
.vex-theme-red .dark .mat-icon.mat-primary {
  --mat-icon-color: #ef4444;
}
.vex-theme-red.dark .mat-icon.mat-accent,
.vex-theme-red .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-red.dark .mat-icon.mat-warn,
.vex-theme-red .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-red.dark .mat-step-header.mat-accent,
.vex-theme-red .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-red.dark .mat-step-header.mat-warn,
.vex-theme-red .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-red.dark .mat-toolbar.mat-primary,
.vex-theme-red .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-red.dark .mat-toolbar.mat-accent,
.vex-theme-red .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-red.dark .mat-toolbar.mat-warn,
.vex-theme-red .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #ea580c;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-orange .mat-accent,
.vex-theme-orange.light .mat-accent,
.vex-theme-orange .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-orange .mat-warn,
.vex-theme-orange.light .mat-warn,
.vex-theme-orange .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-orange .mat-primary,
.vex-theme-orange.light .mat-primary,
.vex-theme-orange .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #ea580c;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ea580c;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-orange .mat-accent,
.vex-theme-orange.light .mat-accent,
.vex-theme-orange .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-orange .mat-warn,
.vex-theme-orange.light .mat-warn,
.vex-theme-orange .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-orange .mat-mdc-progress-bar,
.vex-theme-orange.light .mat-mdc-progress-bar,
.vex-theme-orange .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #ea580c;
  --mat-progress-bar-track-color: rgba(234, 88, 12, 0.25);
}
.vex-theme-orange .mat-mdc-progress-bar.mat-accent,
.vex-theme-orange.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-orange .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-orange .mat-mdc-progress-bar.mat-warn,
.vex-theme-orange.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-orange .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ea580c 87%, transparent);
  --mat-form-field-filled-caret-color: #ea580c;
  --mat-form-field-filled-focus-active-indicator-color: #ea580c;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ea580c 87%, transparent);
  --mat-form-field-outlined-caret-color: #ea580c;
  --mat-form-field-outlined-focus-outline-color: #ea580c;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ea580c 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-orange .mat-mdc-form-field.mat-accent,
.vex-theme-orange.light .mat-mdc-form-field.mat-accent,
.vex-theme-orange .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-orange .mat-mdc-form-field.mat-warn,
.vex-theme-orange.light .mat-mdc-form-field.mat-warn,
.vex-theme-orange .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ea580c;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-orange .mat-mdc-form-field.mat-accent,
.vex-theme-orange.light .mat-mdc-form-field.mat-accent,
.vex-theme-orange .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-orange .mat-mdc-form-field.mat-warn,
.vex-theme-orange.light .mat-mdc-form-field.mat-warn,
.vex-theme-orange .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-orange .mat-mdc-standard-chip,
.vex-theme-orange.light .mat-mdc-standard-chip,
.vex-theme-orange .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-orange .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-orange.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-orange.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-orange .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-orange .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ea580c;
  --mat-chip-elevated-disabled-container-color: #ea580c;
  --mat-chip-elevated-selected-container-color: #ea580c;
  --mat-chip-flat-disabled-selected-container-color: #ea580c;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-orange .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-orange .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-orange.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-orange.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-orange .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-orange .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-orange .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-orange .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-orange.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-orange.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-orange .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-orange .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ea580c;
  --mat-slide-toggle-selected-handle-color: #ea580c;
  --mat-slide-toggle-selected-hover-state-layer-color: #ea580c;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ea580c;
  --mat-slide-toggle-selected-focus-handle-color: #ea580c;
  --mat-slide-toggle-selected-hover-handle-color: #ea580c;
  --mat-slide-toggle-selected-pressed-handle-color: #ea580c;
  --mat-slide-toggle-selected-focus-track-color: #fdba74;
  --mat-slide-toggle-selected-hover-track-color: #fdba74;
  --mat-slide-toggle-selected-pressed-track-color: #fdba74;
  --mat-slide-toggle-selected-track-color: #fdba74;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-orange .mat-mdc-slide-toggle.mat-accent,
.vex-theme-orange.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-orange .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-orange .mat-mdc-slide-toggle.mat-warn,
.vex-theme-orange.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-orange .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-orange .mat-mdc-radio-button.mat-primary,
.vex-theme-orange.light .mat-mdc-radio-button.mat-primary,
.vex-theme-orange .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #ea580c;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ea580c;
  --mat-radio-selected-hover-icon-color: #ea580c;
  --mat-radio-selected-icon-color: #ea580c;
  --mat-radio-selected-pressed-icon-color: #ea580c;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-radio-button.mat-accent,
.vex-theme-orange.light .mat-mdc-radio-button.mat-accent,
.vex-theme-orange .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-radio-button.mat-warn,
.vex-theme-orange.light .mat-mdc-radio-button.mat-warn,
.vex-theme-orange .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-slider-active-track-color: #ea580c;
  --mat-slider-focus-handle-color: #ea580c;
  --mat-slider-handle-color: #ea580c;
  --mat-slider-hover-handle-color: #ea580c;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ea580c 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ea580c 4%, transparent);
  --mat-slider-inactive-track-color: #ea580c;
  --mat-slider-ripple-color: #ea580c;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ea580c;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-accent,
.vex-theme-orange.light .mat-accent,
.vex-theme-orange .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-orange .mat-warn,
.vex-theme-orange.light .mat-warn,
.vex-theme-orange .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-orange .mdc-list-item__start,
.vex-theme-orange .mdc-list-item__end,
.vex-theme-orange.light .mdc-list-item__start,
.vex-theme-orange.light .mdc-list-item__end,
.vex-theme-orange .light .mdc-list-item__start,
.vex-theme-orange .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ea580c;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ea580c;
  --mat-radio-selected-hover-icon-color: #ea580c;
  --mat-radio-selected-icon-color: #ea580c;
  --mat-radio-selected-pressed-icon-color: #ea580c;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-accent .mdc-list-item__start,
.vex-theme-orange .mat-accent .mdc-list-item__end,
.vex-theme-orange.light .mat-accent .mdc-list-item__start,
.vex-theme-orange.light .mat-accent .mdc-list-item__end,
.vex-theme-orange .light .mat-accent .mdc-list-item__start,
.vex-theme-orange .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-warn .mdc-list-item__start,
.vex-theme-orange .mat-warn .mdc-list-item__end,
.vex-theme-orange.light .mat-warn .mdc-list-item__start,
.vex-theme-orange.light .mat-warn .mdc-list-item__end,
.vex-theme-orange .light .mat-warn .mdc-list-item__start,
.vex-theme-orange .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-list-option,
.vex-theme-orange.light .mat-mdc-list-option,
.vex-theme-orange .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ea580c;
  --mat-checkbox-selected-hover-icon-color: #ea580c;
  --mat-checkbox-selected-icon-color: #ea580c;
  --mat-checkbox-selected-pressed-icon-color: #ea580c;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ea580c;
  --mat-checkbox-selected-hover-state-layer-color: #ea580c;
  --mat-checkbox-selected-pressed-state-layer-color: #ea580c;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-list-option.mat-accent,
.vex-theme-orange.light .mat-mdc-list-option.mat-accent,
.vex-theme-orange .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-list-option.mat-warn,
.vex-theme-orange.light .mat-mdc-list-option.mat-warn,
.vex-theme-orange .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-orange .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-orange .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-orange .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-orange.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-orange.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-orange.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-orange.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-orange .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-orange .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-orange .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-orange .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #ea580c;
}
.vex-theme-orange .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-orange .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-orange .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-orange.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-orange.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-orange.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-orange .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-orange .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-orange .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-orange .mat-mdc-tab-group,
.vex-theme-orange .mat-mdc-tab-nav-bar,
.vex-theme-orange.light .mat-mdc-tab-group,
.vex-theme-orange.light .mat-mdc-tab-nav-bar,
.vex-theme-orange .light .mat-mdc-tab-group,
.vex-theme-orange .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ea580c;
  --mat-tab-active-ripple-color: #ea580c;
  --mat-tab-inactive-ripple-color: #ea580c;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ea580c;
  --mat-tab-active-hover-label-text-color: #ea580c;
  --mat-tab-active-focus-indicator-color: #ea580c;
  --mat-tab-active-hover-indicator-color: #ea580c;
  --mat-tab-active-indicator-color: #ea580c;
}
.vex-theme-orange .mat-mdc-tab-group.mat-accent,
.vex-theme-orange .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-orange.light .mat-mdc-tab-group.mat-accent,
.vex-theme-orange.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-orange .light .mat-mdc-tab-group.mat-accent,
.vex-theme-orange .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-orange .mat-mdc-tab-group.mat-warn,
.vex-theme-orange .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-orange.light .mat-mdc-tab-group.mat-warn,
.vex-theme-orange.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-orange .light .mat-mdc-tab-group.mat-warn,
.vex-theme-orange .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-orange .mat-mdc-tab-group.mat-background-primary,
.vex-theme-orange .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-orange.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-orange.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-orange .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-orange .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #ea580c;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-orange .mat-mdc-tab-group.mat-background-accent,
.vex-theme-orange .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-orange.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-orange.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-orange .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-orange .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-orange .mat-mdc-tab-group.mat-background-warn,
.vex-theme-orange .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-orange.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-orange.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-orange .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-orange .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-checkbox.mat-primary,
.vex-theme-orange.light .mat-mdc-checkbox.mat-primary,
.vex-theme-orange .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ea580c;
  --mat-checkbox-selected-hover-icon-color: #ea580c;
  --mat-checkbox-selected-icon-color: #ea580c;
  --mat-checkbox-selected-pressed-icon-color: #ea580c;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ea580c;
  --mat-checkbox-selected-hover-state-layer-color: #ea580c;
  --mat-checkbox-selected-pressed-state-layer-color: #ea580c;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-checkbox.mat-warn,
.vex-theme-orange.light .mat-mdc-checkbox.mat-warn,
.vex-theme-orange .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-button.mat-primary,
.vex-theme-orange .mat-mdc-unelevated-button.mat-primary,
.vex-theme-orange .mat-mdc-raised-button.mat-primary,
.vex-theme-orange .mat-mdc-outlined-button.mat-primary,
.vex-theme-orange .mat-tonal-button.mat-primary,
.vex-theme-orange.light .mat-mdc-button.mat-primary,
.vex-theme-orange.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-orange.light .mat-mdc-raised-button.mat-primary,
.vex-theme-orange.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-orange.light .mat-tonal-button.mat-primary,
.vex-theme-orange .light .mat-mdc-button.mat-primary,
.vex-theme-orange .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-orange .light .mat-mdc-raised-button.mat-primary,
.vex-theme-orange .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-orange .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #ea580c;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ea580c;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ea580c 12%, transparent);
  --mat-button-outlined-state-layer-color: #ea580c;
  --mat-button-protected-container-color: #ea580c;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ea580c;
  --mat-button-text-ripple-color: color-mix(in srgb, #ea580c 12%, transparent);
  --mat-button-text-state-layer-color: #ea580c;
  --mat-button-tonal-container-color: #ea580c;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-orange .mat-mdc-button.mat-accent,
.vex-theme-orange .mat-mdc-unelevated-button.mat-accent,
.vex-theme-orange .mat-mdc-raised-button.mat-accent,
.vex-theme-orange .mat-mdc-outlined-button.mat-accent,
.vex-theme-orange .mat-tonal-button.mat-accent,
.vex-theme-orange.light .mat-mdc-button.mat-accent,
.vex-theme-orange.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-orange.light .mat-mdc-raised-button.mat-accent,
.vex-theme-orange.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-orange.light .mat-tonal-button.mat-accent,
.vex-theme-orange .light .mat-mdc-button.mat-accent,
.vex-theme-orange .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-orange .light .mat-mdc-raised-button.mat-accent,
.vex-theme-orange .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-orange .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-orange .mat-mdc-button.mat-warn,
.vex-theme-orange .mat-mdc-unelevated-button.mat-warn,
.vex-theme-orange .mat-mdc-raised-button.mat-warn,
.vex-theme-orange .mat-mdc-outlined-button.mat-warn,
.vex-theme-orange .mat-tonal-button.mat-warn,
.vex-theme-orange.light .mat-mdc-button.mat-warn,
.vex-theme-orange.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-orange.light .mat-mdc-raised-button.mat-warn,
.vex-theme-orange.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-orange.light .mat-tonal-button.mat-warn,
.vex-theme-orange .light .mat-mdc-button.mat-warn,
.vex-theme-orange .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-orange .light .mat-mdc-raised-button.mat-warn,
.vex-theme-orange .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-orange .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-icon-button.mat-primary,
.vex-theme-orange.light .mat-mdc-icon-button.mat-primary,
.vex-theme-orange .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #ea580c;
  --mat-icon-button-state-layer-color: #ea580c;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ea580c 12%, transparent);
}
.vex-theme-orange .mat-mdc-icon-button.mat-accent,
.vex-theme-orange.light .mat-mdc-icon-button.mat-accent,
.vex-theme-orange .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-orange .mat-mdc-icon-button.mat-warn,
.vex-theme-orange.light .mat-mdc-icon-button.mat-warn,
.vex-theme-orange .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-mdc-fab.mat-primary,
.vex-theme-orange .mat-mdc-mini-fab.mat-primary,
.vex-theme-orange.light .mat-mdc-fab.mat-primary,
.vex-theme-orange.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-orange .light .mat-mdc-fab.mat-primary,
.vex-theme-orange .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #ea580c;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ea580c 12%, transparent);
  --mat-fab-small-container-color: #ea580c;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-orange .mat-mdc-fab.mat-accent,
.vex-theme-orange .mat-mdc-mini-fab.mat-accent,
.vex-theme-orange.light .mat-mdc-fab.mat-accent,
.vex-theme-orange.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-orange .light .mat-mdc-fab.mat-accent,
.vex-theme-orange .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-orange .mat-mdc-fab.mat-warn,
.vex-theme-orange .mat-mdc-mini-fab.mat-warn,
.vex-theme-orange.light .mat-mdc-fab.mat-warn,
.vex-theme-orange.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-orange .light .mat-mdc-fab.mat-warn,
.vex-theme-orange .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #fdba74;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #ea580c;
}
.vex-theme-orange .mat-accent,
.vex-theme-orange.light .mat-accent,
.vex-theme-orange .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-orange .mat-warn,
.vex-theme-orange.light .mat-warn,
.vex-theme-orange .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-badge-background-color: #ea580c;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-orange .mat-badge-accent,
.vex-theme-orange.light .mat-badge-accent,
.vex-theme-orange .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-orange .mat-badge-warn,
.vex-theme-orange.light .mat-badge-warn,
.vex-theme-orange .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ea580c 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ea580c;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ea580c 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ea580c 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ea580c 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ea580c;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-datepicker-content.mat-accent,
.vex-theme-orange .mat-datepicker-toggle-active.mat-accent,
.vex-theme-orange.light .mat-datepicker-content.mat-accent,
.vex-theme-orange.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-orange .light .mat-datepicker-content.mat-accent,
.vex-theme-orange .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-datepicker-content.mat-warn,
.vex-theme-orange .mat-datepicker-toggle-active.mat-warn,
.vex-theme-orange.light .mat-datepicker-content.mat-warn,
.vex-theme-orange.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-orange .light .mat-datepicker-content.mat-warn,
.vex-theme-orange .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-orange .mat-icon.mat-primary,
.vex-theme-orange.light .mat-icon.mat-primary,
.vex-theme-orange .light .mat-icon.mat-primary {
  --mat-icon-color: #ea580c;
}
.vex-theme-orange .mat-icon.mat-accent,
.vex-theme-orange.light .mat-icon.mat-accent,
.vex-theme-orange .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-orange .mat-icon.mat-warn,
.vex-theme-orange.light .mat-icon.mat-warn,
.vex-theme-orange .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ea580c;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ea580c;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ea580c;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-orange .mat-step-header.mat-accent,
.vex-theme-orange.light .mat-step-header.mat-accent,
.vex-theme-orange .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-orange .mat-step-header.mat-warn,
.vex-theme-orange.light .mat-step-header.mat-warn,
.vex-theme-orange .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-orange .mat-toolbar.mat-primary,
.vex-theme-orange.light .mat-toolbar.mat-primary,
.vex-theme-orange .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #ea580c;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-orange .mat-toolbar.mat-accent,
.vex-theme-orange.light .mat-toolbar.mat-accent,
.vex-theme-orange .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-orange .mat-toolbar.mat-warn,
.vex-theme-orange.light .mat-toolbar.mat-warn,
.vex-theme-orange .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-orange,
.vex-theme-orange.light,
.vex-theme-orange .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #f97316;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-orange.dark .mat-accent,
.vex-theme-orange .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-orange.dark .mat-warn,
.vex-theme-orange .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-orange.dark .mat-primary,
.vex-theme-orange .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #f97316;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f97316;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-orange.dark .mat-accent,
.vex-theme-orange .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-orange.dark .mat-warn,
.vex-theme-orange .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-orange.dark .mat-mdc-progress-bar,
.vex-theme-orange .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #f97316;
  --mat-progress-bar-track-color: rgba(249, 115, 22, 0.25);
}
.vex-theme-orange.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-orange .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-orange.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-orange .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f97316 87%, transparent);
  --mat-form-field-filled-caret-color: #f97316;
  --mat-form-field-filled-focus-active-indicator-color: #f97316;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f97316 87%, transparent);
  --mat-form-field-outlined-caret-color: #f97316;
  --mat-form-field-outlined-focus-outline-color: #f97316;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f97316 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-orange.dark .mat-mdc-form-field.mat-accent,
.vex-theme-orange .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-orange.dark .mat-mdc-form-field.mat-warn,
.vex-theme-orange .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f97316;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-orange.dark .mat-mdc-form-field.mat-accent,
.vex-theme-orange .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-orange.dark .mat-mdc-form-field.mat-warn,
.vex-theme-orange .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-orange.dark .mat-mdc-standard-chip,
.vex-theme-orange .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-orange.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-orange.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-orange .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-orange .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f97316;
  --mat-chip-elevated-disabled-container-color: #f97316;
  --mat-chip-elevated-selected-container-color: #f97316;
  --mat-chip-flat-disabled-selected-container-color: #f97316;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-orange.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-orange .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-orange .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-orange.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-orange .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-orange .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f97316;
  --mat-slide-toggle-selected-handle-color: #f97316;
  --mat-slide-toggle-selected-hover-state-layer-color: #f97316;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f97316;
  --mat-slide-toggle-selected-focus-handle-color: #f97316;
  --mat-slide-toggle-selected-hover-handle-color: #f97316;
  --mat-slide-toggle-selected-pressed-handle-color: #f97316;
  --mat-slide-toggle-selected-focus-track-color: #ea580c;
  --mat-slide-toggle-selected-hover-track-color: #ea580c;
  --mat-slide-toggle-selected-pressed-track-color: #ea580c;
  --mat-slide-toggle-selected-track-color: #ea580c;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-orange.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-orange .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-orange.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-orange .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-orange.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-orange .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #f97316;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f97316;
  --mat-radio-selected-hover-icon-color: #f97316;
  --mat-radio-selected-icon-color: #f97316;
  --mat-radio-selected-pressed-icon-color: #f97316;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-orange.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-orange .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-orange.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-orange .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-slider-active-track-color: #f97316;
  --mat-slider-focus-handle-color: #f97316;
  --mat-slider-handle-color: #f97316;
  --mat-slider-hover-handle-color: #f97316;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f97316 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f97316 4%, transparent);
  --mat-slider-inactive-track-color: #f97316;
  --mat-slider-ripple-color: #f97316;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f97316;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-orange.dark .mat-accent,
.vex-theme-orange .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-orange.dark .mat-warn,
.vex-theme-orange .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-orange.dark .mdc-list-item__start,
.vex-theme-orange.dark .mdc-list-item__end,
.vex-theme-orange .dark .mdc-list-item__start,
.vex-theme-orange .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f97316;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f97316;
  --mat-radio-selected-hover-icon-color: #f97316;
  --mat-radio-selected-icon-color: #f97316;
  --mat-radio-selected-pressed-icon-color: #f97316;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-orange.dark .mat-accent .mdc-list-item__start,
.vex-theme-orange.dark .mat-accent .mdc-list-item__end,
.vex-theme-orange .dark .mat-accent .mdc-list-item__start,
.vex-theme-orange .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-orange.dark .mat-warn .mdc-list-item__start,
.vex-theme-orange.dark .mat-warn .mdc-list-item__end,
.vex-theme-orange .dark .mat-warn .mdc-list-item__start,
.vex-theme-orange .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-orange.dark .mat-mdc-list-option,
.vex-theme-orange .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f97316;
  --mat-checkbox-selected-hover-icon-color: #f97316;
  --mat-checkbox-selected-icon-color: #f97316;
  --mat-checkbox-selected-pressed-icon-color: #f97316;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f97316;
  --mat-checkbox-selected-hover-state-layer-color: #f97316;
  --mat-checkbox-selected-pressed-state-layer-color: #f97316;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-list-option.mat-accent,
.vex-theme-orange .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-list-option.mat-warn,
.vex-theme-orange .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-orange.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-orange.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-orange.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-orange .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-orange .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-orange .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-orange .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #f97316;
}
.vex-theme-orange.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-orange.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-orange.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-orange .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-orange .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-orange .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-orange.dark .mat-mdc-tab-group,
.vex-theme-orange.dark .mat-mdc-tab-nav-bar,
.vex-theme-orange .dark .mat-mdc-tab-group,
.vex-theme-orange .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f97316;
  --mat-tab-active-ripple-color: #f97316;
  --mat-tab-inactive-ripple-color: #f97316;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f97316;
  --mat-tab-active-hover-label-text-color: #f97316;
  --mat-tab-active-focus-indicator-color: #f97316;
  --mat-tab-active-hover-indicator-color: #f97316;
  --mat-tab-active-indicator-color: #f97316;
}
.vex-theme-orange.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-orange.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-orange .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-orange .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-orange.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-orange.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-orange .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-orange .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-orange.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-orange.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-orange .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-orange .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #f97316;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-orange.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-orange .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-orange .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-orange.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-orange .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-orange .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-orange .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f97316;
  --mat-checkbox-selected-hover-icon-color: #f97316;
  --mat-checkbox-selected-icon-color: #f97316;
  --mat-checkbox-selected-pressed-icon-color: #f97316;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f97316;
  --mat-checkbox-selected-hover-state-layer-color: #f97316;
  --mat-checkbox-selected-pressed-state-layer-color: #f97316;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-orange .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-button.mat-primary,
.vex-theme-orange.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-orange.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-orange.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-orange.dark .mat-tonal-button.mat-primary,
.vex-theme-orange .dark .mat-mdc-button.mat-primary,
.vex-theme-orange .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-orange .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-orange .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-orange .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #f97316;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f97316;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f97316 12%, transparent);
  --mat-button-outlined-state-layer-color: #f97316;
  --mat-button-protected-container-color: #f97316;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f97316;
  --mat-button-text-ripple-color: color-mix(in srgb, #f97316 12%, transparent);
  --mat-button-text-state-layer-color: #f97316;
  --mat-button-tonal-container-color: #f97316;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-button.mat-accent,
.vex-theme-orange.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-orange.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-orange.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-orange.dark .mat-tonal-button.mat-accent,
.vex-theme-orange .dark .mat-mdc-button.mat-accent,
.vex-theme-orange .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-orange .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-orange .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-orange .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-button.mat-warn,
.vex-theme-orange.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-orange.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-orange.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-orange.dark .mat-tonal-button.mat-warn,
.vex-theme-orange .dark .mat-mdc-button.mat-warn,
.vex-theme-orange .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-orange .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-orange .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-orange .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-orange .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #f97316;
  --mat-icon-button-state-layer-color: #f97316;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f97316 12%, transparent);
}
.vex-theme-orange.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-orange .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-orange.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-orange .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-orange.dark .mat-mdc-fab.mat-primary,
.vex-theme-orange.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-orange .dark .mat-mdc-fab.mat-primary,
.vex-theme-orange .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #f97316;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f97316 12%, transparent);
  --mat-fab-small-container-color: #f97316;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-fab.mat-accent,
.vex-theme-orange.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-orange .dark .mat-mdc-fab.mat-accent,
.vex-theme-orange .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-orange.dark .mat-mdc-fab.mat-warn,
.vex-theme-orange.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-orange .dark .mat-mdc-fab.mat-warn,
.vex-theme-orange .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #ea580c;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #f97316;
}
.vex-theme-orange.dark .mat-accent,
.vex-theme-orange .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-orange.dark .mat-warn,
.vex-theme-orange .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-badge-background-color: #f97316;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-orange.dark .mat-badge-accent,
.vex-theme-orange .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-orange.dark .mat-badge-warn,
.vex-theme-orange .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f97316 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f97316;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f97316 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f97316 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f97316 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f97316;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-orange.dark .mat-datepicker-content.mat-accent,
.vex-theme-orange.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-orange .dark .mat-datepicker-content.mat-accent,
.vex-theme-orange .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-orange.dark .mat-datepicker-content.mat-warn,
.vex-theme-orange.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-orange .dark .mat-datepicker-content.mat-warn,
.vex-theme-orange .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-orange.dark .mat-icon.mat-primary,
.vex-theme-orange .dark .mat-icon.mat-primary {
  --mat-icon-color: #f97316;
}
.vex-theme-orange.dark .mat-icon.mat-accent,
.vex-theme-orange .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-orange.dark .mat-icon.mat-warn,
.vex-theme-orange .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f97316;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f97316;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f97316;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-orange.dark .mat-step-header.mat-accent,
.vex-theme-orange .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-orange.dark .mat-step-header.mat-warn,
.vex-theme-orange .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-orange.dark .mat-toolbar.mat-primary,
.vex-theme-orange .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #f97316;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-orange.dark .mat-toolbar.mat-accent,
.vex-theme-orange .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-orange.dark .mat-toolbar.mat-warn,
.vex-theme-orange .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #d97706;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-amber .mat-accent,
.vex-theme-amber.light .mat-accent,
.vex-theme-amber .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-amber .mat-warn,
.vex-theme-amber.light .mat-warn,
.vex-theme-amber .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-amber .mat-primary,
.vex-theme-amber.light .mat-primary,
.vex-theme-amber .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #d97706;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #d97706;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-amber .mat-accent,
.vex-theme-amber.light .mat-accent,
.vex-theme-amber .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-amber .mat-warn,
.vex-theme-amber.light .mat-warn,
.vex-theme-amber .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-amber .mat-mdc-progress-bar,
.vex-theme-amber.light .mat-mdc-progress-bar,
.vex-theme-amber .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #d97706;
  --mat-progress-bar-track-color: rgba(217, 119, 6, 0.25);
}
.vex-theme-amber .mat-mdc-progress-bar.mat-accent,
.vex-theme-amber.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-amber .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-amber .mat-mdc-progress-bar.mat-warn,
.vex-theme-amber.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-amber .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #d97706 87%, transparent);
  --mat-form-field-filled-caret-color: #d97706;
  --mat-form-field-filled-focus-active-indicator-color: #d97706;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #d97706 87%, transparent);
  --mat-form-field-outlined-caret-color: #d97706;
  --mat-form-field-outlined-focus-outline-color: #d97706;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #d97706 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-amber .mat-mdc-form-field.mat-accent,
.vex-theme-amber.light .mat-mdc-form-field.mat-accent,
.vex-theme-amber .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-amber .mat-mdc-form-field.mat-warn,
.vex-theme-amber.light .mat-mdc-form-field.mat-warn,
.vex-theme-amber .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #d97706;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-amber .mat-mdc-form-field.mat-accent,
.vex-theme-amber.light .mat-mdc-form-field.mat-accent,
.vex-theme-amber .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-amber .mat-mdc-form-field.mat-warn,
.vex-theme-amber.light .mat-mdc-form-field.mat-warn,
.vex-theme-amber .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-amber .mat-mdc-standard-chip,
.vex-theme-amber.light .mat-mdc-standard-chip,
.vex-theme-amber .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-amber .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-amber.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-amber.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-amber .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-amber .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #d97706;
  --mat-chip-elevated-disabled-container-color: #d97706;
  --mat-chip-elevated-selected-container-color: #d97706;
  --mat-chip-flat-disabled-selected-container-color: #d97706;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-amber .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-amber .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-amber.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-amber.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-amber .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-amber .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-amber .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-amber .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-amber.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-amber.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-amber .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-amber .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #d97706;
  --mat-slide-toggle-selected-handle-color: #d97706;
  --mat-slide-toggle-selected-hover-state-layer-color: #d97706;
  --mat-slide-toggle-selected-pressed-state-layer-color: #d97706;
  --mat-slide-toggle-selected-focus-handle-color: #d97706;
  --mat-slide-toggle-selected-hover-handle-color: #d97706;
  --mat-slide-toggle-selected-pressed-handle-color: #d97706;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-amber .mat-mdc-slide-toggle.mat-accent,
.vex-theme-amber.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-amber .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-amber .mat-mdc-slide-toggle.mat-warn,
.vex-theme-amber.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-amber .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-amber .mat-mdc-radio-button.mat-primary,
.vex-theme-amber.light .mat-mdc-radio-button.mat-primary,
.vex-theme-amber .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #d97706;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #d97706;
  --mat-radio-selected-hover-icon-color: #d97706;
  --mat-radio-selected-icon-color: #d97706;
  --mat-radio-selected-pressed-icon-color: #d97706;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-radio-button.mat-accent,
.vex-theme-amber.light .mat-mdc-radio-button.mat-accent,
.vex-theme-amber .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-radio-button.mat-warn,
.vex-theme-amber.light .mat-mdc-radio-button.mat-warn,
.vex-theme-amber .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-slider-active-track-color: #d97706;
  --mat-slider-focus-handle-color: #d97706;
  --mat-slider-handle-color: #d97706;
  --mat-slider-hover-handle-color: #d97706;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #d97706 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #d97706 4%, transparent);
  --mat-slider-inactive-track-color: #d97706;
  --mat-slider-ripple-color: #d97706;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #d97706;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-accent,
.vex-theme-amber.light .mat-accent,
.vex-theme-amber .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-amber .mat-warn,
.vex-theme-amber.light .mat-warn,
.vex-theme-amber .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-amber .mdc-list-item__start,
.vex-theme-amber .mdc-list-item__end,
.vex-theme-amber.light .mdc-list-item__start,
.vex-theme-amber.light .mdc-list-item__end,
.vex-theme-amber .light .mdc-list-item__start,
.vex-theme-amber .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #d97706;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #d97706;
  --mat-radio-selected-hover-icon-color: #d97706;
  --mat-radio-selected-icon-color: #d97706;
  --mat-radio-selected-pressed-icon-color: #d97706;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-accent .mdc-list-item__start,
.vex-theme-amber .mat-accent .mdc-list-item__end,
.vex-theme-amber.light .mat-accent .mdc-list-item__start,
.vex-theme-amber.light .mat-accent .mdc-list-item__end,
.vex-theme-amber .light .mat-accent .mdc-list-item__start,
.vex-theme-amber .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-warn .mdc-list-item__start,
.vex-theme-amber .mat-warn .mdc-list-item__end,
.vex-theme-amber.light .mat-warn .mdc-list-item__start,
.vex-theme-amber.light .mat-warn .mdc-list-item__end,
.vex-theme-amber .light .mat-warn .mdc-list-item__start,
.vex-theme-amber .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-list-option,
.vex-theme-amber.light .mat-mdc-list-option,
.vex-theme-amber .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #d97706;
  --mat-checkbox-selected-hover-icon-color: #d97706;
  --mat-checkbox-selected-icon-color: #d97706;
  --mat-checkbox-selected-pressed-icon-color: #d97706;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #d97706;
  --mat-checkbox-selected-hover-state-layer-color: #d97706;
  --mat-checkbox-selected-pressed-state-layer-color: #d97706;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-list-option.mat-accent,
.vex-theme-amber.light .mat-mdc-list-option.mat-accent,
.vex-theme-amber .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-list-option.mat-warn,
.vex-theme-amber.light .mat-mdc-list-option.mat-warn,
.vex-theme-amber .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-amber .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-amber .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-amber .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-amber.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-amber.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-amber.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-amber.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-amber .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-amber .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-amber .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-amber .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #d97706;
}
.vex-theme-amber .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-amber .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-amber .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-amber.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-amber.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-amber.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-amber .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-amber .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-amber .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-amber .mat-mdc-tab-group,
.vex-theme-amber .mat-mdc-tab-nav-bar,
.vex-theme-amber.light .mat-mdc-tab-group,
.vex-theme-amber.light .mat-mdc-tab-nav-bar,
.vex-theme-amber .light .mat-mdc-tab-group,
.vex-theme-amber .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #d97706;
  --mat-tab-active-ripple-color: #d97706;
  --mat-tab-inactive-ripple-color: #d97706;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #d97706;
  --mat-tab-active-hover-label-text-color: #d97706;
  --mat-tab-active-focus-indicator-color: #d97706;
  --mat-tab-active-hover-indicator-color: #d97706;
  --mat-tab-active-indicator-color: #d97706;
}
.vex-theme-amber .mat-mdc-tab-group.mat-accent,
.vex-theme-amber .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-amber.light .mat-mdc-tab-group.mat-accent,
.vex-theme-amber.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-amber .light .mat-mdc-tab-group.mat-accent,
.vex-theme-amber .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-amber .mat-mdc-tab-group.mat-warn,
.vex-theme-amber .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-amber.light .mat-mdc-tab-group.mat-warn,
.vex-theme-amber.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-amber .light .mat-mdc-tab-group.mat-warn,
.vex-theme-amber .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-amber .mat-mdc-tab-group.mat-background-primary,
.vex-theme-amber .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-amber.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-amber.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-amber .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-amber .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #d97706;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-amber .mat-mdc-tab-group.mat-background-accent,
.vex-theme-amber .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-amber.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-amber.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-amber .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-amber .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-amber .mat-mdc-tab-group.mat-background-warn,
.vex-theme-amber .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-amber.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-amber.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-amber .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-amber .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-checkbox.mat-primary,
.vex-theme-amber.light .mat-mdc-checkbox.mat-primary,
.vex-theme-amber .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #d97706;
  --mat-checkbox-selected-hover-icon-color: #d97706;
  --mat-checkbox-selected-icon-color: #d97706;
  --mat-checkbox-selected-pressed-icon-color: #d97706;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #d97706;
  --mat-checkbox-selected-hover-state-layer-color: #d97706;
  --mat-checkbox-selected-pressed-state-layer-color: #d97706;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-checkbox.mat-warn,
.vex-theme-amber.light .mat-mdc-checkbox.mat-warn,
.vex-theme-amber .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-button.mat-primary,
.vex-theme-amber .mat-mdc-unelevated-button.mat-primary,
.vex-theme-amber .mat-mdc-raised-button.mat-primary,
.vex-theme-amber .mat-mdc-outlined-button.mat-primary,
.vex-theme-amber .mat-tonal-button.mat-primary,
.vex-theme-amber.light .mat-mdc-button.mat-primary,
.vex-theme-amber.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-amber.light .mat-mdc-raised-button.mat-primary,
.vex-theme-amber.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-amber.light .mat-tonal-button.mat-primary,
.vex-theme-amber .light .mat-mdc-button.mat-primary,
.vex-theme-amber .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-amber .light .mat-mdc-raised-button.mat-primary,
.vex-theme-amber .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-amber .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #d97706;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #d97706;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #d97706 12%, transparent);
  --mat-button-outlined-state-layer-color: #d97706;
  --mat-button-protected-container-color: #d97706;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #d97706;
  --mat-button-text-ripple-color: color-mix(in srgb, #d97706 12%, transparent);
  --mat-button-text-state-layer-color: #d97706;
  --mat-button-tonal-container-color: #d97706;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-amber .mat-mdc-button.mat-accent,
.vex-theme-amber .mat-mdc-unelevated-button.mat-accent,
.vex-theme-amber .mat-mdc-raised-button.mat-accent,
.vex-theme-amber .mat-mdc-outlined-button.mat-accent,
.vex-theme-amber .mat-tonal-button.mat-accent,
.vex-theme-amber.light .mat-mdc-button.mat-accent,
.vex-theme-amber.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-amber.light .mat-mdc-raised-button.mat-accent,
.vex-theme-amber.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-amber.light .mat-tonal-button.mat-accent,
.vex-theme-amber .light .mat-mdc-button.mat-accent,
.vex-theme-amber .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-amber .light .mat-mdc-raised-button.mat-accent,
.vex-theme-amber .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-amber .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-amber .mat-mdc-button.mat-warn,
.vex-theme-amber .mat-mdc-unelevated-button.mat-warn,
.vex-theme-amber .mat-mdc-raised-button.mat-warn,
.vex-theme-amber .mat-mdc-outlined-button.mat-warn,
.vex-theme-amber .mat-tonal-button.mat-warn,
.vex-theme-amber.light .mat-mdc-button.mat-warn,
.vex-theme-amber.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-amber.light .mat-mdc-raised-button.mat-warn,
.vex-theme-amber.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-amber.light .mat-tonal-button.mat-warn,
.vex-theme-amber .light .mat-mdc-button.mat-warn,
.vex-theme-amber .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-amber .light .mat-mdc-raised-button.mat-warn,
.vex-theme-amber .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-amber .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-icon-button.mat-primary,
.vex-theme-amber.light .mat-mdc-icon-button.mat-primary,
.vex-theme-amber .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #d97706;
  --mat-icon-button-state-layer-color: #d97706;
  --mat-icon-button-ripple-color: color-mix(in srgb, #d97706 12%, transparent);
}
.vex-theme-amber .mat-mdc-icon-button.mat-accent,
.vex-theme-amber.light .mat-mdc-icon-button.mat-accent,
.vex-theme-amber .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-amber .mat-mdc-icon-button.mat-warn,
.vex-theme-amber.light .mat-mdc-icon-button.mat-warn,
.vex-theme-amber .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-mdc-fab.mat-primary,
.vex-theme-amber .mat-mdc-mini-fab.mat-primary,
.vex-theme-amber.light .mat-mdc-fab.mat-primary,
.vex-theme-amber.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-amber .light .mat-mdc-fab.mat-primary,
.vex-theme-amber .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #d97706;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #d97706 12%, transparent);
  --mat-fab-small-container-color: #d97706;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-amber .mat-mdc-fab.mat-accent,
.vex-theme-amber .mat-mdc-mini-fab.mat-accent,
.vex-theme-amber.light .mat-mdc-fab.mat-accent,
.vex-theme-amber.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-amber .light .mat-mdc-fab.mat-accent,
.vex-theme-amber .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-amber .mat-mdc-fab.mat-warn,
.vex-theme-amber .mat-mdc-mini-fab.mat-warn,
.vex-theme-amber.light .mat-mdc-fab.mat-warn,
.vex-theme-amber.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-amber .light .mat-mdc-fab.mat-warn,
.vex-theme-amber .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #fcd34d;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #d97706;
}
.vex-theme-amber .mat-accent,
.vex-theme-amber.light .mat-accent,
.vex-theme-amber .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-amber .mat-warn,
.vex-theme-amber.light .mat-warn,
.vex-theme-amber .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-badge-background-color: #d97706;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-amber .mat-badge-accent,
.vex-theme-amber.light .mat-badge-accent,
.vex-theme-amber .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-amber .mat-badge-warn,
.vex-theme-amber.light .mat-badge-warn,
.vex-theme-amber .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #d97706 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #d97706;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #d97706 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #d97706 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #d97706 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #d97706;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-datepicker-content.mat-accent,
.vex-theme-amber .mat-datepicker-toggle-active.mat-accent,
.vex-theme-amber.light .mat-datepicker-content.mat-accent,
.vex-theme-amber.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-amber .light .mat-datepicker-content.mat-accent,
.vex-theme-amber .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-datepicker-content.mat-warn,
.vex-theme-amber .mat-datepicker-toggle-active.mat-warn,
.vex-theme-amber.light .mat-datepicker-content.mat-warn,
.vex-theme-amber.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-amber .light .mat-datepicker-content.mat-warn,
.vex-theme-amber .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-amber .mat-icon.mat-primary,
.vex-theme-amber.light .mat-icon.mat-primary,
.vex-theme-amber .light .mat-icon.mat-primary {
  --mat-icon-color: #d97706;
}
.vex-theme-amber .mat-icon.mat-accent,
.vex-theme-amber.light .mat-icon.mat-accent,
.vex-theme-amber .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-amber .mat-icon.mat-warn,
.vex-theme-amber.light .mat-icon.mat-warn,
.vex-theme-amber .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #d97706;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #d97706;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #d97706;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-amber .mat-step-header.mat-accent,
.vex-theme-amber.light .mat-step-header.mat-accent,
.vex-theme-amber .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-amber .mat-step-header.mat-warn,
.vex-theme-amber.light .mat-step-header.mat-warn,
.vex-theme-amber .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-amber .mat-toolbar.mat-primary,
.vex-theme-amber.light .mat-toolbar.mat-primary,
.vex-theme-amber .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #d97706;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-amber .mat-toolbar.mat-accent,
.vex-theme-amber.light .mat-toolbar.mat-accent,
.vex-theme-amber .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-amber .mat-toolbar.mat-warn,
.vex-theme-amber.light .mat-toolbar.mat-warn,
.vex-theme-amber .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-amber,
.vex-theme-amber.light,
.vex-theme-amber .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-amber.dark .mat-accent,
.vex-theme-amber .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-amber.dark .mat-warn,
.vex-theme-amber .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-amber.dark .mat-primary,
.vex-theme-amber .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-amber.dark .mat-accent,
.vex-theme-amber .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-amber.dark .mat-warn,
.vex-theme-amber .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-amber.dark .mat-mdc-progress-bar,
.vex-theme-amber .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-amber.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-amber .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-amber.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-amber .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-amber.dark .mat-mdc-form-field.mat-accent,
.vex-theme-amber .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-amber.dark .mat-mdc-form-field.mat-warn,
.vex-theme-amber .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-amber.dark .mat-mdc-form-field.mat-accent,
.vex-theme-amber .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-amber.dark .mat-mdc-form-field.mat-warn,
.vex-theme-amber .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-amber.dark .mat-mdc-standard-chip,
.vex-theme-amber .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-amber.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-amber.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-amber .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-amber .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-amber.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-amber .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-amber .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-amber.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-amber .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-amber .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-amber.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-amber .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-amber.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-amber .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-amber.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-amber .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-amber.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-amber .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-amber.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-amber .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-amber.dark .mat-accent,
.vex-theme-amber .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-amber.dark .mat-warn,
.vex-theme-amber .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-amber.dark .mdc-list-item__start,
.vex-theme-amber.dark .mdc-list-item__end,
.vex-theme-amber .dark .mdc-list-item__start,
.vex-theme-amber .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-amber.dark .mat-accent .mdc-list-item__start,
.vex-theme-amber.dark .mat-accent .mdc-list-item__end,
.vex-theme-amber .dark .mat-accent .mdc-list-item__start,
.vex-theme-amber .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-amber.dark .mat-warn .mdc-list-item__start,
.vex-theme-amber.dark .mat-warn .mdc-list-item__end,
.vex-theme-amber .dark .mat-warn .mdc-list-item__start,
.vex-theme-amber .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-amber.dark .mat-mdc-list-option,
.vex-theme-amber .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-list-option.mat-accent,
.vex-theme-amber .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-list-option.mat-warn,
.vex-theme-amber .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-amber.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-amber.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-amber.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-amber .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-amber .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-amber .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-amber .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #f59e0b;
}
.vex-theme-amber.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-amber.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-amber.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-amber .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-amber .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-amber .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-amber.dark .mat-mdc-tab-group,
.vex-theme-amber.dark .mat-mdc-tab-nav-bar,
.vex-theme-amber .dark .mat-mdc-tab-group,
.vex-theme-amber .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-amber.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-amber.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-amber .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-amber .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-amber.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-amber.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-amber .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-amber .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-amber.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-amber.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-amber .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-amber .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-amber.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-amber .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-amber .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-amber.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-amber .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-amber .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-amber .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-amber .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-button.mat-primary,
.vex-theme-amber.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-amber.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-amber.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-amber.dark .mat-tonal-button.mat-primary,
.vex-theme-amber .dark .mat-mdc-button.mat-primary,
.vex-theme-amber .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-amber .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-amber .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-amber .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-button.mat-accent,
.vex-theme-amber.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-amber.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-amber.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-amber.dark .mat-tonal-button.mat-accent,
.vex-theme-amber .dark .mat-mdc-button.mat-accent,
.vex-theme-amber .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-amber .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-amber .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-amber .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-button.mat-warn,
.vex-theme-amber.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-amber.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-amber.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-amber.dark .mat-tonal-button.mat-warn,
.vex-theme-amber .dark .mat-mdc-button.mat-warn,
.vex-theme-amber .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-amber .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-amber .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-amber .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-amber .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-amber.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-amber .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-amber.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-amber .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-amber.dark .mat-mdc-fab.mat-primary,
.vex-theme-amber.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-amber .dark .mat-mdc-fab.mat-primary,
.vex-theme-amber .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-fab.mat-accent,
.vex-theme-amber.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-amber .dark .mat-mdc-fab.mat-accent,
.vex-theme-amber .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-amber.dark .mat-mdc-fab.mat-warn,
.vex-theme-amber.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-amber .dark .mat-mdc-fab.mat-warn,
.vex-theme-amber .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #d97706;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-amber.dark .mat-accent,
.vex-theme-amber .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-amber.dark .mat-warn,
.vex-theme-amber .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-amber.dark .mat-badge-accent,
.vex-theme-amber .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-amber.dark .mat-badge-warn,
.vex-theme-amber .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-amber.dark .mat-datepicker-content.mat-accent,
.vex-theme-amber.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-amber .dark .mat-datepicker-content.mat-accent,
.vex-theme-amber .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-amber.dark .mat-datepicker-content.mat-warn,
.vex-theme-amber.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-amber .dark .mat-datepicker-content.mat-warn,
.vex-theme-amber .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-amber.dark .mat-icon.mat-primary,
.vex-theme-amber .dark .mat-icon.mat-primary {
  --mat-icon-color: #f59e0b;
}
.vex-theme-amber.dark .mat-icon.mat-accent,
.vex-theme-amber .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-amber.dark .mat-icon.mat-warn,
.vex-theme-amber .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-amber.dark .mat-step-header.mat-accent,
.vex-theme-amber .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-amber.dark .mat-step-header.mat-warn,
.vex-theme-amber .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-amber.dark .mat-toolbar.mat-primary,
.vex-theme-amber .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-amber.dark .mat-toolbar.mat-accent,
.vex-theme-amber .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-amber.dark .mat-toolbar.mat-warn,
.vex-theme-amber .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #ca8a04;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-yellow .mat-accent,
.vex-theme-yellow.light .mat-accent,
.vex-theme-yellow .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-yellow .mat-warn,
.vex-theme-yellow.light .mat-warn,
.vex-theme-yellow .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-yellow .mat-primary,
.vex-theme-yellow.light .mat-primary,
.vex-theme-yellow .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #ca8a04;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ca8a04;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-yellow .mat-accent,
.vex-theme-yellow.light .mat-accent,
.vex-theme-yellow .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-yellow .mat-warn,
.vex-theme-yellow.light .mat-warn,
.vex-theme-yellow .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-yellow .mat-mdc-progress-bar,
.vex-theme-yellow.light .mat-mdc-progress-bar,
.vex-theme-yellow .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #ca8a04;
  --mat-progress-bar-track-color: rgba(202, 138, 4, 0.25);
}
.vex-theme-yellow .mat-mdc-progress-bar.mat-accent,
.vex-theme-yellow.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-yellow .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-yellow .mat-mdc-progress-bar.mat-warn,
.vex-theme-yellow.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-yellow .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ca8a04 87%, transparent);
  --mat-form-field-filled-caret-color: #ca8a04;
  --mat-form-field-filled-focus-active-indicator-color: #ca8a04;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ca8a04 87%, transparent);
  --mat-form-field-outlined-caret-color: #ca8a04;
  --mat-form-field-outlined-focus-outline-color: #ca8a04;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ca8a04 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-yellow .mat-mdc-form-field.mat-accent,
.vex-theme-yellow.light .mat-mdc-form-field.mat-accent,
.vex-theme-yellow .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-yellow .mat-mdc-form-field.mat-warn,
.vex-theme-yellow.light .mat-mdc-form-field.mat-warn,
.vex-theme-yellow .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ca8a04;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-yellow .mat-mdc-form-field.mat-accent,
.vex-theme-yellow.light .mat-mdc-form-field.mat-accent,
.vex-theme-yellow .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-yellow .mat-mdc-form-field.mat-warn,
.vex-theme-yellow.light .mat-mdc-form-field.mat-warn,
.vex-theme-yellow .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-yellow .mat-mdc-standard-chip,
.vex-theme-yellow.light .mat-mdc-standard-chip,
.vex-theme-yellow .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-yellow .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-yellow.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-yellow.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-yellow .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-yellow .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ca8a04;
  --mat-chip-elevated-disabled-container-color: #ca8a04;
  --mat-chip-elevated-selected-container-color: #ca8a04;
  --mat-chip-flat-disabled-selected-container-color: #ca8a04;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-yellow .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-yellow .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-yellow.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-yellow.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-yellow .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-yellow .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-yellow .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-yellow .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-yellow.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-yellow.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-yellow .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-yellow .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ca8a04;
  --mat-slide-toggle-selected-handle-color: #ca8a04;
  --mat-slide-toggle-selected-hover-state-layer-color: #ca8a04;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ca8a04;
  --mat-slide-toggle-selected-focus-handle-color: #ca8a04;
  --mat-slide-toggle-selected-hover-handle-color: #ca8a04;
  --mat-slide-toggle-selected-pressed-handle-color: #ca8a04;
  --mat-slide-toggle-selected-focus-track-color: #fde047;
  --mat-slide-toggle-selected-hover-track-color: #fde047;
  --mat-slide-toggle-selected-pressed-track-color: #fde047;
  --mat-slide-toggle-selected-track-color: #fde047;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-yellow .mat-mdc-slide-toggle.mat-accent,
.vex-theme-yellow.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-yellow .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-yellow .mat-mdc-slide-toggle.mat-warn,
.vex-theme-yellow.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-yellow .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-yellow .mat-mdc-radio-button.mat-primary,
.vex-theme-yellow.light .mat-mdc-radio-button.mat-primary,
.vex-theme-yellow .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #ca8a04;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ca8a04;
  --mat-radio-selected-hover-icon-color: #ca8a04;
  --mat-radio-selected-icon-color: #ca8a04;
  --mat-radio-selected-pressed-icon-color: #ca8a04;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-radio-button.mat-accent,
.vex-theme-yellow.light .mat-mdc-radio-button.mat-accent,
.vex-theme-yellow .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-radio-button.mat-warn,
.vex-theme-yellow.light .mat-mdc-radio-button.mat-warn,
.vex-theme-yellow .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-slider-active-track-color: #ca8a04;
  --mat-slider-focus-handle-color: #ca8a04;
  --mat-slider-handle-color: #ca8a04;
  --mat-slider-hover-handle-color: #ca8a04;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ca8a04 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ca8a04 4%, transparent);
  --mat-slider-inactive-track-color: #ca8a04;
  --mat-slider-ripple-color: #ca8a04;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ca8a04;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-accent,
.vex-theme-yellow.light .mat-accent,
.vex-theme-yellow .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-yellow .mat-warn,
.vex-theme-yellow.light .mat-warn,
.vex-theme-yellow .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-yellow .mdc-list-item__start,
.vex-theme-yellow .mdc-list-item__end,
.vex-theme-yellow.light .mdc-list-item__start,
.vex-theme-yellow.light .mdc-list-item__end,
.vex-theme-yellow .light .mdc-list-item__start,
.vex-theme-yellow .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ca8a04;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ca8a04;
  --mat-radio-selected-hover-icon-color: #ca8a04;
  --mat-radio-selected-icon-color: #ca8a04;
  --mat-radio-selected-pressed-icon-color: #ca8a04;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-accent .mdc-list-item__start,
.vex-theme-yellow .mat-accent .mdc-list-item__end,
.vex-theme-yellow.light .mat-accent .mdc-list-item__start,
.vex-theme-yellow.light .mat-accent .mdc-list-item__end,
.vex-theme-yellow .light .mat-accent .mdc-list-item__start,
.vex-theme-yellow .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-warn .mdc-list-item__start,
.vex-theme-yellow .mat-warn .mdc-list-item__end,
.vex-theme-yellow.light .mat-warn .mdc-list-item__start,
.vex-theme-yellow.light .mat-warn .mdc-list-item__end,
.vex-theme-yellow .light .mat-warn .mdc-list-item__start,
.vex-theme-yellow .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-list-option,
.vex-theme-yellow.light .mat-mdc-list-option,
.vex-theme-yellow .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ca8a04;
  --mat-checkbox-selected-hover-icon-color: #ca8a04;
  --mat-checkbox-selected-icon-color: #ca8a04;
  --mat-checkbox-selected-pressed-icon-color: #ca8a04;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ca8a04;
  --mat-checkbox-selected-hover-state-layer-color: #ca8a04;
  --mat-checkbox-selected-pressed-state-layer-color: #ca8a04;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-list-option.mat-accent,
.vex-theme-yellow.light .mat-mdc-list-option.mat-accent,
.vex-theme-yellow .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-list-option.mat-warn,
.vex-theme-yellow.light .mat-mdc-list-option.mat-warn,
.vex-theme-yellow .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-yellow .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-yellow .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-yellow .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-yellow.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-yellow.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-yellow.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-yellow.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-yellow .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-yellow .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-yellow .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-yellow .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #ca8a04;
}
.vex-theme-yellow .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-yellow .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-yellow .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-yellow.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-yellow.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-yellow.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-yellow .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-yellow .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-yellow .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-yellow .mat-mdc-tab-group,
.vex-theme-yellow .mat-mdc-tab-nav-bar,
.vex-theme-yellow.light .mat-mdc-tab-group,
.vex-theme-yellow.light .mat-mdc-tab-nav-bar,
.vex-theme-yellow .light .mat-mdc-tab-group,
.vex-theme-yellow .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ca8a04;
  --mat-tab-active-ripple-color: #ca8a04;
  --mat-tab-inactive-ripple-color: #ca8a04;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ca8a04;
  --mat-tab-active-hover-label-text-color: #ca8a04;
  --mat-tab-active-focus-indicator-color: #ca8a04;
  --mat-tab-active-hover-indicator-color: #ca8a04;
  --mat-tab-active-indicator-color: #ca8a04;
}
.vex-theme-yellow .mat-mdc-tab-group.mat-accent,
.vex-theme-yellow .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-yellow.light .mat-mdc-tab-group.mat-accent,
.vex-theme-yellow.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-yellow .light .mat-mdc-tab-group.mat-accent,
.vex-theme-yellow .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-yellow .mat-mdc-tab-group.mat-warn,
.vex-theme-yellow .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-yellow.light .mat-mdc-tab-group.mat-warn,
.vex-theme-yellow.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-yellow .light .mat-mdc-tab-group.mat-warn,
.vex-theme-yellow .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-yellow .mat-mdc-tab-group.mat-background-primary,
.vex-theme-yellow .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-yellow.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-yellow.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-yellow .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-yellow .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #ca8a04;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-yellow .mat-mdc-tab-group.mat-background-accent,
.vex-theme-yellow .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-yellow.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-yellow.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-yellow .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-yellow .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-yellow .mat-mdc-tab-group.mat-background-warn,
.vex-theme-yellow .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-yellow.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-yellow.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-yellow .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-yellow .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-checkbox.mat-primary,
.vex-theme-yellow.light .mat-mdc-checkbox.mat-primary,
.vex-theme-yellow .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ca8a04;
  --mat-checkbox-selected-hover-icon-color: #ca8a04;
  --mat-checkbox-selected-icon-color: #ca8a04;
  --mat-checkbox-selected-pressed-icon-color: #ca8a04;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ca8a04;
  --mat-checkbox-selected-hover-state-layer-color: #ca8a04;
  --mat-checkbox-selected-pressed-state-layer-color: #ca8a04;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-checkbox.mat-warn,
.vex-theme-yellow.light .mat-mdc-checkbox.mat-warn,
.vex-theme-yellow .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-button.mat-primary,
.vex-theme-yellow .mat-mdc-unelevated-button.mat-primary,
.vex-theme-yellow .mat-mdc-raised-button.mat-primary,
.vex-theme-yellow .mat-mdc-outlined-button.mat-primary,
.vex-theme-yellow .mat-tonal-button.mat-primary,
.vex-theme-yellow.light .mat-mdc-button.mat-primary,
.vex-theme-yellow.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-yellow.light .mat-mdc-raised-button.mat-primary,
.vex-theme-yellow.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-yellow.light .mat-tonal-button.mat-primary,
.vex-theme-yellow .light .mat-mdc-button.mat-primary,
.vex-theme-yellow .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-yellow .light .mat-mdc-raised-button.mat-primary,
.vex-theme-yellow .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-yellow .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #ca8a04;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ca8a04;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ca8a04 12%, transparent);
  --mat-button-outlined-state-layer-color: #ca8a04;
  --mat-button-protected-container-color: #ca8a04;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ca8a04;
  --mat-button-text-ripple-color: color-mix(in srgb, #ca8a04 12%, transparent);
  --mat-button-text-state-layer-color: #ca8a04;
  --mat-button-tonal-container-color: #ca8a04;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-yellow .mat-mdc-button.mat-accent,
.vex-theme-yellow .mat-mdc-unelevated-button.mat-accent,
.vex-theme-yellow .mat-mdc-raised-button.mat-accent,
.vex-theme-yellow .mat-mdc-outlined-button.mat-accent,
.vex-theme-yellow .mat-tonal-button.mat-accent,
.vex-theme-yellow.light .mat-mdc-button.mat-accent,
.vex-theme-yellow.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-yellow.light .mat-mdc-raised-button.mat-accent,
.vex-theme-yellow.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-yellow.light .mat-tonal-button.mat-accent,
.vex-theme-yellow .light .mat-mdc-button.mat-accent,
.vex-theme-yellow .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-yellow .light .mat-mdc-raised-button.mat-accent,
.vex-theme-yellow .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-yellow .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-yellow .mat-mdc-button.mat-warn,
.vex-theme-yellow .mat-mdc-unelevated-button.mat-warn,
.vex-theme-yellow .mat-mdc-raised-button.mat-warn,
.vex-theme-yellow .mat-mdc-outlined-button.mat-warn,
.vex-theme-yellow .mat-tonal-button.mat-warn,
.vex-theme-yellow.light .mat-mdc-button.mat-warn,
.vex-theme-yellow.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-yellow.light .mat-mdc-raised-button.mat-warn,
.vex-theme-yellow.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-yellow.light .mat-tonal-button.mat-warn,
.vex-theme-yellow .light .mat-mdc-button.mat-warn,
.vex-theme-yellow .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-yellow .light .mat-mdc-raised-button.mat-warn,
.vex-theme-yellow .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-yellow .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-icon-button.mat-primary,
.vex-theme-yellow.light .mat-mdc-icon-button.mat-primary,
.vex-theme-yellow .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #ca8a04;
  --mat-icon-button-state-layer-color: #ca8a04;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ca8a04 12%, transparent);
}
.vex-theme-yellow .mat-mdc-icon-button.mat-accent,
.vex-theme-yellow.light .mat-mdc-icon-button.mat-accent,
.vex-theme-yellow .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-yellow .mat-mdc-icon-button.mat-warn,
.vex-theme-yellow.light .mat-mdc-icon-button.mat-warn,
.vex-theme-yellow .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-mdc-fab.mat-primary,
.vex-theme-yellow .mat-mdc-mini-fab.mat-primary,
.vex-theme-yellow.light .mat-mdc-fab.mat-primary,
.vex-theme-yellow.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-yellow .light .mat-mdc-fab.mat-primary,
.vex-theme-yellow .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #ca8a04;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ca8a04 12%, transparent);
  --mat-fab-small-container-color: #ca8a04;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-yellow .mat-mdc-fab.mat-accent,
.vex-theme-yellow .mat-mdc-mini-fab.mat-accent,
.vex-theme-yellow.light .mat-mdc-fab.mat-accent,
.vex-theme-yellow.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-yellow .light .mat-mdc-fab.mat-accent,
.vex-theme-yellow .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-yellow .mat-mdc-fab.mat-warn,
.vex-theme-yellow .mat-mdc-mini-fab.mat-warn,
.vex-theme-yellow.light .mat-mdc-fab.mat-warn,
.vex-theme-yellow.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-yellow .light .mat-mdc-fab.mat-warn,
.vex-theme-yellow .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #fde047;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #ca8a04;
}
.vex-theme-yellow .mat-accent,
.vex-theme-yellow.light .mat-accent,
.vex-theme-yellow .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-yellow .mat-warn,
.vex-theme-yellow.light .mat-warn,
.vex-theme-yellow .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-badge-background-color: #ca8a04;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-yellow .mat-badge-accent,
.vex-theme-yellow.light .mat-badge-accent,
.vex-theme-yellow .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-yellow .mat-badge-warn,
.vex-theme-yellow.light .mat-badge-warn,
.vex-theme-yellow .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ca8a04 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ca8a04;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ca8a04 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ca8a04 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ca8a04 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ca8a04;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-datepicker-content.mat-accent,
.vex-theme-yellow .mat-datepicker-toggle-active.mat-accent,
.vex-theme-yellow.light .mat-datepicker-content.mat-accent,
.vex-theme-yellow.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-yellow .light .mat-datepicker-content.mat-accent,
.vex-theme-yellow .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-datepicker-content.mat-warn,
.vex-theme-yellow .mat-datepicker-toggle-active.mat-warn,
.vex-theme-yellow.light .mat-datepicker-content.mat-warn,
.vex-theme-yellow.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-yellow .light .mat-datepicker-content.mat-warn,
.vex-theme-yellow .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-yellow .mat-icon.mat-primary,
.vex-theme-yellow.light .mat-icon.mat-primary,
.vex-theme-yellow .light .mat-icon.mat-primary {
  --mat-icon-color: #ca8a04;
}
.vex-theme-yellow .mat-icon.mat-accent,
.vex-theme-yellow.light .mat-icon.mat-accent,
.vex-theme-yellow .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-yellow .mat-icon.mat-warn,
.vex-theme-yellow.light .mat-icon.mat-warn,
.vex-theme-yellow .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ca8a04;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ca8a04;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ca8a04;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-yellow .mat-step-header.mat-accent,
.vex-theme-yellow.light .mat-step-header.mat-accent,
.vex-theme-yellow .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-yellow .mat-step-header.mat-warn,
.vex-theme-yellow.light .mat-step-header.mat-warn,
.vex-theme-yellow .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-yellow .mat-toolbar.mat-primary,
.vex-theme-yellow.light .mat-toolbar.mat-primary,
.vex-theme-yellow .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #ca8a04;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-yellow .mat-toolbar.mat-accent,
.vex-theme-yellow.light .mat-toolbar.mat-accent,
.vex-theme-yellow .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-yellow .mat-toolbar.mat-warn,
.vex-theme-yellow.light .mat-toolbar.mat-warn,
.vex-theme-yellow .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-yellow,
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #eab308;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-yellow.dark .mat-accent,
.vex-theme-yellow .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-yellow.dark .mat-warn,
.vex-theme-yellow .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-yellow.dark .mat-primary,
.vex-theme-yellow .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #eab308;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #eab308;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-yellow.dark .mat-accent,
.vex-theme-yellow .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-yellow.dark .mat-warn,
.vex-theme-yellow .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-yellow.dark .mat-mdc-progress-bar,
.vex-theme-yellow .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #eab308;
  --mat-progress-bar-track-color: rgba(234, 179, 8, 0.25);
}
.vex-theme-yellow.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-yellow .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-yellow.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-yellow .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #eab308 87%, transparent);
  --mat-form-field-filled-caret-color: #eab308;
  --mat-form-field-filled-focus-active-indicator-color: #eab308;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #eab308 87%, transparent);
  --mat-form-field-outlined-caret-color: #eab308;
  --mat-form-field-outlined-focus-outline-color: #eab308;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #eab308 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-yellow.dark .mat-mdc-form-field.mat-accent,
.vex-theme-yellow .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-yellow.dark .mat-mdc-form-field.mat-warn,
.vex-theme-yellow .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #eab308;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-yellow.dark .mat-mdc-form-field.mat-accent,
.vex-theme-yellow .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-yellow.dark .mat-mdc-form-field.mat-warn,
.vex-theme-yellow .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-yellow.dark .mat-mdc-standard-chip,
.vex-theme-yellow .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-yellow.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-yellow.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-yellow .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-yellow .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #eab308;
  --mat-chip-elevated-disabled-container-color: #eab308;
  --mat-chip-elevated-selected-container-color: #eab308;
  --mat-chip-flat-disabled-selected-container-color: #eab308;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-yellow.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-yellow .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-yellow .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-yellow.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-yellow .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-yellow .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #eab308;
  --mat-slide-toggle-selected-handle-color: #eab308;
  --mat-slide-toggle-selected-hover-state-layer-color: #eab308;
  --mat-slide-toggle-selected-pressed-state-layer-color: #eab308;
  --mat-slide-toggle-selected-focus-handle-color: #eab308;
  --mat-slide-toggle-selected-hover-handle-color: #eab308;
  --mat-slide-toggle-selected-pressed-handle-color: #eab308;
  --mat-slide-toggle-selected-focus-track-color: #ca8a04;
  --mat-slide-toggle-selected-hover-track-color: #ca8a04;
  --mat-slide-toggle-selected-pressed-track-color: #ca8a04;
  --mat-slide-toggle-selected-track-color: #ca8a04;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-yellow.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-yellow .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-yellow.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-yellow .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-yellow.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-yellow .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #eab308;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #eab308;
  --mat-radio-selected-hover-icon-color: #eab308;
  --mat-radio-selected-icon-color: #eab308;
  --mat-radio-selected-pressed-icon-color: #eab308;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-yellow.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-yellow .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-yellow.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-yellow .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-slider-active-track-color: #eab308;
  --mat-slider-focus-handle-color: #eab308;
  --mat-slider-handle-color: #eab308;
  --mat-slider-hover-handle-color: #eab308;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #eab308 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #eab308 4%, transparent);
  --mat-slider-inactive-track-color: #eab308;
  --mat-slider-ripple-color: #eab308;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #eab308;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-yellow.dark .mat-accent,
.vex-theme-yellow .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-yellow.dark .mat-warn,
.vex-theme-yellow .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-yellow.dark .mdc-list-item__start,
.vex-theme-yellow.dark .mdc-list-item__end,
.vex-theme-yellow .dark .mdc-list-item__start,
.vex-theme-yellow .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #eab308;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #eab308;
  --mat-radio-selected-hover-icon-color: #eab308;
  --mat-radio-selected-icon-color: #eab308;
  --mat-radio-selected-pressed-icon-color: #eab308;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-yellow.dark .mat-accent .mdc-list-item__start,
.vex-theme-yellow.dark .mat-accent .mdc-list-item__end,
.vex-theme-yellow .dark .mat-accent .mdc-list-item__start,
.vex-theme-yellow .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-yellow.dark .mat-warn .mdc-list-item__start,
.vex-theme-yellow.dark .mat-warn .mdc-list-item__end,
.vex-theme-yellow .dark .mat-warn .mdc-list-item__start,
.vex-theme-yellow .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-yellow.dark .mat-mdc-list-option,
.vex-theme-yellow .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #eab308;
  --mat-checkbox-selected-hover-icon-color: #eab308;
  --mat-checkbox-selected-icon-color: #eab308;
  --mat-checkbox-selected-pressed-icon-color: #eab308;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #eab308;
  --mat-checkbox-selected-hover-state-layer-color: #eab308;
  --mat-checkbox-selected-pressed-state-layer-color: #eab308;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-list-option.mat-accent,
.vex-theme-yellow .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-list-option.mat-warn,
.vex-theme-yellow .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-yellow.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-yellow.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-yellow.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-yellow .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-yellow .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-yellow .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-yellow .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #eab308;
}
.vex-theme-yellow.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-yellow.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-yellow.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-yellow .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-yellow .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-yellow .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-yellow.dark .mat-mdc-tab-group,
.vex-theme-yellow.dark .mat-mdc-tab-nav-bar,
.vex-theme-yellow .dark .mat-mdc-tab-group,
.vex-theme-yellow .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #eab308;
  --mat-tab-active-ripple-color: #eab308;
  --mat-tab-inactive-ripple-color: #eab308;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #eab308;
  --mat-tab-active-hover-label-text-color: #eab308;
  --mat-tab-active-focus-indicator-color: #eab308;
  --mat-tab-active-hover-indicator-color: #eab308;
  --mat-tab-active-indicator-color: #eab308;
}
.vex-theme-yellow.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-yellow.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-yellow .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-yellow .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-yellow.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-yellow.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-yellow .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-yellow .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-yellow.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-yellow.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-yellow .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-yellow .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #eab308;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-yellow.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-yellow .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-yellow .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-yellow.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-yellow .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-yellow .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-yellow .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #eab308;
  --mat-checkbox-selected-hover-icon-color: #eab308;
  --mat-checkbox-selected-icon-color: #eab308;
  --mat-checkbox-selected-pressed-icon-color: #eab308;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #eab308;
  --mat-checkbox-selected-hover-state-layer-color: #eab308;
  --mat-checkbox-selected-pressed-state-layer-color: #eab308;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-yellow .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-button.mat-primary,
.vex-theme-yellow.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-yellow.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-yellow.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-yellow.dark .mat-tonal-button.mat-primary,
.vex-theme-yellow .dark .mat-mdc-button.mat-primary,
.vex-theme-yellow .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-yellow .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-yellow .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-yellow .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #eab308;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #eab308;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #eab308 12%, transparent);
  --mat-button-outlined-state-layer-color: #eab308;
  --mat-button-protected-container-color: #eab308;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #eab308;
  --mat-button-text-ripple-color: color-mix(in srgb, #eab308 12%, transparent);
  --mat-button-text-state-layer-color: #eab308;
  --mat-button-tonal-container-color: #eab308;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-button.mat-accent,
.vex-theme-yellow.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-yellow.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-yellow.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-yellow.dark .mat-tonal-button.mat-accent,
.vex-theme-yellow .dark .mat-mdc-button.mat-accent,
.vex-theme-yellow .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-yellow .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-yellow .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-yellow .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-button.mat-warn,
.vex-theme-yellow.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-yellow.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-yellow.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-yellow.dark .mat-tonal-button.mat-warn,
.vex-theme-yellow .dark .mat-mdc-button.mat-warn,
.vex-theme-yellow .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-yellow .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-yellow .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-yellow .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-yellow .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #eab308;
  --mat-icon-button-state-layer-color: #eab308;
  --mat-icon-button-ripple-color: color-mix(in srgb, #eab308 12%, transparent);
}
.vex-theme-yellow.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-yellow .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-yellow.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-yellow .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-yellow.dark .mat-mdc-fab.mat-primary,
.vex-theme-yellow.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-yellow .dark .mat-mdc-fab.mat-primary,
.vex-theme-yellow .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #eab308;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #eab308 12%, transparent);
  --mat-fab-small-container-color: #eab308;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-fab.mat-accent,
.vex-theme-yellow.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-yellow .dark .mat-mdc-fab.mat-accent,
.vex-theme-yellow .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-yellow.dark .mat-mdc-fab.mat-warn,
.vex-theme-yellow.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-yellow .dark .mat-mdc-fab.mat-warn,
.vex-theme-yellow .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #ca8a04;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #eab308;
}
.vex-theme-yellow.dark .mat-accent,
.vex-theme-yellow .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-yellow.dark .mat-warn,
.vex-theme-yellow .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-badge-background-color: #eab308;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-yellow.dark .mat-badge-accent,
.vex-theme-yellow .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-yellow.dark .mat-badge-warn,
.vex-theme-yellow .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #eab308 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #eab308;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #eab308 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #eab308 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #eab308 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #eab308;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-yellow.dark .mat-datepicker-content.mat-accent,
.vex-theme-yellow.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-yellow .dark .mat-datepicker-content.mat-accent,
.vex-theme-yellow .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-yellow.dark .mat-datepicker-content.mat-warn,
.vex-theme-yellow.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-yellow .dark .mat-datepicker-content.mat-warn,
.vex-theme-yellow .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-yellow.dark .mat-icon.mat-primary,
.vex-theme-yellow .dark .mat-icon.mat-primary {
  --mat-icon-color: #eab308;
}
.vex-theme-yellow.dark .mat-icon.mat-accent,
.vex-theme-yellow .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-yellow.dark .mat-icon.mat-warn,
.vex-theme-yellow .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #eab308;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #eab308;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #eab308;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-yellow.dark .mat-step-header.mat-accent,
.vex-theme-yellow .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-yellow.dark .mat-step-header.mat-warn,
.vex-theme-yellow .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-yellow.dark .mat-toolbar.mat-primary,
.vex-theme-yellow .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #eab308;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-yellow.dark .mat-toolbar.mat-accent,
.vex-theme-yellow .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-yellow.dark .mat-toolbar.mat-warn,
.vex-theme-yellow .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #65a30d;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-lime .mat-accent,
.vex-theme-lime.light .mat-accent,
.vex-theme-lime .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-lime .mat-warn,
.vex-theme-lime.light .mat-warn,
.vex-theme-lime .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-lime .mat-primary,
.vex-theme-lime.light .mat-primary,
.vex-theme-lime .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #65a30d;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #65a30d;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-lime .mat-accent,
.vex-theme-lime.light .mat-accent,
.vex-theme-lime .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-lime .mat-warn,
.vex-theme-lime.light .mat-warn,
.vex-theme-lime .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-lime .mat-mdc-progress-bar,
.vex-theme-lime.light .mat-mdc-progress-bar,
.vex-theme-lime .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #65a30d;
  --mat-progress-bar-track-color: rgba(101, 163, 13, 0.25);
}
.vex-theme-lime .mat-mdc-progress-bar.mat-accent,
.vex-theme-lime.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-lime .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-lime .mat-mdc-progress-bar.mat-warn,
.vex-theme-lime.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-lime .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #65a30d 87%, transparent);
  --mat-form-field-filled-caret-color: #65a30d;
  --mat-form-field-filled-focus-active-indicator-color: #65a30d;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #65a30d 87%, transparent);
  --mat-form-field-outlined-caret-color: #65a30d;
  --mat-form-field-outlined-focus-outline-color: #65a30d;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #65a30d 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-lime .mat-mdc-form-field.mat-accent,
.vex-theme-lime.light .mat-mdc-form-field.mat-accent,
.vex-theme-lime .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-lime .mat-mdc-form-field.mat-warn,
.vex-theme-lime.light .mat-mdc-form-field.mat-warn,
.vex-theme-lime .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #65a30d;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-lime .mat-mdc-form-field.mat-accent,
.vex-theme-lime.light .mat-mdc-form-field.mat-accent,
.vex-theme-lime .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-lime .mat-mdc-form-field.mat-warn,
.vex-theme-lime.light .mat-mdc-form-field.mat-warn,
.vex-theme-lime .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-lime .mat-mdc-standard-chip,
.vex-theme-lime.light .mat-mdc-standard-chip,
.vex-theme-lime .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-lime .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-lime.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-lime.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-lime .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-lime .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #65a30d;
  --mat-chip-elevated-disabled-container-color: #65a30d;
  --mat-chip-elevated-selected-container-color: #65a30d;
  --mat-chip-flat-disabled-selected-container-color: #65a30d;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-lime .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-lime .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-lime.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-lime.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-lime .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-lime .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-lime .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-lime .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-lime.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-lime.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-lime .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-lime .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #65a30d;
  --mat-slide-toggle-selected-handle-color: #65a30d;
  --mat-slide-toggle-selected-hover-state-layer-color: #65a30d;
  --mat-slide-toggle-selected-pressed-state-layer-color: #65a30d;
  --mat-slide-toggle-selected-focus-handle-color: #65a30d;
  --mat-slide-toggle-selected-hover-handle-color: #65a30d;
  --mat-slide-toggle-selected-pressed-handle-color: #65a30d;
  --mat-slide-toggle-selected-focus-track-color: #bef264;
  --mat-slide-toggle-selected-hover-track-color: #bef264;
  --mat-slide-toggle-selected-pressed-track-color: #bef264;
  --mat-slide-toggle-selected-track-color: #bef264;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-lime .mat-mdc-slide-toggle.mat-accent,
.vex-theme-lime.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-lime .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-lime .mat-mdc-slide-toggle.mat-warn,
.vex-theme-lime.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-lime .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-lime .mat-mdc-radio-button.mat-primary,
.vex-theme-lime.light .mat-mdc-radio-button.mat-primary,
.vex-theme-lime .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #65a30d;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #65a30d;
  --mat-radio-selected-hover-icon-color: #65a30d;
  --mat-radio-selected-icon-color: #65a30d;
  --mat-radio-selected-pressed-icon-color: #65a30d;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-radio-button.mat-accent,
.vex-theme-lime.light .mat-mdc-radio-button.mat-accent,
.vex-theme-lime .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-radio-button.mat-warn,
.vex-theme-lime.light .mat-mdc-radio-button.mat-warn,
.vex-theme-lime .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-slider-active-track-color: #65a30d;
  --mat-slider-focus-handle-color: #65a30d;
  --mat-slider-handle-color: #65a30d;
  --mat-slider-hover-handle-color: #65a30d;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #65a30d 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #65a30d 4%, transparent);
  --mat-slider-inactive-track-color: #65a30d;
  --mat-slider-ripple-color: #65a30d;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #65a30d;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-accent,
.vex-theme-lime.light .mat-accent,
.vex-theme-lime .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-lime .mat-warn,
.vex-theme-lime.light .mat-warn,
.vex-theme-lime .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-lime .mdc-list-item__start,
.vex-theme-lime .mdc-list-item__end,
.vex-theme-lime.light .mdc-list-item__start,
.vex-theme-lime.light .mdc-list-item__end,
.vex-theme-lime .light .mdc-list-item__start,
.vex-theme-lime .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #65a30d;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #65a30d;
  --mat-radio-selected-hover-icon-color: #65a30d;
  --mat-radio-selected-icon-color: #65a30d;
  --mat-radio-selected-pressed-icon-color: #65a30d;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-accent .mdc-list-item__start,
.vex-theme-lime .mat-accent .mdc-list-item__end,
.vex-theme-lime.light .mat-accent .mdc-list-item__start,
.vex-theme-lime.light .mat-accent .mdc-list-item__end,
.vex-theme-lime .light .mat-accent .mdc-list-item__start,
.vex-theme-lime .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-warn .mdc-list-item__start,
.vex-theme-lime .mat-warn .mdc-list-item__end,
.vex-theme-lime.light .mat-warn .mdc-list-item__start,
.vex-theme-lime.light .mat-warn .mdc-list-item__end,
.vex-theme-lime .light .mat-warn .mdc-list-item__start,
.vex-theme-lime .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-list-option,
.vex-theme-lime.light .mat-mdc-list-option,
.vex-theme-lime .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #65a30d;
  --mat-checkbox-selected-hover-icon-color: #65a30d;
  --mat-checkbox-selected-icon-color: #65a30d;
  --mat-checkbox-selected-pressed-icon-color: #65a30d;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #65a30d;
  --mat-checkbox-selected-hover-state-layer-color: #65a30d;
  --mat-checkbox-selected-pressed-state-layer-color: #65a30d;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-list-option.mat-accent,
.vex-theme-lime.light .mat-mdc-list-option.mat-accent,
.vex-theme-lime .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-list-option.mat-warn,
.vex-theme-lime.light .mat-mdc-list-option.mat-warn,
.vex-theme-lime .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-lime .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-lime .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-lime .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-lime.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-lime.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-lime.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-lime.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-lime .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-lime .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-lime .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-lime .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #65a30d;
}
.vex-theme-lime .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-lime .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-lime .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-lime.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-lime.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-lime.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-lime .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-lime .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-lime .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-lime .mat-mdc-tab-group,
.vex-theme-lime .mat-mdc-tab-nav-bar,
.vex-theme-lime.light .mat-mdc-tab-group,
.vex-theme-lime.light .mat-mdc-tab-nav-bar,
.vex-theme-lime .light .mat-mdc-tab-group,
.vex-theme-lime .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #65a30d;
  --mat-tab-active-ripple-color: #65a30d;
  --mat-tab-inactive-ripple-color: #65a30d;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #65a30d;
  --mat-tab-active-hover-label-text-color: #65a30d;
  --mat-tab-active-focus-indicator-color: #65a30d;
  --mat-tab-active-hover-indicator-color: #65a30d;
  --mat-tab-active-indicator-color: #65a30d;
}
.vex-theme-lime .mat-mdc-tab-group.mat-accent,
.vex-theme-lime .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-lime.light .mat-mdc-tab-group.mat-accent,
.vex-theme-lime.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-lime .light .mat-mdc-tab-group.mat-accent,
.vex-theme-lime .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-lime .mat-mdc-tab-group.mat-warn,
.vex-theme-lime .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-lime.light .mat-mdc-tab-group.mat-warn,
.vex-theme-lime.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-lime .light .mat-mdc-tab-group.mat-warn,
.vex-theme-lime .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-lime .mat-mdc-tab-group.mat-background-primary,
.vex-theme-lime .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-lime.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-lime.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-lime .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-lime .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #65a30d;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-lime .mat-mdc-tab-group.mat-background-accent,
.vex-theme-lime .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-lime.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-lime.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-lime .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-lime .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-lime .mat-mdc-tab-group.mat-background-warn,
.vex-theme-lime .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-lime.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-lime.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-lime .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-lime .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-checkbox.mat-primary,
.vex-theme-lime.light .mat-mdc-checkbox.mat-primary,
.vex-theme-lime .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #65a30d;
  --mat-checkbox-selected-hover-icon-color: #65a30d;
  --mat-checkbox-selected-icon-color: #65a30d;
  --mat-checkbox-selected-pressed-icon-color: #65a30d;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #65a30d;
  --mat-checkbox-selected-hover-state-layer-color: #65a30d;
  --mat-checkbox-selected-pressed-state-layer-color: #65a30d;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-checkbox.mat-warn,
.vex-theme-lime.light .mat-mdc-checkbox.mat-warn,
.vex-theme-lime .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-button.mat-primary,
.vex-theme-lime .mat-mdc-unelevated-button.mat-primary,
.vex-theme-lime .mat-mdc-raised-button.mat-primary,
.vex-theme-lime .mat-mdc-outlined-button.mat-primary,
.vex-theme-lime .mat-tonal-button.mat-primary,
.vex-theme-lime.light .mat-mdc-button.mat-primary,
.vex-theme-lime.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-lime.light .mat-mdc-raised-button.mat-primary,
.vex-theme-lime.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-lime.light .mat-tonal-button.mat-primary,
.vex-theme-lime .light .mat-mdc-button.mat-primary,
.vex-theme-lime .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-lime .light .mat-mdc-raised-button.mat-primary,
.vex-theme-lime .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-lime .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #65a30d;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #65a30d;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #65a30d 12%, transparent);
  --mat-button-outlined-state-layer-color: #65a30d;
  --mat-button-protected-container-color: #65a30d;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #65a30d;
  --mat-button-text-ripple-color: color-mix(in srgb, #65a30d 12%, transparent);
  --mat-button-text-state-layer-color: #65a30d;
  --mat-button-tonal-container-color: #65a30d;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-lime .mat-mdc-button.mat-accent,
.vex-theme-lime .mat-mdc-unelevated-button.mat-accent,
.vex-theme-lime .mat-mdc-raised-button.mat-accent,
.vex-theme-lime .mat-mdc-outlined-button.mat-accent,
.vex-theme-lime .mat-tonal-button.mat-accent,
.vex-theme-lime.light .mat-mdc-button.mat-accent,
.vex-theme-lime.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-lime.light .mat-mdc-raised-button.mat-accent,
.vex-theme-lime.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-lime.light .mat-tonal-button.mat-accent,
.vex-theme-lime .light .mat-mdc-button.mat-accent,
.vex-theme-lime .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-lime .light .mat-mdc-raised-button.mat-accent,
.vex-theme-lime .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-lime .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-lime .mat-mdc-button.mat-warn,
.vex-theme-lime .mat-mdc-unelevated-button.mat-warn,
.vex-theme-lime .mat-mdc-raised-button.mat-warn,
.vex-theme-lime .mat-mdc-outlined-button.mat-warn,
.vex-theme-lime .mat-tonal-button.mat-warn,
.vex-theme-lime.light .mat-mdc-button.mat-warn,
.vex-theme-lime.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-lime.light .mat-mdc-raised-button.mat-warn,
.vex-theme-lime.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-lime.light .mat-tonal-button.mat-warn,
.vex-theme-lime .light .mat-mdc-button.mat-warn,
.vex-theme-lime .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-lime .light .mat-mdc-raised-button.mat-warn,
.vex-theme-lime .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-lime .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-icon-button.mat-primary,
.vex-theme-lime.light .mat-mdc-icon-button.mat-primary,
.vex-theme-lime .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #65a30d;
  --mat-icon-button-state-layer-color: #65a30d;
  --mat-icon-button-ripple-color: color-mix(in srgb, #65a30d 12%, transparent);
}
.vex-theme-lime .mat-mdc-icon-button.mat-accent,
.vex-theme-lime.light .mat-mdc-icon-button.mat-accent,
.vex-theme-lime .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-lime .mat-mdc-icon-button.mat-warn,
.vex-theme-lime.light .mat-mdc-icon-button.mat-warn,
.vex-theme-lime .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-mdc-fab.mat-primary,
.vex-theme-lime .mat-mdc-mini-fab.mat-primary,
.vex-theme-lime.light .mat-mdc-fab.mat-primary,
.vex-theme-lime.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-lime .light .mat-mdc-fab.mat-primary,
.vex-theme-lime .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #65a30d;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #65a30d 12%, transparent);
  --mat-fab-small-container-color: #65a30d;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-lime .mat-mdc-fab.mat-accent,
.vex-theme-lime .mat-mdc-mini-fab.mat-accent,
.vex-theme-lime.light .mat-mdc-fab.mat-accent,
.vex-theme-lime.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-lime .light .mat-mdc-fab.mat-accent,
.vex-theme-lime .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-lime .mat-mdc-fab.mat-warn,
.vex-theme-lime .mat-mdc-mini-fab.mat-warn,
.vex-theme-lime.light .mat-mdc-fab.mat-warn,
.vex-theme-lime.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-lime .light .mat-mdc-fab.mat-warn,
.vex-theme-lime .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #bef264;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #65a30d;
}
.vex-theme-lime .mat-accent,
.vex-theme-lime.light .mat-accent,
.vex-theme-lime .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-lime .mat-warn,
.vex-theme-lime.light .mat-warn,
.vex-theme-lime .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-badge-background-color: #65a30d;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-lime .mat-badge-accent,
.vex-theme-lime.light .mat-badge-accent,
.vex-theme-lime .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-lime .mat-badge-warn,
.vex-theme-lime.light .mat-badge-warn,
.vex-theme-lime .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #65a30d 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #65a30d;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #65a30d 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #65a30d 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #65a30d 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #65a30d;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-datepicker-content.mat-accent,
.vex-theme-lime .mat-datepicker-toggle-active.mat-accent,
.vex-theme-lime.light .mat-datepicker-content.mat-accent,
.vex-theme-lime.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-lime .light .mat-datepicker-content.mat-accent,
.vex-theme-lime .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-datepicker-content.mat-warn,
.vex-theme-lime .mat-datepicker-toggle-active.mat-warn,
.vex-theme-lime.light .mat-datepicker-content.mat-warn,
.vex-theme-lime.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-lime .light .mat-datepicker-content.mat-warn,
.vex-theme-lime .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-lime .mat-icon.mat-primary,
.vex-theme-lime.light .mat-icon.mat-primary,
.vex-theme-lime .light .mat-icon.mat-primary {
  --mat-icon-color: #65a30d;
}
.vex-theme-lime .mat-icon.mat-accent,
.vex-theme-lime.light .mat-icon.mat-accent,
.vex-theme-lime .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-lime .mat-icon.mat-warn,
.vex-theme-lime.light .mat-icon.mat-warn,
.vex-theme-lime .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #65a30d;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #65a30d;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #65a30d;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-lime .mat-step-header.mat-accent,
.vex-theme-lime.light .mat-step-header.mat-accent,
.vex-theme-lime .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-lime .mat-step-header.mat-warn,
.vex-theme-lime.light .mat-step-header.mat-warn,
.vex-theme-lime .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-lime .mat-toolbar.mat-primary,
.vex-theme-lime.light .mat-toolbar.mat-primary,
.vex-theme-lime .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #65a30d;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-lime .mat-toolbar.mat-accent,
.vex-theme-lime.light .mat-toolbar.mat-accent,
.vex-theme-lime .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-lime .mat-toolbar.mat-warn,
.vex-theme-lime.light .mat-toolbar.mat-warn,
.vex-theme-lime .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-lime,
.vex-theme-lime.light,
.vex-theme-lime .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #84cc16;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-lime.dark .mat-accent,
.vex-theme-lime .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-lime.dark .mat-warn,
.vex-theme-lime .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-lime.dark .mat-primary,
.vex-theme-lime .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #84cc16;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #84cc16;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-lime.dark .mat-accent,
.vex-theme-lime .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-lime.dark .mat-warn,
.vex-theme-lime .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-lime.dark .mat-mdc-progress-bar,
.vex-theme-lime .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #84cc16;
  --mat-progress-bar-track-color: rgba(132, 204, 22, 0.25);
}
.vex-theme-lime.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-lime .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-lime.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-lime .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #84cc16 87%, transparent);
  --mat-form-field-filled-caret-color: #84cc16;
  --mat-form-field-filled-focus-active-indicator-color: #84cc16;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #84cc16 87%, transparent);
  --mat-form-field-outlined-caret-color: #84cc16;
  --mat-form-field-outlined-focus-outline-color: #84cc16;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #84cc16 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-lime.dark .mat-mdc-form-field.mat-accent,
.vex-theme-lime .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-lime.dark .mat-mdc-form-field.mat-warn,
.vex-theme-lime .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #84cc16;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-lime.dark .mat-mdc-form-field.mat-accent,
.vex-theme-lime .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-lime.dark .mat-mdc-form-field.mat-warn,
.vex-theme-lime .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-lime.dark .mat-mdc-standard-chip,
.vex-theme-lime .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-lime.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-lime.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-lime .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-lime .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #84cc16;
  --mat-chip-elevated-disabled-container-color: #84cc16;
  --mat-chip-elevated-selected-container-color: #84cc16;
  --mat-chip-flat-disabled-selected-container-color: #84cc16;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-lime.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-lime .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-lime .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-lime.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-lime .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-lime .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #84cc16;
  --mat-slide-toggle-selected-handle-color: #84cc16;
  --mat-slide-toggle-selected-hover-state-layer-color: #84cc16;
  --mat-slide-toggle-selected-pressed-state-layer-color: #84cc16;
  --mat-slide-toggle-selected-focus-handle-color: #84cc16;
  --mat-slide-toggle-selected-hover-handle-color: #84cc16;
  --mat-slide-toggle-selected-pressed-handle-color: #84cc16;
  --mat-slide-toggle-selected-focus-track-color: #65a30d;
  --mat-slide-toggle-selected-hover-track-color: #65a30d;
  --mat-slide-toggle-selected-pressed-track-color: #65a30d;
  --mat-slide-toggle-selected-track-color: #65a30d;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-lime.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-lime .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-lime.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-lime .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-lime.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-lime .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #84cc16;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #84cc16;
  --mat-radio-selected-hover-icon-color: #84cc16;
  --mat-radio-selected-icon-color: #84cc16;
  --mat-radio-selected-pressed-icon-color: #84cc16;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-lime.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-lime .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-lime.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-lime .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-slider-active-track-color: #84cc16;
  --mat-slider-focus-handle-color: #84cc16;
  --mat-slider-handle-color: #84cc16;
  --mat-slider-hover-handle-color: #84cc16;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #84cc16 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #84cc16 4%, transparent);
  --mat-slider-inactive-track-color: #84cc16;
  --mat-slider-ripple-color: #84cc16;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #84cc16;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-lime.dark .mat-accent,
.vex-theme-lime .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-lime.dark .mat-warn,
.vex-theme-lime .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-lime.dark .mdc-list-item__start,
.vex-theme-lime.dark .mdc-list-item__end,
.vex-theme-lime .dark .mdc-list-item__start,
.vex-theme-lime .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #84cc16;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #84cc16;
  --mat-radio-selected-hover-icon-color: #84cc16;
  --mat-radio-selected-icon-color: #84cc16;
  --mat-radio-selected-pressed-icon-color: #84cc16;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-lime.dark .mat-accent .mdc-list-item__start,
.vex-theme-lime.dark .mat-accent .mdc-list-item__end,
.vex-theme-lime .dark .mat-accent .mdc-list-item__start,
.vex-theme-lime .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-lime.dark .mat-warn .mdc-list-item__start,
.vex-theme-lime.dark .mat-warn .mdc-list-item__end,
.vex-theme-lime .dark .mat-warn .mdc-list-item__start,
.vex-theme-lime .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-lime.dark .mat-mdc-list-option,
.vex-theme-lime .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #84cc16;
  --mat-checkbox-selected-hover-icon-color: #84cc16;
  --mat-checkbox-selected-icon-color: #84cc16;
  --mat-checkbox-selected-pressed-icon-color: #84cc16;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #84cc16;
  --mat-checkbox-selected-hover-state-layer-color: #84cc16;
  --mat-checkbox-selected-pressed-state-layer-color: #84cc16;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-list-option.mat-accent,
.vex-theme-lime .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-list-option.mat-warn,
.vex-theme-lime .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-lime.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-lime.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-lime.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-lime .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-lime .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-lime .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-lime .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #84cc16;
}
.vex-theme-lime.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-lime.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-lime.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-lime .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-lime .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-lime .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-lime.dark .mat-mdc-tab-group,
.vex-theme-lime.dark .mat-mdc-tab-nav-bar,
.vex-theme-lime .dark .mat-mdc-tab-group,
.vex-theme-lime .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #84cc16;
  --mat-tab-active-ripple-color: #84cc16;
  --mat-tab-inactive-ripple-color: #84cc16;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #84cc16;
  --mat-tab-active-hover-label-text-color: #84cc16;
  --mat-tab-active-focus-indicator-color: #84cc16;
  --mat-tab-active-hover-indicator-color: #84cc16;
  --mat-tab-active-indicator-color: #84cc16;
}
.vex-theme-lime.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-lime.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-lime .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-lime .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-lime.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-lime.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-lime .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-lime .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-lime.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-lime.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-lime .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-lime .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #84cc16;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-lime.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-lime .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-lime .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-lime.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-lime .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-lime .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-lime .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #84cc16;
  --mat-checkbox-selected-hover-icon-color: #84cc16;
  --mat-checkbox-selected-icon-color: #84cc16;
  --mat-checkbox-selected-pressed-icon-color: #84cc16;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #84cc16;
  --mat-checkbox-selected-hover-state-layer-color: #84cc16;
  --mat-checkbox-selected-pressed-state-layer-color: #84cc16;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-lime .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-button.mat-primary,
.vex-theme-lime.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-lime.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-lime.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-lime.dark .mat-tonal-button.mat-primary,
.vex-theme-lime .dark .mat-mdc-button.mat-primary,
.vex-theme-lime .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-lime .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-lime .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-lime .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #84cc16;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #84cc16;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #84cc16 12%, transparent);
  --mat-button-outlined-state-layer-color: #84cc16;
  --mat-button-protected-container-color: #84cc16;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #84cc16;
  --mat-button-text-ripple-color: color-mix(in srgb, #84cc16 12%, transparent);
  --mat-button-text-state-layer-color: #84cc16;
  --mat-button-tonal-container-color: #84cc16;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-button.mat-accent,
.vex-theme-lime.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-lime.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-lime.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-lime.dark .mat-tonal-button.mat-accent,
.vex-theme-lime .dark .mat-mdc-button.mat-accent,
.vex-theme-lime .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-lime .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-lime .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-lime .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-button.mat-warn,
.vex-theme-lime.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-lime.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-lime.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-lime.dark .mat-tonal-button.mat-warn,
.vex-theme-lime .dark .mat-mdc-button.mat-warn,
.vex-theme-lime .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-lime .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-lime .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-lime .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-lime .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #84cc16;
  --mat-icon-button-state-layer-color: #84cc16;
  --mat-icon-button-ripple-color: color-mix(in srgb, #84cc16 12%, transparent);
}
.vex-theme-lime.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-lime .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-lime.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-lime .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-lime.dark .mat-mdc-fab.mat-primary,
.vex-theme-lime.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-lime .dark .mat-mdc-fab.mat-primary,
.vex-theme-lime .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #84cc16;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #84cc16 12%, transparent);
  --mat-fab-small-container-color: #84cc16;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-fab.mat-accent,
.vex-theme-lime.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-lime .dark .mat-mdc-fab.mat-accent,
.vex-theme-lime .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-lime.dark .mat-mdc-fab.mat-warn,
.vex-theme-lime.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-lime .dark .mat-mdc-fab.mat-warn,
.vex-theme-lime .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #65a30d;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #84cc16;
}
.vex-theme-lime.dark .mat-accent,
.vex-theme-lime .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-lime.dark .mat-warn,
.vex-theme-lime .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-badge-background-color: #84cc16;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-lime.dark .mat-badge-accent,
.vex-theme-lime .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-lime.dark .mat-badge-warn,
.vex-theme-lime .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #84cc16 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #84cc16;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #84cc16 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #84cc16 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #84cc16 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #84cc16;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-lime.dark .mat-datepicker-content.mat-accent,
.vex-theme-lime.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-lime .dark .mat-datepicker-content.mat-accent,
.vex-theme-lime .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-lime.dark .mat-datepicker-content.mat-warn,
.vex-theme-lime.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-lime .dark .mat-datepicker-content.mat-warn,
.vex-theme-lime .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-lime.dark .mat-icon.mat-primary,
.vex-theme-lime .dark .mat-icon.mat-primary {
  --mat-icon-color: #84cc16;
}
.vex-theme-lime.dark .mat-icon.mat-accent,
.vex-theme-lime .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-lime.dark .mat-icon.mat-warn,
.vex-theme-lime .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #84cc16;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #84cc16;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #84cc16;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-lime.dark .mat-step-header.mat-accent,
.vex-theme-lime .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-lime.dark .mat-step-header.mat-warn,
.vex-theme-lime .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-lime.dark .mat-toolbar.mat-primary,
.vex-theme-lime .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #84cc16;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-lime.dark .mat-toolbar.mat-accent,
.vex-theme-lime .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-lime.dark .mat-toolbar.mat-warn,
.vex-theme-lime .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #16a34a;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-green .mat-accent,
.vex-theme-green.light .mat-accent,
.vex-theme-green .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-green .mat-warn,
.vex-theme-green.light .mat-warn,
.vex-theme-green .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-green .mat-primary,
.vex-theme-green.light .mat-primary,
.vex-theme-green .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #16a34a;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #16a34a;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-green .mat-accent,
.vex-theme-green.light .mat-accent,
.vex-theme-green .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-green .mat-warn,
.vex-theme-green.light .mat-warn,
.vex-theme-green .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-green .mat-mdc-progress-bar,
.vex-theme-green.light .mat-mdc-progress-bar,
.vex-theme-green .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #16a34a;
  --mat-progress-bar-track-color: rgba(22, 163, 74, 0.25);
}
.vex-theme-green .mat-mdc-progress-bar.mat-accent,
.vex-theme-green.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-green .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-green .mat-mdc-progress-bar.mat-warn,
.vex-theme-green.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-green .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #16a34a 87%, transparent);
  --mat-form-field-filled-caret-color: #16a34a;
  --mat-form-field-filled-focus-active-indicator-color: #16a34a;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #16a34a 87%, transparent);
  --mat-form-field-outlined-caret-color: #16a34a;
  --mat-form-field-outlined-focus-outline-color: #16a34a;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #16a34a 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-green .mat-mdc-form-field.mat-accent,
.vex-theme-green.light .mat-mdc-form-field.mat-accent,
.vex-theme-green .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-green .mat-mdc-form-field.mat-warn,
.vex-theme-green.light .mat-mdc-form-field.mat-warn,
.vex-theme-green .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #16a34a;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-green .mat-mdc-form-field.mat-accent,
.vex-theme-green.light .mat-mdc-form-field.mat-accent,
.vex-theme-green .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-green .mat-mdc-form-field.mat-warn,
.vex-theme-green.light .mat-mdc-form-field.mat-warn,
.vex-theme-green .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-green .mat-mdc-standard-chip,
.vex-theme-green.light .mat-mdc-standard-chip,
.vex-theme-green .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-green .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-green.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-green.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-green .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-green .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #16a34a;
  --mat-chip-elevated-disabled-container-color: #16a34a;
  --mat-chip-elevated-selected-container-color: #16a34a;
  --mat-chip-flat-disabled-selected-container-color: #16a34a;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-green .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-green .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-green.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-green.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-green .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-green .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-green .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-green .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-green.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-green.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-green .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-green .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #16a34a;
  --mat-slide-toggle-selected-handle-color: #16a34a;
  --mat-slide-toggle-selected-hover-state-layer-color: #16a34a;
  --mat-slide-toggle-selected-pressed-state-layer-color: #16a34a;
  --mat-slide-toggle-selected-focus-handle-color: #16a34a;
  --mat-slide-toggle-selected-hover-handle-color: #16a34a;
  --mat-slide-toggle-selected-pressed-handle-color: #16a34a;
  --mat-slide-toggle-selected-focus-track-color: #86efac;
  --mat-slide-toggle-selected-hover-track-color: #86efac;
  --mat-slide-toggle-selected-pressed-track-color: #86efac;
  --mat-slide-toggle-selected-track-color: #86efac;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-green .mat-mdc-slide-toggle.mat-accent,
.vex-theme-green.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-green .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-green .mat-mdc-slide-toggle.mat-warn,
.vex-theme-green.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-green .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-green .mat-mdc-radio-button.mat-primary,
.vex-theme-green.light .mat-mdc-radio-button.mat-primary,
.vex-theme-green .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #16a34a;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #16a34a;
  --mat-radio-selected-hover-icon-color: #16a34a;
  --mat-radio-selected-icon-color: #16a34a;
  --mat-radio-selected-pressed-icon-color: #16a34a;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-radio-button.mat-accent,
.vex-theme-green.light .mat-mdc-radio-button.mat-accent,
.vex-theme-green .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-radio-button.mat-warn,
.vex-theme-green.light .mat-mdc-radio-button.mat-warn,
.vex-theme-green .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-slider-active-track-color: #16a34a;
  --mat-slider-focus-handle-color: #16a34a;
  --mat-slider-handle-color: #16a34a;
  --mat-slider-hover-handle-color: #16a34a;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #16a34a 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #16a34a 4%, transparent);
  --mat-slider-inactive-track-color: #16a34a;
  --mat-slider-ripple-color: #16a34a;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #16a34a;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-accent,
.vex-theme-green.light .mat-accent,
.vex-theme-green .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-green .mat-warn,
.vex-theme-green.light .mat-warn,
.vex-theme-green .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-green .mdc-list-item__start,
.vex-theme-green .mdc-list-item__end,
.vex-theme-green.light .mdc-list-item__start,
.vex-theme-green.light .mdc-list-item__end,
.vex-theme-green .light .mdc-list-item__start,
.vex-theme-green .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #16a34a;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #16a34a;
  --mat-radio-selected-hover-icon-color: #16a34a;
  --mat-radio-selected-icon-color: #16a34a;
  --mat-radio-selected-pressed-icon-color: #16a34a;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-accent .mdc-list-item__start,
.vex-theme-green .mat-accent .mdc-list-item__end,
.vex-theme-green.light .mat-accent .mdc-list-item__start,
.vex-theme-green.light .mat-accent .mdc-list-item__end,
.vex-theme-green .light .mat-accent .mdc-list-item__start,
.vex-theme-green .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-warn .mdc-list-item__start,
.vex-theme-green .mat-warn .mdc-list-item__end,
.vex-theme-green.light .mat-warn .mdc-list-item__start,
.vex-theme-green.light .mat-warn .mdc-list-item__end,
.vex-theme-green .light .mat-warn .mdc-list-item__start,
.vex-theme-green .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-list-option,
.vex-theme-green.light .mat-mdc-list-option,
.vex-theme-green .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #16a34a;
  --mat-checkbox-selected-hover-icon-color: #16a34a;
  --mat-checkbox-selected-icon-color: #16a34a;
  --mat-checkbox-selected-pressed-icon-color: #16a34a;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #16a34a;
  --mat-checkbox-selected-hover-state-layer-color: #16a34a;
  --mat-checkbox-selected-pressed-state-layer-color: #16a34a;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-list-option.mat-accent,
.vex-theme-green.light .mat-mdc-list-option.mat-accent,
.vex-theme-green .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-list-option.mat-warn,
.vex-theme-green.light .mat-mdc-list-option.mat-warn,
.vex-theme-green .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-green .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-green .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-green .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-green.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-green.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-green.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-green.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-green .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-green .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-green .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-green .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #16a34a;
}
.vex-theme-green .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-green .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-green .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-green.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-green.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-green.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-green .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-green .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-green .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-green .mat-mdc-tab-group,
.vex-theme-green .mat-mdc-tab-nav-bar,
.vex-theme-green.light .mat-mdc-tab-group,
.vex-theme-green.light .mat-mdc-tab-nav-bar,
.vex-theme-green .light .mat-mdc-tab-group,
.vex-theme-green .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #16a34a;
  --mat-tab-active-ripple-color: #16a34a;
  --mat-tab-inactive-ripple-color: #16a34a;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #16a34a;
  --mat-tab-active-hover-label-text-color: #16a34a;
  --mat-tab-active-focus-indicator-color: #16a34a;
  --mat-tab-active-hover-indicator-color: #16a34a;
  --mat-tab-active-indicator-color: #16a34a;
}
.vex-theme-green .mat-mdc-tab-group.mat-accent,
.vex-theme-green .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-green.light .mat-mdc-tab-group.mat-accent,
.vex-theme-green.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-green .light .mat-mdc-tab-group.mat-accent,
.vex-theme-green .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-green .mat-mdc-tab-group.mat-warn,
.vex-theme-green .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-green.light .mat-mdc-tab-group.mat-warn,
.vex-theme-green.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-green .light .mat-mdc-tab-group.mat-warn,
.vex-theme-green .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-green .mat-mdc-tab-group.mat-background-primary,
.vex-theme-green .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-green.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-green.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-green .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-green .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #16a34a;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-green .mat-mdc-tab-group.mat-background-accent,
.vex-theme-green .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-green.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-green.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-green .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-green .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-green .mat-mdc-tab-group.mat-background-warn,
.vex-theme-green .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-green.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-green.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-green .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-green .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-checkbox.mat-primary,
.vex-theme-green.light .mat-mdc-checkbox.mat-primary,
.vex-theme-green .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #16a34a;
  --mat-checkbox-selected-hover-icon-color: #16a34a;
  --mat-checkbox-selected-icon-color: #16a34a;
  --mat-checkbox-selected-pressed-icon-color: #16a34a;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #16a34a;
  --mat-checkbox-selected-hover-state-layer-color: #16a34a;
  --mat-checkbox-selected-pressed-state-layer-color: #16a34a;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-checkbox.mat-warn,
.vex-theme-green.light .mat-mdc-checkbox.mat-warn,
.vex-theme-green .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-button.mat-primary,
.vex-theme-green .mat-mdc-unelevated-button.mat-primary,
.vex-theme-green .mat-mdc-raised-button.mat-primary,
.vex-theme-green .mat-mdc-outlined-button.mat-primary,
.vex-theme-green .mat-tonal-button.mat-primary,
.vex-theme-green.light .mat-mdc-button.mat-primary,
.vex-theme-green.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-green.light .mat-mdc-raised-button.mat-primary,
.vex-theme-green.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-green.light .mat-tonal-button.mat-primary,
.vex-theme-green .light .mat-mdc-button.mat-primary,
.vex-theme-green .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-green .light .mat-mdc-raised-button.mat-primary,
.vex-theme-green .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-green .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #16a34a;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #16a34a;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #16a34a 12%, transparent);
  --mat-button-outlined-state-layer-color: #16a34a;
  --mat-button-protected-container-color: #16a34a;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #16a34a;
  --mat-button-text-ripple-color: color-mix(in srgb, #16a34a 12%, transparent);
  --mat-button-text-state-layer-color: #16a34a;
  --mat-button-tonal-container-color: #16a34a;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-green .mat-mdc-button.mat-accent,
.vex-theme-green .mat-mdc-unelevated-button.mat-accent,
.vex-theme-green .mat-mdc-raised-button.mat-accent,
.vex-theme-green .mat-mdc-outlined-button.mat-accent,
.vex-theme-green .mat-tonal-button.mat-accent,
.vex-theme-green.light .mat-mdc-button.mat-accent,
.vex-theme-green.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-green.light .mat-mdc-raised-button.mat-accent,
.vex-theme-green.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-green.light .mat-tonal-button.mat-accent,
.vex-theme-green .light .mat-mdc-button.mat-accent,
.vex-theme-green .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-green .light .mat-mdc-raised-button.mat-accent,
.vex-theme-green .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-green .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-green .mat-mdc-button.mat-warn,
.vex-theme-green .mat-mdc-unelevated-button.mat-warn,
.vex-theme-green .mat-mdc-raised-button.mat-warn,
.vex-theme-green .mat-mdc-outlined-button.mat-warn,
.vex-theme-green .mat-tonal-button.mat-warn,
.vex-theme-green.light .mat-mdc-button.mat-warn,
.vex-theme-green.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-green.light .mat-mdc-raised-button.mat-warn,
.vex-theme-green.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-green.light .mat-tonal-button.mat-warn,
.vex-theme-green .light .mat-mdc-button.mat-warn,
.vex-theme-green .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-green .light .mat-mdc-raised-button.mat-warn,
.vex-theme-green .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-green .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-icon-button.mat-primary,
.vex-theme-green.light .mat-mdc-icon-button.mat-primary,
.vex-theme-green .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #16a34a;
  --mat-icon-button-state-layer-color: #16a34a;
  --mat-icon-button-ripple-color: color-mix(in srgb, #16a34a 12%, transparent);
}
.vex-theme-green .mat-mdc-icon-button.mat-accent,
.vex-theme-green.light .mat-mdc-icon-button.mat-accent,
.vex-theme-green .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-green .mat-mdc-icon-button.mat-warn,
.vex-theme-green.light .mat-mdc-icon-button.mat-warn,
.vex-theme-green .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-mdc-fab.mat-primary,
.vex-theme-green .mat-mdc-mini-fab.mat-primary,
.vex-theme-green.light .mat-mdc-fab.mat-primary,
.vex-theme-green.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-green .light .mat-mdc-fab.mat-primary,
.vex-theme-green .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #16a34a;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #16a34a 12%, transparent);
  --mat-fab-small-container-color: #16a34a;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-green .mat-mdc-fab.mat-accent,
.vex-theme-green .mat-mdc-mini-fab.mat-accent,
.vex-theme-green.light .mat-mdc-fab.mat-accent,
.vex-theme-green.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-green .light .mat-mdc-fab.mat-accent,
.vex-theme-green .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-green .mat-mdc-fab.mat-warn,
.vex-theme-green .mat-mdc-mini-fab.mat-warn,
.vex-theme-green.light .mat-mdc-fab.mat-warn,
.vex-theme-green.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-green .light .mat-mdc-fab.mat-warn,
.vex-theme-green .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #86efac;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #16a34a;
}
.vex-theme-green .mat-accent,
.vex-theme-green.light .mat-accent,
.vex-theme-green .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-green .mat-warn,
.vex-theme-green.light .mat-warn,
.vex-theme-green .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-badge-background-color: #16a34a;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-green .mat-badge-accent,
.vex-theme-green.light .mat-badge-accent,
.vex-theme-green .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-green .mat-badge-warn,
.vex-theme-green.light .mat-badge-warn,
.vex-theme-green .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #16a34a 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #16a34a;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #16a34a 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #16a34a 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #16a34a 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #16a34a;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-datepicker-content.mat-accent,
.vex-theme-green .mat-datepicker-toggle-active.mat-accent,
.vex-theme-green.light .mat-datepicker-content.mat-accent,
.vex-theme-green.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-green .light .mat-datepicker-content.mat-accent,
.vex-theme-green .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-datepicker-content.mat-warn,
.vex-theme-green .mat-datepicker-toggle-active.mat-warn,
.vex-theme-green.light .mat-datepicker-content.mat-warn,
.vex-theme-green.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-green .light .mat-datepicker-content.mat-warn,
.vex-theme-green .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-green .mat-icon.mat-primary,
.vex-theme-green.light .mat-icon.mat-primary,
.vex-theme-green .light .mat-icon.mat-primary {
  --mat-icon-color: #16a34a;
}
.vex-theme-green .mat-icon.mat-accent,
.vex-theme-green.light .mat-icon.mat-accent,
.vex-theme-green .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-green .mat-icon.mat-warn,
.vex-theme-green.light .mat-icon.mat-warn,
.vex-theme-green .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #16a34a;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #16a34a;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #16a34a;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-green .mat-step-header.mat-accent,
.vex-theme-green.light .mat-step-header.mat-accent,
.vex-theme-green .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-green .mat-step-header.mat-warn,
.vex-theme-green.light .mat-step-header.mat-warn,
.vex-theme-green .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-green .mat-toolbar.mat-primary,
.vex-theme-green.light .mat-toolbar.mat-primary,
.vex-theme-green .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #16a34a;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-green .mat-toolbar.mat-accent,
.vex-theme-green.light .mat-toolbar.mat-accent,
.vex-theme-green .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-green .mat-toolbar.mat-warn,
.vex-theme-green.light .mat-toolbar.mat-warn,
.vex-theme-green .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-green,
.vex-theme-green.light,
.vex-theme-green .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #22c55e;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-green.dark .mat-accent,
.vex-theme-green .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-green.dark .mat-warn,
.vex-theme-green .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-green.dark .mat-primary,
.vex-theme-green .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #22c55e;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #22c55e;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-green.dark .mat-accent,
.vex-theme-green .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-green.dark .mat-warn,
.vex-theme-green .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-green.dark .mat-mdc-progress-bar,
.vex-theme-green .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #22c55e;
  --mat-progress-bar-track-color: rgba(34, 197, 94, 0.25);
}
.vex-theme-green.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-green .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-green.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-green .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #22c55e 87%, transparent);
  --mat-form-field-filled-caret-color: #22c55e;
  --mat-form-field-filled-focus-active-indicator-color: #22c55e;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #22c55e 87%, transparent);
  --mat-form-field-outlined-caret-color: #22c55e;
  --mat-form-field-outlined-focus-outline-color: #22c55e;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #22c55e 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-green.dark .mat-mdc-form-field.mat-accent,
.vex-theme-green .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-green.dark .mat-mdc-form-field.mat-warn,
.vex-theme-green .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #22c55e;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-green.dark .mat-mdc-form-field.mat-accent,
.vex-theme-green .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-green.dark .mat-mdc-form-field.mat-warn,
.vex-theme-green .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-green.dark .mat-mdc-standard-chip,
.vex-theme-green .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-green.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-green.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-green .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-green .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #22c55e;
  --mat-chip-elevated-disabled-container-color: #22c55e;
  --mat-chip-elevated-selected-container-color: #22c55e;
  --mat-chip-flat-disabled-selected-container-color: #22c55e;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-green.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-green.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-green .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-green .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-green.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-green.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-green .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-green .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #22c55e;
  --mat-slide-toggle-selected-handle-color: #22c55e;
  --mat-slide-toggle-selected-hover-state-layer-color: #22c55e;
  --mat-slide-toggle-selected-pressed-state-layer-color: #22c55e;
  --mat-slide-toggle-selected-focus-handle-color: #22c55e;
  --mat-slide-toggle-selected-hover-handle-color: #22c55e;
  --mat-slide-toggle-selected-pressed-handle-color: #22c55e;
  --mat-slide-toggle-selected-focus-track-color: #16a34a;
  --mat-slide-toggle-selected-hover-track-color: #16a34a;
  --mat-slide-toggle-selected-pressed-track-color: #16a34a;
  --mat-slide-toggle-selected-track-color: #16a34a;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-green.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-green .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-green.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-green .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-green.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-green .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #22c55e;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #22c55e;
  --mat-radio-selected-hover-icon-color: #22c55e;
  --mat-radio-selected-icon-color: #22c55e;
  --mat-radio-selected-pressed-icon-color: #22c55e;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-green.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-green .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-green.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-green .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-slider-active-track-color: #22c55e;
  --mat-slider-focus-handle-color: #22c55e;
  --mat-slider-handle-color: #22c55e;
  --mat-slider-hover-handle-color: #22c55e;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #22c55e 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #22c55e 4%, transparent);
  --mat-slider-inactive-track-color: #22c55e;
  --mat-slider-ripple-color: #22c55e;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #22c55e;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-green.dark .mat-accent,
.vex-theme-green .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-green.dark .mat-warn,
.vex-theme-green .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-green.dark .mdc-list-item__start,
.vex-theme-green.dark .mdc-list-item__end,
.vex-theme-green .dark .mdc-list-item__start,
.vex-theme-green .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #22c55e;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #22c55e;
  --mat-radio-selected-hover-icon-color: #22c55e;
  --mat-radio-selected-icon-color: #22c55e;
  --mat-radio-selected-pressed-icon-color: #22c55e;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-green.dark .mat-accent .mdc-list-item__start,
.vex-theme-green.dark .mat-accent .mdc-list-item__end,
.vex-theme-green .dark .mat-accent .mdc-list-item__start,
.vex-theme-green .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-green.dark .mat-warn .mdc-list-item__start,
.vex-theme-green.dark .mat-warn .mdc-list-item__end,
.vex-theme-green .dark .mat-warn .mdc-list-item__start,
.vex-theme-green .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-green.dark .mat-mdc-list-option,
.vex-theme-green .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #22c55e;
  --mat-checkbox-selected-hover-icon-color: #22c55e;
  --mat-checkbox-selected-icon-color: #22c55e;
  --mat-checkbox-selected-pressed-icon-color: #22c55e;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #22c55e;
  --mat-checkbox-selected-hover-state-layer-color: #22c55e;
  --mat-checkbox-selected-pressed-state-layer-color: #22c55e;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-list-option.mat-accent,
.vex-theme-green .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-list-option.mat-warn,
.vex-theme-green .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-green.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-green.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-green.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-green .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-green .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-green .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-green .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #22c55e;
}
.vex-theme-green.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-green.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-green.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-green .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-green .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-green .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-green.dark .mat-mdc-tab-group,
.vex-theme-green.dark .mat-mdc-tab-nav-bar,
.vex-theme-green .dark .mat-mdc-tab-group,
.vex-theme-green .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #22c55e;
  --mat-tab-active-ripple-color: #22c55e;
  --mat-tab-inactive-ripple-color: #22c55e;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #22c55e;
  --mat-tab-active-hover-label-text-color: #22c55e;
  --mat-tab-active-focus-indicator-color: #22c55e;
  --mat-tab-active-hover-indicator-color: #22c55e;
  --mat-tab-active-indicator-color: #22c55e;
}
.vex-theme-green.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-green.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-green .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-green .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-green.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-green.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-green .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-green .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-green.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-green.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-green .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-green .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #22c55e;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-green.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-green.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-green .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-green .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-green.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-green.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-green .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-green .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-green .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #22c55e;
  --mat-checkbox-selected-hover-icon-color: #22c55e;
  --mat-checkbox-selected-icon-color: #22c55e;
  --mat-checkbox-selected-pressed-icon-color: #22c55e;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #22c55e;
  --mat-checkbox-selected-hover-state-layer-color: #22c55e;
  --mat-checkbox-selected-pressed-state-layer-color: #22c55e;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-green .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-button.mat-primary,
.vex-theme-green.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-green.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-green.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-green.dark .mat-tonal-button.mat-primary,
.vex-theme-green .dark .mat-mdc-button.mat-primary,
.vex-theme-green .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-green .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-green .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-green .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #22c55e;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #22c55e;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #22c55e 12%, transparent);
  --mat-button-outlined-state-layer-color: #22c55e;
  --mat-button-protected-container-color: #22c55e;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #22c55e;
  --mat-button-text-ripple-color: color-mix(in srgb, #22c55e 12%, transparent);
  --mat-button-text-state-layer-color: #22c55e;
  --mat-button-tonal-container-color: #22c55e;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-green.dark .mat-mdc-button.mat-accent,
.vex-theme-green.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-green.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-green.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-green.dark .mat-tonal-button.mat-accent,
.vex-theme-green .dark .mat-mdc-button.mat-accent,
.vex-theme-green .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-green .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-green .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-green .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-green.dark .mat-mdc-button.mat-warn,
.vex-theme-green.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-green.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-green.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-green.dark .mat-tonal-button.mat-warn,
.vex-theme-green .dark .mat-mdc-button.mat-warn,
.vex-theme-green .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-green .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-green .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-green .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-green .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #22c55e;
  --mat-icon-button-state-layer-color: #22c55e;
  --mat-icon-button-ripple-color: color-mix(in srgb, #22c55e 12%, transparent);
}
.vex-theme-green.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-green .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-green.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-green .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-green.dark .mat-mdc-fab.mat-primary,
.vex-theme-green.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-green .dark .mat-mdc-fab.mat-primary,
.vex-theme-green .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #22c55e;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #22c55e 12%, transparent);
  --mat-fab-small-container-color: #22c55e;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-green.dark .mat-mdc-fab.mat-accent,
.vex-theme-green.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-green .dark .mat-mdc-fab.mat-accent,
.vex-theme-green .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-green.dark .mat-mdc-fab.mat-warn,
.vex-theme-green.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-green .dark .mat-mdc-fab.mat-warn,
.vex-theme-green .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #16a34a;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #22c55e;
}
.vex-theme-green.dark .mat-accent,
.vex-theme-green .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-green.dark .mat-warn,
.vex-theme-green .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-badge-background-color: #22c55e;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-green.dark .mat-badge-accent,
.vex-theme-green .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-green.dark .mat-badge-warn,
.vex-theme-green .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #22c55e 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #22c55e;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #22c55e 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #22c55e 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #22c55e 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #22c55e;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-green.dark .mat-datepicker-content.mat-accent,
.vex-theme-green.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-green .dark .mat-datepicker-content.mat-accent,
.vex-theme-green .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-green.dark .mat-datepicker-content.mat-warn,
.vex-theme-green.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-green .dark .mat-datepicker-content.mat-warn,
.vex-theme-green .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-green.dark .mat-icon.mat-primary,
.vex-theme-green .dark .mat-icon.mat-primary {
  --mat-icon-color: #22c55e;
}
.vex-theme-green.dark .mat-icon.mat-accent,
.vex-theme-green .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-green.dark .mat-icon.mat-warn,
.vex-theme-green .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #22c55e;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #22c55e;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #22c55e;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-green.dark .mat-step-header.mat-accent,
.vex-theme-green .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-green.dark .mat-step-header.mat-warn,
.vex-theme-green .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-green.dark .mat-toolbar.mat-primary,
.vex-theme-green .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #22c55e;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-green.dark .mat-toolbar.mat-accent,
.vex-theme-green .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-green.dark .mat-toolbar.mat-warn,
.vex-theme-green .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #059669;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-emerald .mat-accent,
.vex-theme-emerald.light .mat-accent,
.vex-theme-emerald .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-emerald .mat-warn,
.vex-theme-emerald.light .mat-warn,
.vex-theme-emerald .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-emerald .mat-primary,
.vex-theme-emerald.light .mat-primary,
.vex-theme-emerald .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #059669;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #059669;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-emerald .mat-accent,
.vex-theme-emerald.light .mat-accent,
.vex-theme-emerald .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-emerald .mat-warn,
.vex-theme-emerald.light .mat-warn,
.vex-theme-emerald .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-emerald .mat-mdc-progress-bar,
.vex-theme-emerald.light .mat-mdc-progress-bar,
.vex-theme-emerald .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #059669;
  --mat-progress-bar-track-color: rgba(5, 150, 105, 0.25);
}
.vex-theme-emerald .mat-mdc-progress-bar.mat-accent,
.vex-theme-emerald.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-emerald .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-emerald .mat-mdc-progress-bar.mat-warn,
.vex-theme-emerald.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-emerald .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #059669 87%, transparent);
  --mat-form-field-filled-caret-color: #059669;
  --mat-form-field-filled-focus-active-indicator-color: #059669;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #059669 87%, transparent);
  --mat-form-field-outlined-caret-color: #059669;
  --mat-form-field-outlined-focus-outline-color: #059669;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #059669 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-emerald .mat-mdc-form-field.mat-accent,
.vex-theme-emerald.light .mat-mdc-form-field.mat-accent,
.vex-theme-emerald .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-emerald .mat-mdc-form-field.mat-warn,
.vex-theme-emerald.light .mat-mdc-form-field.mat-warn,
.vex-theme-emerald .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #059669;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-emerald .mat-mdc-form-field.mat-accent,
.vex-theme-emerald.light .mat-mdc-form-field.mat-accent,
.vex-theme-emerald .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-emerald .mat-mdc-form-field.mat-warn,
.vex-theme-emerald.light .mat-mdc-form-field.mat-warn,
.vex-theme-emerald .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-emerald .mat-mdc-standard-chip,
.vex-theme-emerald.light .mat-mdc-standard-chip,
.vex-theme-emerald .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-emerald .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-emerald.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-emerald.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-emerald .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-emerald .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #059669;
  --mat-chip-elevated-disabled-container-color: #059669;
  --mat-chip-elevated-selected-container-color: #059669;
  --mat-chip-flat-disabled-selected-container-color: #059669;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-emerald .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-emerald .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-emerald.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-emerald.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-emerald .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-emerald .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-emerald .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-emerald .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-emerald.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-emerald.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-emerald .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-emerald .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #059669;
  --mat-slide-toggle-selected-handle-color: #059669;
  --mat-slide-toggle-selected-hover-state-layer-color: #059669;
  --mat-slide-toggle-selected-pressed-state-layer-color: #059669;
  --mat-slide-toggle-selected-focus-handle-color: #059669;
  --mat-slide-toggle-selected-hover-handle-color: #059669;
  --mat-slide-toggle-selected-pressed-handle-color: #059669;
  --mat-slide-toggle-selected-focus-track-color: #6ee7b7;
  --mat-slide-toggle-selected-hover-track-color: #6ee7b7;
  --mat-slide-toggle-selected-pressed-track-color: #6ee7b7;
  --mat-slide-toggle-selected-track-color: #6ee7b7;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-emerald .mat-mdc-slide-toggle.mat-accent,
.vex-theme-emerald.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-emerald .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-emerald .mat-mdc-slide-toggle.mat-warn,
.vex-theme-emerald.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-emerald .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-emerald .mat-mdc-radio-button.mat-primary,
.vex-theme-emerald.light .mat-mdc-radio-button.mat-primary,
.vex-theme-emerald .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #059669;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #059669;
  --mat-radio-selected-hover-icon-color: #059669;
  --mat-radio-selected-icon-color: #059669;
  --mat-radio-selected-pressed-icon-color: #059669;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-radio-button.mat-accent,
.vex-theme-emerald.light .mat-mdc-radio-button.mat-accent,
.vex-theme-emerald .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-radio-button.mat-warn,
.vex-theme-emerald.light .mat-mdc-radio-button.mat-warn,
.vex-theme-emerald .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-slider-active-track-color: #059669;
  --mat-slider-focus-handle-color: #059669;
  --mat-slider-handle-color: #059669;
  --mat-slider-hover-handle-color: #059669;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #059669 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #059669 4%, transparent);
  --mat-slider-inactive-track-color: #059669;
  --mat-slider-ripple-color: #059669;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #059669;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-accent,
.vex-theme-emerald.light .mat-accent,
.vex-theme-emerald .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-emerald .mat-warn,
.vex-theme-emerald.light .mat-warn,
.vex-theme-emerald .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-emerald .mdc-list-item__start,
.vex-theme-emerald .mdc-list-item__end,
.vex-theme-emerald.light .mdc-list-item__start,
.vex-theme-emerald.light .mdc-list-item__end,
.vex-theme-emerald .light .mdc-list-item__start,
.vex-theme-emerald .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #059669;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #059669;
  --mat-radio-selected-hover-icon-color: #059669;
  --mat-radio-selected-icon-color: #059669;
  --mat-radio-selected-pressed-icon-color: #059669;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-accent .mdc-list-item__start,
.vex-theme-emerald .mat-accent .mdc-list-item__end,
.vex-theme-emerald.light .mat-accent .mdc-list-item__start,
.vex-theme-emerald.light .mat-accent .mdc-list-item__end,
.vex-theme-emerald .light .mat-accent .mdc-list-item__start,
.vex-theme-emerald .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-warn .mdc-list-item__start,
.vex-theme-emerald .mat-warn .mdc-list-item__end,
.vex-theme-emerald.light .mat-warn .mdc-list-item__start,
.vex-theme-emerald.light .mat-warn .mdc-list-item__end,
.vex-theme-emerald .light .mat-warn .mdc-list-item__start,
.vex-theme-emerald .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-list-option,
.vex-theme-emerald.light .mat-mdc-list-option,
.vex-theme-emerald .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #059669;
  --mat-checkbox-selected-hover-icon-color: #059669;
  --mat-checkbox-selected-icon-color: #059669;
  --mat-checkbox-selected-pressed-icon-color: #059669;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #059669;
  --mat-checkbox-selected-hover-state-layer-color: #059669;
  --mat-checkbox-selected-pressed-state-layer-color: #059669;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-list-option.mat-accent,
.vex-theme-emerald.light .mat-mdc-list-option.mat-accent,
.vex-theme-emerald .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-list-option.mat-warn,
.vex-theme-emerald.light .mat-mdc-list-option.mat-warn,
.vex-theme-emerald .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-emerald .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-emerald .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-emerald .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-emerald.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-emerald.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-emerald.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-emerald.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-emerald .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-emerald .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-emerald .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-emerald .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #059669;
}
.vex-theme-emerald .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-emerald .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-emerald .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-emerald.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-emerald.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-emerald.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-emerald .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-emerald .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-emerald .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-emerald .mat-mdc-tab-group,
.vex-theme-emerald .mat-mdc-tab-nav-bar,
.vex-theme-emerald.light .mat-mdc-tab-group,
.vex-theme-emerald.light .mat-mdc-tab-nav-bar,
.vex-theme-emerald .light .mat-mdc-tab-group,
.vex-theme-emerald .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #059669;
  --mat-tab-active-ripple-color: #059669;
  --mat-tab-inactive-ripple-color: #059669;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #059669;
  --mat-tab-active-hover-label-text-color: #059669;
  --mat-tab-active-focus-indicator-color: #059669;
  --mat-tab-active-hover-indicator-color: #059669;
  --mat-tab-active-indicator-color: #059669;
}
.vex-theme-emerald .mat-mdc-tab-group.mat-accent,
.vex-theme-emerald .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-emerald.light .mat-mdc-tab-group.mat-accent,
.vex-theme-emerald.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-emerald .light .mat-mdc-tab-group.mat-accent,
.vex-theme-emerald .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-emerald .mat-mdc-tab-group.mat-warn,
.vex-theme-emerald .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-emerald.light .mat-mdc-tab-group.mat-warn,
.vex-theme-emerald.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-emerald .light .mat-mdc-tab-group.mat-warn,
.vex-theme-emerald .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-emerald .mat-mdc-tab-group.mat-background-primary,
.vex-theme-emerald .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-emerald.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-emerald.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-emerald .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-emerald .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #059669;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-emerald .mat-mdc-tab-group.mat-background-accent,
.vex-theme-emerald .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-emerald.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-emerald.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-emerald .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-emerald .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-emerald .mat-mdc-tab-group.mat-background-warn,
.vex-theme-emerald .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-emerald.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-emerald.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-emerald .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-emerald .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-checkbox.mat-primary,
.vex-theme-emerald.light .mat-mdc-checkbox.mat-primary,
.vex-theme-emerald .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #059669;
  --mat-checkbox-selected-hover-icon-color: #059669;
  --mat-checkbox-selected-icon-color: #059669;
  --mat-checkbox-selected-pressed-icon-color: #059669;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #059669;
  --mat-checkbox-selected-hover-state-layer-color: #059669;
  --mat-checkbox-selected-pressed-state-layer-color: #059669;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-checkbox.mat-warn,
.vex-theme-emerald.light .mat-mdc-checkbox.mat-warn,
.vex-theme-emerald .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-button.mat-primary,
.vex-theme-emerald .mat-mdc-unelevated-button.mat-primary,
.vex-theme-emerald .mat-mdc-raised-button.mat-primary,
.vex-theme-emerald .mat-mdc-outlined-button.mat-primary,
.vex-theme-emerald .mat-tonal-button.mat-primary,
.vex-theme-emerald.light .mat-mdc-button.mat-primary,
.vex-theme-emerald.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-emerald.light .mat-mdc-raised-button.mat-primary,
.vex-theme-emerald.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-emerald.light .mat-tonal-button.mat-primary,
.vex-theme-emerald .light .mat-mdc-button.mat-primary,
.vex-theme-emerald .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-emerald .light .mat-mdc-raised-button.mat-primary,
.vex-theme-emerald .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-emerald .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #059669;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #059669;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #059669 12%, transparent);
  --mat-button-outlined-state-layer-color: #059669;
  --mat-button-protected-container-color: #059669;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #059669;
  --mat-button-text-ripple-color: color-mix(in srgb, #059669 12%, transparent);
  --mat-button-text-state-layer-color: #059669;
  --mat-button-tonal-container-color: #059669;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-emerald .mat-mdc-button.mat-accent,
.vex-theme-emerald .mat-mdc-unelevated-button.mat-accent,
.vex-theme-emerald .mat-mdc-raised-button.mat-accent,
.vex-theme-emerald .mat-mdc-outlined-button.mat-accent,
.vex-theme-emerald .mat-tonal-button.mat-accent,
.vex-theme-emerald.light .mat-mdc-button.mat-accent,
.vex-theme-emerald.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-emerald.light .mat-mdc-raised-button.mat-accent,
.vex-theme-emerald.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-emerald.light .mat-tonal-button.mat-accent,
.vex-theme-emerald .light .mat-mdc-button.mat-accent,
.vex-theme-emerald .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-emerald .light .mat-mdc-raised-button.mat-accent,
.vex-theme-emerald .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-emerald .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-emerald .mat-mdc-button.mat-warn,
.vex-theme-emerald .mat-mdc-unelevated-button.mat-warn,
.vex-theme-emerald .mat-mdc-raised-button.mat-warn,
.vex-theme-emerald .mat-mdc-outlined-button.mat-warn,
.vex-theme-emerald .mat-tonal-button.mat-warn,
.vex-theme-emerald.light .mat-mdc-button.mat-warn,
.vex-theme-emerald.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-emerald.light .mat-mdc-raised-button.mat-warn,
.vex-theme-emerald.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-emerald.light .mat-tonal-button.mat-warn,
.vex-theme-emerald .light .mat-mdc-button.mat-warn,
.vex-theme-emerald .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-emerald .light .mat-mdc-raised-button.mat-warn,
.vex-theme-emerald .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-emerald .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-icon-button.mat-primary,
.vex-theme-emerald.light .mat-mdc-icon-button.mat-primary,
.vex-theme-emerald .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #059669;
  --mat-icon-button-state-layer-color: #059669;
  --mat-icon-button-ripple-color: color-mix(in srgb, #059669 12%, transparent);
}
.vex-theme-emerald .mat-mdc-icon-button.mat-accent,
.vex-theme-emerald.light .mat-mdc-icon-button.mat-accent,
.vex-theme-emerald .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-emerald .mat-mdc-icon-button.mat-warn,
.vex-theme-emerald.light .mat-mdc-icon-button.mat-warn,
.vex-theme-emerald .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-mdc-fab.mat-primary,
.vex-theme-emerald .mat-mdc-mini-fab.mat-primary,
.vex-theme-emerald.light .mat-mdc-fab.mat-primary,
.vex-theme-emerald.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-emerald .light .mat-mdc-fab.mat-primary,
.vex-theme-emerald .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #059669;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #059669 12%, transparent);
  --mat-fab-small-container-color: #059669;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-emerald .mat-mdc-fab.mat-accent,
.vex-theme-emerald .mat-mdc-mini-fab.mat-accent,
.vex-theme-emerald.light .mat-mdc-fab.mat-accent,
.vex-theme-emerald.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-emerald .light .mat-mdc-fab.mat-accent,
.vex-theme-emerald .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-emerald .mat-mdc-fab.mat-warn,
.vex-theme-emerald .mat-mdc-mini-fab.mat-warn,
.vex-theme-emerald.light .mat-mdc-fab.mat-warn,
.vex-theme-emerald.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-emerald .light .mat-mdc-fab.mat-warn,
.vex-theme-emerald .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #6ee7b7;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #059669;
}
.vex-theme-emerald .mat-accent,
.vex-theme-emerald.light .mat-accent,
.vex-theme-emerald .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-emerald .mat-warn,
.vex-theme-emerald.light .mat-warn,
.vex-theme-emerald .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-badge-background-color: #059669;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-emerald .mat-badge-accent,
.vex-theme-emerald.light .mat-badge-accent,
.vex-theme-emerald .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-emerald .mat-badge-warn,
.vex-theme-emerald.light .mat-badge-warn,
.vex-theme-emerald .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #059669 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #059669;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #059669 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #059669 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #059669 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #059669;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-datepicker-content.mat-accent,
.vex-theme-emerald .mat-datepicker-toggle-active.mat-accent,
.vex-theme-emerald.light .mat-datepicker-content.mat-accent,
.vex-theme-emerald.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-emerald .light .mat-datepicker-content.mat-accent,
.vex-theme-emerald .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-datepicker-content.mat-warn,
.vex-theme-emerald .mat-datepicker-toggle-active.mat-warn,
.vex-theme-emerald.light .mat-datepicker-content.mat-warn,
.vex-theme-emerald.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-emerald .light .mat-datepicker-content.mat-warn,
.vex-theme-emerald .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-emerald .mat-icon.mat-primary,
.vex-theme-emerald.light .mat-icon.mat-primary,
.vex-theme-emerald .light .mat-icon.mat-primary {
  --mat-icon-color: #059669;
}
.vex-theme-emerald .mat-icon.mat-accent,
.vex-theme-emerald.light .mat-icon.mat-accent,
.vex-theme-emerald .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-emerald .mat-icon.mat-warn,
.vex-theme-emerald.light .mat-icon.mat-warn,
.vex-theme-emerald .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #059669;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #059669;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #059669;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-emerald .mat-step-header.mat-accent,
.vex-theme-emerald.light .mat-step-header.mat-accent,
.vex-theme-emerald .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-emerald .mat-step-header.mat-warn,
.vex-theme-emerald.light .mat-step-header.mat-warn,
.vex-theme-emerald .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-emerald .mat-toolbar.mat-primary,
.vex-theme-emerald.light .mat-toolbar.mat-primary,
.vex-theme-emerald .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #059669;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-emerald .mat-toolbar.mat-accent,
.vex-theme-emerald.light .mat-toolbar.mat-accent,
.vex-theme-emerald .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-emerald .mat-toolbar.mat-warn,
.vex-theme-emerald.light .mat-toolbar.mat-warn,
.vex-theme-emerald .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-emerald,
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #10b981;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-emerald.dark .mat-accent,
.vex-theme-emerald .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-emerald.dark .mat-warn,
.vex-theme-emerald .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-emerald.dark .mat-primary,
.vex-theme-emerald .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #10b981;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #10b981;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-emerald.dark .mat-accent,
.vex-theme-emerald .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-emerald.dark .mat-warn,
.vex-theme-emerald .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-emerald.dark .mat-mdc-progress-bar,
.vex-theme-emerald .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #10b981;
  --mat-progress-bar-track-color: rgba(16, 185, 129, 0.25);
}
.vex-theme-emerald.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-emerald .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-emerald.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-emerald .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #10b981 87%, transparent);
  --mat-form-field-filled-caret-color: #10b981;
  --mat-form-field-filled-focus-active-indicator-color: #10b981;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #10b981 87%, transparent);
  --mat-form-field-outlined-caret-color: #10b981;
  --mat-form-field-outlined-focus-outline-color: #10b981;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #10b981 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-emerald.dark .mat-mdc-form-field.mat-accent,
.vex-theme-emerald .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-emerald.dark .mat-mdc-form-field.mat-warn,
.vex-theme-emerald .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #10b981;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-emerald.dark .mat-mdc-form-field.mat-accent,
.vex-theme-emerald .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-emerald.dark .mat-mdc-form-field.mat-warn,
.vex-theme-emerald .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-emerald.dark .mat-mdc-standard-chip,
.vex-theme-emerald .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-emerald.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-emerald.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-emerald .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-emerald .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #10b981;
  --mat-chip-elevated-disabled-container-color: #10b981;
  --mat-chip-elevated-selected-container-color: #10b981;
  --mat-chip-flat-disabled-selected-container-color: #10b981;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-emerald.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-emerald .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-emerald .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-emerald.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-emerald .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-emerald .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #10b981;
  --mat-slide-toggle-selected-handle-color: #10b981;
  --mat-slide-toggle-selected-hover-state-layer-color: #10b981;
  --mat-slide-toggle-selected-pressed-state-layer-color: #10b981;
  --mat-slide-toggle-selected-focus-handle-color: #10b981;
  --mat-slide-toggle-selected-hover-handle-color: #10b981;
  --mat-slide-toggle-selected-pressed-handle-color: #10b981;
  --mat-slide-toggle-selected-focus-track-color: #059669;
  --mat-slide-toggle-selected-hover-track-color: #059669;
  --mat-slide-toggle-selected-pressed-track-color: #059669;
  --mat-slide-toggle-selected-track-color: #059669;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-emerald.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-emerald .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-emerald.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-emerald .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-emerald.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-emerald .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #10b981;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #10b981;
  --mat-radio-selected-hover-icon-color: #10b981;
  --mat-radio-selected-icon-color: #10b981;
  --mat-radio-selected-pressed-icon-color: #10b981;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-emerald.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-emerald .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-emerald.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-emerald .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-slider-active-track-color: #10b981;
  --mat-slider-focus-handle-color: #10b981;
  --mat-slider-handle-color: #10b981;
  --mat-slider-hover-handle-color: #10b981;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #10b981 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #10b981 4%, transparent);
  --mat-slider-inactive-track-color: #10b981;
  --mat-slider-ripple-color: #10b981;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #10b981;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-emerald.dark .mat-accent,
.vex-theme-emerald .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-emerald.dark .mat-warn,
.vex-theme-emerald .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-emerald.dark .mdc-list-item__start,
.vex-theme-emerald.dark .mdc-list-item__end,
.vex-theme-emerald .dark .mdc-list-item__start,
.vex-theme-emerald .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #10b981;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #10b981;
  --mat-radio-selected-hover-icon-color: #10b981;
  --mat-radio-selected-icon-color: #10b981;
  --mat-radio-selected-pressed-icon-color: #10b981;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-emerald.dark .mat-accent .mdc-list-item__start,
.vex-theme-emerald.dark .mat-accent .mdc-list-item__end,
.vex-theme-emerald .dark .mat-accent .mdc-list-item__start,
.vex-theme-emerald .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-emerald.dark .mat-warn .mdc-list-item__start,
.vex-theme-emerald.dark .mat-warn .mdc-list-item__end,
.vex-theme-emerald .dark .mat-warn .mdc-list-item__start,
.vex-theme-emerald .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-emerald.dark .mat-mdc-list-option,
.vex-theme-emerald .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #10b981;
  --mat-checkbox-selected-hover-icon-color: #10b981;
  --mat-checkbox-selected-icon-color: #10b981;
  --mat-checkbox-selected-pressed-icon-color: #10b981;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #10b981;
  --mat-checkbox-selected-hover-state-layer-color: #10b981;
  --mat-checkbox-selected-pressed-state-layer-color: #10b981;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-list-option.mat-accent,
.vex-theme-emerald .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-list-option.mat-warn,
.vex-theme-emerald .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-emerald.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-emerald.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-emerald.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-emerald .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-emerald .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-emerald .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-emerald .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #10b981;
}
.vex-theme-emerald.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-emerald.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-emerald.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-emerald .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-emerald .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-emerald .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-emerald.dark .mat-mdc-tab-group,
.vex-theme-emerald.dark .mat-mdc-tab-nav-bar,
.vex-theme-emerald .dark .mat-mdc-tab-group,
.vex-theme-emerald .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #10b981;
  --mat-tab-active-ripple-color: #10b981;
  --mat-tab-inactive-ripple-color: #10b981;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #10b981;
  --mat-tab-active-hover-label-text-color: #10b981;
  --mat-tab-active-focus-indicator-color: #10b981;
  --mat-tab-active-hover-indicator-color: #10b981;
  --mat-tab-active-indicator-color: #10b981;
}
.vex-theme-emerald.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-emerald.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-emerald .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-emerald .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-emerald.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-emerald.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-emerald .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-emerald .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-emerald.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-emerald.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-emerald .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-emerald .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #10b981;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-emerald.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-emerald .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-emerald .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-emerald.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-emerald .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-emerald .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-emerald .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #10b981;
  --mat-checkbox-selected-hover-icon-color: #10b981;
  --mat-checkbox-selected-icon-color: #10b981;
  --mat-checkbox-selected-pressed-icon-color: #10b981;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #10b981;
  --mat-checkbox-selected-hover-state-layer-color: #10b981;
  --mat-checkbox-selected-pressed-state-layer-color: #10b981;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-emerald .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-button.mat-primary,
.vex-theme-emerald.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-emerald.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-emerald.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-emerald.dark .mat-tonal-button.mat-primary,
.vex-theme-emerald .dark .mat-mdc-button.mat-primary,
.vex-theme-emerald .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-emerald .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-emerald .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-emerald .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #10b981;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #10b981;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #10b981 12%, transparent);
  --mat-button-outlined-state-layer-color: #10b981;
  --mat-button-protected-container-color: #10b981;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #10b981;
  --mat-button-text-ripple-color: color-mix(in srgb, #10b981 12%, transparent);
  --mat-button-text-state-layer-color: #10b981;
  --mat-button-tonal-container-color: #10b981;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-button.mat-accent,
.vex-theme-emerald.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-emerald.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-emerald.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-emerald.dark .mat-tonal-button.mat-accent,
.vex-theme-emerald .dark .mat-mdc-button.mat-accent,
.vex-theme-emerald .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-emerald .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-emerald .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-emerald .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-button.mat-warn,
.vex-theme-emerald.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-emerald.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-emerald.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-emerald.dark .mat-tonal-button.mat-warn,
.vex-theme-emerald .dark .mat-mdc-button.mat-warn,
.vex-theme-emerald .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-emerald .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-emerald .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-emerald .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-emerald .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #10b981;
  --mat-icon-button-state-layer-color: #10b981;
  --mat-icon-button-ripple-color: color-mix(in srgb, #10b981 12%, transparent);
}
.vex-theme-emerald.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-emerald .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-emerald.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-emerald .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-emerald.dark .mat-mdc-fab.mat-primary,
.vex-theme-emerald.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-emerald .dark .mat-mdc-fab.mat-primary,
.vex-theme-emerald .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #10b981;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #10b981 12%, transparent);
  --mat-fab-small-container-color: #10b981;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-fab.mat-accent,
.vex-theme-emerald.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-emerald .dark .mat-mdc-fab.mat-accent,
.vex-theme-emerald .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-emerald.dark .mat-mdc-fab.mat-warn,
.vex-theme-emerald.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-emerald .dark .mat-mdc-fab.mat-warn,
.vex-theme-emerald .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #059669;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #10b981;
}
.vex-theme-emerald.dark .mat-accent,
.vex-theme-emerald .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-emerald.dark .mat-warn,
.vex-theme-emerald .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-badge-background-color: #10b981;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-emerald.dark .mat-badge-accent,
.vex-theme-emerald .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-emerald.dark .mat-badge-warn,
.vex-theme-emerald .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #10b981 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #10b981;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #10b981 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #10b981 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #10b981 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #10b981;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-emerald.dark .mat-datepicker-content.mat-accent,
.vex-theme-emerald.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-emerald .dark .mat-datepicker-content.mat-accent,
.vex-theme-emerald .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-emerald.dark .mat-datepicker-content.mat-warn,
.vex-theme-emerald.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-emerald .dark .mat-datepicker-content.mat-warn,
.vex-theme-emerald .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-emerald.dark .mat-icon.mat-primary,
.vex-theme-emerald .dark .mat-icon.mat-primary {
  --mat-icon-color: #10b981;
}
.vex-theme-emerald.dark .mat-icon.mat-accent,
.vex-theme-emerald .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-emerald.dark .mat-icon.mat-warn,
.vex-theme-emerald .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #10b981;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #10b981;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #10b981;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-emerald.dark .mat-step-header.mat-accent,
.vex-theme-emerald .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-emerald.dark .mat-step-header.mat-warn,
.vex-theme-emerald .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-emerald.dark .mat-toolbar.mat-primary,
.vex-theme-emerald .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #10b981;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-emerald.dark .mat-toolbar.mat-accent,
.vex-theme-emerald .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-emerald.dark .mat-toolbar.mat-warn,
.vex-theme-emerald .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #0d9488;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-teal .mat-accent,
.vex-theme-teal.light .mat-accent,
.vex-theme-teal .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-teal .mat-warn,
.vex-theme-teal.light .mat-warn,
.vex-theme-teal .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-teal .mat-primary,
.vex-theme-teal.light .mat-primary,
.vex-theme-teal .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #0d9488;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #0d9488;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-teal .mat-accent,
.vex-theme-teal.light .mat-accent,
.vex-theme-teal .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-teal .mat-warn,
.vex-theme-teal.light .mat-warn,
.vex-theme-teal .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-teal .mat-mdc-progress-bar,
.vex-theme-teal.light .mat-mdc-progress-bar,
.vex-theme-teal .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #0d9488;
  --mat-progress-bar-track-color: rgba(13, 148, 136, 0.25);
}
.vex-theme-teal .mat-mdc-progress-bar.mat-accent,
.vex-theme-teal.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-teal .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-teal .mat-mdc-progress-bar.mat-warn,
.vex-theme-teal.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-teal .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #0d9488 87%, transparent);
  --mat-form-field-filled-caret-color: #0d9488;
  --mat-form-field-filled-focus-active-indicator-color: #0d9488;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #0d9488 87%, transparent);
  --mat-form-field-outlined-caret-color: #0d9488;
  --mat-form-field-outlined-focus-outline-color: #0d9488;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #0d9488 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-teal .mat-mdc-form-field.mat-accent,
.vex-theme-teal.light .mat-mdc-form-field.mat-accent,
.vex-theme-teal .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-teal .mat-mdc-form-field.mat-warn,
.vex-theme-teal.light .mat-mdc-form-field.mat-warn,
.vex-theme-teal .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #0d9488;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-teal .mat-mdc-form-field.mat-accent,
.vex-theme-teal.light .mat-mdc-form-field.mat-accent,
.vex-theme-teal .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-teal .mat-mdc-form-field.mat-warn,
.vex-theme-teal.light .mat-mdc-form-field.mat-warn,
.vex-theme-teal .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-teal .mat-mdc-standard-chip,
.vex-theme-teal.light .mat-mdc-standard-chip,
.vex-theme-teal .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-teal .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-teal.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-teal.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-teal .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-teal .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #0d9488;
  --mat-chip-elevated-disabled-container-color: #0d9488;
  --mat-chip-elevated-selected-container-color: #0d9488;
  --mat-chip-flat-disabled-selected-container-color: #0d9488;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-teal .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-teal .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-teal.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-teal.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-teal .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-teal .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-teal .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-teal .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-teal.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-teal.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-teal .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-teal .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #0d9488;
  --mat-slide-toggle-selected-handle-color: #0d9488;
  --mat-slide-toggle-selected-hover-state-layer-color: #0d9488;
  --mat-slide-toggle-selected-pressed-state-layer-color: #0d9488;
  --mat-slide-toggle-selected-focus-handle-color: #0d9488;
  --mat-slide-toggle-selected-hover-handle-color: #0d9488;
  --mat-slide-toggle-selected-pressed-handle-color: #0d9488;
  --mat-slide-toggle-selected-focus-track-color: #5eead4;
  --mat-slide-toggle-selected-hover-track-color: #5eead4;
  --mat-slide-toggle-selected-pressed-track-color: #5eead4;
  --mat-slide-toggle-selected-track-color: #5eead4;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-teal .mat-mdc-slide-toggle.mat-accent,
.vex-theme-teal.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-teal .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-teal .mat-mdc-slide-toggle.mat-warn,
.vex-theme-teal.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-teal .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-teal .mat-mdc-radio-button.mat-primary,
.vex-theme-teal.light .mat-mdc-radio-button.mat-primary,
.vex-theme-teal .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #0d9488;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #0d9488;
  --mat-radio-selected-hover-icon-color: #0d9488;
  --mat-radio-selected-icon-color: #0d9488;
  --mat-radio-selected-pressed-icon-color: #0d9488;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-radio-button.mat-accent,
.vex-theme-teal.light .mat-mdc-radio-button.mat-accent,
.vex-theme-teal .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-radio-button.mat-warn,
.vex-theme-teal.light .mat-mdc-radio-button.mat-warn,
.vex-theme-teal .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-slider-active-track-color: #0d9488;
  --mat-slider-focus-handle-color: #0d9488;
  --mat-slider-handle-color: #0d9488;
  --mat-slider-hover-handle-color: #0d9488;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #0d9488 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #0d9488 4%, transparent);
  --mat-slider-inactive-track-color: #0d9488;
  --mat-slider-ripple-color: #0d9488;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #0d9488;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-accent,
.vex-theme-teal.light .mat-accent,
.vex-theme-teal .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-teal .mat-warn,
.vex-theme-teal.light .mat-warn,
.vex-theme-teal .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-teal .mdc-list-item__start,
.vex-theme-teal .mdc-list-item__end,
.vex-theme-teal.light .mdc-list-item__start,
.vex-theme-teal.light .mdc-list-item__end,
.vex-theme-teal .light .mdc-list-item__start,
.vex-theme-teal .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #0d9488;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #0d9488;
  --mat-radio-selected-hover-icon-color: #0d9488;
  --mat-radio-selected-icon-color: #0d9488;
  --mat-radio-selected-pressed-icon-color: #0d9488;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-accent .mdc-list-item__start,
.vex-theme-teal .mat-accent .mdc-list-item__end,
.vex-theme-teal.light .mat-accent .mdc-list-item__start,
.vex-theme-teal.light .mat-accent .mdc-list-item__end,
.vex-theme-teal .light .mat-accent .mdc-list-item__start,
.vex-theme-teal .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-warn .mdc-list-item__start,
.vex-theme-teal .mat-warn .mdc-list-item__end,
.vex-theme-teal.light .mat-warn .mdc-list-item__start,
.vex-theme-teal.light .mat-warn .mdc-list-item__end,
.vex-theme-teal .light .mat-warn .mdc-list-item__start,
.vex-theme-teal .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-list-option,
.vex-theme-teal.light .mat-mdc-list-option,
.vex-theme-teal .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0d9488;
  --mat-checkbox-selected-hover-icon-color: #0d9488;
  --mat-checkbox-selected-icon-color: #0d9488;
  --mat-checkbox-selected-pressed-icon-color: #0d9488;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #0d9488;
  --mat-checkbox-selected-hover-state-layer-color: #0d9488;
  --mat-checkbox-selected-pressed-state-layer-color: #0d9488;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-list-option.mat-accent,
.vex-theme-teal.light .mat-mdc-list-option.mat-accent,
.vex-theme-teal .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-list-option.mat-warn,
.vex-theme-teal.light .mat-mdc-list-option.mat-warn,
.vex-theme-teal .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-teal .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-teal .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-teal .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-teal.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-teal.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-teal.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-teal.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-teal .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-teal .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-teal .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-teal .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #0d9488;
}
.vex-theme-teal .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-teal .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-teal .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-teal.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-teal.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-teal.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-teal .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-teal .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-teal .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-teal .mat-mdc-tab-group,
.vex-theme-teal .mat-mdc-tab-nav-bar,
.vex-theme-teal.light .mat-mdc-tab-group,
.vex-theme-teal.light .mat-mdc-tab-nav-bar,
.vex-theme-teal .light .mat-mdc-tab-group,
.vex-theme-teal .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #0d9488;
  --mat-tab-active-ripple-color: #0d9488;
  --mat-tab-inactive-ripple-color: #0d9488;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #0d9488;
  --mat-tab-active-hover-label-text-color: #0d9488;
  --mat-tab-active-focus-indicator-color: #0d9488;
  --mat-tab-active-hover-indicator-color: #0d9488;
  --mat-tab-active-indicator-color: #0d9488;
}
.vex-theme-teal .mat-mdc-tab-group.mat-accent,
.vex-theme-teal .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-teal.light .mat-mdc-tab-group.mat-accent,
.vex-theme-teal.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-teal .light .mat-mdc-tab-group.mat-accent,
.vex-theme-teal .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-teal .mat-mdc-tab-group.mat-warn,
.vex-theme-teal .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-teal.light .mat-mdc-tab-group.mat-warn,
.vex-theme-teal.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-teal .light .mat-mdc-tab-group.mat-warn,
.vex-theme-teal .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-teal .mat-mdc-tab-group.mat-background-primary,
.vex-theme-teal .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-teal.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-teal.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-teal .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-teal .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #0d9488;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-teal .mat-mdc-tab-group.mat-background-accent,
.vex-theme-teal .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-teal.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-teal.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-teal .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-teal .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-teal .mat-mdc-tab-group.mat-background-warn,
.vex-theme-teal .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-teal.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-teal.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-teal .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-teal .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-checkbox.mat-primary,
.vex-theme-teal.light .mat-mdc-checkbox.mat-primary,
.vex-theme-teal .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0d9488;
  --mat-checkbox-selected-hover-icon-color: #0d9488;
  --mat-checkbox-selected-icon-color: #0d9488;
  --mat-checkbox-selected-pressed-icon-color: #0d9488;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #0d9488;
  --mat-checkbox-selected-hover-state-layer-color: #0d9488;
  --mat-checkbox-selected-pressed-state-layer-color: #0d9488;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-checkbox.mat-warn,
.vex-theme-teal.light .mat-mdc-checkbox.mat-warn,
.vex-theme-teal .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-button.mat-primary,
.vex-theme-teal .mat-mdc-unelevated-button.mat-primary,
.vex-theme-teal .mat-mdc-raised-button.mat-primary,
.vex-theme-teal .mat-mdc-outlined-button.mat-primary,
.vex-theme-teal .mat-tonal-button.mat-primary,
.vex-theme-teal.light .mat-mdc-button.mat-primary,
.vex-theme-teal.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-teal.light .mat-mdc-raised-button.mat-primary,
.vex-theme-teal.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-teal.light .mat-tonal-button.mat-primary,
.vex-theme-teal .light .mat-mdc-button.mat-primary,
.vex-theme-teal .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-teal .light .mat-mdc-raised-button.mat-primary,
.vex-theme-teal .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-teal .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #0d9488;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #0d9488;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #0d9488 12%, transparent);
  --mat-button-outlined-state-layer-color: #0d9488;
  --mat-button-protected-container-color: #0d9488;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #0d9488;
  --mat-button-text-ripple-color: color-mix(in srgb, #0d9488 12%, transparent);
  --mat-button-text-state-layer-color: #0d9488;
  --mat-button-tonal-container-color: #0d9488;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-teal .mat-mdc-button.mat-accent,
.vex-theme-teal .mat-mdc-unelevated-button.mat-accent,
.vex-theme-teal .mat-mdc-raised-button.mat-accent,
.vex-theme-teal .mat-mdc-outlined-button.mat-accent,
.vex-theme-teal .mat-tonal-button.mat-accent,
.vex-theme-teal.light .mat-mdc-button.mat-accent,
.vex-theme-teal.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-teal.light .mat-mdc-raised-button.mat-accent,
.vex-theme-teal.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-teal.light .mat-tonal-button.mat-accent,
.vex-theme-teal .light .mat-mdc-button.mat-accent,
.vex-theme-teal .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-teal .light .mat-mdc-raised-button.mat-accent,
.vex-theme-teal .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-teal .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-teal .mat-mdc-button.mat-warn,
.vex-theme-teal .mat-mdc-unelevated-button.mat-warn,
.vex-theme-teal .mat-mdc-raised-button.mat-warn,
.vex-theme-teal .mat-mdc-outlined-button.mat-warn,
.vex-theme-teal .mat-tonal-button.mat-warn,
.vex-theme-teal.light .mat-mdc-button.mat-warn,
.vex-theme-teal.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-teal.light .mat-mdc-raised-button.mat-warn,
.vex-theme-teal.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-teal.light .mat-tonal-button.mat-warn,
.vex-theme-teal .light .mat-mdc-button.mat-warn,
.vex-theme-teal .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-teal .light .mat-mdc-raised-button.mat-warn,
.vex-theme-teal .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-teal .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-icon-button.mat-primary,
.vex-theme-teal.light .mat-mdc-icon-button.mat-primary,
.vex-theme-teal .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #0d9488;
  --mat-icon-button-state-layer-color: #0d9488;
  --mat-icon-button-ripple-color: color-mix(in srgb, #0d9488 12%, transparent);
}
.vex-theme-teal .mat-mdc-icon-button.mat-accent,
.vex-theme-teal.light .mat-mdc-icon-button.mat-accent,
.vex-theme-teal .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-teal .mat-mdc-icon-button.mat-warn,
.vex-theme-teal.light .mat-mdc-icon-button.mat-warn,
.vex-theme-teal .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-mdc-fab.mat-primary,
.vex-theme-teal .mat-mdc-mini-fab.mat-primary,
.vex-theme-teal.light .mat-mdc-fab.mat-primary,
.vex-theme-teal.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-teal .light .mat-mdc-fab.mat-primary,
.vex-theme-teal .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #0d9488;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #0d9488 12%, transparent);
  --mat-fab-small-container-color: #0d9488;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-teal .mat-mdc-fab.mat-accent,
.vex-theme-teal .mat-mdc-mini-fab.mat-accent,
.vex-theme-teal.light .mat-mdc-fab.mat-accent,
.vex-theme-teal.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-teal .light .mat-mdc-fab.mat-accent,
.vex-theme-teal .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-teal .mat-mdc-fab.mat-warn,
.vex-theme-teal .mat-mdc-mini-fab.mat-warn,
.vex-theme-teal.light .mat-mdc-fab.mat-warn,
.vex-theme-teal.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-teal .light .mat-mdc-fab.mat-warn,
.vex-theme-teal .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #5eead4;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #0d9488;
}
.vex-theme-teal .mat-accent,
.vex-theme-teal.light .mat-accent,
.vex-theme-teal .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-teal .mat-warn,
.vex-theme-teal.light .mat-warn,
.vex-theme-teal .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-badge-background-color: #0d9488;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-teal .mat-badge-accent,
.vex-theme-teal.light .mat-badge-accent,
.vex-theme-teal .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-teal .mat-badge-warn,
.vex-theme-teal.light .mat-badge-warn,
.vex-theme-teal .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #0d9488 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #0d9488;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #0d9488 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #0d9488 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #0d9488 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #0d9488;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-datepicker-content.mat-accent,
.vex-theme-teal .mat-datepicker-toggle-active.mat-accent,
.vex-theme-teal.light .mat-datepicker-content.mat-accent,
.vex-theme-teal.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-teal .light .mat-datepicker-content.mat-accent,
.vex-theme-teal .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-datepicker-content.mat-warn,
.vex-theme-teal .mat-datepicker-toggle-active.mat-warn,
.vex-theme-teal.light .mat-datepicker-content.mat-warn,
.vex-theme-teal.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-teal .light .mat-datepicker-content.mat-warn,
.vex-theme-teal .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-teal .mat-icon.mat-primary,
.vex-theme-teal.light .mat-icon.mat-primary,
.vex-theme-teal .light .mat-icon.mat-primary {
  --mat-icon-color: #0d9488;
}
.vex-theme-teal .mat-icon.mat-accent,
.vex-theme-teal.light .mat-icon.mat-accent,
.vex-theme-teal .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-teal .mat-icon.mat-warn,
.vex-theme-teal.light .mat-icon.mat-warn,
.vex-theme-teal .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #0d9488;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #0d9488;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #0d9488;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-teal .mat-step-header.mat-accent,
.vex-theme-teal.light .mat-step-header.mat-accent,
.vex-theme-teal .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-teal .mat-step-header.mat-warn,
.vex-theme-teal.light .mat-step-header.mat-warn,
.vex-theme-teal .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-teal .mat-toolbar.mat-primary,
.vex-theme-teal.light .mat-toolbar.mat-primary,
.vex-theme-teal .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #0d9488;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-teal .mat-toolbar.mat-accent,
.vex-theme-teal.light .mat-toolbar.mat-accent,
.vex-theme-teal .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-teal .mat-toolbar.mat-warn,
.vex-theme-teal.light .mat-toolbar.mat-warn,
.vex-theme-teal .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-teal,
.vex-theme-teal.light,
.vex-theme-teal .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #14b8a6;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-teal.dark .mat-accent,
.vex-theme-teal .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-teal.dark .mat-warn,
.vex-theme-teal .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-teal.dark .mat-primary,
.vex-theme-teal .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #14b8a6;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #14b8a6;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-teal.dark .mat-accent,
.vex-theme-teal .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-teal.dark .mat-warn,
.vex-theme-teal .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-teal.dark .mat-mdc-progress-bar,
.vex-theme-teal .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #14b8a6;
  --mat-progress-bar-track-color: rgba(20, 184, 166, 0.25);
}
.vex-theme-teal.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-teal .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-teal.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-teal .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #14b8a6 87%, transparent);
  --mat-form-field-filled-caret-color: #14b8a6;
  --mat-form-field-filled-focus-active-indicator-color: #14b8a6;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #14b8a6 87%, transparent);
  --mat-form-field-outlined-caret-color: #14b8a6;
  --mat-form-field-outlined-focus-outline-color: #14b8a6;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #14b8a6 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-teal.dark .mat-mdc-form-field.mat-accent,
.vex-theme-teal .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-teal.dark .mat-mdc-form-field.mat-warn,
.vex-theme-teal .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #14b8a6;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-teal.dark .mat-mdc-form-field.mat-accent,
.vex-theme-teal .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-teal.dark .mat-mdc-form-field.mat-warn,
.vex-theme-teal .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-teal.dark .mat-mdc-standard-chip,
.vex-theme-teal .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-teal.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-teal.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-teal .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-teal .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #14b8a6;
  --mat-chip-elevated-disabled-container-color: #14b8a6;
  --mat-chip-elevated-selected-container-color: #14b8a6;
  --mat-chip-flat-disabled-selected-container-color: #14b8a6;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-teal.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-teal .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-teal .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-teal.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-teal .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-teal .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #14b8a6;
  --mat-slide-toggle-selected-handle-color: #14b8a6;
  --mat-slide-toggle-selected-hover-state-layer-color: #14b8a6;
  --mat-slide-toggle-selected-pressed-state-layer-color: #14b8a6;
  --mat-slide-toggle-selected-focus-handle-color: #14b8a6;
  --mat-slide-toggle-selected-hover-handle-color: #14b8a6;
  --mat-slide-toggle-selected-pressed-handle-color: #14b8a6;
  --mat-slide-toggle-selected-focus-track-color: #0d9488;
  --mat-slide-toggle-selected-hover-track-color: #0d9488;
  --mat-slide-toggle-selected-pressed-track-color: #0d9488;
  --mat-slide-toggle-selected-track-color: #0d9488;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-teal.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-teal .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-teal.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-teal .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-teal.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-teal .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #14b8a6;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #14b8a6;
  --mat-radio-selected-hover-icon-color: #14b8a6;
  --mat-radio-selected-icon-color: #14b8a6;
  --mat-radio-selected-pressed-icon-color: #14b8a6;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-teal.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-teal .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-teal.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-teal .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-slider-active-track-color: #14b8a6;
  --mat-slider-focus-handle-color: #14b8a6;
  --mat-slider-handle-color: #14b8a6;
  --mat-slider-hover-handle-color: #14b8a6;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #14b8a6 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #14b8a6 4%, transparent);
  --mat-slider-inactive-track-color: #14b8a6;
  --mat-slider-ripple-color: #14b8a6;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #14b8a6;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-teal.dark .mat-accent,
.vex-theme-teal .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-teal.dark .mat-warn,
.vex-theme-teal .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-teal.dark .mdc-list-item__start,
.vex-theme-teal.dark .mdc-list-item__end,
.vex-theme-teal .dark .mdc-list-item__start,
.vex-theme-teal .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #14b8a6;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #14b8a6;
  --mat-radio-selected-hover-icon-color: #14b8a6;
  --mat-radio-selected-icon-color: #14b8a6;
  --mat-radio-selected-pressed-icon-color: #14b8a6;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-teal.dark .mat-accent .mdc-list-item__start,
.vex-theme-teal.dark .mat-accent .mdc-list-item__end,
.vex-theme-teal .dark .mat-accent .mdc-list-item__start,
.vex-theme-teal .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-teal.dark .mat-warn .mdc-list-item__start,
.vex-theme-teal.dark .mat-warn .mdc-list-item__end,
.vex-theme-teal .dark .mat-warn .mdc-list-item__start,
.vex-theme-teal .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-teal.dark .mat-mdc-list-option,
.vex-theme-teal .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #14b8a6;
  --mat-checkbox-selected-hover-icon-color: #14b8a6;
  --mat-checkbox-selected-icon-color: #14b8a6;
  --mat-checkbox-selected-pressed-icon-color: #14b8a6;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #14b8a6;
  --mat-checkbox-selected-hover-state-layer-color: #14b8a6;
  --mat-checkbox-selected-pressed-state-layer-color: #14b8a6;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-list-option.mat-accent,
.vex-theme-teal .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-list-option.mat-warn,
.vex-theme-teal .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-teal.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-teal.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-teal.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-teal .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-teal .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-teal .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-teal .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #14b8a6;
}
.vex-theme-teal.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-teal.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-teal.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-teal .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-teal .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-teal .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-teal.dark .mat-mdc-tab-group,
.vex-theme-teal.dark .mat-mdc-tab-nav-bar,
.vex-theme-teal .dark .mat-mdc-tab-group,
.vex-theme-teal .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #14b8a6;
  --mat-tab-active-ripple-color: #14b8a6;
  --mat-tab-inactive-ripple-color: #14b8a6;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #14b8a6;
  --mat-tab-active-hover-label-text-color: #14b8a6;
  --mat-tab-active-focus-indicator-color: #14b8a6;
  --mat-tab-active-hover-indicator-color: #14b8a6;
  --mat-tab-active-indicator-color: #14b8a6;
}
.vex-theme-teal.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-teal.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-teal .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-teal .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-teal.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-teal.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-teal .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-teal .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-teal.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-teal.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-teal .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-teal .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #14b8a6;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-teal.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-teal .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-teal .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-teal.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-teal .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-teal .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-teal .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #14b8a6;
  --mat-checkbox-selected-hover-icon-color: #14b8a6;
  --mat-checkbox-selected-icon-color: #14b8a6;
  --mat-checkbox-selected-pressed-icon-color: #14b8a6;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #14b8a6;
  --mat-checkbox-selected-hover-state-layer-color: #14b8a6;
  --mat-checkbox-selected-pressed-state-layer-color: #14b8a6;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-teal .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-button.mat-primary,
.vex-theme-teal.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-teal.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-teal.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-teal.dark .mat-tonal-button.mat-primary,
.vex-theme-teal .dark .mat-mdc-button.mat-primary,
.vex-theme-teal .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-teal .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-teal .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-teal .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #14b8a6;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #14b8a6;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #14b8a6 12%, transparent);
  --mat-button-outlined-state-layer-color: #14b8a6;
  --mat-button-protected-container-color: #14b8a6;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #14b8a6;
  --mat-button-text-ripple-color: color-mix(in srgb, #14b8a6 12%, transparent);
  --mat-button-text-state-layer-color: #14b8a6;
  --mat-button-tonal-container-color: #14b8a6;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-button.mat-accent,
.vex-theme-teal.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-teal.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-teal.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-teal.dark .mat-tonal-button.mat-accent,
.vex-theme-teal .dark .mat-mdc-button.mat-accent,
.vex-theme-teal .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-teal .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-teal .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-teal .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-button.mat-warn,
.vex-theme-teal.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-teal.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-teal.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-teal.dark .mat-tonal-button.mat-warn,
.vex-theme-teal .dark .mat-mdc-button.mat-warn,
.vex-theme-teal .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-teal .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-teal .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-teal .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-teal .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #14b8a6;
  --mat-icon-button-state-layer-color: #14b8a6;
  --mat-icon-button-ripple-color: color-mix(in srgb, #14b8a6 12%, transparent);
}
.vex-theme-teal.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-teal .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-teal.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-teal .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-teal.dark .mat-mdc-fab.mat-primary,
.vex-theme-teal.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-teal .dark .mat-mdc-fab.mat-primary,
.vex-theme-teal .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #14b8a6;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #14b8a6 12%, transparent);
  --mat-fab-small-container-color: #14b8a6;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-fab.mat-accent,
.vex-theme-teal.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-teal .dark .mat-mdc-fab.mat-accent,
.vex-theme-teal .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-teal.dark .mat-mdc-fab.mat-warn,
.vex-theme-teal.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-teal .dark .mat-mdc-fab.mat-warn,
.vex-theme-teal .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #0d9488;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #14b8a6;
}
.vex-theme-teal.dark .mat-accent,
.vex-theme-teal .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-teal.dark .mat-warn,
.vex-theme-teal .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-badge-background-color: #14b8a6;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-teal.dark .mat-badge-accent,
.vex-theme-teal .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-teal.dark .mat-badge-warn,
.vex-theme-teal .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #14b8a6 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #14b8a6;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #14b8a6 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #14b8a6 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #14b8a6 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #14b8a6;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-teal.dark .mat-datepicker-content.mat-accent,
.vex-theme-teal.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-teal .dark .mat-datepicker-content.mat-accent,
.vex-theme-teal .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-teal.dark .mat-datepicker-content.mat-warn,
.vex-theme-teal.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-teal .dark .mat-datepicker-content.mat-warn,
.vex-theme-teal .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-teal.dark .mat-icon.mat-primary,
.vex-theme-teal .dark .mat-icon.mat-primary {
  --mat-icon-color: #14b8a6;
}
.vex-theme-teal.dark .mat-icon.mat-accent,
.vex-theme-teal .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-teal.dark .mat-icon.mat-warn,
.vex-theme-teal .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #14b8a6;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #14b8a6;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #14b8a6;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-teal.dark .mat-step-header.mat-accent,
.vex-theme-teal .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-teal.dark .mat-step-header.mat-warn,
.vex-theme-teal .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-teal.dark .mat-toolbar.mat-primary,
.vex-theme-teal .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #14b8a6;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-teal.dark .mat-toolbar.mat-accent,
.vex-theme-teal .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-teal.dark .mat-toolbar.mat-warn,
.vex-theme-teal .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #0891b2;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-cyan .mat-accent,
.vex-theme-cyan.light .mat-accent,
.vex-theme-cyan .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-cyan .mat-warn,
.vex-theme-cyan.light .mat-warn,
.vex-theme-cyan .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-cyan .mat-primary,
.vex-theme-cyan.light .mat-primary,
.vex-theme-cyan .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #0891b2;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #0891b2;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-cyan .mat-accent,
.vex-theme-cyan.light .mat-accent,
.vex-theme-cyan .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-cyan .mat-warn,
.vex-theme-cyan.light .mat-warn,
.vex-theme-cyan .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-cyan .mat-mdc-progress-bar,
.vex-theme-cyan.light .mat-mdc-progress-bar,
.vex-theme-cyan .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #0891b2;
  --mat-progress-bar-track-color: rgba(8, 145, 178, 0.25);
}
.vex-theme-cyan .mat-mdc-progress-bar.mat-accent,
.vex-theme-cyan.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-cyan .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-cyan .mat-mdc-progress-bar.mat-warn,
.vex-theme-cyan.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-cyan .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #0891b2 87%, transparent);
  --mat-form-field-filled-caret-color: #0891b2;
  --mat-form-field-filled-focus-active-indicator-color: #0891b2;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #0891b2 87%, transparent);
  --mat-form-field-outlined-caret-color: #0891b2;
  --mat-form-field-outlined-focus-outline-color: #0891b2;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #0891b2 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-cyan .mat-mdc-form-field.mat-accent,
.vex-theme-cyan.light .mat-mdc-form-field.mat-accent,
.vex-theme-cyan .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-cyan .mat-mdc-form-field.mat-warn,
.vex-theme-cyan.light .mat-mdc-form-field.mat-warn,
.vex-theme-cyan .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #0891b2;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-cyan .mat-mdc-form-field.mat-accent,
.vex-theme-cyan.light .mat-mdc-form-field.mat-accent,
.vex-theme-cyan .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-cyan .mat-mdc-form-field.mat-warn,
.vex-theme-cyan.light .mat-mdc-form-field.mat-warn,
.vex-theme-cyan .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-cyan .mat-mdc-standard-chip,
.vex-theme-cyan.light .mat-mdc-standard-chip,
.vex-theme-cyan .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-cyan .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-cyan.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-cyan.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-cyan .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-cyan .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #0891b2;
  --mat-chip-elevated-disabled-container-color: #0891b2;
  --mat-chip-elevated-selected-container-color: #0891b2;
  --mat-chip-flat-disabled-selected-container-color: #0891b2;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-cyan .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-cyan .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-cyan.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-cyan.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-cyan .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-cyan .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-cyan .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-cyan .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-cyan.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-cyan.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-cyan .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-cyan .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #0891b2;
  --mat-slide-toggle-selected-handle-color: #0891b2;
  --mat-slide-toggle-selected-hover-state-layer-color: #0891b2;
  --mat-slide-toggle-selected-pressed-state-layer-color: #0891b2;
  --mat-slide-toggle-selected-focus-handle-color: #0891b2;
  --mat-slide-toggle-selected-hover-handle-color: #0891b2;
  --mat-slide-toggle-selected-pressed-handle-color: #0891b2;
  --mat-slide-toggle-selected-focus-track-color: #67e8f9;
  --mat-slide-toggle-selected-hover-track-color: #67e8f9;
  --mat-slide-toggle-selected-pressed-track-color: #67e8f9;
  --mat-slide-toggle-selected-track-color: #67e8f9;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-cyan .mat-mdc-slide-toggle.mat-accent,
.vex-theme-cyan.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-cyan .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-cyan .mat-mdc-slide-toggle.mat-warn,
.vex-theme-cyan.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-cyan .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-cyan .mat-mdc-radio-button.mat-primary,
.vex-theme-cyan.light .mat-mdc-radio-button.mat-primary,
.vex-theme-cyan .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #0891b2;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #0891b2;
  --mat-radio-selected-hover-icon-color: #0891b2;
  --mat-radio-selected-icon-color: #0891b2;
  --mat-radio-selected-pressed-icon-color: #0891b2;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-radio-button.mat-accent,
.vex-theme-cyan.light .mat-mdc-radio-button.mat-accent,
.vex-theme-cyan .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-radio-button.mat-warn,
.vex-theme-cyan.light .mat-mdc-radio-button.mat-warn,
.vex-theme-cyan .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-slider-active-track-color: #0891b2;
  --mat-slider-focus-handle-color: #0891b2;
  --mat-slider-handle-color: #0891b2;
  --mat-slider-hover-handle-color: #0891b2;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #0891b2 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #0891b2 4%, transparent);
  --mat-slider-inactive-track-color: #0891b2;
  --mat-slider-ripple-color: #0891b2;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #0891b2;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-accent,
.vex-theme-cyan.light .mat-accent,
.vex-theme-cyan .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-cyan .mat-warn,
.vex-theme-cyan.light .mat-warn,
.vex-theme-cyan .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-cyan .mdc-list-item__start,
.vex-theme-cyan .mdc-list-item__end,
.vex-theme-cyan.light .mdc-list-item__start,
.vex-theme-cyan.light .mdc-list-item__end,
.vex-theme-cyan .light .mdc-list-item__start,
.vex-theme-cyan .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #0891b2;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #0891b2;
  --mat-radio-selected-hover-icon-color: #0891b2;
  --mat-radio-selected-icon-color: #0891b2;
  --mat-radio-selected-pressed-icon-color: #0891b2;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-accent .mdc-list-item__start,
.vex-theme-cyan .mat-accent .mdc-list-item__end,
.vex-theme-cyan.light .mat-accent .mdc-list-item__start,
.vex-theme-cyan.light .mat-accent .mdc-list-item__end,
.vex-theme-cyan .light .mat-accent .mdc-list-item__start,
.vex-theme-cyan .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-warn .mdc-list-item__start,
.vex-theme-cyan .mat-warn .mdc-list-item__end,
.vex-theme-cyan.light .mat-warn .mdc-list-item__start,
.vex-theme-cyan.light .mat-warn .mdc-list-item__end,
.vex-theme-cyan .light .mat-warn .mdc-list-item__start,
.vex-theme-cyan .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-list-option,
.vex-theme-cyan.light .mat-mdc-list-option,
.vex-theme-cyan .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0891b2;
  --mat-checkbox-selected-hover-icon-color: #0891b2;
  --mat-checkbox-selected-icon-color: #0891b2;
  --mat-checkbox-selected-pressed-icon-color: #0891b2;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #0891b2;
  --mat-checkbox-selected-hover-state-layer-color: #0891b2;
  --mat-checkbox-selected-pressed-state-layer-color: #0891b2;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-list-option.mat-accent,
.vex-theme-cyan.light .mat-mdc-list-option.mat-accent,
.vex-theme-cyan .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-list-option.mat-warn,
.vex-theme-cyan.light .mat-mdc-list-option.mat-warn,
.vex-theme-cyan .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-cyan .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-cyan .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-cyan .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-cyan.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-cyan.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-cyan.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-cyan.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-cyan .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-cyan .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-cyan .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-cyan .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #0891b2;
}
.vex-theme-cyan .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-cyan .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-cyan .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-cyan.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-cyan.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-cyan.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-cyan .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-cyan .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-cyan .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-cyan .mat-mdc-tab-group,
.vex-theme-cyan .mat-mdc-tab-nav-bar,
.vex-theme-cyan.light .mat-mdc-tab-group,
.vex-theme-cyan.light .mat-mdc-tab-nav-bar,
.vex-theme-cyan .light .mat-mdc-tab-group,
.vex-theme-cyan .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #0891b2;
  --mat-tab-active-ripple-color: #0891b2;
  --mat-tab-inactive-ripple-color: #0891b2;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #0891b2;
  --mat-tab-active-hover-label-text-color: #0891b2;
  --mat-tab-active-focus-indicator-color: #0891b2;
  --mat-tab-active-hover-indicator-color: #0891b2;
  --mat-tab-active-indicator-color: #0891b2;
}
.vex-theme-cyan .mat-mdc-tab-group.mat-accent,
.vex-theme-cyan .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-cyan.light .mat-mdc-tab-group.mat-accent,
.vex-theme-cyan.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-cyan .light .mat-mdc-tab-group.mat-accent,
.vex-theme-cyan .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-cyan .mat-mdc-tab-group.mat-warn,
.vex-theme-cyan .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-cyan.light .mat-mdc-tab-group.mat-warn,
.vex-theme-cyan.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-cyan .light .mat-mdc-tab-group.mat-warn,
.vex-theme-cyan .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-cyan .mat-mdc-tab-group.mat-background-primary,
.vex-theme-cyan .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-cyan.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-cyan.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-cyan .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-cyan .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #0891b2;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-cyan .mat-mdc-tab-group.mat-background-accent,
.vex-theme-cyan .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-cyan.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-cyan.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-cyan .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-cyan .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-cyan .mat-mdc-tab-group.mat-background-warn,
.vex-theme-cyan .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-cyan.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-cyan.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-cyan .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-cyan .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-checkbox.mat-primary,
.vex-theme-cyan.light .mat-mdc-checkbox.mat-primary,
.vex-theme-cyan .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0891b2;
  --mat-checkbox-selected-hover-icon-color: #0891b2;
  --mat-checkbox-selected-icon-color: #0891b2;
  --mat-checkbox-selected-pressed-icon-color: #0891b2;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #0891b2;
  --mat-checkbox-selected-hover-state-layer-color: #0891b2;
  --mat-checkbox-selected-pressed-state-layer-color: #0891b2;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-checkbox.mat-warn,
.vex-theme-cyan.light .mat-mdc-checkbox.mat-warn,
.vex-theme-cyan .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-button.mat-primary,
.vex-theme-cyan .mat-mdc-unelevated-button.mat-primary,
.vex-theme-cyan .mat-mdc-raised-button.mat-primary,
.vex-theme-cyan .mat-mdc-outlined-button.mat-primary,
.vex-theme-cyan .mat-tonal-button.mat-primary,
.vex-theme-cyan.light .mat-mdc-button.mat-primary,
.vex-theme-cyan.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-cyan.light .mat-mdc-raised-button.mat-primary,
.vex-theme-cyan.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-cyan.light .mat-tonal-button.mat-primary,
.vex-theme-cyan .light .mat-mdc-button.mat-primary,
.vex-theme-cyan .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-cyan .light .mat-mdc-raised-button.mat-primary,
.vex-theme-cyan .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-cyan .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #0891b2;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #0891b2;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #0891b2 12%, transparent);
  --mat-button-outlined-state-layer-color: #0891b2;
  --mat-button-protected-container-color: #0891b2;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #0891b2;
  --mat-button-text-ripple-color: color-mix(in srgb, #0891b2 12%, transparent);
  --mat-button-text-state-layer-color: #0891b2;
  --mat-button-tonal-container-color: #0891b2;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-cyan .mat-mdc-button.mat-accent,
.vex-theme-cyan .mat-mdc-unelevated-button.mat-accent,
.vex-theme-cyan .mat-mdc-raised-button.mat-accent,
.vex-theme-cyan .mat-mdc-outlined-button.mat-accent,
.vex-theme-cyan .mat-tonal-button.mat-accent,
.vex-theme-cyan.light .mat-mdc-button.mat-accent,
.vex-theme-cyan.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-cyan.light .mat-mdc-raised-button.mat-accent,
.vex-theme-cyan.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-cyan.light .mat-tonal-button.mat-accent,
.vex-theme-cyan .light .mat-mdc-button.mat-accent,
.vex-theme-cyan .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-cyan .light .mat-mdc-raised-button.mat-accent,
.vex-theme-cyan .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-cyan .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-cyan .mat-mdc-button.mat-warn,
.vex-theme-cyan .mat-mdc-unelevated-button.mat-warn,
.vex-theme-cyan .mat-mdc-raised-button.mat-warn,
.vex-theme-cyan .mat-mdc-outlined-button.mat-warn,
.vex-theme-cyan .mat-tonal-button.mat-warn,
.vex-theme-cyan.light .mat-mdc-button.mat-warn,
.vex-theme-cyan.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-cyan.light .mat-mdc-raised-button.mat-warn,
.vex-theme-cyan.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-cyan.light .mat-tonal-button.mat-warn,
.vex-theme-cyan .light .mat-mdc-button.mat-warn,
.vex-theme-cyan .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-cyan .light .mat-mdc-raised-button.mat-warn,
.vex-theme-cyan .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-cyan .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-icon-button.mat-primary,
.vex-theme-cyan.light .mat-mdc-icon-button.mat-primary,
.vex-theme-cyan .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #0891b2;
  --mat-icon-button-state-layer-color: #0891b2;
  --mat-icon-button-ripple-color: color-mix(in srgb, #0891b2 12%, transparent);
}
.vex-theme-cyan .mat-mdc-icon-button.mat-accent,
.vex-theme-cyan.light .mat-mdc-icon-button.mat-accent,
.vex-theme-cyan .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-cyan .mat-mdc-icon-button.mat-warn,
.vex-theme-cyan.light .mat-mdc-icon-button.mat-warn,
.vex-theme-cyan .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-mdc-fab.mat-primary,
.vex-theme-cyan .mat-mdc-mini-fab.mat-primary,
.vex-theme-cyan.light .mat-mdc-fab.mat-primary,
.vex-theme-cyan.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-cyan .light .mat-mdc-fab.mat-primary,
.vex-theme-cyan .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #0891b2;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #0891b2 12%, transparent);
  --mat-fab-small-container-color: #0891b2;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-cyan .mat-mdc-fab.mat-accent,
.vex-theme-cyan .mat-mdc-mini-fab.mat-accent,
.vex-theme-cyan.light .mat-mdc-fab.mat-accent,
.vex-theme-cyan.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-cyan .light .mat-mdc-fab.mat-accent,
.vex-theme-cyan .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-cyan .mat-mdc-fab.mat-warn,
.vex-theme-cyan .mat-mdc-mini-fab.mat-warn,
.vex-theme-cyan.light .mat-mdc-fab.mat-warn,
.vex-theme-cyan.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-cyan .light .mat-mdc-fab.mat-warn,
.vex-theme-cyan .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #67e8f9;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #0891b2;
}
.vex-theme-cyan .mat-accent,
.vex-theme-cyan.light .mat-accent,
.vex-theme-cyan .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-cyan .mat-warn,
.vex-theme-cyan.light .mat-warn,
.vex-theme-cyan .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-badge-background-color: #0891b2;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-cyan .mat-badge-accent,
.vex-theme-cyan.light .mat-badge-accent,
.vex-theme-cyan .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-cyan .mat-badge-warn,
.vex-theme-cyan.light .mat-badge-warn,
.vex-theme-cyan .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #0891b2 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #0891b2;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #0891b2 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #0891b2 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #0891b2 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #0891b2;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-datepicker-content.mat-accent,
.vex-theme-cyan .mat-datepicker-toggle-active.mat-accent,
.vex-theme-cyan.light .mat-datepicker-content.mat-accent,
.vex-theme-cyan.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-cyan .light .mat-datepicker-content.mat-accent,
.vex-theme-cyan .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-datepicker-content.mat-warn,
.vex-theme-cyan .mat-datepicker-toggle-active.mat-warn,
.vex-theme-cyan.light .mat-datepicker-content.mat-warn,
.vex-theme-cyan.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-cyan .light .mat-datepicker-content.mat-warn,
.vex-theme-cyan .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-cyan .mat-icon.mat-primary,
.vex-theme-cyan.light .mat-icon.mat-primary,
.vex-theme-cyan .light .mat-icon.mat-primary {
  --mat-icon-color: #0891b2;
}
.vex-theme-cyan .mat-icon.mat-accent,
.vex-theme-cyan.light .mat-icon.mat-accent,
.vex-theme-cyan .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-cyan .mat-icon.mat-warn,
.vex-theme-cyan.light .mat-icon.mat-warn,
.vex-theme-cyan .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #0891b2;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #0891b2;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #0891b2;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-cyan .mat-step-header.mat-accent,
.vex-theme-cyan.light .mat-step-header.mat-accent,
.vex-theme-cyan .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-cyan .mat-step-header.mat-warn,
.vex-theme-cyan.light .mat-step-header.mat-warn,
.vex-theme-cyan .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-cyan .mat-toolbar.mat-primary,
.vex-theme-cyan.light .mat-toolbar.mat-primary,
.vex-theme-cyan .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #0891b2;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-cyan .mat-toolbar.mat-accent,
.vex-theme-cyan.light .mat-toolbar.mat-accent,
.vex-theme-cyan .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-cyan .mat-toolbar.mat-warn,
.vex-theme-cyan.light .mat-toolbar.mat-warn,
.vex-theme-cyan .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-cyan,
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #06b6d4;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-cyan.dark .mat-accent,
.vex-theme-cyan .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-cyan.dark .mat-warn,
.vex-theme-cyan .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-cyan.dark .mat-primary,
.vex-theme-cyan .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #06b6d4;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #06b6d4;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-cyan.dark .mat-accent,
.vex-theme-cyan .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-cyan.dark .mat-warn,
.vex-theme-cyan .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-cyan.dark .mat-mdc-progress-bar,
.vex-theme-cyan .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #06b6d4;
  --mat-progress-bar-track-color: rgba(6, 182, 212, 0.25);
}
.vex-theme-cyan.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-cyan .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-cyan.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-cyan .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #06b6d4 87%, transparent);
  --mat-form-field-filled-caret-color: #06b6d4;
  --mat-form-field-filled-focus-active-indicator-color: #06b6d4;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #06b6d4 87%, transparent);
  --mat-form-field-outlined-caret-color: #06b6d4;
  --mat-form-field-outlined-focus-outline-color: #06b6d4;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #06b6d4 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-cyan.dark .mat-mdc-form-field.mat-accent,
.vex-theme-cyan .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-cyan.dark .mat-mdc-form-field.mat-warn,
.vex-theme-cyan .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #06b6d4;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-cyan.dark .mat-mdc-form-field.mat-accent,
.vex-theme-cyan .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-cyan.dark .mat-mdc-form-field.mat-warn,
.vex-theme-cyan .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-cyan.dark .mat-mdc-standard-chip,
.vex-theme-cyan .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-cyan.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-cyan.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-cyan .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-cyan .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #06b6d4;
  --mat-chip-elevated-disabled-container-color: #06b6d4;
  --mat-chip-elevated-selected-container-color: #06b6d4;
  --mat-chip-flat-disabled-selected-container-color: #06b6d4;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-cyan.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-cyan .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-cyan .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-cyan.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-cyan .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-cyan .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #06b6d4;
  --mat-slide-toggle-selected-handle-color: #06b6d4;
  --mat-slide-toggle-selected-hover-state-layer-color: #06b6d4;
  --mat-slide-toggle-selected-pressed-state-layer-color: #06b6d4;
  --mat-slide-toggle-selected-focus-handle-color: #06b6d4;
  --mat-slide-toggle-selected-hover-handle-color: #06b6d4;
  --mat-slide-toggle-selected-pressed-handle-color: #06b6d4;
  --mat-slide-toggle-selected-focus-track-color: #0891b2;
  --mat-slide-toggle-selected-hover-track-color: #0891b2;
  --mat-slide-toggle-selected-pressed-track-color: #0891b2;
  --mat-slide-toggle-selected-track-color: #0891b2;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-cyan.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-cyan .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-cyan.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-cyan .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-cyan.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-cyan .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #06b6d4;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #06b6d4;
  --mat-radio-selected-hover-icon-color: #06b6d4;
  --mat-radio-selected-icon-color: #06b6d4;
  --mat-radio-selected-pressed-icon-color: #06b6d4;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-cyan.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-cyan .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-cyan.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-cyan .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-slider-active-track-color: #06b6d4;
  --mat-slider-focus-handle-color: #06b6d4;
  --mat-slider-handle-color: #06b6d4;
  --mat-slider-hover-handle-color: #06b6d4;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #06b6d4 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #06b6d4 4%, transparent);
  --mat-slider-inactive-track-color: #06b6d4;
  --mat-slider-ripple-color: #06b6d4;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #06b6d4;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-cyan.dark .mat-accent,
.vex-theme-cyan .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-cyan.dark .mat-warn,
.vex-theme-cyan .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-cyan.dark .mdc-list-item__start,
.vex-theme-cyan.dark .mdc-list-item__end,
.vex-theme-cyan .dark .mdc-list-item__start,
.vex-theme-cyan .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #06b6d4;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #06b6d4;
  --mat-radio-selected-hover-icon-color: #06b6d4;
  --mat-radio-selected-icon-color: #06b6d4;
  --mat-radio-selected-pressed-icon-color: #06b6d4;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-cyan.dark .mat-accent .mdc-list-item__start,
.vex-theme-cyan.dark .mat-accent .mdc-list-item__end,
.vex-theme-cyan .dark .mat-accent .mdc-list-item__start,
.vex-theme-cyan .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-cyan.dark .mat-warn .mdc-list-item__start,
.vex-theme-cyan.dark .mat-warn .mdc-list-item__end,
.vex-theme-cyan .dark .mat-warn .mdc-list-item__start,
.vex-theme-cyan .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-cyan.dark .mat-mdc-list-option,
.vex-theme-cyan .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #06b6d4;
  --mat-checkbox-selected-hover-icon-color: #06b6d4;
  --mat-checkbox-selected-icon-color: #06b6d4;
  --mat-checkbox-selected-pressed-icon-color: #06b6d4;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #06b6d4;
  --mat-checkbox-selected-hover-state-layer-color: #06b6d4;
  --mat-checkbox-selected-pressed-state-layer-color: #06b6d4;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-list-option.mat-accent,
.vex-theme-cyan .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-list-option.mat-warn,
.vex-theme-cyan .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-cyan.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-cyan.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-cyan.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-cyan .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-cyan .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-cyan .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-cyan .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #06b6d4;
}
.vex-theme-cyan.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-cyan.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-cyan.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-cyan .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-cyan .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-cyan .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-cyan.dark .mat-mdc-tab-group,
.vex-theme-cyan.dark .mat-mdc-tab-nav-bar,
.vex-theme-cyan .dark .mat-mdc-tab-group,
.vex-theme-cyan .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #06b6d4;
  --mat-tab-active-ripple-color: #06b6d4;
  --mat-tab-inactive-ripple-color: #06b6d4;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #06b6d4;
  --mat-tab-active-hover-label-text-color: #06b6d4;
  --mat-tab-active-focus-indicator-color: #06b6d4;
  --mat-tab-active-hover-indicator-color: #06b6d4;
  --mat-tab-active-indicator-color: #06b6d4;
}
.vex-theme-cyan.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-cyan.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-cyan .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-cyan .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-cyan.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-cyan.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-cyan .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-cyan .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-cyan.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-cyan.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-cyan .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-cyan .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #06b6d4;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-cyan.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-cyan .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-cyan .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-cyan.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-cyan .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-cyan .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-cyan .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #06b6d4;
  --mat-checkbox-selected-hover-icon-color: #06b6d4;
  --mat-checkbox-selected-icon-color: #06b6d4;
  --mat-checkbox-selected-pressed-icon-color: #06b6d4;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #06b6d4;
  --mat-checkbox-selected-hover-state-layer-color: #06b6d4;
  --mat-checkbox-selected-pressed-state-layer-color: #06b6d4;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-cyan .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-button.mat-primary,
.vex-theme-cyan.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-cyan.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-cyan.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-cyan.dark .mat-tonal-button.mat-primary,
.vex-theme-cyan .dark .mat-mdc-button.mat-primary,
.vex-theme-cyan .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-cyan .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-cyan .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-cyan .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #06b6d4;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #06b6d4;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #06b6d4 12%, transparent);
  --mat-button-outlined-state-layer-color: #06b6d4;
  --mat-button-protected-container-color: #06b6d4;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #06b6d4;
  --mat-button-text-ripple-color: color-mix(in srgb, #06b6d4 12%, transparent);
  --mat-button-text-state-layer-color: #06b6d4;
  --mat-button-tonal-container-color: #06b6d4;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-button.mat-accent,
.vex-theme-cyan.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-cyan.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-cyan.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-cyan.dark .mat-tonal-button.mat-accent,
.vex-theme-cyan .dark .mat-mdc-button.mat-accent,
.vex-theme-cyan .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-cyan .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-cyan .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-cyan .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-button.mat-warn,
.vex-theme-cyan.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-cyan.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-cyan.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-cyan.dark .mat-tonal-button.mat-warn,
.vex-theme-cyan .dark .mat-mdc-button.mat-warn,
.vex-theme-cyan .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-cyan .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-cyan .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-cyan .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-cyan .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #06b6d4;
  --mat-icon-button-state-layer-color: #06b6d4;
  --mat-icon-button-ripple-color: color-mix(in srgb, #06b6d4 12%, transparent);
}
.vex-theme-cyan.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-cyan .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-cyan.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-cyan .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-cyan.dark .mat-mdc-fab.mat-primary,
.vex-theme-cyan.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-cyan .dark .mat-mdc-fab.mat-primary,
.vex-theme-cyan .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #06b6d4;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #06b6d4 12%, transparent);
  --mat-fab-small-container-color: #06b6d4;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-fab.mat-accent,
.vex-theme-cyan.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-cyan .dark .mat-mdc-fab.mat-accent,
.vex-theme-cyan .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-cyan.dark .mat-mdc-fab.mat-warn,
.vex-theme-cyan.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-cyan .dark .mat-mdc-fab.mat-warn,
.vex-theme-cyan .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #0891b2;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #06b6d4;
}
.vex-theme-cyan.dark .mat-accent,
.vex-theme-cyan .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-cyan.dark .mat-warn,
.vex-theme-cyan .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-badge-background-color: #06b6d4;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-cyan.dark .mat-badge-accent,
.vex-theme-cyan .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-cyan.dark .mat-badge-warn,
.vex-theme-cyan .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #06b6d4 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #06b6d4;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #06b6d4 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #06b6d4 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #06b6d4 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #06b6d4;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-cyan.dark .mat-datepicker-content.mat-accent,
.vex-theme-cyan.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-cyan .dark .mat-datepicker-content.mat-accent,
.vex-theme-cyan .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-cyan.dark .mat-datepicker-content.mat-warn,
.vex-theme-cyan.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-cyan .dark .mat-datepicker-content.mat-warn,
.vex-theme-cyan .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-cyan.dark .mat-icon.mat-primary,
.vex-theme-cyan .dark .mat-icon.mat-primary {
  --mat-icon-color: #06b6d4;
}
.vex-theme-cyan.dark .mat-icon.mat-accent,
.vex-theme-cyan .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-cyan.dark .mat-icon.mat-warn,
.vex-theme-cyan .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #06b6d4;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #06b6d4;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #06b6d4;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-cyan.dark .mat-step-header.mat-accent,
.vex-theme-cyan .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-cyan.dark .mat-step-header.mat-warn,
.vex-theme-cyan .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-cyan.dark .mat-toolbar.mat-primary,
.vex-theme-cyan .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #06b6d4;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-cyan.dark .mat-toolbar.mat-accent,
.vex-theme-cyan .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-cyan.dark .mat-toolbar.mat-warn,
.vex-theme-cyan .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #0284c7;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-sky .mat-accent,
.vex-theme-sky.light .mat-accent,
.vex-theme-sky .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-sky .mat-warn,
.vex-theme-sky.light .mat-warn,
.vex-theme-sky .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-sky .mat-primary,
.vex-theme-sky.light .mat-primary,
.vex-theme-sky .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #0284c7;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #0284c7;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-sky .mat-accent,
.vex-theme-sky.light .mat-accent,
.vex-theme-sky .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-sky .mat-warn,
.vex-theme-sky.light .mat-warn,
.vex-theme-sky .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-sky .mat-mdc-progress-bar,
.vex-theme-sky.light .mat-mdc-progress-bar,
.vex-theme-sky .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #0284c7;
  --mat-progress-bar-track-color: rgba(2, 132, 199, 0.25);
}
.vex-theme-sky .mat-mdc-progress-bar.mat-accent,
.vex-theme-sky.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-sky .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-sky .mat-mdc-progress-bar.mat-warn,
.vex-theme-sky.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-sky .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #0284c7 87%, transparent);
  --mat-form-field-filled-caret-color: #0284c7;
  --mat-form-field-filled-focus-active-indicator-color: #0284c7;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #0284c7 87%, transparent);
  --mat-form-field-outlined-caret-color: #0284c7;
  --mat-form-field-outlined-focus-outline-color: #0284c7;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #0284c7 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-sky .mat-mdc-form-field.mat-accent,
.vex-theme-sky.light .mat-mdc-form-field.mat-accent,
.vex-theme-sky .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-sky .mat-mdc-form-field.mat-warn,
.vex-theme-sky.light .mat-mdc-form-field.mat-warn,
.vex-theme-sky .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #0284c7;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-sky .mat-mdc-form-field.mat-accent,
.vex-theme-sky.light .mat-mdc-form-field.mat-accent,
.vex-theme-sky .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-sky .mat-mdc-form-field.mat-warn,
.vex-theme-sky.light .mat-mdc-form-field.mat-warn,
.vex-theme-sky .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-sky .mat-mdc-standard-chip,
.vex-theme-sky.light .mat-mdc-standard-chip,
.vex-theme-sky .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-sky .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-sky.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-sky.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-sky .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-sky .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #0284c7;
  --mat-chip-elevated-disabled-container-color: #0284c7;
  --mat-chip-elevated-selected-container-color: #0284c7;
  --mat-chip-flat-disabled-selected-container-color: #0284c7;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-sky .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-sky .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-sky.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-sky.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-sky .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-sky .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-sky .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-sky .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-sky.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-sky.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-sky .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-sky .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #0284c7;
  --mat-slide-toggle-selected-handle-color: #0284c7;
  --mat-slide-toggle-selected-hover-state-layer-color: #0284c7;
  --mat-slide-toggle-selected-pressed-state-layer-color: #0284c7;
  --mat-slide-toggle-selected-focus-handle-color: #0284c7;
  --mat-slide-toggle-selected-hover-handle-color: #0284c7;
  --mat-slide-toggle-selected-pressed-handle-color: #0284c7;
  --mat-slide-toggle-selected-focus-track-color: #7dd3fc;
  --mat-slide-toggle-selected-hover-track-color: #7dd3fc;
  --mat-slide-toggle-selected-pressed-track-color: #7dd3fc;
  --mat-slide-toggle-selected-track-color: #7dd3fc;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-sky .mat-mdc-slide-toggle.mat-accent,
.vex-theme-sky.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-sky .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-sky .mat-mdc-slide-toggle.mat-warn,
.vex-theme-sky.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-sky .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-sky .mat-mdc-radio-button.mat-primary,
.vex-theme-sky.light .mat-mdc-radio-button.mat-primary,
.vex-theme-sky .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #0284c7;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #0284c7;
  --mat-radio-selected-hover-icon-color: #0284c7;
  --mat-radio-selected-icon-color: #0284c7;
  --mat-radio-selected-pressed-icon-color: #0284c7;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-radio-button.mat-accent,
.vex-theme-sky.light .mat-mdc-radio-button.mat-accent,
.vex-theme-sky .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-radio-button.mat-warn,
.vex-theme-sky.light .mat-mdc-radio-button.mat-warn,
.vex-theme-sky .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-slider-active-track-color: #0284c7;
  --mat-slider-focus-handle-color: #0284c7;
  --mat-slider-handle-color: #0284c7;
  --mat-slider-hover-handle-color: #0284c7;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #0284c7 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #0284c7 4%, transparent);
  --mat-slider-inactive-track-color: #0284c7;
  --mat-slider-ripple-color: #0284c7;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #0284c7;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-accent,
.vex-theme-sky.light .mat-accent,
.vex-theme-sky .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-sky .mat-warn,
.vex-theme-sky.light .mat-warn,
.vex-theme-sky .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-sky .mdc-list-item__start,
.vex-theme-sky .mdc-list-item__end,
.vex-theme-sky.light .mdc-list-item__start,
.vex-theme-sky.light .mdc-list-item__end,
.vex-theme-sky .light .mdc-list-item__start,
.vex-theme-sky .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #0284c7;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #0284c7;
  --mat-radio-selected-hover-icon-color: #0284c7;
  --mat-radio-selected-icon-color: #0284c7;
  --mat-radio-selected-pressed-icon-color: #0284c7;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-accent .mdc-list-item__start,
.vex-theme-sky .mat-accent .mdc-list-item__end,
.vex-theme-sky.light .mat-accent .mdc-list-item__start,
.vex-theme-sky.light .mat-accent .mdc-list-item__end,
.vex-theme-sky .light .mat-accent .mdc-list-item__start,
.vex-theme-sky .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-warn .mdc-list-item__start,
.vex-theme-sky .mat-warn .mdc-list-item__end,
.vex-theme-sky.light .mat-warn .mdc-list-item__start,
.vex-theme-sky.light .mat-warn .mdc-list-item__end,
.vex-theme-sky .light .mat-warn .mdc-list-item__start,
.vex-theme-sky .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-list-option,
.vex-theme-sky.light .mat-mdc-list-option,
.vex-theme-sky .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0284c7;
  --mat-checkbox-selected-hover-icon-color: #0284c7;
  --mat-checkbox-selected-icon-color: #0284c7;
  --mat-checkbox-selected-pressed-icon-color: #0284c7;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #0284c7;
  --mat-checkbox-selected-hover-state-layer-color: #0284c7;
  --mat-checkbox-selected-pressed-state-layer-color: #0284c7;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-list-option.mat-accent,
.vex-theme-sky.light .mat-mdc-list-option.mat-accent,
.vex-theme-sky .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-list-option.mat-warn,
.vex-theme-sky.light .mat-mdc-list-option.mat-warn,
.vex-theme-sky .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-sky .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-sky .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-sky .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-sky.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-sky.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-sky.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-sky.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-sky .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-sky .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-sky .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-sky .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #0284c7;
}
.vex-theme-sky .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-sky .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-sky .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-sky.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-sky.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-sky.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-sky .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-sky .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-sky .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-sky .mat-mdc-tab-group,
.vex-theme-sky .mat-mdc-tab-nav-bar,
.vex-theme-sky.light .mat-mdc-tab-group,
.vex-theme-sky.light .mat-mdc-tab-nav-bar,
.vex-theme-sky .light .mat-mdc-tab-group,
.vex-theme-sky .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #0284c7;
  --mat-tab-active-ripple-color: #0284c7;
  --mat-tab-inactive-ripple-color: #0284c7;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #0284c7;
  --mat-tab-active-hover-label-text-color: #0284c7;
  --mat-tab-active-focus-indicator-color: #0284c7;
  --mat-tab-active-hover-indicator-color: #0284c7;
  --mat-tab-active-indicator-color: #0284c7;
}
.vex-theme-sky .mat-mdc-tab-group.mat-accent,
.vex-theme-sky .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-sky.light .mat-mdc-tab-group.mat-accent,
.vex-theme-sky.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-sky .light .mat-mdc-tab-group.mat-accent,
.vex-theme-sky .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-sky .mat-mdc-tab-group.mat-warn,
.vex-theme-sky .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-sky.light .mat-mdc-tab-group.mat-warn,
.vex-theme-sky.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-sky .light .mat-mdc-tab-group.mat-warn,
.vex-theme-sky .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-sky .mat-mdc-tab-group.mat-background-primary,
.vex-theme-sky .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-sky.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-sky.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-sky .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-sky .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #0284c7;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-sky .mat-mdc-tab-group.mat-background-accent,
.vex-theme-sky .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-sky.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-sky.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-sky .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-sky .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-sky .mat-mdc-tab-group.mat-background-warn,
.vex-theme-sky .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-sky.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-sky.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-sky .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-sky .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-checkbox.mat-primary,
.vex-theme-sky.light .mat-mdc-checkbox.mat-primary,
.vex-theme-sky .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0284c7;
  --mat-checkbox-selected-hover-icon-color: #0284c7;
  --mat-checkbox-selected-icon-color: #0284c7;
  --mat-checkbox-selected-pressed-icon-color: #0284c7;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #0284c7;
  --mat-checkbox-selected-hover-state-layer-color: #0284c7;
  --mat-checkbox-selected-pressed-state-layer-color: #0284c7;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-checkbox.mat-warn,
.vex-theme-sky.light .mat-mdc-checkbox.mat-warn,
.vex-theme-sky .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-button.mat-primary,
.vex-theme-sky .mat-mdc-unelevated-button.mat-primary,
.vex-theme-sky .mat-mdc-raised-button.mat-primary,
.vex-theme-sky .mat-mdc-outlined-button.mat-primary,
.vex-theme-sky .mat-tonal-button.mat-primary,
.vex-theme-sky.light .mat-mdc-button.mat-primary,
.vex-theme-sky.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-sky.light .mat-mdc-raised-button.mat-primary,
.vex-theme-sky.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-sky.light .mat-tonal-button.mat-primary,
.vex-theme-sky .light .mat-mdc-button.mat-primary,
.vex-theme-sky .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-sky .light .mat-mdc-raised-button.mat-primary,
.vex-theme-sky .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-sky .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #0284c7;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #0284c7;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #0284c7 12%, transparent);
  --mat-button-outlined-state-layer-color: #0284c7;
  --mat-button-protected-container-color: #0284c7;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #0284c7;
  --mat-button-text-ripple-color: color-mix(in srgb, #0284c7 12%, transparent);
  --mat-button-text-state-layer-color: #0284c7;
  --mat-button-tonal-container-color: #0284c7;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-sky .mat-mdc-button.mat-accent,
.vex-theme-sky .mat-mdc-unelevated-button.mat-accent,
.vex-theme-sky .mat-mdc-raised-button.mat-accent,
.vex-theme-sky .mat-mdc-outlined-button.mat-accent,
.vex-theme-sky .mat-tonal-button.mat-accent,
.vex-theme-sky.light .mat-mdc-button.mat-accent,
.vex-theme-sky.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-sky.light .mat-mdc-raised-button.mat-accent,
.vex-theme-sky.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-sky.light .mat-tonal-button.mat-accent,
.vex-theme-sky .light .mat-mdc-button.mat-accent,
.vex-theme-sky .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-sky .light .mat-mdc-raised-button.mat-accent,
.vex-theme-sky .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-sky .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-sky .mat-mdc-button.mat-warn,
.vex-theme-sky .mat-mdc-unelevated-button.mat-warn,
.vex-theme-sky .mat-mdc-raised-button.mat-warn,
.vex-theme-sky .mat-mdc-outlined-button.mat-warn,
.vex-theme-sky .mat-tonal-button.mat-warn,
.vex-theme-sky.light .mat-mdc-button.mat-warn,
.vex-theme-sky.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-sky.light .mat-mdc-raised-button.mat-warn,
.vex-theme-sky.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-sky.light .mat-tonal-button.mat-warn,
.vex-theme-sky .light .mat-mdc-button.mat-warn,
.vex-theme-sky .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-sky .light .mat-mdc-raised-button.mat-warn,
.vex-theme-sky .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-sky .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-icon-button.mat-primary,
.vex-theme-sky.light .mat-mdc-icon-button.mat-primary,
.vex-theme-sky .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #0284c7;
  --mat-icon-button-state-layer-color: #0284c7;
  --mat-icon-button-ripple-color: color-mix(in srgb, #0284c7 12%, transparent);
}
.vex-theme-sky .mat-mdc-icon-button.mat-accent,
.vex-theme-sky.light .mat-mdc-icon-button.mat-accent,
.vex-theme-sky .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-sky .mat-mdc-icon-button.mat-warn,
.vex-theme-sky.light .mat-mdc-icon-button.mat-warn,
.vex-theme-sky .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-mdc-fab.mat-primary,
.vex-theme-sky .mat-mdc-mini-fab.mat-primary,
.vex-theme-sky.light .mat-mdc-fab.mat-primary,
.vex-theme-sky.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-sky .light .mat-mdc-fab.mat-primary,
.vex-theme-sky .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #0284c7;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #0284c7 12%, transparent);
  --mat-fab-small-container-color: #0284c7;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-sky .mat-mdc-fab.mat-accent,
.vex-theme-sky .mat-mdc-mini-fab.mat-accent,
.vex-theme-sky.light .mat-mdc-fab.mat-accent,
.vex-theme-sky.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-sky .light .mat-mdc-fab.mat-accent,
.vex-theme-sky .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-sky .mat-mdc-fab.mat-warn,
.vex-theme-sky .mat-mdc-mini-fab.mat-warn,
.vex-theme-sky.light .mat-mdc-fab.mat-warn,
.vex-theme-sky.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-sky .light .mat-mdc-fab.mat-warn,
.vex-theme-sky .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #7dd3fc;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #0284c7;
}
.vex-theme-sky .mat-accent,
.vex-theme-sky.light .mat-accent,
.vex-theme-sky .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-sky .mat-warn,
.vex-theme-sky.light .mat-warn,
.vex-theme-sky .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-badge-background-color: #0284c7;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-sky .mat-badge-accent,
.vex-theme-sky.light .mat-badge-accent,
.vex-theme-sky .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-sky .mat-badge-warn,
.vex-theme-sky.light .mat-badge-warn,
.vex-theme-sky .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #0284c7 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #0284c7;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #0284c7 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #0284c7 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #0284c7 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #0284c7;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-datepicker-content.mat-accent,
.vex-theme-sky .mat-datepicker-toggle-active.mat-accent,
.vex-theme-sky.light .mat-datepicker-content.mat-accent,
.vex-theme-sky.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-sky .light .mat-datepicker-content.mat-accent,
.vex-theme-sky .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-datepicker-content.mat-warn,
.vex-theme-sky .mat-datepicker-toggle-active.mat-warn,
.vex-theme-sky.light .mat-datepicker-content.mat-warn,
.vex-theme-sky.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-sky .light .mat-datepicker-content.mat-warn,
.vex-theme-sky .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-sky .mat-icon.mat-primary,
.vex-theme-sky.light .mat-icon.mat-primary,
.vex-theme-sky .light .mat-icon.mat-primary {
  --mat-icon-color: #0284c7;
}
.vex-theme-sky .mat-icon.mat-accent,
.vex-theme-sky.light .mat-icon.mat-accent,
.vex-theme-sky .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-sky .mat-icon.mat-warn,
.vex-theme-sky.light .mat-icon.mat-warn,
.vex-theme-sky .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #0284c7;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #0284c7;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #0284c7;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-sky .mat-step-header.mat-accent,
.vex-theme-sky.light .mat-step-header.mat-accent,
.vex-theme-sky .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-sky .mat-step-header.mat-warn,
.vex-theme-sky.light .mat-step-header.mat-warn,
.vex-theme-sky .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-sky .mat-toolbar.mat-primary,
.vex-theme-sky.light .mat-toolbar.mat-primary,
.vex-theme-sky .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #0284c7;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-sky .mat-toolbar.mat-accent,
.vex-theme-sky.light .mat-toolbar.mat-accent,
.vex-theme-sky .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-sky .mat-toolbar.mat-warn,
.vex-theme-sky.light .mat-toolbar.mat-warn,
.vex-theme-sky .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-sky,
.vex-theme-sky.light,
.vex-theme-sky .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #0ea5e9;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-sky.dark .mat-accent,
.vex-theme-sky .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-sky.dark .mat-warn,
.vex-theme-sky .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-sky.dark .mat-primary,
.vex-theme-sky .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #0ea5e9;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #0ea5e9;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-sky.dark .mat-accent,
.vex-theme-sky .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-sky.dark .mat-warn,
.vex-theme-sky .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-sky.dark .mat-mdc-progress-bar,
.vex-theme-sky .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #0ea5e9;
  --mat-progress-bar-track-color: rgba(14, 165, 233, 0.25);
}
.vex-theme-sky.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-sky .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-sky.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-sky .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #0ea5e9 87%, transparent);
  --mat-form-field-filled-caret-color: #0ea5e9;
  --mat-form-field-filled-focus-active-indicator-color: #0ea5e9;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #0ea5e9 87%, transparent);
  --mat-form-field-outlined-caret-color: #0ea5e9;
  --mat-form-field-outlined-focus-outline-color: #0ea5e9;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #0ea5e9 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-sky.dark .mat-mdc-form-field.mat-accent,
.vex-theme-sky .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-sky.dark .mat-mdc-form-field.mat-warn,
.vex-theme-sky .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #0ea5e9;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-sky.dark .mat-mdc-form-field.mat-accent,
.vex-theme-sky .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-sky.dark .mat-mdc-form-field.mat-warn,
.vex-theme-sky .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-sky.dark .mat-mdc-standard-chip,
.vex-theme-sky .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-sky.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-sky.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-sky .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-sky .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #0ea5e9;
  --mat-chip-elevated-disabled-container-color: #0ea5e9;
  --mat-chip-elevated-selected-container-color: #0ea5e9;
  --mat-chip-flat-disabled-selected-container-color: #0ea5e9;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-sky.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-sky .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-sky .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-sky.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-sky .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-sky .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #0ea5e9;
  --mat-slide-toggle-selected-handle-color: #0ea5e9;
  --mat-slide-toggle-selected-hover-state-layer-color: #0ea5e9;
  --mat-slide-toggle-selected-pressed-state-layer-color: #0ea5e9;
  --mat-slide-toggle-selected-focus-handle-color: #0ea5e9;
  --mat-slide-toggle-selected-hover-handle-color: #0ea5e9;
  --mat-slide-toggle-selected-pressed-handle-color: #0ea5e9;
  --mat-slide-toggle-selected-focus-track-color: #0284c7;
  --mat-slide-toggle-selected-hover-track-color: #0284c7;
  --mat-slide-toggle-selected-pressed-track-color: #0284c7;
  --mat-slide-toggle-selected-track-color: #0284c7;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-sky.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-sky .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-sky.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-sky .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-sky.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-sky .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #0ea5e9;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #0ea5e9;
  --mat-radio-selected-hover-icon-color: #0ea5e9;
  --mat-radio-selected-icon-color: #0ea5e9;
  --mat-radio-selected-pressed-icon-color: #0ea5e9;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-sky.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-sky .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-sky.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-sky .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-slider-active-track-color: #0ea5e9;
  --mat-slider-focus-handle-color: #0ea5e9;
  --mat-slider-handle-color: #0ea5e9;
  --mat-slider-hover-handle-color: #0ea5e9;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #0ea5e9 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #0ea5e9 4%, transparent);
  --mat-slider-inactive-track-color: #0ea5e9;
  --mat-slider-ripple-color: #0ea5e9;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #0ea5e9;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-sky.dark .mat-accent,
.vex-theme-sky .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-sky.dark .mat-warn,
.vex-theme-sky .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-sky.dark .mdc-list-item__start,
.vex-theme-sky.dark .mdc-list-item__end,
.vex-theme-sky .dark .mdc-list-item__start,
.vex-theme-sky .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #0ea5e9;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #0ea5e9;
  --mat-radio-selected-hover-icon-color: #0ea5e9;
  --mat-radio-selected-icon-color: #0ea5e9;
  --mat-radio-selected-pressed-icon-color: #0ea5e9;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-sky.dark .mat-accent .mdc-list-item__start,
.vex-theme-sky.dark .mat-accent .mdc-list-item__end,
.vex-theme-sky .dark .mat-accent .mdc-list-item__start,
.vex-theme-sky .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-sky.dark .mat-warn .mdc-list-item__start,
.vex-theme-sky.dark .mat-warn .mdc-list-item__end,
.vex-theme-sky .dark .mat-warn .mdc-list-item__start,
.vex-theme-sky .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-sky.dark .mat-mdc-list-option,
.vex-theme-sky .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0ea5e9;
  --mat-checkbox-selected-hover-icon-color: #0ea5e9;
  --mat-checkbox-selected-icon-color: #0ea5e9;
  --mat-checkbox-selected-pressed-icon-color: #0ea5e9;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #0ea5e9;
  --mat-checkbox-selected-hover-state-layer-color: #0ea5e9;
  --mat-checkbox-selected-pressed-state-layer-color: #0ea5e9;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-list-option.mat-accent,
.vex-theme-sky .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-list-option.mat-warn,
.vex-theme-sky .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-sky.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-sky.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-sky.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-sky .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-sky .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-sky .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-sky .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #0ea5e9;
}
.vex-theme-sky.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-sky.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-sky.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-sky .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-sky .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-sky .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-sky.dark .mat-mdc-tab-group,
.vex-theme-sky.dark .mat-mdc-tab-nav-bar,
.vex-theme-sky .dark .mat-mdc-tab-group,
.vex-theme-sky .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #0ea5e9;
  --mat-tab-active-ripple-color: #0ea5e9;
  --mat-tab-inactive-ripple-color: #0ea5e9;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #0ea5e9;
  --mat-tab-active-hover-label-text-color: #0ea5e9;
  --mat-tab-active-focus-indicator-color: #0ea5e9;
  --mat-tab-active-hover-indicator-color: #0ea5e9;
  --mat-tab-active-indicator-color: #0ea5e9;
}
.vex-theme-sky.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-sky.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-sky .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-sky .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-sky.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-sky.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-sky .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-sky .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-sky.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-sky.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-sky .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-sky .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #0ea5e9;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-sky.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-sky .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-sky .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-sky.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-sky .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-sky .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-sky .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #0ea5e9;
  --mat-checkbox-selected-hover-icon-color: #0ea5e9;
  --mat-checkbox-selected-icon-color: #0ea5e9;
  --mat-checkbox-selected-pressed-icon-color: #0ea5e9;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #0ea5e9;
  --mat-checkbox-selected-hover-state-layer-color: #0ea5e9;
  --mat-checkbox-selected-pressed-state-layer-color: #0ea5e9;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-sky .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-button.mat-primary,
.vex-theme-sky.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-sky.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-sky.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-sky.dark .mat-tonal-button.mat-primary,
.vex-theme-sky .dark .mat-mdc-button.mat-primary,
.vex-theme-sky .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-sky .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-sky .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-sky .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #0ea5e9;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #0ea5e9;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #0ea5e9 12%, transparent);
  --mat-button-outlined-state-layer-color: #0ea5e9;
  --mat-button-protected-container-color: #0ea5e9;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #0ea5e9;
  --mat-button-text-ripple-color: color-mix(in srgb, #0ea5e9 12%, transparent);
  --mat-button-text-state-layer-color: #0ea5e9;
  --mat-button-tonal-container-color: #0ea5e9;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-button.mat-accent,
.vex-theme-sky.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-sky.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-sky.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-sky.dark .mat-tonal-button.mat-accent,
.vex-theme-sky .dark .mat-mdc-button.mat-accent,
.vex-theme-sky .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-sky .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-sky .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-sky .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-button.mat-warn,
.vex-theme-sky.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-sky.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-sky.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-sky.dark .mat-tonal-button.mat-warn,
.vex-theme-sky .dark .mat-mdc-button.mat-warn,
.vex-theme-sky .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-sky .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-sky .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-sky .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-sky .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #0ea5e9;
  --mat-icon-button-state-layer-color: #0ea5e9;
  --mat-icon-button-ripple-color: color-mix(in srgb, #0ea5e9 12%, transparent);
}
.vex-theme-sky.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-sky .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-sky.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-sky .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-sky.dark .mat-mdc-fab.mat-primary,
.vex-theme-sky.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-sky .dark .mat-mdc-fab.mat-primary,
.vex-theme-sky .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #0ea5e9;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #0ea5e9 12%, transparent);
  --mat-fab-small-container-color: #0ea5e9;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-fab.mat-accent,
.vex-theme-sky.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-sky .dark .mat-mdc-fab.mat-accent,
.vex-theme-sky .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-sky.dark .mat-mdc-fab.mat-warn,
.vex-theme-sky.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-sky .dark .mat-mdc-fab.mat-warn,
.vex-theme-sky .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #0284c7;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #0ea5e9;
}
.vex-theme-sky.dark .mat-accent,
.vex-theme-sky .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-sky.dark .mat-warn,
.vex-theme-sky .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-badge-background-color: #0ea5e9;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-sky.dark .mat-badge-accent,
.vex-theme-sky .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-sky.dark .mat-badge-warn,
.vex-theme-sky .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #0ea5e9 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #0ea5e9;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #0ea5e9 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #0ea5e9 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #0ea5e9 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #0ea5e9;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-sky.dark .mat-datepicker-content.mat-accent,
.vex-theme-sky.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-sky .dark .mat-datepicker-content.mat-accent,
.vex-theme-sky .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-sky.dark .mat-datepicker-content.mat-warn,
.vex-theme-sky.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-sky .dark .mat-datepicker-content.mat-warn,
.vex-theme-sky .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-sky.dark .mat-icon.mat-primary,
.vex-theme-sky .dark .mat-icon.mat-primary {
  --mat-icon-color: #0ea5e9;
}
.vex-theme-sky.dark .mat-icon.mat-accent,
.vex-theme-sky .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-sky.dark .mat-icon.mat-warn,
.vex-theme-sky .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #0ea5e9;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #0ea5e9;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #0ea5e9;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-sky.dark .mat-step-header.mat-accent,
.vex-theme-sky .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-sky.dark .mat-step-header.mat-warn,
.vex-theme-sky .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-sky.dark .mat-toolbar.mat-primary,
.vex-theme-sky .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #0ea5e9;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-sky.dark .mat-toolbar.mat-accent,
.vex-theme-sky .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-sky.dark .mat-toolbar.mat-warn,
.vex-theme-sky .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #638bc8;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-azul-cielo .mat-accent,
.vex-theme-azul-cielo.light .mat-accent,
.vex-theme-azul-cielo .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-azul-cielo .mat-warn,
.vex-theme-azul-cielo.light .mat-warn,
.vex-theme-azul-cielo .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-azul-cielo .mat-primary,
.vex-theme-azul-cielo.light .mat-primary,
.vex-theme-azul-cielo .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #638bc8;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #638bc8;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-azul-cielo .mat-accent,
.vex-theme-azul-cielo.light .mat-accent,
.vex-theme-azul-cielo .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-azul-cielo .mat-warn,
.vex-theme-azul-cielo.light .mat-warn,
.vex-theme-azul-cielo .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-azul-cielo .mat-mdc-progress-bar,
.vex-theme-azul-cielo.light .mat-mdc-progress-bar,
.vex-theme-azul-cielo .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #638bc8;
  --mat-progress-bar-track-color: rgba(99, 139, 200, 0.25);
}
.vex-theme-azul-cielo .mat-mdc-progress-bar.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-azul-cielo .mat-mdc-progress-bar.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #638bc8 87%, transparent);
  --mat-form-field-filled-caret-color: #638bc8;
  --mat-form-field-filled-focus-active-indicator-color: #638bc8;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #638bc8 87%, transparent);
  --mat-form-field-outlined-caret-color: #638bc8;
  --mat-form-field-outlined-focus-outline-color: #638bc8;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #638bc8 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-azul-cielo .mat-mdc-form-field.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-form-field.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-azul-cielo .mat-mdc-form-field.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-form-field.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #638bc8;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-azul-cielo .mat-mdc-form-field.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-form-field.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-azul-cielo .mat-mdc-form-field.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-form-field.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-azul-cielo .mat-mdc-standard-chip,
.vex-theme-azul-cielo.light .mat-mdc-standard-chip,
.vex-theme-azul-cielo .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-azul-cielo .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #000;
  --mat-chip-elevated-container-color: #638bc8;
  --mat-chip-elevated-disabled-container-color: #638bc8;
  --mat-chip-elevated-selected-container-color: #638bc8;
  --mat-chip-flat-disabled-selected-container-color: #638bc8;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #000;
  --mat-chip-selected-disabled-trailing-icon-color: #000;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #000;
  --mat-chip-selected-trailing-icon-color: #000;
  --mat-chip-with-icon-disabled-icon-color: #000;
  --mat-chip-with-icon-icon-color: #000;
  --mat-chip-with-icon-selected-icon-color: #000;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #000;
  --mat-chip-with-trailing-icon-trailing-icon-color: #000;
}
.vex-theme-azul-cielo .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-azul-cielo .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-azul-cielo .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-azul-cielo .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-slide-toggle-selected-icon-color: #000;
  --mat-slide-toggle-disabled-selected-icon-color: #000;
  --mat-slide-toggle-selected-focus-state-layer-color: #638bc8;
  --mat-slide-toggle-selected-handle-color: #638bc8;
  --mat-slide-toggle-selected-hover-state-layer-color: #638bc8;
  --mat-slide-toggle-selected-pressed-state-layer-color: #638bc8;
  --mat-slide-toggle-selected-focus-handle-color: #638bc8;
  --mat-slide-toggle-selected-hover-handle-color: #638bc8;
  --mat-slide-toggle-selected-pressed-handle-color: #638bc8;
  --mat-slide-toggle-selected-focus-track-color: #b5c4e4;
  --mat-slide-toggle-selected-hover-track-color: #b5c4e4;
  --mat-slide-toggle-selected-pressed-track-color: #b5c4e4;
  --mat-slide-toggle-selected-track-color: #b5c4e4;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-azul-cielo .mat-mdc-slide-toggle.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-azul-cielo .mat-mdc-slide-toggle.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-azul-cielo .mat-mdc-radio-button.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-radio-button.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #638bc8;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #638bc8;
  --mat-radio-selected-hover-icon-color: #638bc8;
  --mat-radio-selected-icon-color: #638bc8;
  --mat-radio-selected-pressed-icon-color: #638bc8;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-radio-button.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-radio-button.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-radio-button.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-radio-button.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-slider-active-track-color: #638bc8;
  --mat-slider-focus-handle-color: #638bc8;
  --mat-slider-handle-color: #638bc8;
  --mat-slider-hover-handle-color: #638bc8;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #638bc8 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #638bc8 4%, transparent);
  --mat-slider-inactive-track-color: #638bc8;
  --mat-slider-ripple-color: #638bc8;
  --mat-slider-with-tick-marks-active-container-color: #000;
  --mat-slider-with-tick-marks-inactive-container-color: #638bc8;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-accent,
.vex-theme-azul-cielo.light .mat-accent,
.vex-theme-azul-cielo .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-azul-cielo .mat-warn,
.vex-theme-azul-cielo.light .mat-warn,
.vex-theme-azul-cielo .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-azul-cielo .mdc-list-item__start,
.vex-theme-azul-cielo .mdc-list-item__end,
.vex-theme-azul-cielo.light .mdc-list-item__start,
.vex-theme-azul-cielo.light .mdc-list-item__end,
.vex-theme-azul-cielo .light .mdc-list-item__start,
.vex-theme-azul-cielo .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #638bc8;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #638bc8;
  --mat-radio-selected-hover-icon-color: #638bc8;
  --mat-radio-selected-icon-color: #638bc8;
  --mat-radio-selected-pressed-icon-color: #638bc8;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-accent .mdc-list-item__start,
.vex-theme-azul-cielo .mat-accent .mdc-list-item__end,
.vex-theme-azul-cielo.light .mat-accent .mdc-list-item__start,
.vex-theme-azul-cielo.light .mat-accent .mdc-list-item__end,
.vex-theme-azul-cielo .light .mat-accent .mdc-list-item__start,
.vex-theme-azul-cielo .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-warn .mdc-list-item__start,
.vex-theme-azul-cielo .mat-warn .mdc-list-item__end,
.vex-theme-azul-cielo.light .mat-warn .mdc-list-item__start,
.vex-theme-azul-cielo.light .mat-warn .mdc-list-item__end,
.vex-theme-azul-cielo .light .mat-warn .mdc-list-item__start,
.vex-theme-azul-cielo .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-list-option,
.vex-theme-azul-cielo.light .mat-mdc-list-option,
.vex-theme-azul-cielo .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #000;
  --mat-checkbox-selected-focus-icon-color: #638bc8;
  --mat-checkbox-selected-hover-icon-color: #638bc8;
  --mat-checkbox-selected-icon-color: #638bc8;
  --mat-checkbox-selected-pressed-icon-color: #638bc8;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #638bc8;
  --mat-checkbox-selected-hover-state-layer-color: #638bc8;
  --mat-checkbox-selected-pressed-state-layer-color: #638bc8;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-list-option.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-list-option.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-list-option.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-list-option.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-azul-cielo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-azul-cielo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-azul-cielo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-azul-cielo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-azul-cielo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-azul-cielo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-azul-cielo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-azul-cielo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-azul-cielo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-azul-cielo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-azul-cielo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #638bc8;
}
.vex-theme-azul-cielo .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-azul-cielo .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-azul-cielo .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-azul-cielo.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-azul-cielo.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-azul-cielo.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-azul-cielo .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-azul-cielo .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-azul-cielo .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-azul-cielo .mat-mdc-tab-group,
.vex-theme-azul-cielo .mat-mdc-tab-nav-bar,
.vex-theme-azul-cielo.light .mat-mdc-tab-group,
.vex-theme-azul-cielo.light .mat-mdc-tab-nav-bar,
.vex-theme-azul-cielo .light .mat-mdc-tab-group,
.vex-theme-azul-cielo .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #638bc8;
  --mat-tab-active-ripple-color: #638bc8;
  --mat-tab-inactive-ripple-color: #638bc8;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #638bc8;
  --mat-tab-active-hover-label-text-color: #638bc8;
  --mat-tab-active-focus-indicator-color: #638bc8;
  --mat-tab-active-hover-indicator-color: #638bc8;
  --mat-tab-active-indicator-color: #638bc8;
}
.vex-theme-azul-cielo .mat-mdc-tab-group.mat-accent,
.vex-theme-azul-cielo .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-tab-group.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-tab-group.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-azul-cielo .mat-mdc-tab-group.mat-warn,
.vex-theme-azul-cielo .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-tab-group.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-tab-group.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-azul-cielo .mat-mdc-tab-group.mat-background-primary,
.vex-theme-azul-cielo .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-azul-cielo.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-azul-cielo.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-azul-cielo .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-azul-cielo .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #638bc8;
  --mat-tab-foreground-color: #000;
}
.vex-theme-azul-cielo .mat-mdc-tab-group.mat-background-accent,
.vex-theme-azul-cielo .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-azul-cielo.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-azul-cielo.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-azul-cielo .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-azul-cielo .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-azul-cielo .mat-mdc-tab-group.mat-background-warn,
.vex-theme-azul-cielo .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-azul-cielo.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-azul-cielo.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-azul-cielo .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-azul-cielo .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-checkbox.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-checkbox.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #000;
  --mat-checkbox-selected-focus-icon-color: #638bc8;
  --mat-checkbox-selected-hover-icon-color: #638bc8;
  --mat-checkbox-selected-icon-color: #638bc8;
  --mat-checkbox-selected-pressed-icon-color: #638bc8;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #638bc8;
  --mat-checkbox-selected-hover-state-layer-color: #638bc8;
  --mat-checkbox-selected-pressed-state-layer-color: #638bc8;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-checkbox.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-checkbox.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-button.mat-primary,
.vex-theme-azul-cielo .mat-mdc-unelevated-button.mat-primary,
.vex-theme-azul-cielo .mat-mdc-raised-button.mat-primary,
.vex-theme-azul-cielo .mat-mdc-outlined-button.mat-primary,
.vex-theme-azul-cielo .mat-tonal-button.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-button.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-raised-button.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-azul-cielo.light .mat-tonal-button.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-button.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-raised-button.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-azul-cielo .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #638bc8;
  --mat-button-filled-label-text-color: #000;
  --mat-button-filled-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-button-filled-state-layer-color: #000;
  --mat-button-outlined-label-text-color: #638bc8;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #638bc8 12%, transparent);
  --mat-button-outlined-state-layer-color: #638bc8;
  --mat-button-protected-container-color: #638bc8;
  --mat-button-protected-label-text-color: #000;
  --mat-button-protected-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-button-protected-state-layer-color: #000;
  --mat-button-text-label-text-color: #638bc8;
  --mat-button-text-ripple-color: color-mix(in srgb, #638bc8 12%, transparent);
  --mat-button-text-state-layer-color: #638bc8;
  --mat-button-tonal-container-color: #638bc8;
  --mat-button-tonal-label-text-color: #000;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-button-tonal-state-layer-color: #000;
}
.vex-theme-azul-cielo .mat-mdc-button.mat-accent,
.vex-theme-azul-cielo .mat-mdc-unelevated-button.mat-accent,
.vex-theme-azul-cielo .mat-mdc-raised-button.mat-accent,
.vex-theme-azul-cielo .mat-mdc-outlined-button.mat-accent,
.vex-theme-azul-cielo .mat-tonal-button.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-button.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-raised-button.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-azul-cielo.light .mat-tonal-button.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-button.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-raised-button.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-azul-cielo .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-azul-cielo .mat-mdc-button.mat-warn,
.vex-theme-azul-cielo .mat-mdc-unelevated-button.mat-warn,
.vex-theme-azul-cielo .mat-mdc-raised-button.mat-warn,
.vex-theme-azul-cielo .mat-mdc-outlined-button.mat-warn,
.vex-theme-azul-cielo .mat-tonal-button.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-button.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-raised-button.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-azul-cielo.light .mat-tonal-button.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-button.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-raised-button.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-azul-cielo .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-icon-button.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-icon-button.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #638bc8;
  --mat-icon-button-state-layer-color: #638bc8;
  --mat-icon-button-ripple-color: color-mix(in srgb, #638bc8 12%, transparent);
}
.vex-theme-azul-cielo .mat-mdc-icon-button.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-icon-button.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-azul-cielo .mat-mdc-icon-button.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-icon-button.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-mdc-fab.mat-primary,
.vex-theme-azul-cielo .mat-mdc-mini-fab.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-fab.mat-primary,
.vex-theme-azul-cielo.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-fab.mat-primary,
.vex-theme-azul-cielo .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #638bc8;
  --mat-fab-foreground-color: #000;
  --mat-fab-ripple-color: color-mix(in srgb, #638bc8 12%, transparent);
  --mat-fab-small-container-color: #638bc8;
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-state-layer-color: #000;
}
.vex-theme-azul-cielo .mat-mdc-fab.mat-accent,
.vex-theme-azul-cielo .mat-mdc-mini-fab.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-fab.mat-accent,
.vex-theme-azul-cielo.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-fab.mat-accent,
.vex-theme-azul-cielo .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-azul-cielo .mat-mdc-fab.mat-warn,
.vex-theme-azul-cielo .mat-mdc-mini-fab.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-fab.mat-warn,
.vex-theme-azul-cielo.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-fab.mat-warn,
.vex-theme-azul-cielo .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #b5c4e4;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #638bc8;
}
.vex-theme-azul-cielo .mat-accent,
.vex-theme-azul-cielo.light .mat-accent,
.vex-theme-azul-cielo .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-azul-cielo .mat-warn,
.vex-theme-azul-cielo.light .mat-warn,
.vex-theme-azul-cielo .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-badge-background-color: #638bc8;
  --mat-badge-text-color: #000;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-azul-cielo .mat-badge-accent,
.vex-theme-azul-cielo.light .mat-badge-accent,
.vex-theme-azul-cielo .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-azul-cielo .mat-badge-warn,
.vex-theme-azul-cielo.light .mat-badge-warn,
.vex-theme-azul-cielo .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #638bc8 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #000;
  --mat-datepicker-calendar-date-selected-state-background-color: #638bc8;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #638bc8 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #000;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #638bc8 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #638bc8 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #638bc8;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-datepicker-content.mat-accent,
.vex-theme-azul-cielo .mat-datepicker-toggle-active.mat-accent,
.vex-theme-azul-cielo.light .mat-datepicker-content.mat-accent,
.vex-theme-azul-cielo.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-azul-cielo .light .mat-datepicker-content.mat-accent,
.vex-theme-azul-cielo .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-datepicker-content.mat-warn,
.vex-theme-azul-cielo .mat-datepicker-toggle-active.mat-warn,
.vex-theme-azul-cielo.light .mat-datepicker-content.mat-warn,
.vex-theme-azul-cielo.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-azul-cielo .light .mat-datepicker-content.mat-warn,
.vex-theme-azul-cielo .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-azul-cielo .mat-icon.mat-primary,
.vex-theme-azul-cielo.light .mat-icon.mat-primary,
.vex-theme-azul-cielo .light .mat-icon.mat-primary {
  --mat-icon-color: #638bc8;
}
.vex-theme-azul-cielo .mat-icon.mat-accent,
.vex-theme-azul-cielo.light .mat-icon.mat-accent,
.vex-theme-azul-cielo .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-azul-cielo .mat-icon.mat-warn,
.vex-theme-azul-cielo.light .mat-icon.mat-warn,
.vex-theme-azul-cielo .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #000;
  --mat-stepper-header-selected-state-icon-background-color: #638bc8;
  --mat-stepper-header-selected-state-icon-foreground-color: #000;
  --mat-stepper-header-done-state-icon-background-color: #638bc8;
  --mat-stepper-header-done-state-icon-foreground-color: #000;
  --mat-stepper-header-edit-state-icon-background-color: #638bc8;
  --mat-stepper-header-edit-state-icon-foreground-color: #000;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-azul-cielo .mat-step-header.mat-accent,
.vex-theme-azul-cielo.light .mat-step-header.mat-accent,
.vex-theme-azul-cielo .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-azul-cielo .mat-step-header.mat-warn,
.vex-theme-azul-cielo.light .mat-step-header.mat-warn,
.vex-theme-azul-cielo .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-azul-cielo .mat-toolbar.mat-primary,
.vex-theme-azul-cielo.light .mat-toolbar.mat-primary,
.vex-theme-azul-cielo .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #638bc8;
  --mat-toolbar-container-text-color: #000;
}
.vex-theme-azul-cielo .mat-toolbar.mat-accent,
.vex-theme-azul-cielo.light .mat-toolbar.mat-accent,
.vex-theme-azul-cielo .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-azul-cielo .mat-toolbar.mat-warn,
.vex-theme-azul-cielo.light .mat-toolbar.mat-warn,
.vex-theme-azul-cielo .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-azul-cielo,
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #809ed1;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-azul-cielo.dark .mat-accent,
.vex-theme-azul-cielo .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-azul-cielo.dark .mat-warn,
.vex-theme-azul-cielo .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-azul-cielo.dark .mat-primary,
.vex-theme-azul-cielo .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #809ed1;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #809ed1;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-azul-cielo.dark .mat-accent,
.vex-theme-azul-cielo .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-azul-cielo.dark .mat-warn,
.vex-theme-azul-cielo .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-azul-cielo.dark .mat-mdc-progress-bar,
.vex-theme-azul-cielo .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #809ed1;
  --mat-progress-bar-track-color: rgba(128, 158, 209, 0.25);
}
.vex-theme-azul-cielo.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-azul-cielo.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #809ed1 87%, transparent);
  --mat-form-field-filled-caret-color: #809ed1;
  --mat-form-field-filled-focus-active-indicator-color: #809ed1;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #809ed1 87%, transparent);
  --mat-form-field-outlined-caret-color: #809ed1;
  --mat-form-field-outlined-focus-outline-color: #809ed1;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #809ed1 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-azul-cielo.dark .mat-mdc-form-field.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-azul-cielo.dark .mat-mdc-form-field.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #809ed1;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-azul-cielo.dark .mat-mdc-form-field.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-azul-cielo.dark .mat-mdc-form-field.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-azul-cielo.dark .mat-mdc-standard-chip,
.vex-theme-azul-cielo .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-azul-cielo.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #000;
  --mat-chip-elevated-container-color: #809ed1;
  --mat-chip-elevated-disabled-container-color: #809ed1;
  --mat-chip-elevated-selected-container-color: #809ed1;
  --mat-chip-flat-disabled-selected-container-color: #809ed1;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #000;
  --mat-chip-selected-disabled-trailing-icon-color: #000;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #000;
  --mat-chip-selected-trailing-icon-color: #000;
  --mat-chip-with-icon-disabled-icon-color: #000;
  --mat-chip-with-icon-icon-color: #000;
  --mat-chip-with-icon-selected-icon-color: #000;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #000;
  --mat-chip-with-trailing-icon-trailing-icon-color: #000;
}
.vex-theme-azul-cielo.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-azul-cielo.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-azul-cielo.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-azul-cielo.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-slide-toggle-selected-icon-color: #000;
  --mat-slide-toggle-disabled-selected-icon-color: #000;
  --mat-slide-toggle-selected-focus-state-layer-color: #809ed1;
  --mat-slide-toggle-selected-handle-color: #809ed1;
  --mat-slide-toggle-selected-hover-state-layer-color: #809ed1;
  --mat-slide-toggle-selected-pressed-state-layer-color: #809ed1;
  --mat-slide-toggle-selected-focus-handle-color: #809ed1;
  --mat-slide-toggle-selected-hover-handle-color: #809ed1;
  --mat-slide-toggle-selected-pressed-handle-color: #809ed1;
  --mat-slide-toggle-selected-focus-track-color: #638bc8;
  --mat-slide-toggle-selected-hover-track-color: #638bc8;
  --mat-slide-toggle-selected-pressed-track-color: #638bc8;
  --mat-slide-toggle-selected-track-color: #638bc8;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-azul-cielo.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-azul-cielo.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-azul-cielo.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #809ed1;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #809ed1;
  --mat-radio-selected-hover-icon-color: #809ed1;
  --mat-radio-selected-icon-color: #809ed1;
  --mat-radio-selected-pressed-icon-color: #809ed1;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-slider-active-track-color: #809ed1;
  --mat-slider-focus-handle-color: #809ed1;
  --mat-slider-handle-color: #809ed1;
  --mat-slider-hover-handle-color: #809ed1;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #809ed1 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #809ed1 4%, transparent);
  --mat-slider-inactive-track-color: #809ed1;
  --mat-slider-ripple-color: #809ed1;
  --mat-slider-with-tick-marks-active-container-color: #000;
  --mat-slider-with-tick-marks-inactive-container-color: #809ed1;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-azul-cielo.dark .mat-accent,
.vex-theme-azul-cielo .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-azul-cielo.dark .mat-warn,
.vex-theme-azul-cielo .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-azul-cielo.dark .mdc-list-item__start,
.vex-theme-azul-cielo.dark .mdc-list-item__end,
.vex-theme-azul-cielo .dark .mdc-list-item__start,
.vex-theme-azul-cielo .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #809ed1;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #809ed1;
  --mat-radio-selected-hover-icon-color: #809ed1;
  --mat-radio-selected-icon-color: #809ed1;
  --mat-radio-selected-pressed-icon-color: #809ed1;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-azul-cielo.dark .mat-accent .mdc-list-item__start,
.vex-theme-azul-cielo.dark .mat-accent .mdc-list-item__end,
.vex-theme-azul-cielo .dark .mat-accent .mdc-list-item__start,
.vex-theme-azul-cielo .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-azul-cielo.dark .mat-warn .mdc-list-item__start,
.vex-theme-azul-cielo.dark .mat-warn .mdc-list-item__end,
.vex-theme-azul-cielo .dark .mat-warn .mdc-list-item__start,
.vex-theme-azul-cielo .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-list-option,
.vex-theme-azul-cielo .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #000;
  --mat-checkbox-selected-focus-icon-color: #809ed1;
  --mat-checkbox-selected-hover-icon-color: #809ed1;
  --mat-checkbox-selected-icon-color: #809ed1;
  --mat-checkbox-selected-pressed-icon-color: #809ed1;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #809ed1;
  --mat-checkbox-selected-hover-state-layer-color: #809ed1;
  --mat-checkbox-selected-pressed-state-layer-color: #809ed1;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-list-option.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-list-option.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-azul-cielo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-azul-cielo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-azul-cielo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-azul-cielo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-azul-cielo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-azul-cielo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-azul-cielo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #809ed1;
}
.vex-theme-azul-cielo.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-azul-cielo.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-azul-cielo.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-azul-cielo .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-azul-cielo .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-azul-cielo .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-azul-cielo.dark .mat-mdc-tab-group,
.vex-theme-azul-cielo.dark .mat-mdc-tab-nav-bar,
.vex-theme-azul-cielo .dark .mat-mdc-tab-group,
.vex-theme-azul-cielo .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #809ed1;
  --mat-tab-active-ripple-color: #809ed1;
  --mat-tab-inactive-ripple-color: #809ed1;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #809ed1;
  --mat-tab-active-hover-label-text-color: #809ed1;
  --mat-tab-active-focus-indicator-color: #809ed1;
  --mat-tab-active-hover-indicator-color: #809ed1;
  --mat-tab-active-indicator-color: #809ed1;
}
.vex-theme-azul-cielo.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-azul-cielo.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-azul-cielo.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-azul-cielo.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-azul-cielo.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-azul-cielo.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-azul-cielo .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-azul-cielo .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #809ed1;
  --mat-tab-foreground-color: #000;
}
.vex-theme-azul-cielo.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-azul-cielo.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-azul-cielo .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-azul-cielo .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-azul-cielo.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-azul-cielo.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-azul-cielo .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-azul-cielo .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #000;
  --mat-checkbox-selected-focus-icon-color: #809ed1;
  --mat-checkbox-selected-hover-icon-color: #809ed1;
  --mat-checkbox-selected-icon-color: #809ed1;
  --mat-checkbox-selected-pressed-icon-color: #809ed1;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #809ed1;
  --mat-checkbox-selected-hover-state-layer-color: #809ed1;
  --mat-checkbox-selected-pressed-state-layer-color: #809ed1;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-button.mat-primary,
.vex-theme-azul-cielo.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-azul-cielo.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-azul-cielo.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-azul-cielo.dark .mat-tonal-button.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-button.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-azul-cielo .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #809ed1;
  --mat-button-filled-label-text-color: #000;
  --mat-button-filled-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-button-filled-state-layer-color: #000;
  --mat-button-outlined-label-text-color: #809ed1;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #809ed1 12%, transparent);
  --mat-button-outlined-state-layer-color: #809ed1;
  --mat-button-protected-container-color: #809ed1;
  --mat-button-protected-label-text-color: #000;
  --mat-button-protected-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-button-protected-state-layer-color: #000;
  --mat-button-text-label-text-color: #809ed1;
  --mat-button-text-ripple-color: color-mix(in srgb, #809ed1 12%, transparent);
  --mat-button-text-state-layer-color: #809ed1;
  --mat-button-tonal-container-color: #809ed1;
  --mat-button-tonal-label-text-color: #000;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-button-tonal-state-layer-color: #000;
}
.vex-theme-azul-cielo.dark .mat-mdc-button.mat-accent,
.vex-theme-azul-cielo.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-azul-cielo.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-azul-cielo.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-azul-cielo.dark .mat-tonal-button.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-button.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-azul-cielo .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-azul-cielo.dark .mat-mdc-button.mat-warn,
.vex-theme-azul-cielo.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-azul-cielo.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-azul-cielo.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-azul-cielo.dark .mat-tonal-button.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-button.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-azul-cielo .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #809ed1;
  --mat-icon-button-state-layer-color: #809ed1;
  --mat-icon-button-ripple-color: color-mix(in srgb, #809ed1 12%, transparent);
}
.vex-theme-azul-cielo.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-azul-cielo.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-azul-cielo.dark .mat-mdc-fab.mat-primary,
.vex-theme-azul-cielo.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-fab.mat-primary,
.vex-theme-azul-cielo .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #809ed1;
  --mat-fab-foreground-color: #000;
  --mat-fab-ripple-color: color-mix(in srgb, #809ed1 12%, transparent);
  --mat-fab-small-container-color: #809ed1;
  --mat-fab-small-foreground-color: #000;
  --mat-fab-small-ripple-color: color-mix(in srgb, #000 12%, transparent);
  --mat-fab-small-state-layer-color: #000;
  --mat-fab-state-layer-color: #000;
}
.vex-theme-azul-cielo.dark .mat-mdc-fab.mat-accent,
.vex-theme-azul-cielo.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-fab.mat-accent,
.vex-theme-azul-cielo .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-azul-cielo.dark .mat-mdc-fab.mat-warn,
.vex-theme-azul-cielo.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-fab.mat-warn,
.vex-theme-azul-cielo .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #638bc8;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #809ed1;
}
.vex-theme-azul-cielo.dark .mat-accent,
.vex-theme-azul-cielo .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-azul-cielo.dark .mat-warn,
.vex-theme-azul-cielo .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-badge-background-color: #809ed1;
  --mat-badge-text-color: #000;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-azul-cielo.dark .mat-badge-accent,
.vex-theme-azul-cielo .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-azul-cielo.dark .mat-badge-warn,
.vex-theme-azul-cielo .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #809ed1 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #000;
  --mat-datepicker-calendar-date-selected-state-background-color: #809ed1;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #809ed1 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #000;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #809ed1 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #809ed1 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #809ed1;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-azul-cielo.dark .mat-datepicker-content.mat-accent,
.vex-theme-azul-cielo.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-azul-cielo .dark .mat-datepicker-content.mat-accent,
.vex-theme-azul-cielo .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-azul-cielo.dark .mat-datepicker-content.mat-warn,
.vex-theme-azul-cielo.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-azul-cielo .dark .mat-datepicker-content.mat-warn,
.vex-theme-azul-cielo .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-azul-cielo.dark .mat-icon.mat-primary,
.vex-theme-azul-cielo .dark .mat-icon.mat-primary {
  --mat-icon-color: #809ed1;
}
.vex-theme-azul-cielo.dark .mat-icon.mat-accent,
.vex-theme-azul-cielo .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-azul-cielo.dark .mat-icon.mat-warn,
.vex-theme-azul-cielo .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #000;
  --mat-stepper-header-selected-state-icon-background-color: #809ed1;
  --mat-stepper-header-selected-state-icon-foreground-color: #000;
  --mat-stepper-header-done-state-icon-background-color: #809ed1;
  --mat-stepper-header-done-state-icon-foreground-color: #000;
  --mat-stepper-header-edit-state-icon-background-color: #809ed1;
  --mat-stepper-header-edit-state-icon-foreground-color: #000;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-azul-cielo.dark .mat-step-header.mat-accent,
.vex-theme-azul-cielo .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-azul-cielo.dark .mat-step-header.mat-warn,
.vex-theme-azul-cielo .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-azul-cielo.dark .mat-toolbar.mat-primary,
.vex-theme-azul-cielo .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #809ed1;
  --mat-toolbar-container-text-color: #000;
}
.vex-theme-azul-cielo.dark .mat-toolbar.mat-accent,
.vex-theme-azul-cielo .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-azul-cielo.dark .mat-toolbar.mat-warn,
.vex-theme-azul-cielo .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #2563eb;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-blue .mat-accent,
.vex-theme-blue.light .mat-accent,
.vex-theme-blue .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-blue .mat-warn,
.vex-theme-blue.light .mat-warn,
.vex-theme-blue .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-blue .mat-primary,
.vex-theme-blue.light .mat-primary,
.vex-theme-blue .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #2563eb;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #2563eb;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-blue .mat-accent,
.vex-theme-blue.light .mat-accent,
.vex-theme-blue .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-blue .mat-warn,
.vex-theme-blue.light .mat-warn,
.vex-theme-blue .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-blue .mat-mdc-progress-bar,
.vex-theme-blue.light .mat-mdc-progress-bar,
.vex-theme-blue .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #2563eb;
  --mat-progress-bar-track-color: rgba(37, 99, 235, 0.25);
}
.vex-theme-blue .mat-mdc-progress-bar.mat-accent,
.vex-theme-blue.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-blue .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-blue .mat-mdc-progress-bar.mat-warn,
.vex-theme-blue.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-blue .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #2563eb 87%, transparent);
  --mat-form-field-filled-caret-color: #2563eb;
  --mat-form-field-filled-focus-active-indicator-color: #2563eb;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #2563eb 87%, transparent);
  --mat-form-field-outlined-caret-color: #2563eb;
  --mat-form-field-outlined-focus-outline-color: #2563eb;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #2563eb 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-blue .mat-mdc-form-field.mat-accent,
.vex-theme-blue.light .mat-mdc-form-field.mat-accent,
.vex-theme-blue .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-blue .mat-mdc-form-field.mat-warn,
.vex-theme-blue.light .mat-mdc-form-field.mat-warn,
.vex-theme-blue .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #2563eb;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-blue .mat-mdc-form-field.mat-accent,
.vex-theme-blue.light .mat-mdc-form-field.mat-accent,
.vex-theme-blue .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-blue .mat-mdc-form-field.mat-warn,
.vex-theme-blue.light .mat-mdc-form-field.mat-warn,
.vex-theme-blue .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-blue .mat-mdc-standard-chip,
.vex-theme-blue.light .mat-mdc-standard-chip,
.vex-theme-blue .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-blue .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-blue.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-blue.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-blue .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-blue .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #2563eb;
  --mat-chip-elevated-disabled-container-color: #2563eb;
  --mat-chip-elevated-selected-container-color: #2563eb;
  --mat-chip-flat-disabled-selected-container-color: #2563eb;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-blue .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-blue .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-blue.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-blue.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-blue .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-blue .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-blue .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-blue .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-blue.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-blue.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-blue .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-blue .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #2563eb;
  --mat-slide-toggle-selected-handle-color: #2563eb;
  --mat-slide-toggle-selected-hover-state-layer-color: #2563eb;
  --mat-slide-toggle-selected-pressed-state-layer-color: #2563eb;
  --mat-slide-toggle-selected-focus-handle-color: #2563eb;
  --mat-slide-toggle-selected-hover-handle-color: #2563eb;
  --mat-slide-toggle-selected-pressed-handle-color: #2563eb;
  --mat-slide-toggle-selected-focus-track-color: #93c5fd;
  --mat-slide-toggle-selected-hover-track-color: #93c5fd;
  --mat-slide-toggle-selected-pressed-track-color: #93c5fd;
  --mat-slide-toggle-selected-track-color: #93c5fd;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-blue .mat-mdc-slide-toggle.mat-accent,
.vex-theme-blue.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-blue .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-blue .mat-mdc-slide-toggle.mat-warn,
.vex-theme-blue.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-blue .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-blue .mat-mdc-radio-button.mat-primary,
.vex-theme-blue.light .mat-mdc-radio-button.mat-primary,
.vex-theme-blue .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #2563eb;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #2563eb;
  --mat-radio-selected-hover-icon-color: #2563eb;
  --mat-radio-selected-icon-color: #2563eb;
  --mat-radio-selected-pressed-icon-color: #2563eb;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-radio-button.mat-accent,
.vex-theme-blue.light .mat-mdc-radio-button.mat-accent,
.vex-theme-blue .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-radio-button.mat-warn,
.vex-theme-blue.light .mat-mdc-radio-button.mat-warn,
.vex-theme-blue .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-slider-active-track-color: #2563eb;
  --mat-slider-focus-handle-color: #2563eb;
  --mat-slider-handle-color: #2563eb;
  --mat-slider-hover-handle-color: #2563eb;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #2563eb 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #2563eb 4%, transparent);
  --mat-slider-inactive-track-color: #2563eb;
  --mat-slider-ripple-color: #2563eb;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #2563eb;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-accent,
.vex-theme-blue.light .mat-accent,
.vex-theme-blue .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-blue .mat-warn,
.vex-theme-blue.light .mat-warn,
.vex-theme-blue .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-blue .mdc-list-item__start,
.vex-theme-blue .mdc-list-item__end,
.vex-theme-blue.light .mdc-list-item__start,
.vex-theme-blue.light .mdc-list-item__end,
.vex-theme-blue .light .mdc-list-item__start,
.vex-theme-blue .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #2563eb;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #2563eb;
  --mat-radio-selected-hover-icon-color: #2563eb;
  --mat-radio-selected-icon-color: #2563eb;
  --mat-radio-selected-pressed-icon-color: #2563eb;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-accent .mdc-list-item__start,
.vex-theme-blue .mat-accent .mdc-list-item__end,
.vex-theme-blue.light .mat-accent .mdc-list-item__start,
.vex-theme-blue.light .mat-accent .mdc-list-item__end,
.vex-theme-blue .light .mat-accent .mdc-list-item__start,
.vex-theme-blue .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-warn .mdc-list-item__start,
.vex-theme-blue .mat-warn .mdc-list-item__end,
.vex-theme-blue.light .mat-warn .mdc-list-item__start,
.vex-theme-blue.light .mat-warn .mdc-list-item__end,
.vex-theme-blue .light .mat-warn .mdc-list-item__start,
.vex-theme-blue .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-list-option,
.vex-theme-blue.light .mat-mdc-list-option,
.vex-theme-blue .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #2563eb;
  --mat-checkbox-selected-hover-icon-color: #2563eb;
  --mat-checkbox-selected-icon-color: #2563eb;
  --mat-checkbox-selected-pressed-icon-color: #2563eb;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #2563eb;
  --mat-checkbox-selected-hover-state-layer-color: #2563eb;
  --mat-checkbox-selected-pressed-state-layer-color: #2563eb;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-list-option.mat-accent,
.vex-theme-blue.light .mat-mdc-list-option.mat-accent,
.vex-theme-blue .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-list-option.mat-warn,
.vex-theme-blue.light .mat-mdc-list-option.mat-warn,
.vex-theme-blue .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-blue .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-blue .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-blue .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-blue.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-blue.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-blue.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-blue.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-blue .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-blue .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-blue .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-blue .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #2563eb;
}
.vex-theme-blue .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-blue .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-blue .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-blue.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-blue.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-blue.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-blue .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-blue .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-blue .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-blue .mat-mdc-tab-group,
.vex-theme-blue .mat-mdc-tab-nav-bar,
.vex-theme-blue.light .mat-mdc-tab-group,
.vex-theme-blue.light .mat-mdc-tab-nav-bar,
.vex-theme-blue .light .mat-mdc-tab-group,
.vex-theme-blue .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #2563eb;
  --mat-tab-active-ripple-color: #2563eb;
  --mat-tab-inactive-ripple-color: #2563eb;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #2563eb;
  --mat-tab-active-hover-label-text-color: #2563eb;
  --mat-tab-active-focus-indicator-color: #2563eb;
  --mat-tab-active-hover-indicator-color: #2563eb;
  --mat-tab-active-indicator-color: #2563eb;
}
.vex-theme-blue .mat-mdc-tab-group.mat-accent,
.vex-theme-blue .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-blue.light .mat-mdc-tab-group.mat-accent,
.vex-theme-blue.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-blue .light .mat-mdc-tab-group.mat-accent,
.vex-theme-blue .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-blue .mat-mdc-tab-group.mat-warn,
.vex-theme-blue .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-blue.light .mat-mdc-tab-group.mat-warn,
.vex-theme-blue.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-blue .light .mat-mdc-tab-group.mat-warn,
.vex-theme-blue .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-blue .mat-mdc-tab-group.mat-background-primary,
.vex-theme-blue .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-blue.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-blue.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-blue .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-blue .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #2563eb;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-blue .mat-mdc-tab-group.mat-background-accent,
.vex-theme-blue .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-blue.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-blue.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-blue .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-blue .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-blue .mat-mdc-tab-group.mat-background-warn,
.vex-theme-blue .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-blue.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-blue.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-blue .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-blue .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-checkbox.mat-primary,
.vex-theme-blue.light .mat-mdc-checkbox.mat-primary,
.vex-theme-blue .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #2563eb;
  --mat-checkbox-selected-hover-icon-color: #2563eb;
  --mat-checkbox-selected-icon-color: #2563eb;
  --mat-checkbox-selected-pressed-icon-color: #2563eb;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #2563eb;
  --mat-checkbox-selected-hover-state-layer-color: #2563eb;
  --mat-checkbox-selected-pressed-state-layer-color: #2563eb;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-checkbox.mat-warn,
.vex-theme-blue.light .mat-mdc-checkbox.mat-warn,
.vex-theme-blue .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-button.mat-primary,
.vex-theme-blue .mat-mdc-unelevated-button.mat-primary,
.vex-theme-blue .mat-mdc-raised-button.mat-primary,
.vex-theme-blue .mat-mdc-outlined-button.mat-primary,
.vex-theme-blue .mat-tonal-button.mat-primary,
.vex-theme-blue.light .mat-mdc-button.mat-primary,
.vex-theme-blue.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-blue.light .mat-mdc-raised-button.mat-primary,
.vex-theme-blue.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-blue.light .mat-tonal-button.mat-primary,
.vex-theme-blue .light .mat-mdc-button.mat-primary,
.vex-theme-blue .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-blue .light .mat-mdc-raised-button.mat-primary,
.vex-theme-blue .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-blue .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #2563eb;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #2563eb;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #2563eb 12%, transparent);
  --mat-button-outlined-state-layer-color: #2563eb;
  --mat-button-protected-container-color: #2563eb;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #2563eb;
  --mat-button-text-ripple-color: color-mix(in srgb, #2563eb 12%, transparent);
  --mat-button-text-state-layer-color: #2563eb;
  --mat-button-tonal-container-color: #2563eb;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-blue .mat-mdc-button.mat-accent,
.vex-theme-blue .mat-mdc-unelevated-button.mat-accent,
.vex-theme-blue .mat-mdc-raised-button.mat-accent,
.vex-theme-blue .mat-mdc-outlined-button.mat-accent,
.vex-theme-blue .mat-tonal-button.mat-accent,
.vex-theme-blue.light .mat-mdc-button.mat-accent,
.vex-theme-blue.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-blue.light .mat-mdc-raised-button.mat-accent,
.vex-theme-blue.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-blue.light .mat-tonal-button.mat-accent,
.vex-theme-blue .light .mat-mdc-button.mat-accent,
.vex-theme-blue .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-blue .light .mat-mdc-raised-button.mat-accent,
.vex-theme-blue .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-blue .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-blue .mat-mdc-button.mat-warn,
.vex-theme-blue .mat-mdc-unelevated-button.mat-warn,
.vex-theme-blue .mat-mdc-raised-button.mat-warn,
.vex-theme-blue .mat-mdc-outlined-button.mat-warn,
.vex-theme-blue .mat-tonal-button.mat-warn,
.vex-theme-blue.light .mat-mdc-button.mat-warn,
.vex-theme-blue.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-blue.light .mat-mdc-raised-button.mat-warn,
.vex-theme-blue.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-blue.light .mat-tonal-button.mat-warn,
.vex-theme-blue .light .mat-mdc-button.mat-warn,
.vex-theme-blue .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-blue .light .mat-mdc-raised-button.mat-warn,
.vex-theme-blue .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-blue .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-icon-button.mat-primary,
.vex-theme-blue.light .mat-mdc-icon-button.mat-primary,
.vex-theme-blue .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #2563eb;
  --mat-icon-button-state-layer-color: #2563eb;
  --mat-icon-button-ripple-color: color-mix(in srgb, #2563eb 12%, transparent);
}
.vex-theme-blue .mat-mdc-icon-button.mat-accent,
.vex-theme-blue.light .mat-mdc-icon-button.mat-accent,
.vex-theme-blue .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-blue .mat-mdc-icon-button.mat-warn,
.vex-theme-blue.light .mat-mdc-icon-button.mat-warn,
.vex-theme-blue .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-mdc-fab.mat-primary,
.vex-theme-blue .mat-mdc-mini-fab.mat-primary,
.vex-theme-blue.light .mat-mdc-fab.mat-primary,
.vex-theme-blue.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-blue .light .mat-mdc-fab.mat-primary,
.vex-theme-blue .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #2563eb;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #2563eb 12%, transparent);
  --mat-fab-small-container-color: #2563eb;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-blue .mat-mdc-fab.mat-accent,
.vex-theme-blue .mat-mdc-mini-fab.mat-accent,
.vex-theme-blue.light .mat-mdc-fab.mat-accent,
.vex-theme-blue.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-blue .light .mat-mdc-fab.mat-accent,
.vex-theme-blue .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-blue .mat-mdc-fab.mat-warn,
.vex-theme-blue .mat-mdc-mini-fab.mat-warn,
.vex-theme-blue.light .mat-mdc-fab.mat-warn,
.vex-theme-blue.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-blue .light .mat-mdc-fab.mat-warn,
.vex-theme-blue .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #93c5fd;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #2563eb;
}
.vex-theme-blue .mat-accent,
.vex-theme-blue.light .mat-accent,
.vex-theme-blue .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-blue .mat-warn,
.vex-theme-blue.light .mat-warn,
.vex-theme-blue .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-badge-background-color: #2563eb;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-blue .mat-badge-accent,
.vex-theme-blue.light .mat-badge-accent,
.vex-theme-blue .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-blue .mat-badge-warn,
.vex-theme-blue.light .mat-badge-warn,
.vex-theme-blue .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #2563eb 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #2563eb;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #2563eb 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #2563eb 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #2563eb 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #2563eb;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-datepicker-content.mat-accent,
.vex-theme-blue .mat-datepicker-toggle-active.mat-accent,
.vex-theme-blue.light .mat-datepicker-content.mat-accent,
.vex-theme-blue.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-blue .light .mat-datepicker-content.mat-accent,
.vex-theme-blue .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-datepicker-content.mat-warn,
.vex-theme-blue .mat-datepicker-toggle-active.mat-warn,
.vex-theme-blue.light .mat-datepicker-content.mat-warn,
.vex-theme-blue.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-blue .light .mat-datepicker-content.mat-warn,
.vex-theme-blue .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-blue .mat-icon.mat-primary,
.vex-theme-blue.light .mat-icon.mat-primary,
.vex-theme-blue .light .mat-icon.mat-primary {
  --mat-icon-color: #2563eb;
}
.vex-theme-blue .mat-icon.mat-accent,
.vex-theme-blue.light .mat-icon.mat-accent,
.vex-theme-blue .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-blue .mat-icon.mat-warn,
.vex-theme-blue.light .mat-icon.mat-warn,
.vex-theme-blue .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #2563eb;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #2563eb;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #2563eb;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-blue .mat-step-header.mat-accent,
.vex-theme-blue.light .mat-step-header.mat-accent,
.vex-theme-blue .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-blue .mat-step-header.mat-warn,
.vex-theme-blue.light .mat-step-header.mat-warn,
.vex-theme-blue .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-blue .mat-toolbar.mat-primary,
.vex-theme-blue.light .mat-toolbar.mat-primary,
.vex-theme-blue .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #2563eb;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-blue .mat-toolbar.mat-accent,
.vex-theme-blue.light .mat-toolbar.mat-accent,
.vex-theme-blue .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-blue .mat-toolbar.mat-warn,
.vex-theme-blue.light .mat-toolbar.mat-warn,
.vex-theme-blue .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-blue,
.vex-theme-blue.light,
.vex-theme-blue .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #3b82f6;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-blue.dark .mat-accent,
.vex-theme-blue .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-blue.dark .mat-warn,
.vex-theme-blue .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-blue.dark .mat-primary,
.vex-theme-blue .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #3b82f6;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #3b82f6;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-blue.dark .mat-accent,
.vex-theme-blue .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-blue.dark .mat-warn,
.vex-theme-blue .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-blue.dark .mat-mdc-progress-bar,
.vex-theme-blue .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #3b82f6;
  --mat-progress-bar-track-color: rgba(59, 130, 246, 0.25);
}
.vex-theme-blue.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-blue .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-blue.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-blue .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #3b82f6 87%, transparent);
  --mat-form-field-filled-caret-color: #3b82f6;
  --mat-form-field-filled-focus-active-indicator-color: #3b82f6;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #3b82f6 87%, transparent);
  --mat-form-field-outlined-caret-color: #3b82f6;
  --mat-form-field-outlined-focus-outline-color: #3b82f6;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #3b82f6 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-blue.dark .mat-mdc-form-field.mat-accent,
.vex-theme-blue .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-blue.dark .mat-mdc-form-field.mat-warn,
.vex-theme-blue .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #3b82f6;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-blue.dark .mat-mdc-form-field.mat-accent,
.vex-theme-blue .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-blue.dark .mat-mdc-form-field.mat-warn,
.vex-theme-blue .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-blue.dark .mat-mdc-standard-chip,
.vex-theme-blue .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-blue.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-blue.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-blue .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-blue .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #3b82f6;
  --mat-chip-elevated-disabled-container-color: #3b82f6;
  --mat-chip-elevated-selected-container-color: #3b82f6;
  --mat-chip-flat-disabled-selected-container-color: #3b82f6;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-blue.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-blue .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-blue .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-blue.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-blue .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-blue .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #3b82f6;
  --mat-slide-toggle-selected-handle-color: #3b82f6;
  --mat-slide-toggle-selected-hover-state-layer-color: #3b82f6;
  --mat-slide-toggle-selected-pressed-state-layer-color: #3b82f6;
  --mat-slide-toggle-selected-focus-handle-color: #3b82f6;
  --mat-slide-toggle-selected-hover-handle-color: #3b82f6;
  --mat-slide-toggle-selected-pressed-handle-color: #3b82f6;
  --mat-slide-toggle-selected-focus-track-color: #2563eb;
  --mat-slide-toggle-selected-hover-track-color: #2563eb;
  --mat-slide-toggle-selected-pressed-track-color: #2563eb;
  --mat-slide-toggle-selected-track-color: #2563eb;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-blue.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-blue .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-blue.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-blue .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-blue.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-blue .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #3b82f6;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #3b82f6;
  --mat-radio-selected-hover-icon-color: #3b82f6;
  --mat-radio-selected-icon-color: #3b82f6;
  --mat-radio-selected-pressed-icon-color: #3b82f6;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-blue.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-blue .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-blue.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-blue .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-slider-active-track-color: #3b82f6;
  --mat-slider-focus-handle-color: #3b82f6;
  --mat-slider-handle-color: #3b82f6;
  --mat-slider-hover-handle-color: #3b82f6;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #3b82f6 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #3b82f6 4%, transparent);
  --mat-slider-inactive-track-color: #3b82f6;
  --mat-slider-ripple-color: #3b82f6;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #3b82f6;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-blue.dark .mat-accent,
.vex-theme-blue .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-blue.dark .mat-warn,
.vex-theme-blue .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-blue.dark .mdc-list-item__start,
.vex-theme-blue.dark .mdc-list-item__end,
.vex-theme-blue .dark .mdc-list-item__start,
.vex-theme-blue .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #3b82f6;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #3b82f6;
  --mat-radio-selected-hover-icon-color: #3b82f6;
  --mat-radio-selected-icon-color: #3b82f6;
  --mat-radio-selected-pressed-icon-color: #3b82f6;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-blue.dark .mat-accent .mdc-list-item__start,
.vex-theme-blue.dark .mat-accent .mdc-list-item__end,
.vex-theme-blue .dark .mat-accent .mdc-list-item__start,
.vex-theme-blue .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-blue.dark .mat-warn .mdc-list-item__start,
.vex-theme-blue.dark .mat-warn .mdc-list-item__end,
.vex-theme-blue .dark .mat-warn .mdc-list-item__start,
.vex-theme-blue .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-blue.dark .mat-mdc-list-option,
.vex-theme-blue .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #3b82f6;
  --mat-checkbox-selected-hover-icon-color: #3b82f6;
  --mat-checkbox-selected-icon-color: #3b82f6;
  --mat-checkbox-selected-pressed-icon-color: #3b82f6;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #3b82f6;
  --mat-checkbox-selected-hover-state-layer-color: #3b82f6;
  --mat-checkbox-selected-pressed-state-layer-color: #3b82f6;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-list-option.mat-accent,
.vex-theme-blue .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-list-option.mat-warn,
.vex-theme-blue .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-blue.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-blue.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-blue.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-blue .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-blue .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-blue .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-blue .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #3b82f6;
}
.vex-theme-blue.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-blue.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-blue.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-blue .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-blue .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-blue .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-blue.dark .mat-mdc-tab-group,
.vex-theme-blue.dark .mat-mdc-tab-nav-bar,
.vex-theme-blue .dark .mat-mdc-tab-group,
.vex-theme-blue .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #3b82f6;
  --mat-tab-active-ripple-color: #3b82f6;
  --mat-tab-inactive-ripple-color: #3b82f6;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #3b82f6;
  --mat-tab-active-hover-label-text-color: #3b82f6;
  --mat-tab-active-focus-indicator-color: #3b82f6;
  --mat-tab-active-hover-indicator-color: #3b82f6;
  --mat-tab-active-indicator-color: #3b82f6;
}
.vex-theme-blue.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-blue.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-blue .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-blue .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-blue.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-blue.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-blue .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-blue .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-blue.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-blue.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-blue .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-blue .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #3b82f6;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-blue.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-blue .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-blue .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-blue.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-blue .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-blue .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-blue .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #3b82f6;
  --mat-checkbox-selected-hover-icon-color: #3b82f6;
  --mat-checkbox-selected-icon-color: #3b82f6;
  --mat-checkbox-selected-pressed-icon-color: #3b82f6;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #3b82f6;
  --mat-checkbox-selected-hover-state-layer-color: #3b82f6;
  --mat-checkbox-selected-pressed-state-layer-color: #3b82f6;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-blue .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-button.mat-primary,
.vex-theme-blue.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-blue.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-blue.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-blue.dark .mat-tonal-button.mat-primary,
.vex-theme-blue .dark .mat-mdc-button.mat-primary,
.vex-theme-blue .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-blue .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-blue .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-blue .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #3b82f6;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #3b82f6;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #3b82f6 12%, transparent);
  --mat-button-outlined-state-layer-color: #3b82f6;
  --mat-button-protected-container-color: #3b82f6;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #3b82f6;
  --mat-button-text-ripple-color: color-mix(in srgb, #3b82f6 12%, transparent);
  --mat-button-text-state-layer-color: #3b82f6;
  --mat-button-tonal-container-color: #3b82f6;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-button.mat-accent,
.vex-theme-blue.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-blue.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-blue.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-blue.dark .mat-tonal-button.mat-accent,
.vex-theme-blue .dark .mat-mdc-button.mat-accent,
.vex-theme-blue .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-blue .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-blue .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-blue .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-button.mat-warn,
.vex-theme-blue.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-blue.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-blue.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-blue.dark .mat-tonal-button.mat-warn,
.vex-theme-blue .dark .mat-mdc-button.mat-warn,
.vex-theme-blue .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-blue .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-blue .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-blue .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-blue .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #3b82f6;
  --mat-icon-button-state-layer-color: #3b82f6;
  --mat-icon-button-ripple-color: color-mix(in srgb, #3b82f6 12%, transparent);
}
.vex-theme-blue.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-blue .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-blue.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-blue .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-blue.dark .mat-mdc-fab.mat-primary,
.vex-theme-blue.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-blue .dark .mat-mdc-fab.mat-primary,
.vex-theme-blue .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #3b82f6;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #3b82f6 12%, transparent);
  --mat-fab-small-container-color: #3b82f6;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-fab.mat-accent,
.vex-theme-blue.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-blue .dark .mat-mdc-fab.mat-accent,
.vex-theme-blue .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-blue.dark .mat-mdc-fab.mat-warn,
.vex-theme-blue.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-blue .dark .mat-mdc-fab.mat-warn,
.vex-theme-blue .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #2563eb;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #3b82f6;
}
.vex-theme-blue.dark .mat-accent,
.vex-theme-blue .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-blue.dark .mat-warn,
.vex-theme-blue .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-badge-background-color: #3b82f6;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-blue.dark .mat-badge-accent,
.vex-theme-blue .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-blue.dark .mat-badge-warn,
.vex-theme-blue .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #3b82f6 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #3b82f6;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #3b82f6 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #3b82f6 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #3b82f6 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #3b82f6;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-blue.dark .mat-datepicker-content.mat-accent,
.vex-theme-blue.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-blue .dark .mat-datepicker-content.mat-accent,
.vex-theme-blue .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-blue.dark .mat-datepicker-content.mat-warn,
.vex-theme-blue.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-blue .dark .mat-datepicker-content.mat-warn,
.vex-theme-blue .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-blue.dark .mat-icon.mat-primary,
.vex-theme-blue .dark .mat-icon.mat-primary {
  --mat-icon-color: #3b82f6;
}
.vex-theme-blue.dark .mat-icon.mat-accent,
.vex-theme-blue .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-blue.dark .mat-icon.mat-warn,
.vex-theme-blue .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #3b82f6;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #3b82f6;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #3b82f6;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-blue.dark .mat-step-header.mat-accent,
.vex-theme-blue .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-blue.dark .mat-step-header.mat-warn,
.vex-theme-blue .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-blue.dark .mat-toolbar.mat-primary,
.vex-theme-blue .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #3b82f6;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-blue.dark .mat-toolbar.mat-accent,
.vex-theme-blue .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-blue.dark .mat-toolbar.mat-warn,
.vex-theme-blue .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #4f46e5;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-indigo .mat-accent,
.vex-theme-indigo.light .mat-accent,
.vex-theme-indigo .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-indigo .mat-warn,
.vex-theme-indigo.light .mat-warn,
.vex-theme-indigo .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-indigo .mat-primary,
.vex-theme-indigo.light .mat-primary,
.vex-theme-indigo .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #4f46e5;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #4f46e5;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-indigo .mat-accent,
.vex-theme-indigo.light .mat-accent,
.vex-theme-indigo .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-indigo .mat-warn,
.vex-theme-indigo.light .mat-warn,
.vex-theme-indigo .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-indigo .mat-mdc-progress-bar,
.vex-theme-indigo.light .mat-mdc-progress-bar,
.vex-theme-indigo .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #4f46e5;
  --mat-progress-bar-track-color: rgba(79, 70, 229, 0.25);
}
.vex-theme-indigo .mat-mdc-progress-bar.mat-accent,
.vex-theme-indigo.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-indigo .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-indigo .mat-mdc-progress-bar.mat-warn,
.vex-theme-indigo.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-indigo .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #4f46e5 87%, transparent);
  --mat-form-field-filled-caret-color: #4f46e5;
  --mat-form-field-filled-focus-active-indicator-color: #4f46e5;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #4f46e5 87%, transparent);
  --mat-form-field-outlined-caret-color: #4f46e5;
  --mat-form-field-outlined-focus-outline-color: #4f46e5;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #4f46e5 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-indigo .mat-mdc-form-field.mat-accent,
.vex-theme-indigo.light .mat-mdc-form-field.mat-accent,
.vex-theme-indigo .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-indigo .mat-mdc-form-field.mat-warn,
.vex-theme-indigo.light .mat-mdc-form-field.mat-warn,
.vex-theme-indigo .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #4f46e5;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-indigo .mat-mdc-form-field.mat-accent,
.vex-theme-indigo.light .mat-mdc-form-field.mat-accent,
.vex-theme-indigo .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-indigo .mat-mdc-form-field.mat-warn,
.vex-theme-indigo.light .mat-mdc-form-field.mat-warn,
.vex-theme-indigo .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-indigo .mat-mdc-standard-chip,
.vex-theme-indigo.light .mat-mdc-standard-chip,
.vex-theme-indigo .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-indigo .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-indigo.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-indigo.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-indigo .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-indigo .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #4f46e5;
  --mat-chip-elevated-disabled-container-color: #4f46e5;
  --mat-chip-elevated-selected-container-color: #4f46e5;
  --mat-chip-flat-disabled-selected-container-color: #4f46e5;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-indigo .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-indigo .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-indigo.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-indigo.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-indigo .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-indigo .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-indigo .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-indigo .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-indigo.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-indigo.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-indigo .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-indigo .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #4f46e5;
  --mat-slide-toggle-selected-handle-color: #4f46e5;
  --mat-slide-toggle-selected-hover-state-layer-color: #4f46e5;
  --mat-slide-toggle-selected-pressed-state-layer-color: #4f46e5;
  --mat-slide-toggle-selected-focus-handle-color: #4f46e5;
  --mat-slide-toggle-selected-hover-handle-color: #4f46e5;
  --mat-slide-toggle-selected-pressed-handle-color: #4f46e5;
  --mat-slide-toggle-selected-focus-track-color: #a5b4fc;
  --mat-slide-toggle-selected-hover-track-color: #a5b4fc;
  --mat-slide-toggle-selected-pressed-track-color: #a5b4fc;
  --mat-slide-toggle-selected-track-color: #a5b4fc;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-indigo .mat-mdc-slide-toggle.mat-accent,
.vex-theme-indigo.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-indigo .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-indigo .mat-mdc-slide-toggle.mat-warn,
.vex-theme-indigo.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-indigo .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-indigo .mat-mdc-radio-button.mat-primary,
.vex-theme-indigo.light .mat-mdc-radio-button.mat-primary,
.vex-theme-indigo .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #4f46e5;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #4f46e5;
  --mat-radio-selected-hover-icon-color: #4f46e5;
  --mat-radio-selected-icon-color: #4f46e5;
  --mat-radio-selected-pressed-icon-color: #4f46e5;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-radio-button.mat-accent,
.vex-theme-indigo.light .mat-mdc-radio-button.mat-accent,
.vex-theme-indigo .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-radio-button.mat-warn,
.vex-theme-indigo.light .mat-mdc-radio-button.mat-warn,
.vex-theme-indigo .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-slider-active-track-color: #4f46e5;
  --mat-slider-focus-handle-color: #4f46e5;
  --mat-slider-handle-color: #4f46e5;
  --mat-slider-hover-handle-color: #4f46e5;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #4f46e5 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #4f46e5 4%, transparent);
  --mat-slider-inactive-track-color: #4f46e5;
  --mat-slider-ripple-color: #4f46e5;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #4f46e5;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-accent,
.vex-theme-indigo.light .mat-accent,
.vex-theme-indigo .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-indigo .mat-warn,
.vex-theme-indigo.light .mat-warn,
.vex-theme-indigo .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-indigo .mdc-list-item__start,
.vex-theme-indigo .mdc-list-item__end,
.vex-theme-indigo.light .mdc-list-item__start,
.vex-theme-indigo.light .mdc-list-item__end,
.vex-theme-indigo .light .mdc-list-item__start,
.vex-theme-indigo .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #4f46e5;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #4f46e5;
  --mat-radio-selected-hover-icon-color: #4f46e5;
  --mat-radio-selected-icon-color: #4f46e5;
  --mat-radio-selected-pressed-icon-color: #4f46e5;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-accent .mdc-list-item__start,
.vex-theme-indigo .mat-accent .mdc-list-item__end,
.vex-theme-indigo.light .mat-accent .mdc-list-item__start,
.vex-theme-indigo.light .mat-accent .mdc-list-item__end,
.vex-theme-indigo .light .mat-accent .mdc-list-item__start,
.vex-theme-indigo .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-warn .mdc-list-item__start,
.vex-theme-indigo .mat-warn .mdc-list-item__end,
.vex-theme-indigo.light .mat-warn .mdc-list-item__start,
.vex-theme-indigo.light .mat-warn .mdc-list-item__end,
.vex-theme-indigo .light .mat-warn .mdc-list-item__start,
.vex-theme-indigo .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-list-option,
.vex-theme-indigo.light .mat-mdc-list-option,
.vex-theme-indigo .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #4f46e5;
  --mat-checkbox-selected-hover-icon-color: #4f46e5;
  --mat-checkbox-selected-icon-color: #4f46e5;
  --mat-checkbox-selected-pressed-icon-color: #4f46e5;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #4f46e5;
  --mat-checkbox-selected-hover-state-layer-color: #4f46e5;
  --mat-checkbox-selected-pressed-state-layer-color: #4f46e5;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-list-option.mat-accent,
.vex-theme-indigo.light .mat-mdc-list-option.mat-accent,
.vex-theme-indigo .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-list-option.mat-warn,
.vex-theme-indigo.light .mat-mdc-list-option.mat-warn,
.vex-theme-indigo .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-indigo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-indigo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-indigo .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-indigo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-indigo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-indigo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-indigo.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-indigo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-indigo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-indigo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-indigo .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #4f46e5;
}
.vex-theme-indigo .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-indigo .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-indigo .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-indigo.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-indigo.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-indigo.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-indigo .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-indigo .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-indigo .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-indigo .mat-mdc-tab-group,
.vex-theme-indigo .mat-mdc-tab-nav-bar,
.vex-theme-indigo.light .mat-mdc-tab-group,
.vex-theme-indigo.light .mat-mdc-tab-nav-bar,
.vex-theme-indigo .light .mat-mdc-tab-group,
.vex-theme-indigo .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #4f46e5;
  --mat-tab-active-ripple-color: #4f46e5;
  --mat-tab-inactive-ripple-color: #4f46e5;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #4f46e5;
  --mat-tab-active-hover-label-text-color: #4f46e5;
  --mat-tab-active-focus-indicator-color: #4f46e5;
  --mat-tab-active-hover-indicator-color: #4f46e5;
  --mat-tab-active-indicator-color: #4f46e5;
}
.vex-theme-indigo .mat-mdc-tab-group.mat-accent,
.vex-theme-indigo .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-indigo.light .mat-mdc-tab-group.mat-accent,
.vex-theme-indigo.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-indigo .light .mat-mdc-tab-group.mat-accent,
.vex-theme-indigo .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-indigo .mat-mdc-tab-group.mat-warn,
.vex-theme-indigo .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-indigo.light .mat-mdc-tab-group.mat-warn,
.vex-theme-indigo.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-indigo .light .mat-mdc-tab-group.mat-warn,
.vex-theme-indigo .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-indigo .mat-mdc-tab-group.mat-background-primary,
.vex-theme-indigo .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-indigo.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-indigo.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-indigo .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-indigo .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #4f46e5;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-indigo .mat-mdc-tab-group.mat-background-accent,
.vex-theme-indigo .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-indigo.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-indigo.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-indigo .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-indigo .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-indigo .mat-mdc-tab-group.mat-background-warn,
.vex-theme-indigo .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-indigo.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-indigo.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-indigo .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-indigo .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-checkbox.mat-primary,
.vex-theme-indigo.light .mat-mdc-checkbox.mat-primary,
.vex-theme-indigo .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #4f46e5;
  --mat-checkbox-selected-hover-icon-color: #4f46e5;
  --mat-checkbox-selected-icon-color: #4f46e5;
  --mat-checkbox-selected-pressed-icon-color: #4f46e5;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #4f46e5;
  --mat-checkbox-selected-hover-state-layer-color: #4f46e5;
  --mat-checkbox-selected-pressed-state-layer-color: #4f46e5;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-checkbox.mat-warn,
.vex-theme-indigo.light .mat-mdc-checkbox.mat-warn,
.vex-theme-indigo .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-button.mat-primary,
.vex-theme-indigo .mat-mdc-unelevated-button.mat-primary,
.vex-theme-indigo .mat-mdc-raised-button.mat-primary,
.vex-theme-indigo .mat-mdc-outlined-button.mat-primary,
.vex-theme-indigo .mat-tonal-button.mat-primary,
.vex-theme-indigo.light .mat-mdc-button.mat-primary,
.vex-theme-indigo.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-indigo.light .mat-mdc-raised-button.mat-primary,
.vex-theme-indigo.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-indigo.light .mat-tonal-button.mat-primary,
.vex-theme-indigo .light .mat-mdc-button.mat-primary,
.vex-theme-indigo .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-indigo .light .mat-mdc-raised-button.mat-primary,
.vex-theme-indigo .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-indigo .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #4f46e5;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #4f46e5;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #4f46e5 12%, transparent);
  --mat-button-outlined-state-layer-color: #4f46e5;
  --mat-button-protected-container-color: #4f46e5;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #4f46e5;
  --mat-button-text-ripple-color: color-mix(in srgb, #4f46e5 12%, transparent);
  --mat-button-text-state-layer-color: #4f46e5;
  --mat-button-tonal-container-color: #4f46e5;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-indigo .mat-mdc-button.mat-accent,
.vex-theme-indigo .mat-mdc-unelevated-button.mat-accent,
.vex-theme-indigo .mat-mdc-raised-button.mat-accent,
.vex-theme-indigo .mat-mdc-outlined-button.mat-accent,
.vex-theme-indigo .mat-tonal-button.mat-accent,
.vex-theme-indigo.light .mat-mdc-button.mat-accent,
.vex-theme-indigo.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-indigo.light .mat-mdc-raised-button.mat-accent,
.vex-theme-indigo.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-indigo.light .mat-tonal-button.mat-accent,
.vex-theme-indigo .light .mat-mdc-button.mat-accent,
.vex-theme-indigo .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-indigo .light .mat-mdc-raised-button.mat-accent,
.vex-theme-indigo .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-indigo .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-indigo .mat-mdc-button.mat-warn,
.vex-theme-indigo .mat-mdc-unelevated-button.mat-warn,
.vex-theme-indigo .mat-mdc-raised-button.mat-warn,
.vex-theme-indigo .mat-mdc-outlined-button.mat-warn,
.vex-theme-indigo .mat-tonal-button.mat-warn,
.vex-theme-indigo.light .mat-mdc-button.mat-warn,
.vex-theme-indigo.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-indigo.light .mat-mdc-raised-button.mat-warn,
.vex-theme-indigo.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-indigo.light .mat-tonal-button.mat-warn,
.vex-theme-indigo .light .mat-mdc-button.mat-warn,
.vex-theme-indigo .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-indigo .light .mat-mdc-raised-button.mat-warn,
.vex-theme-indigo .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-indigo .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-icon-button.mat-primary,
.vex-theme-indigo.light .mat-mdc-icon-button.mat-primary,
.vex-theme-indigo .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #4f46e5;
  --mat-icon-button-state-layer-color: #4f46e5;
  --mat-icon-button-ripple-color: color-mix(in srgb, #4f46e5 12%, transparent);
}
.vex-theme-indigo .mat-mdc-icon-button.mat-accent,
.vex-theme-indigo.light .mat-mdc-icon-button.mat-accent,
.vex-theme-indigo .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-indigo .mat-mdc-icon-button.mat-warn,
.vex-theme-indigo.light .mat-mdc-icon-button.mat-warn,
.vex-theme-indigo .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-mdc-fab.mat-primary,
.vex-theme-indigo .mat-mdc-mini-fab.mat-primary,
.vex-theme-indigo.light .mat-mdc-fab.mat-primary,
.vex-theme-indigo.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-indigo .light .mat-mdc-fab.mat-primary,
.vex-theme-indigo .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #4f46e5;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #4f46e5 12%, transparent);
  --mat-fab-small-container-color: #4f46e5;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-indigo .mat-mdc-fab.mat-accent,
.vex-theme-indigo .mat-mdc-mini-fab.mat-accent,
.vex-theme-indigo.light .mat-mdc-fab.mat-accent,
.vex-theme-indigo.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-indigo .light .mat-mdc-fab.mat-accent,
.vex-theme-indigo .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-indigo .mat-mdc-fab.mat-warn,
.vex-theme-indigo .mat-mdc-mini-fab.mat-warn,
.vex-theme-indigo.light .mat-mdc-fab.mat-warn,
.vex-theme-indigo.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-indigo .light .mat-mdc-fab.mat-warn,
.vex-theme-indigo .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #a5b4fc;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #4f46e5;
}
.vex-theme-indigo .mat-accent,
.vex-theme-indigo.light .mat-accent,
.vex-theme-indigo .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-indigo .mat-warn,
.vex-theme-indigo.light .mat-warn,
.vex-theme-indigo .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-badge-background-color: #4f46e5;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-indigo .mat-badge-accent,
.vex-theme-indigo.light .mat-badge-accent,
.vex-theme-indigo .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-indigo .mat-badge-warn,
.vex-theme-indigo.light .mat-badge-warn,
.vex-theme-indigo .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #4f46e5 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #4f46e5;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #4f46e5 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #4f46e5 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #4f46e5 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #4f46e5;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-datepicker-content.mat-accent,
.vex-theme-indigo .mat-datepicker-toggle-active.mat-accent,
.vex-theme-indigo.light .mat-datepicker-content.mat-accent,
.vex-theme-indigo.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-indigo .light .mat-datepicker-content.mat-accent,
.vex-theme-indigo .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-datepicker-content.mat-warn,
.vex-theme-indigo .mat-datepicker-toggle-active.mat-warn,
.vex-theme-indigo.light .mat-datepicker-content.mat-warn,
.vex-theme-indigo.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-indigo .light .mat-datepicker-content.mat-warn,
.vex-theme-indigo .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-indigo .mat-icon.mat-primary,
.vex-theme-indigo.light .mat-icon.mat-primary,
.vex-theme-indigo .light .mat-icon.mat-primary {
  --mat-icon-color: #4f46e5;
}
.vex-theme-indigo .mat-icon.mat-accent,
.vex-theme-indigo.light .mat-icon.mat-accent,
.vex-theme-indigo .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-indigo .mat-icon.mat-warn,
.vex-theme-indigo.light .mat-icon.mat-warn,
.vex-theme-indigo .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #4f46e5;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #4f46e5;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #4f46e5;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-indigo .mat-step-header.mat-accent,
.vex-theme-indigo.light .mat-step-header.mat-accent,
.vex-theme-indigo .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-indigo .mat-step-header.mat-warn,
.vex-theme-indigo.light .mat-step-header.mat-warn,
.vex-theme-indigo .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-indigo .mat-toolbar.mat-primary,
.vex-theme-indigo.light .mat-toolbar.mat-primary,
.vex-theme-indigo .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #4f46e5;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-indigo .mat-toolbar.mat-accent,
.vex-theme-indigo.light .mat-toolbar.mat-accent,
.vex-theme-indigo .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-indigo .mat-toolbar.mat-warn,
.vex-theme-indigo.light .mat-toolbar.mat-warn,
.vex-theme-indigo .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-indigo,
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #6366f1;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-indigo.dark .mat-accent,
.vex-theme-indigo .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-indigo.dark .mat-warn,
.vex-theme-indigo .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-indigo.dark .mat-primary,
.vex-theme-indigo .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #6366f1;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #6366f1;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-indigo.dark .mat-accent,
.vex-theme-indigo .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-indigo.dark .mat-warn,
.vex-theme-indigo .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-indigo.dark .mat-mdc-progress-bar,
.vex-theme-indigo .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #6366f1;
  --mat-progress-bar-track-color: rgba(99, 102, 241, 0.25);
}
.vex-theme-indigo.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-indigo .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-indigo.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-indigo .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #6366f1 87%, transparent);
  --mat-form-field-filled-caret-color: #6366f1;
  --mat-form-field-filled-focus-active-indicator-color: #6366f1;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #6366f1 87%, transparent);
  --mat-form-field-outlined-caret-color: #6366f1;
  --mat-form-field-outlined-focus-outline-color: #6366f1;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #6366f1 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-indigo.dark .mat-mdc-form-field.mat-accent,
.vex-theme-indigo .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-indigo.dark .mat-mdc-form-field.mat-warn,
.vex-theme-indigo .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #6366f1;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-indigo.dark .mat-mdc-form-field.mat-accent,
.vex-theme-indigo .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-indigo.dark .mat-mdc-form-field.mat-warn,
.vex-theme-indigo .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-indigo.dark .mat-mdc-standard-chip,
.vex-theme-indigo .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-indigo.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-indigo.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-indigo .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-indigo .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #6366f1;
  --mat-chip-elevated-disabled-container-color: #6366f1;
  --mat-chip-elevated-selected-container-color: #6366f1;
  --mat-chip-flat-disabled-selected-container-color: #6366f1;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-indigo.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-indigo .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-indigo .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-indigo.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-indigo .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-indigo .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #6366f1;
  --mat-slide-toggle-selected-handle-color: #6366f1;
  --mat-slide-toggle-selected-hover-state-layer-color: #6366f1;
  --mat-slide-toggle-selected-pressed-state-layer-color: #6366f1;
  --mat-slide-toggle-selected-focus-handle-color: #6366f1;
  --mat-slide-toggle-selected-hover-handle-color: #6366f1;
  --mat-slide-toggle-selected-pressed-handle-color: #6366f1;
  --mat-slide-toggle-selected-focus-track-color: #4f46e5;
  --mat-slide-toggle-selected-hover-track-color: #4f46e5;
  --mat-slide-toggle-selected-pressed-track-color: #4f46e5;
  --mat-slide-toggle-selected-track-color: #4f46e5;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-indigo.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-indigo .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-indigo.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-indigo .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-indigo.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-indigo .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #6366f1;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #6366f1;
  --mat-radio-selected-hover-icon-color: #6366f1;
  --mat-radio-selected-icon-color: #6366f1;
  --mat-radio-selected-pressed-icon-color: #6366f1;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-indigo.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-indigo .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-indigo.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-indigo .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-slider-active-track-color: #6366f1;
  --mat-slider-focus-handle-color: #6366f1;
  --mat-slider-handle-color: #6366f1;
  --mat-slider-hover-handle-color: #6366f1;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #6366f1 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #6366f1 4%, transparent);
  --mat-slider-inactive-track-color: #6366f1;
  --mat-slider-ripple-color: #6366f1;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #6366f1;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-indigo.dark .mat-accent,
.vex-theme-indigo .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-indigo.dark .mat-warn,
.vex-theme-indigo .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-indigo.dark .mdc-list-item__start,
.vex-theme-indigo.dark .mdc-list-item__end,
.vex-theme-indigo .dark .mdc-list-item__start,
.vex-theme-indigo .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #6366f1;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #6366f1;
  --mat-radio-selected-hover-icon-color: #6366f1;
  --mat-radio-selected-icon-color: #6366f1;
  --mat-radio-selected-pressed-icon-color: #6366f1;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-indigo.dark .mat-accent .mdc-list-item__start,
.vex-theme-indigo.dark .mat-accent .mdc-list-item__end,
.vex-theme-indigo .dark .mat-accent .mdc-list-item__start,
.vex-theme-indigo .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-indigo.dark .mat-warn .mdc-list-item__start,
.vex-theme-indigo.dark .mat-warn .mdc-list-item__end,
.vex-theme-indigo .dark .mat-warn .mdc-list-item__start,
.vex-theme-indigo .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-indigo.dark .mat-mdc-list-option,
.vex-theme-indigo .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #6366f1;
  --mat-checkbox-selected-hover-icon-color: #6366f1;
  --mat-checkbox-selected-icon-color: #6366f1;
  --mat-checkbox-selected-pressed-icon-color: #6366f1;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #6366f1;
  --mat-checkbox-selected-hover-state-layer-color: #6366f1;
  --mat-checkbox-selected-pressed-state-layer-color: #6366f1;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-list-option.mat-accent,
.vex-theme-indigo .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-list-option.mat-warn,
.vex-theme-indigo .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-indigo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-indigo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-indigo.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-indigo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-indigo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-indigo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-indigo .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #6366f1;
}
.vex-theme-indigo.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-indigo.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-indigo.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-indigo .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-indigo .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-indigo .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-indigo.dark .mat-mdc-tab-group,
.vex-theme-indigo.dark .mat-mdc-tab-nav-bar,
.vex-theme-indigo .dark .mat-mdc-tab-group,
.vex-theme-indigo .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #6366f1;
  --mat-tab-active-ripple-color: #6366f1;
  --mat-tab-inactive-ripple-color: #6366f1;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #6366f1;
  --mat-tab-active-hover-label-text-color: #6366f1;
  --mat-tab-active-focus-indicator-color: #6366f1;
  --mat-tab-active-hover-indicator-color: #6366f1;
  --mat-tab-active-indicator-color: #6366f1;
}
.vex-theme-indigo.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-indigo.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-indigo .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-indigo .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-indigo.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-indigo.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-indigo .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-indigo .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-indigo.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-indigo.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-indigo .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-indigo .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #6366f1;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-indigo.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-indigo .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-indigo .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-indigo.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-indigo .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-indigo .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-indigo .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #6366f1;
  --mat-checkbox-selected-hover-icon-color: #6366f1;
  --mat-checkbox-selected-icon-color: #6366f1;
  --mat-checkbox-selected-pressed-icon-color: #6366f1;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #6366f1;
  --mat-checkbox-selected-hover-state-layer-color: #6366f1;
  --mat-checkbox-selected-pressed-state-layer-color: #6366f1;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-indigo .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-button.mat-primary,
.vex-theme-indigo.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-indigo.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-indigo.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-indigo.dark .mat-tonal-button.mat-primary,
.vex-theme-indigo .dark .mat-mdc-button.mat-primary,
.vex-theme-indigo .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-indigo .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-indigo .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-indigo .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #6366f1;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #6366f1;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #6366f1 12%, transparent);
  --mat-button-outlined-state-layer-color: #6366f1;
  --mat-button-protected-container-color: #6366f1;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #6366f1;
  --mat-button-text-ripple-color: color-mix(in srgb, #6366f1 12%, transparent);
  --mat-button-text-state-layer-color: #6366f1;
  --mat-button-tonal-container-color: #6366f1;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-button.mat-accent,
.vex-theme-indigo.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-indigo.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-indigo.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-indigo.dark .mat-tonal-button.mat-accent,
.vex-theme-indigo .dark .mat-mdc-button.mat-accent,
.vex-theme-indigo .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-indigo .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-indigo .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-indigo .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-button.mat-warn,
.vex-theme-indigo.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-indigo.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-indigo.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-indigo.dark .mat-tonal-button.mat-warn,
.vex-theme-indigo .dark .mat-mdc-button.mat-warn,
.vex-theme-indigo .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-indigo .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-indigo .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-indigo .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-indigo .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #6366f1;
  --mat-icon-button-state-layer-color: #6366f1;
  --mat-icon-button-ripple-color: color-mix(in srgb, #6366f1 12%, transparent);
}
.vex-theme-indigo.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-indigo .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-indigo.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-indigo .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-indigo.dark .mat-mdc-fab.mat-primary,
.vex-theme-indigo.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-indigo .dark .mat-mdc-fab.mat-primary,
.vex-theme-indigo .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #6366f1;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #6366f1 12%, transparent);
  --mat-fab-small-container-color: #6366f1;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-fab.mat-accent,
.vex-theme-indigo.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-indigo .dark .mat-mdc-fab.mat-accent,
.vex-theme-indigo .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-indigo.dark .mat-mdc-fab.mat-warn,
.vex-theme-indigo.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-indigo .dark .mat-mdc-fab.mat-warn,
.vex-theme-indigo .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #4f46e5;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #6366f1;
}
.vex-theme-indigo.dark .mat-accent,
.vex-theme-indigo .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-indigo.dark .mat-warn,
.vex-theme-indigo .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-badge-background-color: #6366f1;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-indigo.dark .mat-badge-accent,
.vex-theme-indigo .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-indigo.dark .mat-badge-warn,
.vex-theme-indigo .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #6366f1 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #6366f1;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #6366f1 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #6366f1 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #6366f1 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #6366f1;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-indigo.dark .mat-datepicker-content.mat-accent,
.vex-theme-indigo.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-indigo .dark .mat-datepicker-content.mat-accent,
.vex-theme-indigo .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-indigo.dark .mat-datepicker-content.mat-warn,
.vex-theme-indigo.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-indigo .dark .mat-datepicker-content.mat-warn,
.vex-theme-indigo .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-indigo.dark .mat-icon.mat-primary,
.vex-theme-indigo .dark .mat-icon.mat-primary {
  --mat-icon-color: #6366f1;
}
.vex-theme-indigo.dark .mat-icon.mat-accent,
.vex-theme-indigo .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-indigo.dark .mat-icon.mat-warn,
.vex-theme-indigo .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #6366f1;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #6366f1;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #6366f1;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-indigo.dark .mat-step-header.mat-accent,
.vex-theme-indigo .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-indigo.dark .mat-step-header.mat-warn,
.vex-theme-indigo .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-indigo.dark .mat-toolbar.mat-primary,
.vex-theme-indigo .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #6366f1;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-indigo.dark .mat-toolbar.mat-accent,
.vex-theme-indigo .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-indigo.dark .mat-toolbar.mat-warn,
.vex-theme-indigo .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #7c3aed;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-violet .mat-accent,
.vex-theme-violet.light .mat-accent,
.vex-theme-violet .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-violet .mat-warn,
.vex-theme-violet.light .mat-warn,
.vex-theme-violet .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-violet .mat-primary,
.vex-theme-violet.light .mat-primary,
.vex-theme-violet .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #7c3aed;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #7c3aed;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-violet .mat-accent,
.vex-theme-violet.light .mat-accent,
.vex-theme-violet .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-violet .mat-warn,
.vex-theme-violet.light .mat-warn,
.vex-theme-violet .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-violet .mat-mdc-progress-bar,
.vex-theme-violet.light .mat-mdc-progress-bar,
.vex-theme-violet .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #7c3aed;
  --mat-progress-bar-track-color: rgba(124, 58, 237, 0.25);
}
.vex-theme-violet .mat-mdc-progress-bar.mat-accent,
.vex-theme-violet.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-violet .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-violet .mat-mdc-progress-bar.mat-warn,
.vex-theme-violet.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-violet .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #7c3aed 87%, transparent);
  --mat-form-field-filled-caret-color: #7c3aed;
  --mat-form-field-filled-focus-active-indicator-color: #7c3aed;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #7c3aed 87%, transparent);
  --mat-form-field-outlined-caret-color: #7c3aed;
  --mat-form-field-outlined-focus-outline-color: #7c3aed;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #7c3aed 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-violet .mat-mdc-form-field.mat-accent,
.vex-theme-violet.light .mat-mdc-form-field.mat-accent,
.vex-theme-violet .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-violet .mat-mdc-form-field.mat-warn,
.vex-theme-violet.light .mat-mdc-form-field.mat-warn,
.vex-theme-violet .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #7c3aed;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-violet .mat-mdc-form-field.mat-accent,
.vex-theme-violet.light .mat-mdc-form-field.mat-accent,
.vex-theme-violet .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-violet .mat-mdc-form-field.mat-warn,
.vex-theme-violet.light .mat-mdc-form-field.mat-warn,
.vex-theme-violet .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-violet .mat-mdc-standard-chip,
.vex-theme-violet.light .mat-mdc-standard-chip,
.vex-theme-violet .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-violet .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-violet.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-violet.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-violet .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-violet .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #7c3aed;
  --mat-chip-elevated-disabled-container-color: #7c3aed;
  --mat-chip-elevated-selected-container-color: #7c3aed;
  --mat-chip-flat-disabled-selected-container-color: #7c3aed;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-violet .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-violet .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-violet.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-violet.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-violet .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-violet .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-violet .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-violet .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-violet.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-violet.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-violet .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-violet .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #7c3aed;
  --mat-slide-toggle-selected-handle-color: #7c3aed;
  --mat-slide-toggle-selected-hover-state-layer-color: #7c3aed;
  --mat-slide-toggle-selected-pressed-state-layer-color: #7c3aed;
  --mat-slide-toggle-selected-focus-handle-color: #7c3aed;
  --mat-slide-toggle-selected-hover-handle-color: #7c3aed;
  --mat-slide-toggle-selected-pressed-handle-color: #7c3aed;
  --mat-slide-toggle-selected-focus-track-color: #c4b5fd;
  --mat-slide-toggle-selected-hover-track-color: #c4b5fd;
  --mat-slide-toggle-selected-pressed-track-color: #c4b5fd;
  --mat-slide-toggle-selected-track-color: #c4b5fd;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-violet .mat-mdc-slide-toggle.mat-accent,
.vex-theme-violet.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-violet .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-violet .mat-mdc-slide-toggle.mat-warn,
.vex-theme-violet.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-violet .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-violet .mat-mdc-radio-button.mat-primary,
.vex-theme-violet.light .mat-mdc-radio-button.mat-primary,
.vex-theme-violet .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #7c3aed;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #7c3aed;
  --mat-radio-selected-hover-icon-color: #7c3aed;
  --mat-radio-selected-icon-color: #7c3aed;
  --mat-radio-selected-pressed-icon-color: #7c3aed;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-radio-button.mat-accent,
.vex-theme-violet.light .mat-mdc-radio-button.mat-accent,
.vex-theme-violet .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-radio-button.mat-warn,
.vex-theme-violet.light .mat-mdc-radio-button.mat-warn,
.vex-theme-violet .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-slider-active-track-color: #7c3aed;
  --mat-slider-focus-handle-color: #7c3aed;
  --mat-slider-handle-color: #7c3aed;
  --mat-slider-hover-handle-color: #7c3aed;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #7c3aed 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #7c3aed 4%, transparent);
  --mat-slider-inactive-track-color: #7c3aed;
  --mat-slider-ripple-color: #7c3aed;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #7c3aed;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-accent,
.vex-theme-violet.light .mat-accent,
.vex-theme-violet .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-violet .mat-warn,
.vex-theme-violet.light .mat-warn,
.vex-theme-violet .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-violet .mdc-list-item__start,
.vex-theme-violet .mdc-list-item__end,
.vex-theme-violet.light .mdc-list-item__start,
.vex-theme-violet.light .mdc-list-item__end,
.vex-theme-violet .light .mdc-list-item__start,
.vex-theme-violet .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #7c3aed;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #7c3aed;
  --mat-radio-selected-hover-icon-color: #7c3aed;
  --mat-radio-selected-icon-color: #7c3aed;
  --mat-radio-selected-pressed-icon-color: #7c3aed;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-accent .mdc-list-item__start,
.vex-theme-violet .mat-accent .mdc-list-item__end,
.vex-theme-violet.light .mat-accent .mdc-list-item__start,
.vex-theme-violet.light .mat-accent .mdc-list-item__end,
.vex-theme-violet .light .mat-accent .mdc-list-item__start,
.vex-theme-violet .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-warn .mdc-list-item__start,
.vex-theme-violet .mat-warn .mdc-list-item__end,
.vex-theme-violet.light .mat-warn .mdc-list-item__start,
.vex-theme-violet.light .mat-warn .mdc-list-item__end,
.vex-theme-violet .light .mat-warn .mdc-list-item__start,
.vex-theme-violet .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-list-option,
.vex-theme-violet.light .mat-mdc-list-option,
.vex-theme-violet .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #7c3aed;
  --mat-checkbox-selected-hover-icon-color: #7c3aed;
  --mat-checkbox-selected-icon-color: #7c3aed;
  --mat-checkbox-selected-pressed-icon-color: #7c3aed;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #7c3aed;
  --mat-checkbox-selected-hover-state-layer-color: #7c3aed;
  --mat-checkbox-selected-pressed-state-layer-color: #7c3aed;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-list-option.mat-accent,
.vex-theme-violet.light .mat-mdc-list-option.mat-accent,
.vex-theme-violet .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-list-option.mat-warn,
.vex-theme-violet.light .mat-mdc-list-option.mat-warn,
.vex-theme-violet .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-violet .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-violet .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-violet .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-violet.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-violet.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-violet.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-violet.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-violet .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-violet .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-violet .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-violet .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #7c3aed;
}
.vex-theme-violet .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-violet .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-violet .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-violet.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-violet.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-violet.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-violet .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-violet .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-violet .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-violet .mat-mdc-tab-group,
.vex-theme-violet .mat-mdc-tab-nav-bar,
.vex-theme-violet.light .mat-mdc-tab-group,
.vex-theme-violet.light .mat-mdc-tab-nav-bar,
.vex-theme-violet .light .mat-mdc-tab-group,
.vex-theme-violet .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #7c3aed;
  --mat-tab-active-ripple-color: #7c3aed;
  --mat-tab-inactive-ripple-color: #7c3aed;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #7c3aed;
  --mat-tab-active-hover-label-text-color: #7c3aed;
  --mat-tab-active-focus-indicator-color: #7c3aed;
  --mat-tab-active-hover-indicator-color: #7c3aed;
  --mat-tab-active-indicator-color: #7c3aed;
}
.vex-theme-violet .mat-mdc-tab-group.mat-accent,
.vex-theme-violet .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-violet.light .mat-mdc-tab-group.mat-accent,
.vex-theme-violet.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-violet .light .mat-mdc-tab-group.mat-accent,
.vex-theme-violet .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-violet .mat-mdc-tab-group.mat-warn,
.vex-theme-violet .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-violet.light .mat-mdc-tab-group.mat-warn,
.vex-theme-violet.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-violet .light .mat-mdc-tab-group.mat-warn,
.vex-theme-violet .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-violet .mat-mdc-tab-group.mat-background-primary,
.vex-theme-violet .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-violet.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-violet.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-violet .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-violet .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #7c3aed;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-violet .mat-mdc-tab-group.mat-background-accent,
.vex-theme-violet .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-violet.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-violet.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-violet .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-violet .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-violet .mat-mdc-tab-group.mat-background-warn,
.vex-theme-violet .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-violet.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-violet.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-violet .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-violet .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-checkbox.mat-primary,
.vex-theme-violet.light .mat-mdc-checkbox.mat-primary,
.vex-theme-violet .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #7c3aed;
  --mat-checkbox-selected-hover-icon-color: #7c3aed;
  --mat-checkbox-selected-icon-color: #7c3aed;
  --mat-checkbox-selected-pressed-icon-color: #7c3aed;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #7c3aed;
  --mat-checkbox-selected-hover-state-layer-color: #7c3aed;
  --mat-checkbox-selected-pressed-state-layer-color: #7c3aed;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-checkbox.mat-warn,
.vex-theme-violet.light .mat-mdc-checkbox.mat-warn,
.vex-theme-violet .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-button.mat-primary,
.vex-theme-violet .mat-mdc-unelevated-button.mat-primary,
.vex-theme-violet .mat-mdc-raised-button.mat-primary,
.vex-theme-violet .mat-mdc-outlined-button.mat-primary,
.vex-theme-violet .mat-tonal-button.mat-primary,
.vex-theme-violet.light .mat-mdc-button.mat-primary,
.vex-theme-violet.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-violet.light .mat-mdc-raised-button.mat-primary,
.vex-theme-violet.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-violet.light .mat-tonal-button.mat-primary,
.vex-theme-violet .light .mat-mdc-button.mat-primary,
.vex-theme-violet .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-violet .light .mat-mdc-raised-button.mat-primary,
.vex-theme-violet .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-violet .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #7c3aed;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #7c3aed;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #7c3aed 12%, transparent);
  --mat-button-outlined-state-layer-color: #7c3aed;
  --mat-button-protected-container-color: #7c3aed;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #7c3aed;
  --mat-button-text-ripple-color: color-mix(in srgb, #7c3aed 12%, transparent);
  --mat-button-text-state-layer-color: #7c3aed;
  --mat-button-tonal-container-color: #7c3aed;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-violet .mat-mdc-button.mat-accent,
.vex-theme-violet .mat-mdc-unelevated-button.mat-accent,
.vex-theme-violet .mat-mdc-raised-button.mat-accent,
.vex-theme-violet .mat-mdc-outlined-button.mat-accent,
.vex-theme-violet .mat-tonal-button.mat-accent,
.vex-theme-violet.light .mat-mdc-button.mat-accent,
.vex-theme-violet.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-violet.light .mat-mdc-raised-button.mat-accent,
.vex-theme-violet.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-violet.light .mat-tonal-button.mat-accent,
.vex-theme-violet .light .mat-mdc-button.mat-accent,
.vex-theme-violet .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-violet .light .mat-mdc-raised-button.mat-accent,
.vex-theme-violet .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-violet .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-violet .mat-mdc-button.mat-warn,
.vex-theme-violet .mat-mdc-unelevated-button.mat-warn,
.vex-theme-violet .mat-mdc-raised-button.mat-warn,
.vex-theme-violet .mat-mdc-outlined-button.mat-warn,
.vex-theme-violet .mat-tonal-button.mat-warn,
.vex-theme-violet.light .mat-mdc-button.mat-warn,
.vex-theme-violet.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-violet.light .mat-mdc-raised-button.mat-warn,
.vex-theme-violet.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-violet.light .mat-tonal-button.mat-warn,
.vex-theme-violet .light .mat-mdc-button.mat-warn,
.vex-theme-violet .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-violet .light .mat-mdc-raised-button.mat-warn,
.vex-theme-violet .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-violet .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-icon-button.mat-primary,
.vex-theme-violet.light .mat-mdc-icon-button.mat-primary,
.vex-theme-violet .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #7c3aed;
  --mat-icon-button-state-layer-color: #7c3aed;
  --mat-icon-button-ripple-color: color-mix(in srgb, #7c3aed 12%, transparent);
}
.vex-theme-violet .mat-mdc-icon-button.mat-accent,
.vex-theme-violet.light .mat-mdc-icon-button.mat-accent,
.vex-theme-violet .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-violet .mat-mdc-icon-button.mat-warn,
.vex-theme-violet.light .mat-mdc-icon-button.mat-warn,
.vex-theme-violet .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-mdc-fab.mat-primary,
.vex-theme-violet .mat-mdc-mini-fab.mat-primary,
.vex-theme-violet.light .mat-mdc-fab.mat-primary,
.vex-theme-violet.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-violet .light .mat-mdc-fab.mat-primary,
.vex-theme-violet .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #7c3aed;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #7c3aed 12%, transparent);
  --mat-fab-small-container-color: #7c3aed;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-violet .mat-mdc-fab.mat-accent,
.vex-theme-violet .mat-mdc-mini-fab.mat-accent,
.vex-theme-violet.light .mat-mdc-fab.mat-accent,
.vex-theme-violet.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-violet .light .mat-mdc-fab.mat-accent,
.vex-theme-violet .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-violet .mat-mdc-fab.mat-warn,
.vex-theme-violet .mat-mdc-mini-fab.mat-warn,
.vex-theme-violet.light .mat-mdc-fab.mat-warn,
.vex-theme-violet.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-violet .light .mat-mdc-fab.mat-warn,
.vex-theme-violet .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #c4b5fd;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #7c3aed;
}
.vex-theme-violet .mat-accent,
.vex-theme-violet.light .mat-accent,
.vex-theme-violet .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-violet .mat-warn,
.vex-theme-violet.light .mat-warn,
.vex-theme-violet .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-badge-background-color: #7c3aed;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-violet .mat-badge-accent,
.vex-theme-violet.light .mat-badge-accent,
.vex-theme-violet .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-violet .mat-badge-warn,
.vex-theme-violet.light .mat-badge-warn,
.vex-theme-violet .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #7c3aed 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #7c3aed;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #7c3aed 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #7c3aed 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #7c3aed 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #7c3aed;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-datepicker-content.mat-accent,
.vex-theme-violet .mat-datepicker-toggle-active.mat-accent,
.vex-theme-violet.light .mat-datepicker-content.mat-accent,
.vex-theme-violet.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-violet .light .mat-datepicker-content.mat-accent,
.vex-theme-violet .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-datepicker-content.mat-warn,
.vex-theme-violet .mat-datepicker-toggle-active.mat-warn,
.vex-theme-violet.light .mat-datepicker-content.mat-warn,
.vex-theme-violet.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-violet .light .mat-datepicker-content.mat-warn,
.vex-theme-violet .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-violet .mat-icon.mat-primary,
.vex-theme-violet.light .mat-icon.mat-primary,
.vex-theme-violet .light .mat-icon.mat-primary {
  --mat-icon-color: #7c3aed;
}
.vex-theme-violet .mat-icon.mat-accent,
.vex-theme-violet.light .mat-icon.mat-accent,
.vex-theme-violet .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-violet .mat-icon.mat-warn,
.vex-theme-violet.light .mat-icon.mat-warn,
.vex-theme-violet .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #7c3aed;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #7c3aed;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #7c3aed;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-violet .mat-step-header.mat-accent,
.vex-theme-violet.light .mat-step-header.mat-accent,
.vex-theme-violet .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-violet .mat-step-header.mat-warn,
.vex-theme-violet.light .mat-step-header.mat-warn,
.vex-theme-violet .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-violet .mat-toolbar.mat-primary,
.vex-theme-violet.light .mat-toolbar.mat-primary,
.vex-theme-violet .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #7c3aed;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-violet .mat-toolbar.mat-accent,
.vex-theme-violet.light .mat-toolbar.mat-accent,
.vex-theme-violet .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-violet .mat-toolbar.mat-warn,
.vex-theme-violet.light .mat-toolbar.mat-warn,
.vex-theme-violet .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-violet,
.vex-theme-violet.light,
.vex-theme-violet .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #8b5cf6;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-violet.dark .mat-accent,
.vex-theme-violet .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-violet.dark .mat-warn,
.vex-theme-violet .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-violet.dark .mat-primary,
.vex-theme-violet .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #8b5cf6;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #8b5cf6;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-violet.dark .mat-accent,
.vex-theme-violet .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-violet.dark .mat-warn,
.vex-theme-violet .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-violet.dark .mat-mdc-progress-bar,
.vex-theme-violet .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #8b5cf6;
  --mat-progress-bar-track-color: rgba(139, 92, 246, 0.25);
}
.vex-theme-violet.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-violet .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-violet.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-violet .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #8b5cf6 87%, transparent);
  --mat-form-field-filled-caret-color: #8b5cf6;
  --mat-form-field-filled-focus-active-indicator-color: #8b5cf6;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #8b5cf6 87%, transparent);
  --mat-form-field-outlined-caret-color: #8b5cf6;
  --mat-form-field-outlined-focus-outline-color: #8b5cf6;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #8b5cf6 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-violet.dark .mat-mdc-form-field.mat-accent,
.vex-theme-violet .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-violet.dark .mat-mdc-form-field.mat-warn,
.vex-theme-violet .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #8b5cf6;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-violet.dark .mat-mdc-form-field.mat-accent,
.vex-theme-violet .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-violet.dark .mat-mdc-form-field.mat-warn,
.vex-theme-violet .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-violet.dark .mat-mdc-standard-chip,
.vex-theme-violet .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-violet.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-violet.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-violet .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-violet .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #8b5cf6;
  --mat-chip-elevated-disabled-container-color: #8b5cf6;
  --mat-chip-elevated-selected-container-color: #8b5cf6;
  --mat-chip-flat-disabled-selected-container-color: #8b5cf6;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-violet.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-violet .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-violet .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-violet.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-violet .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-violet .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #8b5cf6;
  --mat-slide-toggle-selected-handle-color: #8b5cf6;
  --mat-slide-toggle-selected-hover-state-layer-color: #8b5cf6;
  --mat-slide-toggle-selected-pressed-state-layer-color: #8b5cf6;
  --mat-slide-toggle-selected-focus-handle-color: #8b5cf6;
  --mat-slide-toggle-selected-hover-handle-color: #8b5cf6;
  --mat-slide-toggle-selected-pressed-handle-color: #8b5cf6;
  --mat-slide-toggle-selected-focus-track-color: #7c3aed;
  --mat-slide-toggle-selected-hover-track-color: #7c3aed;
  --mat-slide-toggle-selected-pressed-track-color: #7c3aed;
  --mat-slide-toggle-selected-track-color: #7c3aed;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-violet.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-violet .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-violet.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-violet .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-violet.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-violet .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #8b5cf6;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #8b5cf6;
  --mat-radio-selected-hover-icon-color: #8b5cf6;
  --mat-radio-selected-icon-color: #8b5cf6;
  --mat-radio-selected-pressed-icon-color: #8b5cf6;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-violet.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-violet .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-violet.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-violet .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-slider-active-track-color: #8b5cf6;
  --mat-slider-focus-handle-color: #8b5cf6;
  --mat-slider-handle-color: #8b5cf6;
  --mat-slider-hover-handle-color: #8b5cf6;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #8b5cf6 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #8b5cf6 4%, transparent);
  --mat-slider-inactive-track-color: #8b5cf6;
  --mat-slider-ripple-color: #8b5cf6;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #8b5cf6;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-violet.dark .mat-accent,
.vex-theme-violet .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-violet.dark .mat-warn,
.vex-theme-violet .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-violet.dark .mdc-list-item__start,
.vex-theme-violet.dark .mdc-list-item__end,
.vex-theme-violet .dark .mdc-list-item__start,
.vex-theme-violet .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #8b5cf6;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #8b5cf6;
  --mat-radio-selected-hover-icon-color: #8b5cf6;
  --mat-radio-selected-icon-color: #8b5cf6;
  --mat-radio-selected-pressed-icon-color: #8b5cf6;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-violet.dark .mat-accent .mdc-list-item__start,
.vex-theme-violet.dark .mat-accent .mdc-list-item__end,
.vex-theme-violet .dark .mat-accent .mdc-list-item__start,
.vex-theme-violet .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-violet.dark .mat-warn .mdc-list-item__start,
.vex-theme-violet.dark .mat-warn .mdc-list-item__end,
.vex-theme-violet .dark .mat-warn .mdc-list-item__start,
.vex-theme-violet .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-violet.dark .mat-mdc-list-option,
.vex-theme-violet .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #8b5cf6;
  --mat-checkbox-selected-hover-icon-color: #8b5cf6;
  --mat-checkbox-selected-icon-color: #8b5cf6;
  --mat-checkbox-selected-pressed-icon-color: #8b5cf6;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #8b5cf6;
  --mat-checkbox-selected-hover-state-layer-color: #8b5cf6;
  --mat-checkbox-selected-pressed-state-layer-color: #8b5cf6;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-list-option.mat-accent,
.vex-theme-violet .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-list-option.mat-warn,
.vex-theme-violet .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-violet.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-violet.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-violet.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-violet .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-violet .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-violet .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-violet .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #8b5cf6;
}
.vex-theme-violet.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-violet.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-violet.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-violet .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-violet .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-violet .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-violet.dark .mat-mdc-tab-group,
.vex-theme-violet.dark .mat-mdc-tab-nav-bar,
.vex-theme-violet .dark .mat-mdc-tab-group,
.vex-theme-violet .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #8b5cf6;
  --mat-tab-active-ripple-color: #8b5cf6;
  --mat-tab-inactive-ripple-color: #8b5cf6;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #8b5cf6;
  --mat-tab-active-hover-label-text-color: #8b5cf6;
  --mat-tab-active-focus-indicator-color: #8b5cf6;
  --mat-tab-active-hover-indicator-color: #8b5cf6;
  --mat-tab-active-indicator-color: #8b5cf6;
}
.vex-theme-violet.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-violet.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-violet .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-violet .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-violet.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-violet.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-violet .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-violet .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-violet.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-violet.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-violet .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-violet .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #8b5cf6;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-violet.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-violet .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-violet .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-violet.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-violet .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-violet .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-violet .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #8b5cf6;
  --mat-checkbox-selected-hover-icon-color: #8b5cf6;
  --mat-checkbox-selected-icon-color: #8b5cf6;
  --mat-checkbox-selected-pressed-icon-color: #8b5cf6;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #8b5cf6;
  --mat-checkbox-selected-hover-state-layer-color: #8b5cf6;
  --mat-checkbox-selected-pressed-state-layer-color: #8b5cf6;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-violet .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-button.mat-primary,
.vex-theme-violet.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-violet.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-violet.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-violet.dark .mat-tonal-button.mat-primary,
.vex-theme-violet .dark .mat-mdc-button.mat-primary,
.vex-theme-violet .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-violet .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-violet .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-violet .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #8b5cf6;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #8b5cf6;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #8b5cf6 12%, transparent);
  --mat-button-outlined-state-layer-color: #8b5cf6;
  --mat-button-protected-container-color: #8b5cf6;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #8b5cf6;
  --mat-button-text-ripple-color: color-mix(in srgb, #8b5cf6 12%, transparent);
  --mat-button-text-state-layer-color: #8b5cf6;
  --mat-button-tonal-container-color: #8b5cf6;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-button.mat-accent,
.vex-theme-violet.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-violet.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-violet.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-violet.dark .mat-tonal-button.mat-accent,
.vex-theme-violet .dark .mat-mdc-button.mat-accent,
.vex-theme-violet .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-violet .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-violet .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-violet .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-button.mat-warn,
.vex-theme-violet.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-violet.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-violet.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-violet.dark .mat-tonal-button.mat-warn,
.vex-theme-violet .dark .mat-mdc-button.mat-warn,
.vex-theme-violet .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-violet .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-violet .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-violet .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-violet .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #8b5cf6;
  --mat-icon-button-state-layer-color: #8b5cf6;
  --mat-icon-button-ripple-color: color-mix(in srgb, #8b5cf6 12%, transparent);
}
.vex-theme-violet.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-violet .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-violet.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-violet .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-violet.dark .mat-mdc-fab.mat-primary,
.vex-theme-violet.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-violet .dark .mat-mdc-fab.mat-primary,
.vex-theme-violet .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #8b5cf6;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #8b5cf6 12%, transparent);
  --mat-fab-small-container-color: #8b5cf6;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-fab.mat-accent,
.vex-theme-violet.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-violet .dark .mat-mdc-fab.mat-accent,
.vex-theme-violet .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-violet.dark .mat-mdc-fab.mat-warn,
.vex-theme-violet.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-violet .dark .mat-mdc-fab.mat-warn,
.vex-theme-violet .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #7c3aed;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #8b5cf6;
}
.vex-theme-violet.dark .mat-accent,
.vex-theme-violet .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-violet.dark .mat-warn,
.vex-theme-violet .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-badge-background-color: #8b5cf6;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-violet.dark .mat-badge-accent,
.vex-theme-violet .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-violet.dark .mat-badge-warn,
.vex-theme-violet .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #8b5cf6 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #8b5cf6;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #8b5cf6 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #8b5cf6 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #8b5cf6 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #8b5cf6;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-violet.dark .mat-datepicker-content.mat-accent,
.vex-theme-violet.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-violet .dark .mat-datepicker-content.mat-accent,
.vex-theme-violet .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-violet.dark .mat-datepicker-content.mat-warn,
.vex-theme-violet.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-violet .dark .mat-datepicker-content.mat-warn,
.vex-theme-violet .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-violet.dark .mat-icon.mat-primary,
.vex-theme-violet .dark .mat-icon.mat-primary {
  --mat-icon-color: #8b5cf6;
}
.vex-theme-violet.dark .mat-icon.mat-accent,
.vex-theme-violet .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-violet.dark .mat-icon.mat-warn,
.vex-theme-violet .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #8b5cf6;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #8b5cf6;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #8b5cf6;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-violet.dark .mat-step-header.mat-accent,
.vex-theme-violet .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-violet.dark .mat-step-header.mat-warn,
.vex-theme-violet .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-violet.dark .mat-toolbar.mat-primary,
.vex-theme-violet .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #8b5cf6;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-violet.dark .mat-toolbar.mat-accent,
.vex-theme-violet .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-violet.dark .mat-toolbar.mat-warn,
.vex-theme-violet .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #9333ea;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-purple .mat-accent,
.vex-theme-purple.light .mat-accent,
.vex-theme-purple .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-purple .mat-warn,
.vex-theme-purple.light .mat-warn,
.vex-theme-purple .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-purple .mat-primary,
.vex-theme-purple.light .mat-primary,
.vex-theme-purple .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #9333ea;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #9333ea;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-purple .mat-accent,
.vex-theme-purple.light .mat-accent,
.vex-theme-purple .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-purple .mat-warn,
.vex-theme-purple.light .mat-warn,
.vex-theme-purple .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-purple .mat-mdc-progress-bar,
.vex-theme-purple.light .mat-mdc-progress-bar,
.vex-theme-purple .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #9333ea;
  --mat-progress-bar-track-color: rgba(147, 51, 234, 0.25);
}
.vex-theme-purple .mat-mdc-progress-bar.mat-accent,
.vex-theme-purple.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-purple .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-purple .mat-mdc-progress-bar.mat-warn,
.vex-theme-purple.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-purple .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #9333ea 87%, transparent);
  --mat-form-field-filled-caret-color: #9333ea;
  --mat-form-field-filled-focus-active-indicator-color: #9333ea;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #9333ea 87%, transparent);
  --mat-form-field-outlined-caret-color: #9333ea;
  --mat-form-field-outlined-focus-outline-color: #9333ea;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #9333ea 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-purple .mat-mdc-form-field.mat-accent,
.vex-theme-purple.light .mat-mdc-form-field.mat-accent,
.vex-theme-purple .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-purple .mat-mdc-form-field.mat-warn,
.vex-theme-purple.light .mat-mdc-form-field.mat-warn,
.vex-theme-purple .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #9333ea;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-purple .mat-mdc-form-field.mat-accent,
.vex-theme-purple.light .mat-mdc-form-field.mat-accent,
.vex-theme-purple .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-purple .mat-mdc-form-field.mat-warn,
.vex-theme-purple.light .mat-mdc-form-field.mat-warn,
.vex-theme-purple .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-purple .mat-mdc-standard-chip,
.vex-theme-purple.light .mat-mdc-standard-chip,
.vex-theme-purple .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-purple .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-purple.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-purple.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-purple .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-purple .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #9333ea;
  --mat-chip-elevated-disabled-container-color: #9333ea;
  --mat-chip-elevated-selected-container-color: #9333ea;
  --mat-chip-flat-disabled-selected-container-color: #9333ea;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-purple .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-purple .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-purple.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-purple.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-purple .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-purple .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-purple .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-purple .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-purple.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-purple.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-purple .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-purple .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #9333ea;
  --mat-slide-toggle-selected-handle-color: #9333ea;
  --mat-slide-toggle-selected-hover-state-layer-color: #9333ea;
  --mat-slide-toggle-selected-pressed-state-layer-color: #9333ea;
  --mat-slide-toggle-selected-focus-handle-color: #9333ea;
  --mat-slide-toggle-selected-hover-handle-color: #9333ea;
  --mat-slide-toggle-selected-pressed-handle-color: #9333ea;
  --mat-slide-toggle-selected-focus-track-color: #d8b4fe;
  --mat-slide-toggle-selected-hover-track-color: #d8b4fe;
  --mat-slide-toggle-selected-pressed-track-color: #d8b4fe;
  --mat-slide-toggle-selected-track-color: #d8b4fe;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-purple .mat-mdc-slide-toggle.mat-accent,
.vex-theme-purple.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-purple .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-purple .mat-mdc-slide-toggle.mat-warn,
.vex-theme-purple.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-purple .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-purple .mat-mdc-radio-button.mat-primary,
.vex-theme-purple.light .mat-mdc-radio-button.mat-primary,
.vex-theme-purple .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #9333ea;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #9333ea;
  --mat-radio-selected-hover-icon-color: #9333ea;
  --mat-radio-selected-icon-color: #9333ea;
  --mat-radio-selected-pressed-icon-color: #9333ea;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-radio-button.mat-accent,
.vex-theme-purple.light .mat-mdc-radio-button.mat-accent,
.vex-theme-purple .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-radio-button.mat-warn,
.vex-theme-purple.light .mat-mdc-radio-button.mat-warn,
.vex-theme-purple .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-slider-active-track-color: #9333ea;
  --mat-slider-focus-handle-color: #9333ea;
  --mat-slider-handle-color: #9333ea;
  --mat-slider-hover-handle-color: #9333ea;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #9333ea 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #9333ea 4%, transparent);
  --mat-slider-inactive-track-color: #9333ea;
  --mat-slider-ripple-color: #9333ea;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #9333ea;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-accent,
.vex-theme-purple.light .mat-accent,
.vex-theme-purple .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-purple .mat-warn,
.vex-theme-purple.light .mat-warn,
.vex-theme-purple .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-purple .mdc-list-item__start,
.vex-theme-purple .mdc-list-item__end,
.vex-theme-purple.light .mdc-list-item__start,
.vex-theme-purple.light .mdc-list-item__end,
.vex-theme-purple .light .mdc-list-item__start,
.vex-theme-purple .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #9333ea;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #9333ea;
  --mat-radio-selected-hover-icon-color: #9333ea;
  --mat-radio-selected-icon-color: #9333ea;
  --mat-radio-selected-pressed-icon-color: #9333ea;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-accent .mdc-list-item__start,
.vex-theme-purple .mat-accent .mdc-list-item__end,
.vex-theme-purple.light .mat-accent .mdc-list-item__start,
.vex-theme-purple.light .mat-accent .mdc-list-item__end,
.vex-theme-purple .light .mat-accent .mdc-list-item__start,
.vex-theme-purple .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-warn .mdc-list-item__start,
.vex-theme-purple .mat-warn .mdc-list-item__end,
.vex-theme-purple.light .mat-warn .mdc-list-item__start,
.vex-theme-purple.light .mat-warn .mdc-list-item__end,
.vex-theme-purple .light .mat-warn .mdc-list-item__start,
.vex-theme-purple .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-list-option,
.vex-theme-purple.light .mat-mdc-list-option,
.vex-theme-purple .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #9333ea;
  --mat-checkbox-selected-hover-icon-color: #9333ea;
  --mat-checkbox-selected-icon-color: #9333ea;
  --mat-checkbox-selected-pressed-icon-color: #9333ea;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #9333ea;
  --mat-checkbox-selected-hover-state-layer-color: #9333ea;
  --mat-checkbox-selected-pressed-state-layer-color: #9333ea;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-list-option.mat-accent,
.vex-theme-purple.light .mat-mdc-list-option.mat-accent,
.vex-theme-purple .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-list-option.mat-warn,
.vex-theme-purple.light .mat-mdc-list-option.mat-warn,
.vex-theme-purple .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-purple .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-purple .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-purple .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-purple.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-purple.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-purple.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-purple.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-purple .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-purple .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-purple .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-purple .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #9333ea;
}
.vex-theme-purple .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-purple .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-purple .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-purple.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-purple.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-purple.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-purple .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-purple .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-purple .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-purple .mat-mdc-tab-group,
.vex-theme-purple .mat-mdc-tab-nav-bar,
.vex-theme-purple.light .mat-mdc-tab-group,
.vex-theme-purple.light .mat-mdc-tab-nav-bar,
.vex-theme-purple .light .mat-mdc-tab-group,
.vex-theme-purple .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #9333ea;
  --mat-tab-active-ripple-color: #9333ea;
  --mat-tab-inactive-ripple-color: #9333ea;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #9333ea;
  --mat-tab-active-hover-label-text-color: #9333ea;
  --mat-tab-active-focus-indicator-color: #9333ea;
  --mat-tab-active-hover-indicator-color: #9333ea;
  --mat-tab-active-indicator-color: #9333ea;
}
.vex-theme-purple .mat-mdc-tab-group.mat-accent,
.vex-theme-purple .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-purple.light .mat-mdc-tab-group.mat-accent,
.vex-theme-purple.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-purple .light .mat-mdc-tab-group.mat-accent,
.vex-theme-purple .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-purple .mat-mdc-tab-group.mat-warn,
.vex-theme-purple .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-purple.light .mat-mdc-tab-group.mat-warn,
.vex-theme-purple.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-purple .light .mat-mdc-tab-group.mat-warn,
.vex-theme-purple .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-purple .mat-mdc-tab-group.mat-background-primary,
.vex-theme-purple .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-purple.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-purple.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-purple .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-purple .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #9333ea;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-purple .mat-mdc-tab-group.mat-background-accent,
.vex-theme-purple .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-purple.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-purple.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-purple .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-purple .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-purple .mat-mdc-tab-group.mat-background-warn,
.vex-theme-purple .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-purple.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-purple.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-purple .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-purple .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-checkbox.mat-primary,
.vex-theme-purple.light .mat-mdc-checkbox.mat-primary,
.vex-theme-purple .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #9333ea;
  --mat-checkbox-selected-hover-icon-color: #9333ea;
  --mat-checkbox-selected-icon-color: #9333ea;
  --mat-checkbox-selected-pressed-icon-color: #9333ea;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #9333ea;
  --mat-checkbox-selected-hover-state-layer-color: #9333ea;
  --mat-checkbox-selected-pressed-state-layer-color: #9333ea;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-checkbox.mat-warn,
.vex-theme-purple.light .mat-mdc-checkbox.mat-warn,
.vex-theme-purple .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-button.mat-primary,
.vex-theme-purple .mat-mdc-unelevated-button.mat-primary,
.vex-theme-purple .mat-mdc-raised-button.mat-primary,
.vex-theme-purple .mat-mdc-outlined-button.mat-primary,
.vex-theme-purple .mat-tonal-button.mat-primary,
.vex-theme-purple.light .mat-mdc-button.mat-primary,
.vex-theme-purple.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-purple.light .mat-mdc-raised-button.mat-primary,
.vex-theme-purple.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-purple.light .mat-tonal-button.mat-primary,
.vex-theme-purple .light .mat-mdc-button.mat-primary,
.vex-theme-purple .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-purple .light .mat-mdc-raised-button.mat-primary,
.vex-theme-purple .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-purple .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #9333ea;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #9333ea;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #9333ea 12%, transparent);
  --mat-button-outlined-state-layer-color: #9333ea;
  --mat-button-protected-container-color: #9333ea;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #9333ea;
  --mat-button-text-ripple-color: color-mix(in srgb, #9333ea 12%, transparent);
  --mat-button-text-state-layer-color: #9333ea;
  --mat-button-tonal-container-color: #9333ea;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-purple .mat-mdc-button.mat-accent,
.vex-theme-purple .mat-mdc-unelevated-button.mat-accent,
.vex-theme-purple .mat-mdc-raised-button.mat-accent,
.vex-theme-purple .mat-mdc-outlined-button.mat-accent,
.vex-theme-purple .mat-tonal-button.mat-accent,
.vex-theme-purple.light .mat-mdc-button.mat-accent,
.vex-theme-purple.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-purple.light .mat-mdc-raised-button.mat-accent,
.vex-theme-purple.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-purple.light .mat-tonal-button.mat-accent,
.vex-theme-purple .light .mat-mdc-button.mat-accent,
.vex-theme-purple .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-purple .light .mat-mdc-raised-button.mat-accent,
.vex-theme-purple .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-purple .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-purple .mat-mdc-button.mat-warn,
.vex-theme-purple .mat-mdc-unelevated-button.mat-warn,
.vex-theme-purple .mat-mdc-raised-button.mat-warn,
.vex-theme-purple .mat-mdc-outlined-button.mat-warn,
.vex-theme-purple .mat-tonal-button.mat-warn,
.vex-theme-purple.light .mat-mdc-button.mat-warn,
.vex-theme-purple.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-purple.light .mat-mdc-raised-button.mat-warn,
.vex-theme-purple.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-purple.light .mat-tonal-button.mat-warn,
.vex-theme-purple .light .mat-mdc-button.mat-warn,
.vex-theme-purple .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-purple .light .mat-mdc-raised-button.mat-warn,
.vex-theme-purple .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-purple .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-icon-button.mat-primary,
.vex-theme-purple.light .mat-mdc-icon-button.mat-primary,
.vex-theme-purple .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #9333ea;
  --mat-icon-button-state-layer-color: #9333ea;
  --mat-icon-button-ripple-color: color-mix(in srgb, #9333ea 12%, transparent);
}
.vex-theme-purple .mat-mdc-icon-button.mat-accent,
.vex-theme-purple.light .mat-mdc-icon-button.mat-accent,
.vex-theme-purple .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-purple .mat-mdc-icon-button.mat-warn,
.vex-theme-purple.light .mat-mdc-icon-button.mat-warn,
.vex-theme-purple .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-mdc-fab.mat-primary,
.vex-theme-purple .mat-mdc-mini-fab.mat-primary,
.vex-theme-purple.light .mat-mdc-fab.mat-primary,
.vex-theme-purple.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-purple .light .mat-mdc-fab.mat-primary,
.vex-theme-purple .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #9333ea;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #9333ea 12%, transparent);
  --mat-fab-small-container-color: #9333ea;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-purple .mat-mdc-fab.mat-accent,
.vex-theme-purple .mat-mdc-mini-fab.mat-accent,
.vex-theme-purple.light .mat-mdc-fab.mat-accent,
.vex-theme-purple.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-purple .light .mat-mdc-fab.mat-accent,
.vex-theme-purple .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-purple .mat-mdc-fab.mat-warn,
.vex-theme-purple .mat-mdc-mini-fab.mat-warn,
.vex-theme-purple.light .mat-mdc-fab.mat-warn,
.vex-theme-purple.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-purple .light .mat-mdc-fab.mat-warn,
.vex-theme-purple .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #d8b4fe;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #9333ea;
}
.vex-theme-purple .mat-accent,
.vex-theme-purple.light .mat-accent,
.vex-theme-purple .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-purple .mat-warn,
.vex-theme-purple.light .mat-warn,
.vex-theme-purple .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-badge-background-color: #9333ea;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-purple .mat-badge-accent,
.vex-theme-purple.light .mat-badge-accent,
.vex-theme-purple .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-purple .mat-badge-warn,
.vex-theme-purple.light .mat-badge-warn,
.vex-theme-purple .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #9333ea 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #9333ea;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #9333ea 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #9333ea 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #9333ea 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #9333ea;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-datepicker-content.mat-accent,
.vex-theme-purple .mat-datepicker-toggle-active.mat-accent,
.vex-theme-purple.light .mat-datepicker-content.mat-accent,
.vex-theme-purple.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-purple .light .mat-datepicker-content.mat-accent,
.vex-theme-purple .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-datepicker-content.mat-warn,
.vex-theme-purple .mat-datepicker-toggle-active.mat-warn,
.vex-theme-purple.light .mat-datepicker-content.mat-warn,
.vex-theme-purple.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-purple .light .mat-datepicker-content.mat-warn,
.vex-theme-purple .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-purple .mat-icon.mat-primary,
.vex-theme-purple.light .mat-icon.mat-primary,
.vex-theme-purple .light .mat-icon.mat-primary {
  --mat-icon-color: #9333ea;
}
.vex-theme-purple .mat-icon.mat-accent,
.vex-theme-purple.light .mat-icon.mat-accent,
.vex-theme-purple .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-purple .mat-icon.mat-warn,
.vex-theme-purple.light .mat-icon.mat-warn,
.vex-theme-purple .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #9333ea;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #9333ea;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #9333ea;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-purple .mat-step-header.mat-accent,
.vex-theme-purple.light .mat-step-header.mat-accent,
.vex-theme-purple .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-purple .mat-step-header.mat-warn,
.vex-theme-purple.light .mat-step-header.mat-warn,
.vex-theme-purple .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-purple .mat-toolbar.mat-primary,
.vex-theme-purple.light .mat-toolbar.mat-primary,
.vex-theme-purple .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #9333ea;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-purple .mat-toolbar.mat-accent,
.vex-theme-purple.light .mat-toolbar.mat-accent,
.vex-theme-purple .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-purple .mat-toolbar.mat-warn,
.vex-theme-purple.light .mat-toolbar.mat-warn,
.vex-theme-purple .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-purple,
.vex-theme-purple.light,
.vex-theme-purple .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #a855f7;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-purple.dark .mat-accent,
.vex-theme-purple .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-purple.dark .mat-warn,
.vex-theme-purple .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-purple.dark .mat-primary,
.vex-theme-purple .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #a855f7;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #a855f7;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-purple.dark .mat-accent,
.vex-theme-purple .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-purple.dark .mat-warn,
.vex-theme-purple .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-purple.dark .mat-mdc-progress-bar,
.vex-theme-purple .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #a855f7;
  --mat-progress-bar-track-color: rgba(168, 85, 247, 0.25);
}
.vex-theme-purple.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-purple .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-purple.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-purple .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #a855f7 87%, transparent);
  --mat-form-field-filled-caret-color: #a855f7;
  --mat-form-field-filled-focus-active-indicator-color: #a855f7;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #a855f7 87%, transparent);
  --mat-form-field-outlined-caret-color: #a855f7;
  --mat-form-field-outlined-focus-outline-color: #a855f7;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #a855f7 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-purple.dark .mat-mdc-form-field.mat-accent,
.vex-theme-purple .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-purple.dark .mat-mdc-form-field.mat-warn,
.vex-theme-purple .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #a855f7;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-purple.dark .mat-mdc-form-field.mat-accent,
.vex-theme-purple .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-purple.dark .mat-mdc-form-field.mat-warn,
.vex-theme-purple .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-purple.dark .mat-mdc-standard-chip,
.vex-theme-purple .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-purple.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-purple.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-purple .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-purple .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #a855f7;
  --mat-chip-elevated-disabled-container-color: #a855f7;
  --mat-chip-elevated-selected-container-color: #a855f7;
  --mat-chip-flat-disabled-selected-container-color: #a855f7;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-purple.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-purple .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-purple .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-purple.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-purple .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-purple .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #a855f7;
  --mat-slide-toggle-selected-handle-color: #a855f7;
  --mat-slide-toggle-selected-hover-state-layer-color: #a855f7;
  --mat-slide-toggle-selected-pressed-state-layer-color: #a855f7;
  --mat-slide-toggle-selected-focus-handle-color: #a855f7;
  --mat-slide-toggle-selected-hover-handle-color: #a855f7;
  --mat-slide-toggle-selected-pressed-handle-color: #a855f7;
  --mat-slide-toggle-selected-focus-track-color: #9333ea;
  --mat-slide-toggle-selected-hover-track-color: #9333ea;
  --mat-slide-toggle-selected-pressed-track-color: #9333ea;
  --mat-slide-toggle-selected-track-color: #9333ea;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-purple.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-purple .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-purple.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-purple .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-purple.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-purple .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #a855f7;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #a855f7;
  --mat-radio-selected-hover-icon-color: #a855f7;
  --mat-radio-selected-icon-color: #a855f7;
  --mat-radio-selected-pressed-icon-color: #a855f7;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-purple.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-purple .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-purple.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-purple .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-slider-active-track-color: #a855f7;
  --mat-slider-focus-handle-color: #a855f7;
  --mat-slider-handle-color: #a855f7;
  --mat-slider-hover-handle-color: #a855f7;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #a855f7 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #a855f7 4%, transparent);
  --mat-slider-inactive-track-color: #a855f7;
  --mat-slider-ripple-color: #a855f7;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #a855f7;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-purple.dark .mat-accent,
.vex-theme-purple .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-purple.dark .mat-warn,
.vex-theme-purple .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-purple.dark .mdc-list-item__start,
.vex-theme-purple.dark .mdc-list-item__end,
.vex-theme-purple .dark .mdc-list-item__start,
.vex-theme-purple .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #a855f7;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #a855f7;
  --mat-radio-selected-hover-icon-color: #a855f7;
  --mat-radio-selected-icon-color: #a855f7;
  --mat-radio-selected-pressed-icon-color: #a855f7;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-purple.dark .mat-accent .mdc-list-item__start,
.vex-theme-purple.dark .mat-accent .mdc-list-item__end,
.vex-theme-purple .dark .mat-accent .mdc-list-item__start,
.vex-theme-purple .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-purple.dark .mat-warn .mdc-list-item__start,
.vex-theme-purple.dark .mat-warn .mdc-list-item__end,
.vex-theme-purple .dark .mat-warn .mdc-list-item__start,
.vex-theme-purple .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-purple.dark .mat-mdc-list-option,
.vex-theme-purple .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #a855f7;
  --mat-checkbox-selected-hover-icon-color: #a855f7;
  --mat-checkbox-selected-icon-color: #a855f7;
  --mat-checkbox-selected-pressed-icon-color: #a855f7;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #a855f7;
  --mat-checkbox-selected-hover-state-layer-color: #a855f7;
  --mat-checkbox-selected-pressed-state-layer-color: #a855f7;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-list-option.mat-accent,
.vex-theme-purple .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-list-option.mat-warn,
.vex-theme-purple .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-purple.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-purple.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-purple.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-purple .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-purple .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-purple .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-purple .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #a855f7;
}
.vex-theme-purple.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-purple.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-purple.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-purple .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-purple .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-purple .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-purple.dark .mat-mdc-tab-group,
.vex-theme-purple.dark .mat-mdc-tab-nav-bar,
.vex-theme-purple .dark .mat-mdc-tab-group,
.vex-theme-purple .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #a855f7;
  --mat-tab-active-ripple-color: #a855f7;
  --mat-tab-inactive-ripple-color: #a855f7;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #a855f7;
  --mat-tab-active-hover-label-text-color: #a855f7;
  --mat-tab-active-focus-indicator-color: #a855f7;
  --mat-tab-active-hover-indicator-color: #a855f7;
  --mat-tab-active-indicator-color: #a855f7;
}
.vex-theme-purple.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-purple.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-purple .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-purple .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-purple.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-purple.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-purple .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-purple .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-purple.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-purple.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-purple .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-purple .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #a855f7;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-purple.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-purple .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-purple .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-purple.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-purple .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-purple .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-purple .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #a855f7;
  --mat-checkbox-selected-hover-icon-color: #a855f7;
  --mat-checkbox-selected-icon-color: #a855f7;
  --mat-checkbox-selected-pressed-icon-color: #a855f7;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #a855f7;
  --mat-checkbox-selected-hover-state-layer-color: #a855f7;
  --mat-checkbox-selected-pressed-state-layer-color: #a855f7;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-purple .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-button.mat-primary,
.vex-theme-purple.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-purple.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-purple.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-purple.dark .mat-tonal-button.mat-primary,
.vex-theme-purple .dark .mat-mdc-button.mat-primary,
.vex-theme-purple .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-purple .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-purple .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-purple .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #a855f7;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #a855f7;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #a855f7 12%, transparent);
  --mat-button-outlined-state-layer-color: #a855f7;
  --mat-button-protected-container-color: #a855f7;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #a855f7;
  --mat-button-text-ripple-color: color-mix(in srgb, #a855f7 12%, transparent);
  --mat-button-text-state-layer-color: #a855f7;
  --mat-button-tonal-container-color: #a855f7;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-button.mat-accent,
.vex-theme-purple.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-purple.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-purple.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-purple.dark .mat-tonal-button.mat-accent,
.vex-theme-purple .dark .mat-mdc-button.mat-accent,
.vex-theme-purple .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-purple .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-purple .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-purple .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-button.mat-warn,
.vex-theme-purple.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-purple.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-purple.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-purple.dark .mat-tonal-button.mat-warn,
.vex-theme-purple .dark .mat-mdc-button.mat-warn,
.vex-theme-purple .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-purple .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-purple .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-purple .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-purple .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #a855f7;
  --mat-icon-button-state-layer-color: #a855f7;
  --mat-icon-button-ripple-color: color-mix(in srgb, #a855f7 12%, transparent);
}
.vex-theme-purple.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-purple .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-purple.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-purple .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-purple.dark .mat-mdc-fab.mat-primary,
.vex-theme-purple.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-purple .dark .mat-mdc-fab.mat-primary,
.vex-theme-purple .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #a855f7;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #a855f7 12%, transparent);
  --mat-fab-small-container-color: #a855f7;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-fab.mat-accent,
.vex-theme-purple.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-purple .dark .mat-mdc-fab.mat-accent,
.vex-theme-purple .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-purple.dark .mat-mdc-fab.mat-warn,
.vex-theme-purple.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-purple .dark .mat-mdc-fab.mat-warn,
.vex-theme-purple .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #9333ea;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #a855f7;
}
.vex-theme-purple.dark .mat-accent,
.vex-theme-purple .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-purple.dark .mat-warn,
.vex-theme-purple .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-badge-background-color: #a855f7;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-purple.dark .mat-badge-accent,
.vex-theme-purple .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-purple.dark .mat-badge-warn,
.vex-theme-purple .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #a855f7 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #a855f7;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #a855f7 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #a855f7 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #a855f7 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #a855f7;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-purple.dark .mat-datepicker-content.mat-accent,
.vex-theme-purple.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-purple .dark .mat-datepicker-content.mat-accent,
.vex-theme-purple .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-purple.dark .mat-datepicker-content.mat-warn,
.vex-theme-purple.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-purple .dark .mat-datepicker-content.mat-warn,
.vex-theme-purple .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-purple.dark .mat-icon.mat-primary,
.vex-theme-purple .dark .mat-icon.mat-primary {
  --mat-icon-color: #a855f7;
}
.vex-theme-purple.dark .mat-icon.mat-accent,
.vex-theme-purple .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-purple.dark .mat-icon.mat-warn,
.vex-theme-purple .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #a855f7;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #a855f7;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #a855f7;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-purple.dark .mat-step-header.mat-accent,
.vex-theme-purple .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-purple.dark .mat-step-header.mat-warn,
.vex-theme-purple .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-purple.dark .mat-toolbar.mat-primary,
.vex-theme-purple .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #a855f7;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-purple.dark .mat-toolbar.mat-accent,
.vex-theme-purple .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-purple.dark .mat-toolbar.mat-warn,
.vex-theme-purple .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #c026d3;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-fuchsia .mat-accent,
.vex-theme-fuchsia.light .mat-accent,
.vex-theme-fuchsia .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-fuchsia .mat-warn,
.vex-theme-fuchsia.light .mat-warn,
.vex-theme-fuchsia .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-fuchsia .mat-primary,
.vex-theme-fuchsia.light .mat-primary,
.vex-theme-fuchsia .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #c026d3;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #c026d3;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-fuchsia .mat-accent,
.vex-theme-fuchsia.light .mat-accent,
.vex-theme-fuchsia .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-fuchsia .mat-warn,
.vex-theme-fuchsia.light .mat-warn,
.vex-theme-fuchsia .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-fuchsia .mat-mdc-progress-bar,
.vex-theme-fuchsia.light .mat-mdc-progress-bar,
.vex-theme-fuchsia .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #c026d3;
  --mat-progress-bar-track-color: rgba(192, 38, 211, 0.25);
}
.vex-theme-fuchsia .mat-mdc-progress-bar.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-fuchsia .mat-mdc-progress-bar.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #c026d3 87%, transparent);
  --mat-form-field-filled-caret-color: #c026d3;
  --mat-form-field-filled-focus-active-indicator-color: #c026d3;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #c026d3 87%, transparent);
  --mat-form-field-outlined-caret-color: #c026d3;
  --mat-form-field-outlined-focus-outline-color: #c026d3;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #c026d3 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-fuchsia .mat-mdc-form-field.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-form-field.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-fuchsia .mat-mdc-form-field.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-form-field.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #c026d3;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-fuchsia .mat-mdc-form-field.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-form-field.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-fuchsia .mat-mdc-form-field.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-form-field.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-fuchsia .mat-mdc-standard-chip,
.vex-theme-fuchsia.light .mat-mdc-standard-chip,
.vex-theme-fuchsia .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-fuchsia .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #c026d3;
  --mat-chip-elevated-disabled-container-color: #c026d3;
  --mat-chip-elevated-selected-container-color: #c026d3;
  --mat-chip-flat-disabled-selected-container-color: #c026d3;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-fuchsia .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-fuchsia .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #c026d3;
  --mat-slide-toggle-selected-handle-color: #c026d3;
  --mat-slide-toggle-selected-hover-state-layer-color: #c026d3;
  --mat-slide-toggle-selected-pressed-state-layer-color: #c026d3;
  --mat-slide-toggle-selected-focus-handle-color: #c026d3;
  --mat-slide-toggle-selected-hover-handle-color: #c026d3;
  --mat-slide-toggle-selected-pressed-handle-color: #c026d3;
  --mat-slide-toggle-selected-focus-track-color: #f0abfc;
  --mat-slide-toggle-selected-hover-track-color: #f0abfc;
  --mat-slide-toggle-selected-pressed-track-color: #f0abfc;
  --mat-slide-toggle-selected-track-color: #f0abfc;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-fuchsia .mat-mdc-slide-toggle.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-fuchsia .mat-mdc-slide-toggle.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-fuchsia .mat-mdc-radio-button.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-radio-button.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #c026d3;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #c026d3;
  --mat-radio-selected-hover-icon-color: #c026d3;
  --mat-radio-selected-icon-color: #c026d3;
  --mat-radio-selected-pressed-icon-color: #c026d3;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-radio-button.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-radio-button.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-radio-button.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-radio-button.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-slider-active-track-color: #c026d3;
  --mat-slider-focus-handle-color: #c026d3;
  --mat-slider-handle-color: #c026d3;
  --mat-slider-hover-handle-color: #c026d3;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #c026d3 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #c026d3 4%, transparent);
  --mat-slider-inactive-track-color: #c026d3;
  --mat-slider-ripple-color: #c026d3;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #c026d3;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-accent,
.vex-theme-fuchsia.light .mat-accent,
.vex-theme-fuchsia .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-fuchsia .mat-warn,
.vex-theme-fuchsia.light .mat-warn,
.vex-theme-fuchsia .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-fuchsia .mdc-list-item__start,
.vex-theme-fuchsia .mdc-list-item__end,
.vex-theme-fuchsia.light .mdc-list-item__start,
.vex-theme-fuchsia.light .mdc-list-item__end,
.vex-theme-fuchsia .light .mdc-list-item__start,
.vex-theme-fuchsia .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #c026d3;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #c026d3;
  --mat-radio-selected-hover-icon-color: #c026d3;
  --mat-radio-selected-icon-color: #c026d3;
  --mat-radio-selected-pressed-icon-color: #c026d3;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-accent .mdc-list-item__start,
.vex-theme-fuchsia .mat-accent .mdc-list-item__end,
.vex-theme-fuchsia.light .mat-accent .mdc-list-item__start,
.vex-theme-fuchsia.light .mat-accent .mdc-list-item__end,
.vex-theme-fuchsia .light .mat-accent .mdc-list-item__start,
.vex-theme-fuchsia .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-warn .mdc-list-item__start,
.vex-theme-fuchsia .mat-warn .mdc-list-item__end,
.vex-theme-fuchsia.light .mat-warn .mdc-list-item__start,
.vex-theme-fuchsia.light .mat-warn .mdc-list-item__end,
.vex-theme-fuchsia .light .mat-warn .mdc-list-item__start,
.vex-theme-fuchsia .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-list-option,
.vex-theme-fuchsia.light .mat-mdc-list-option,
.vex-theme-fuchsia .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #c026d3;
  --mat-checkbox-selected-hover-icon-color: #c026d3;
  --mat-checkbox-selected-icon-color: #c026d3;
  --mat-checkbox-selected-pressed-icon-color: #c026d3;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #c026d3;
  --mat-checkbox-selected-hover-state-layer-color: #c026d3;
  --mat-checkbox-selected-pressed-state-layer-color: #c026d3;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-list-option.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-list-option.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-list-option.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-list-option.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-fuchsia .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-fuchsia .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-fuchsia .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-fuchsia.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-fuchsia.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-fuchsia.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-fuchsia.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-fuchsia .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-fuchsia .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-fuchsia .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-fuchsia .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #c026d3;
}
.vex-theme-fuchsia .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-fuchsia .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-fuchsia .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-fuchsia.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-fuchsia.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-fuchsia.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-fuchsia .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-fuchsia .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-fuchsia .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-fuchsia .mat-mdc-tab-group,
.vex-theme-fuchsia .mat-mdc-tab-nav-bar,
.vex-theme-fuchsia.light .mat-mdc-tab-group,
.vex-theme-fuchsia.light .mat-mdc-tab-nav-bar,
.vex-theme-fuchsia .light .mat-mdc-tab-group,
.vex-theme-fuchsia .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #c026d3;
  --mat-tab-active-ripple-color: #c026d3;
  --mat-tab-inactive-ripple-color: #c026d3;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #c026d3;
  --mat-tab-active-hover-label-text-color: #c026d3;
  --mat-tab-active-focus-indicator-color: #c026d3;
  --mat-tab-active-hover-indicator-color: #c026d3;
  --mat-tab-active-indicator-color: #c026d3;
}
.vex-theme-fuchsia .mat-mdc-tab-group.mat-accent,
.vex-theme-fuchsia .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-tab-group.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-tab-group.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-fuchsia .mat-mdc-tab-group.mat-warn,
.vex-theme-fuchsia .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-tab-group.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-tab-group.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-fuchsia .mat-mdc-tab-group.mat-background-primary,
.vex-theme-fuchsia .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-fuchsia.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-fuchsia.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-fuchsia .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-fuchsia .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #c026d3;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-tab-group.mat-background-accent,
.vex-theme-fuchsia .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-fuchsia.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-fuchsia.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-fuchsia .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-fuchsia .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-tab-group.mat-background-warn,
.vex-theme-fuchsia .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-fuchsia.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-fuchsia.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-fuchsia .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-fuchsia .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-checkbox.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-checkbox.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #c026d3;
  --mat-checkbox-selected-hover-icon-color: #c026d3;
  --mat-checkbox-selected-icon-color: #c026d3;
  --mat-checkbox-selected-pressed-icon-color: #c026d3;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #c026d3;
  --mat-checkbox-selected-hover-state-layer-color: #c026d3;
  --mat-checkbox-selected-pressed-state-layer-color: #c026d3;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-checkbox.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-checkbox.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-button.mat-primary,
.vex-theme-fuchsia .mat-mdc-unelevated-button.mat-primary,
.vex-theme-fuchsia .mat-mdc-raised-button.mat-primary,
.vex-theme-fuchsia .mat-mdc-outlined-button.mat-primary,
.vex-theme-fuchsia .mat-tonal-button.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-button.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-raised-button.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-fuchsia.light .mat-tonal-button.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-button.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-raised-button.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-fuchsia .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #c026d3;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #c026d3;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #c026d3 12%, transparent);
  --mat-button-outlined-state-layer-color: #c026d3;
  --mat-button-protected-container-color: #c026d3;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #c026d3;
  --mat-button-text-ripple-color: color-mix(in srgb, #c026d3 12%, transparent);
  --mat-button-text-state-layer-color: #c026d3;
  --mat-button-tonal-container-color: #c026d3;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-button.mat-accent,
.vex-theme-fuchsia .mat-mdc-unelevated-button.mat-accent,
.vex-theme-fuchsia .mat-mdc-raised-button.mat-accent,
.vex-theme-fuchsia .mat-mdc-outlined-button.mat-accent,
.vex-theme-fuchsia .mat-tonal-button.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-button.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-raised-button.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-fuchsia.light .mat-tonal-button.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-button.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-raised-button.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-fuchsia .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-button.mat-warn,
.vex-theme-fuchsia .mat-mdc-unelevated-button.mat-warn,
.vex-theme-fuchsia .mat-mdc-raised-button.mat-warn,
.vex-theme-fuchsia .mat-mdc-outlined-button.mat-warn,
.vex-theme-fuchsia .mat-tonal-button.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-button.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-raised-button.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-fuchsia.light .mat-tonal-button.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-button.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-raised-button.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-fuchsia .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-icon-button.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-icon-button.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #c026d3;
  --mat-icon-button-state-layer-color: #c026d3;
  --mat-icon-button-ripple-color: color-mix(in srgb, #c026d3 12%, transparent);
}
.vex-theme-fuchsia .mat-mdc-icon-button.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-icon-button.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-fuchsia .mat-mdc-icon-button.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-icon-button.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-mdc-fab.mat-primary,
.vex-theme-fuchsia .mat-mdc-mini-fab.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-fab.mat-primary,
.vex-theme-fuchsia.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-fab.mat-primary,
.vex-theme-fuchsia .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #c026d3;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #c026d3 12%, transparent);
  --mat-fab-small-container-color: #c026d3;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-fab.mat-accent,
.vex-theme-fuchsia .mat-mdc-mini-fab.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-fab.mat-accent,
.vex-theme-fuchsia.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-fab.mat-accent,
.vex-theme-fuchsia .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-fuchsia .mat-mdc-fab.mat-warn,
.vex-theme-fuchsia .mat-mdc-mini-fab.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-fab.mat-warn,
.vex-theme-fuchsia.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-fab.mat-warn,
.vex-theme-fuchsia .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #f0abfc;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #c026d3;
}
.vex-theme-fuchsia .mat-accent,
.vex-theme-fuchsia.light .mat-accent,
.vex-theme-fuchsia .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-fuchsia .mat-warn,
.vex-theme-fuchsia.light .mat-warn,
.vex-theme-fuchsia .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-badge-background-color: #c026d3;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-fuchsia .mat-badge-accent,
.vex-theme-fuchsia.light .mat-badge-accent,
.vex-theme-fuchsia .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-fuchsia .mat-badge-warn,
.vex-theme-fuchsia.light .mat-badge-warn,
.vex-theme-fuchsia .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #c026d3 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #c026d3;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #c026d3 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #c026d3 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #c026d3 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #c026d3;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-datepicker-content.mat-accent,
.vex-theme-fuchsia .mat-datepicker-toggle-active.mat-accent,
.vex-theme-fuchsia.light .mat-datepicker-content.mat-accent,
.vex-theme-fuchsia.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-fuchsia .light .mat-datepicker-content.mat-accent,
.vex-theme-fuchsia .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-datepicker-content.mat-warn,
.vex-theme-fuchsia .mat-datepicker-toggle-active.mat-warn,
.vex-theme-fuchsia.light .mat-datepicker-content.mat-warn,
.vex-theme-fuchsia.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-fuchsia .light .mat-datepicker-content.mat-warn,
.vex-theme-fuchsia .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-fuchsia .mat-icon.mat-primary,
.vex-theme-fuchsia.light .mat-icon.mat-primary,
.vex-theme-fuchsia .light .mat-icon.mat-primary {
  --mat-icon-color: #c026d3;
}
.vex-theme-fuchsia .mat-icon.mat-accent,
.vex-theme-fuchsia.light .mat-icon.mat-accent,
.vex-theme-fuchsia .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-fuchsia .mat-icon.mat-warn,
.vex-theme-fuchsia.light .mat-icon.mat-warn,
.vex-theme-fuchsia .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #c026d3;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #c026d3;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #c026d3;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-fuchsia .mat-step-header.mat-accent,
.vex-theme-fuchsia.light .mat-step-header.mat-accent,
.vex-theme-fuchsia .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-fuchsia .mat-step-header.mat-warn,
.vex-theme-fuchsia.light .mat-step-header.mat-warn,
.vex-theme-fuchsia .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-fuchsia .mat-toolbar.mat-primary,
.vex-theme-fuchsia.light .mat-toolbar.mat-primary,
.vex-theme-fuchsia .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #c026d3;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-fuchsia .mat-toolbar.mat-accent,
.vex-theme-fuchsia.light .mat-toolbar.mat-accent,
.vex-theme-fuchsia .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-fuchsia .mat-toolbar.mat-warn,
.vex-theme-fuchsia.light .mat-toolbar.mat-warn,
.vex-theme-fuchsia .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-fuchsia,
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #d946ef;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-fuchsia.dark .mat-accent,
.vex-theme-fuchsia .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-fuchsia.dark .mat-warn,
.vex-theme-fuchsia .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-fuchsia.dark .mat-primary,
.vex-theme-fuchsia .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #d946ef;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #d946ef;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-fuchsia.dark .mat-accent,
.vex-theme-fuchsia .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-fuchsia.dark .mat-warn,
.vex-theme-fuchsia .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-fuchsia.dark .mat-mdc-progress-bar,
.vex-theme-fuchsia .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #d946ef;
  --mat-progress-bar-track-color: rgba(217, 70, 239, 0.25);
}
.vex-theme-fuchsia.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-fuchsia.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #d946ef 87%, transparent);
  --mat-form-field-filled-caret-color: #d946ef;
  --mat-form-field-filled-focus-active-indicator-color: #d946ef;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #d946ef 87%, transparent);
  --mat-form-field-outlined-caret-color: #d946ef;
  --mat-form-field-outlined-focus-outline-color: #d946ef;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #d946ef 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-fuchsia.dark .mat-mdc-form-field.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-fuchsia.dark .mat-mdc-form-field.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #d946ef;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-fuchsia.dark .mat-mdc-form-field.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-fuchsia.dark .mat-mdc-form-field.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-fuchsia.dark .mat-mdc-standard-chip,
.vex-theme-fuchsia .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-fuchsia.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #d946ef;
  --mat-chip-elevated-disabled-container-color: #d946ef;
  --mat-chip-elevated-selected-container-color: #d946ef;
  --mat-chip-flat-disabled-selected-container-color: #d946ef;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-fuchsia.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-fuchsia.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #d946ef;
  --mat-slide-toggle-selected-handle-color: #d946ef;
  --mat-slide-toggle-selected-hover-state-layer-color: #d946ef;
  --mat-slide-toggle-selected-pressed-state-layer-color: #d946ef;
  --mat-slide-toggle-selected-focus-handle-color: #d946ef;
  --mat-slide-toggle-selected-hover-handle-color: #d946ef;
  --mat-slide-toggle-selected-pressed-handle-color: #d946ef;
  --mat-slide-toggle-selected-focus-track-color: #c026d3;
  --mat-slide-toggle-selected-hover-track-color: #c026d3;
  --mat-slide-toggle-selected-pressed-track-color: #c026d3;
  --mat-slide-toggle-selected-track-color: #c026d3;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-fuchsia.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-fuchsia.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-fuchsia.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #d946ef;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #d946ef;
  --mat-radio-selected-hover-icon-color: #d946ef;
  --mat-radio-selected-icon-color: #d946ef;
  --mat-radio-selected-pressed-icon-color: #d946ef;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-slider-active-track-color: #d946ef;
  --mat-slider-focus-handle-color: #d946ef;
  --mat-slider-handle-color: #d946ef;
  --mat-slider-hover-handle-color: #d946ef;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #d946ef 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #d946ef 4%, transparent);
  --mat-slider-inactive-track-color: #d946ef;
  --mat-slider-ripple-color: #d946ef;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #d946ef;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-fuchsia.dark .mat-accent,
.vex-theme-fuchsia .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-fuchsia.dark .mat-warn,
.vex-theme-fuchsia .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-fuchsia.dark .mdc-list-item__start,
.vex-theme-fuchsia.dark .mdc-list-item__end,
.vex-theme-fuchsia .dark .mdc-list-item__start,
.vex-theme-fuchsia .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #d946ef;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #d946ef;
  --mat-radio-selected-hover-icon-color: #d946ef;
  --mat-radio-selected-icon-color: #d946ef;
  --mat-radio-selected-pressed-icon-color: #d946ef;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-fuchsia.dark .mat-accent .mdc-list-item__start,
.vex-theme-fuchsia.dark .mat-accent .mdc-list-item__end,
.vex-theme-fuchsia .dark .mat-accent .mdc-list-item__start,
.vex-theme-fuchsia .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-fuchsia.dark .mat-warn .mdc-list-item__start,
.vex-theme-fuchsia.dark .mat-warn .mdc-list-item__end,
.vex-theme-fuchsia .dark .mat-warn .mdc-list-item__start,
.vex-theme-fuchsia .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-list-option,
.vex-theme-fuchsia .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #d946ef;
  --mat-checkbox-selected-hover-icon-color: #d946ef;
  --mat-checkbox-selected-icon-color: #d946ef;
  --mat-checkbox-selected-pressed-icon-color: #d946ef;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #d946ef;
  --mat-checkbox-selected-hover-state-layer-color: #d946ef;
  --mat-checkbox-selected-pressed-state-layer-color: #d946ef;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-list-option.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-list-option.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-fuchsia.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-fuchsia.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-fuchsia.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-fuchsia .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-fuchsia .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-fuchsia .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-fuchsia .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #d946ef;
}
.vex-theme-fuchsia.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-fuchsia.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-fuchsia.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-fuchsia .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-fuchsia .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-fuchsia .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-fuchsia.dark .mat-mdc-tab-group,
.vex-theme-fuchsia.dark .mat-mdc-tab-nav-bar,
.vex-theme-fuchsia .dark .mat-mdc-tab-group,
.vex-theme-fuchsia .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #d946ef;
  --mat-tab-active-ripple-color: #d946ef;
  --mat-tab-inactive-ripple-color: #d946ef;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #d946ef;
  --mat-tab-active-hover-label-text-color: #d946ef;
  --mat-tab-active-focus-indicator-color: #d946ef;
  --mat-tab-active-hover-indicator-color: #d946ef;
  --mat-tab-active-indicator-color: #d946ef;
}
.vex-theme-fuchsia.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-fuchsia.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-fuchsia.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-fuchsia.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-fuchsia.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-fuchsia.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-fuchsia .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-fuchsia .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #d946ef;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-fuchsia.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-fuchsia .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-fuchsia .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-fuchsia.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-fuchsia .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-fuchsia .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #d946ef;
  --mat-checkbox-selected-hover-icon-color: #d946ef;
  --mat-checkbox-selected-icon-color: #d946ef;
  --mat-checkbox-selected-pressed-icon-color: #d946ef;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #d946ef;
  --mat-checkbox-selected-hover-state-layer-color: #d946ef;
  --mat-checkbox-selected-pressed-state-layer-color: #d946ef;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-button.mat-primary,
.vex-theme-fuchsia.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-fuchsia.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-fuchsia.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-fuchsia.dark .mat-tonal-button.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-button.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-fuchsia .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #d946ef;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #d946ef;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #d946ef 12%, transparent);
  --mat-button-outlined-state-layer-color: #d946ef;
  --mat-button-protected-container-color: #d946ef;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #d946ef;
  --mat-button-text-ripple-color: color-mix(in srgb, #d946ef 12%, transparent);
  --mat-button-text-state-layer-color: #d946ef;
  --mat-button-tonal-container-color: #d946ef;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-button.mat-accent,
.vex-theme-fuchsia.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-fuchsia.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-fuchsia.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-fuchsia.dark .mat-tonal-button.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-button.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-fuchsia .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-button.mat-warn,
.vex-theme-fuchsia.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-fuchsia.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-fuchsia.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-fuchsia.dark .mat-tonal-button.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-button.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-fuchsia .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #d946ef;
  --mat-icon-button-state-layer-color: #d946ef;
  --mat-icon-button-ripple-color: color-mix(in srgb, #d946ef 12%, transparent);
}
.vex-theme-fuchsia.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-fuchsia.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-fuchsia.dark .mat-mdc-fab.mat-primary,
.vex-theme-fuchsia.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-fab.mat-primary,
.vex-theme-fuchsia .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #d946ef;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #d946ef 12%, transparent);
  --mat-fab-small-container-color: #d946ef;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-fab.mat-accent,
.vex-theme-fuchsia.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-fab.mat-accent,
.vex-theme-fuchsia .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-fuchsia.dark .mat-mdc-fab.mat-warn,
.vex-theme-fuchsia.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-fab.mat-warn,
.vex-theme-fuchsia .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #c026d3;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #d946ef;
}
.vex-theme-fuchsia.dark .mat-accent,
.vex-theme-fuchsia .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-fuchsia.dark .mat-warn,
.vex-theme-fuchsia .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-badge-background-color: #d946ef;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-fuchsia.dark .mat-badge-accent,
.vex-theme-fuchsia .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-fuchsia.dark .mat-badge-warn,
.vex-theme-fuchsia .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #d946ef 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #d946ef;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #d946ef 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #d946ef 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #d946ef 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #d946ef;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-fuchsia.dark .mat-datepicker-content.mat-accent,
.vex-theme-fuchsia.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-fuchsia .dark .mat-datepicker-content.mat-accent,
.vex-theme-fuchsia .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-fuchsia.dark .mat-datepicker-content.mat-warn,
.vex-theme-fuchsia.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-fuchsia .dark .mat-datepicker-content.mat-warn,
.vex-theme-fuchsia .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-fuchsia.dark .mat-icon.mat-primary,
.vex-theme-fuchsia .dark .mat-icon.mat-primary {
  --mat-icon-color: #d946ef;
}
.vex-theme-fuchsia.dark .mat-icon.mat-accent,
.vex-theme-fuchsia .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-fuchsia.dark .mat-icon.mat-warn,
.vex-theme-fuchsia .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #d946ef;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #d946ef;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #d946ef;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-fuchsia.dark .mat-step-header.mat-accent,
.vex-theme-fuchsia .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-fuchsia.dark .mat-step-header.mat-warn,
.vex-theme-fuchsia .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-fuchsia.dark .mat-toolbar.mat-primary,
.vex-theme-fuchsia .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #d946ef;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-fuchsia.dark .mat-toolbar.mat-accent,
.vex-theme-fuchsia .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-fuchsia.dark .mat-toolbar.mat-warn,
.vex-theme-fuchsia .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #db2777;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-pink .mat-accent,
.vex-theme-pink.light .mat-accent,
.vex-theme-pink .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-pink .mat-warn,
.vex-theme-pink.light .mat-warn,
.vex-theme-pink .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-pink .mat-primary,
.vex-theme-pink.light .mat-primary,
.vex-theme-pink .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #db2777;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #db2777;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-pink .mat-accent,
.vex-theme-pink.light .mat-accent,
.vex-theme-pink .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-pink .mat-warn,
.vex-theme-pink.light .mat-warn,
.vex-theme-pink .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-pink .mat-mdc-progress-bar,
.vex-theme-pink.light .mat-mdc-progress-bar,
.vex-theme-pink .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #db2777;
  --mat-progress-bar-track-color: rgba(219, 39, 119, 0.25);
}
.vex-theme-pink .mat-mdc-progress-bar.mat-accent,
.vex-theme-pink.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-pink .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-pink .mat-mdc-progress-bar.mat-warn,
.vex-theme-pink.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-pink .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #db2777 87%, transparent);
  --mat-form-field-filled-caret-color: #db2777;
  --mat-form-field-filled-focus-active-indicator-color: #db2777;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #db2777 87%, transparent);
  --mat-form-field-outlined-caret-color: #db2777;
  --mat-form-field-outlined-focus-outline-color: #db2777;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #db2777 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-pink .mat-mdc-form-field.mat-accent,
.vex-theme-pink.light .mat-mdc-form-field.mat-accent,
.vex-theme-pink .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-pink .mat-mdc-form-field.mat-warn,
.vex-theme-pink.light .mat-mdc-form-field.mat-warn,
.vex-theme-pink .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #db2777;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-pink .mat-mdc-form-field.mat-accent,
.vex-theme-pink.light .mat-mdc-form-field.mat-accent,
.vex-theme-pink .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-pink .mat-mdc-form-field.mat-warn,
.vex-theme-pink.light .mat-mdc-form-field.mat-warn,
.vex-theme-pink .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-pink .mat-mdc-standard-chip,
.vex-theme-pink.light .mat-mdc-standard-chip,
.vex-theme-pink .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-pink .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-pink.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-pink.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-pink .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-pink .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #db2777;
  --mat-chip-elevated-disabled-container-color: #db2777;
  --mat-chip-elevated-selected-container-color: #db2777;
  --mat-chip-flat-disabled-selected-container-color: #db2777;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-pink .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-pink .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-pink.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-pink.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-pink .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-pink .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-pink .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-pink .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-pink.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-pink.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-pink .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-pink .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #db2777;
  --mat-slide-toggle-selected-handle-color: #db2777;
  --mat-slide-toggle-selected-hover-state-layer-color: #db2777;
  --mat-slide-toggle-selected-pressed-state-layer-color: #db2777;
  --mat-slide-toggle-selected-focus-handle-color: #db2777;
  --mat-slide-toggle-selected-hover-handle-color: #db2777;
  --mat-slide-toggle-selected-pressed-handle-color: #db2777;
  --mat-slide-toggle-selected-focus-track-color: #f9a8d4;
  --mat-slide-toggle-selected-hover-track-color: #f9a8d4;
  --mat-slide-toggle-selected-pressed-track-color: #f9a8d4;
  --mat-slide-toggle-selected-track-color: #f9a8d4;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-pink .mat-mdc-slide-toggle.mat-accent,
.vex-theme-pink.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-pink .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-pink .mat-mdc-slide-toggle.mat-warn,
.vex-theme-pink.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-pink .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-pink .mat-mdc-radio-button.mat-primary,
.vex-theme-pink.light .mat-mdc-radio-button.mat-primary,
.vex-theme-pink .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #db2777;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #db2777;
  --mat-radio-selected-hover-icon-color: #db2777;
  --mat-radio-selected-icon-color: #db2777;
  --mat-radio-selected-pressed-icon-color: #db2777;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-radio-button.mat-accent,
.vex-theme-pink.light .mat-mdc-radio-button.mat-accent,
.vex-theme-pink .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-radio-button.mat-warn,
.vex-theme-pink.light .mat-mdc-radio-button.mat-warn,
.vex-theme-pink .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-slider-active-track-color: #db2777;
  --mat-slider-focus-handle-color: #db2777;
  --mat-slider-handle-color: #db2777;
  --mat-slider-hover-handle-color: #db2777;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #db2777 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #db2777 4%, transparent);
  --mat-slider-inactive-track-color: #db2777;
  --mat-slider-ripple-color: #db2777;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #db2777;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-accent,
.vex-theme-pink.light .mat-accent,
.vex-theme-pink .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-pink .mat-warn,
.vex-theme-pink.light .mat-warn,
.vex-theme-pink .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-pink .mdc-list-item__start,
.vex-theme-pink .mdc-list-item__end,
.vex-theme-pink.light .mdc-list-item__start,
.vex-theme-pink.light .mdc-list-item__end,
.vex-theme-pink .light .mdc-list-item__start,
.vex-theme-pink .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #db2777;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #db2777;
  --mat-radio-selected-hover-icon-color: #db2777;
  --mat-radio-selected-icon-color: #db2777;
  --mat-radio-selected-pressed-icon-color: #db2777;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-accent .mdc-list-item__start,
.vex-theme-pink .mat-accent .mdc-list-item__end,
.vex-theme-pink.light .mat-accent .mdc-list-item__start,
.vex-theme-pink.light .mat-accent .mdc-list-item__end,
.vex-theme-pink .light .mat-accent .mdc-list-item__start,
.vex-theme-pink .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-warn .mdc-list-item__start,
.vex-theme-pink .mat-warn .mdc-list-item__end,
.vex-theme-pink.light .mat-warn .mdc-list-item__start,
.vex-theme-pink.light .mat-warn .mdc-list-item__end,
.vex-theme-pink .light .mat-warn .mdc-list-item__start,
.vex-theme-pink .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-list-option,
.vex-theme-pink.light .mat-mdc-list-option,
.vex-theme-pink .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #db2777;
  --mat-checkbox-selected-hover-icon-color: #db2777;
  --mat-checkbox-selected-icon-color: #db2777;
  --mat-checkbox-selected-pressed-icon-color: #db2777;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #db2777;
  --mat-checkbox-selected-hover-state-layer-color: #db2777;
  --mat-checkbox-selected-pressed-state-layer-color: #db2777;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-list-option.mat-accent,
.vex-theme-pink.light .mat-mdc-list-option.mat-accent,
.vex-theme-pink .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-list-option.mat-warn,
.vex-theme-pink.light .mat-mdc-list-option.mat-warn,
.vex-theme-pink .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-pink .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-pink .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-pink .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-pink.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-pink.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-pink.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-pink.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-pink .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-pink .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-pink .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-pink .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #db2777;
}
.vex-theme-pink .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-pink .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-pink .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-pink.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-pink.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-pink.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-pink .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-pink .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-pink .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-pink .mat-mdc-tab-group,
.vex-theme-pink .mat-mdc-tab-nav-bar,
.vex-theme-pink.light .mat-mdc-tab-group,
.vex-theme-pink.light .mat-mdc-tab-nav-bar,
.vex-theme-pink .light .mat-mdc-tab-group,
.vex-theme-pink .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #db2777;
  --mat-tab-active-ripple-color: #db2777;
  --mat-tab-inactive-ripple-color: #db2777;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #db2777;
  --mat-tab-active-hover-label-text-color: #db2777;
  --mat-tab-active-focus-indicator-color: #db2777;
  --mat-tab-active-hover-indicator-color: #db2777;
  --mat-tab-active-indicator-color: #db2777;
}
.vex-theme-pink .mat-mdc-tab-group.mat-accent,
.vex-theme-pink .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-pink.light .mat-mdc-tab-group.mat-accent,
.vex-theme-pink.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-pink .light .mat-mdc-tab-group.mat-accent,
.vex-theme-pink .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-pink .mat-mdc-tab-group.mat-warn,
.vex-theme-pink .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-pink.light .mat-mdc-tab-group.mat-warn,
.vex-theme-pink.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-pink .light .mat-mdc-tab-group.mat-warn,
.vex-theme-pink .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-pink .mat-mdc-tab-group.mat-background-primary,
.vex-theme-pink .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-pink.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-pink.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-pink .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-pink .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #db2777;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-pink .mat-mdc-tab-group.mat-background-accent,
.vex-theme-pink .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-pink.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-pink.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-pink .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-pink .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-pink .mat-mdc-tab-group.mat-background-warn,
.vex-theme-pink .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-pink.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-pink.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-pink .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-pink .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-checkbox.mat-primary,
.vex-theme-pink.light .mat-mdc-checkbox.mat-primary,
.vex-theme-pink .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #db2777;
  --mat-checkbox-selected-hover-icon-color: #db2777;
  --mat-checkbox-selected-icon-color: #db2777;
  --mat-checkbox-selected-pressed-icon-color: #db2777;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #db2777;
  --mat-checkbox-selected-hover-state-layer-color: #db2777;
  --mat-checkbox-selected-pressed-state-layer-color: #db2777;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-checkbox.mat-warn,
.vex-theme-pink.light .mat-mdc-checkbox.mat-warn,
.vex-theme-pink .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-button.mat-primary,
.vex-theme-pink .mat-mdc-unelevated-button.mat-primary,
.vex-theme-pink .mat-mdc-raised-button.mat-primary,
.vex-theme-pink .mat-mdc-outlined-button.mat-primary,
.vex-theme-pink .mat-tonal-button.mat-primary,
.vex-theme-pink.light .mat-mdc-button.mat-primary,
.vex-theme-pink.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-pink.light .mat-mdc-raised-button.mat-primary,
.vex-theme-pink.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-pink.light .mat-tonal-button.mat-primary,
.vex-theme-pink .light .mat-mdc-button.mat-primary,
.vex-theme-pink .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-pink .light .mat-mdc-raised-button.mat-primary,
.vex-theme-pink .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-pink .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #db2777;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #db2777;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #db2777 12%, transparent);
  --mat-button-outlined-state-layer-color: #db2777;
  --mat-button-protected-container-color: #db2777;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #db2777;
  --mat-button-text-ripple-color: color-mix(in srgb, #db2777 12%, transparent);
  --mat-button-text-state-layer-color: #db2777;
  --mat-button-tonal-container-color: #db2777;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-pink .mat-mdc-button.mat-accent,
.vex-theme-pink .mat-mdc-unelevated-button.mat-accent,
.vex-theme-pink .mat-mdc-raised-button.mat-accent,
.vex-theme-pink .mat-mdc-outlined-button.mat-accent,
.vex-theme-pink .mat-tonal-button.mat-accent,
.vex-theme-pink.light .mat-mdc-button.mat-accent,
.vex-theme-pink.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-pink.light .mat-mdc-raised-button.mat-accent,
.vex-theme-pink.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-pink.light .mat-tonal-button.mat-accent,
.vex-theme-pink .light .mat-mdc-button.mat-accent,
.vex-theme-pink .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-pink .light .mat-mdc-raised-button.mat-accent,
.vex-theme-pink .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-pink .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-pink .mat-mdc-button.mat-warn,
.vex-theme-pink .mat-mdc-unelevated-button.mat-warn,
.vex-theme-pink .mat-mdc-raised-button.mat-warn,
.vex-theme-pink .mat-mdc-outlined-button.mat-warn,
.vex-theme-pink .mat-tonal-button.mat-warn,
.vex-theme-pink.light .mat-mdc-button.mat-warn,
.vex-theme-pink.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-pink.light .mat-mdc-raised-button.mat-warn,
.vex-theme-pink.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-pink.light .mat-tonal-button.mat-warn,
.vex-theme-pink .light .mat-mdc-button.mat-warn,
.vex-theme-pink .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-pink .light .mat-mdc-raised-button.mat-warn,
.vex-theme-pink .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-pink .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-icon-button.mat-primary,
.vex-theme-pink.light .mat-mdc-icon-button.mat-primary,
.vex-theme-pink .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #db2777;
  --mat-icon-button-state-layer-color: #db2777;
  --mat-icon-button-ripple-color: color-mix(in srgb, #db2777 12%, transparent);
}
.vex-theme-pink .mat-mdc-icon-button.mat-accent,
.vex-theme-pink.light .mat-mdc-icon-button.mat-accent,
.vex-theme-pink .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-pink .mat-mdc-icon-button.mat-warn,
.vex-theme-pink.light .mat-mdc-icon-button.mat-warn,
.vex-theme-pink .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-mdc-fab.mat-primary,
.vex-theme-pink .mat-mdc-mini-fab.mat-primary,
.vex-theme-pink.light .mat-mdc-fab.mat-primary,
.vex-theme-pink.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-pink .light .mat-mdc-fab.mat-primary,
.vex-theme-pink .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #db2777;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #db2777 12%, transparent);
  --mat-fab-small-container-color: #db2777;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-pink .mat-mdc-fab.mat-accent,
.vex-theme-pink .mat-mdc-mini-fab.mat-accent,
.vex-theme-pink.light .mat-mdc-fab.mat-accent,
.vex-theme-pink.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-pink .light .mat-mdc-fab.mat-accent,
.vex-theme-pink .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-pink .mat-mdc-fab.mat-warn,
.vex-theme-pink .mat-mdc-mini-fab.mat-warn,
.vex-theme-pink.light .mat-mdc-fab.mat-warn,
.vex-theme-pink.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-pink .light .mat-mdc-fab.mat-warn,
.vex-theme-pink .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #f9a8d4;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #db2777;
}
.vex-theme-pink .mat-accent,
.vex-theme-pink.light .mat-accent,
.vex-theme-pink .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-pink .mat-warn,
.vex-theme-pink.light .mat-warn,
.vex-theme-pink .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-badge-background-color: #db2777;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-pink .mat-badge-accent,
.vex-theme-pink.light .mat-badge-accent,
.vex-theme-pink .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-pink .mat-badge-warn,
.vex-theme-pink.light .mat-badge-warn,
.vex-theme-pink .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #db2777 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #db2777;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #db2777 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #db2777 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #db2777 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #db2777;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-datepicker-content.mat-accent,
.vex-theme-pink .mat-datepicker-toggle-active.mat-accent,
.vex-theme-pink.light .mat-datepicker-content.mat-accent,
.vex-theme-pink.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-pink .light .mat-datepicker-content.mat-accent,
.vex-theme-pink .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-datepicker-content.mat-warn,
.vex-theme-pink .mat-datepicker-toggle-active.mat-warn,
.vex-theme-pink.light .mat-datepicker-content.mat-warn,
.vex-theme-pink.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-pink .light .mat-datepicker-content.mat-warn,
.vex-theme-pink .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-pink .mat-icon.mat-primary,
.vex-theme-pink.light .mat-icon.mat-primary,
.vex-theme-pink .light .mat-icon.mat-primary {
  --mat-icon-color: #db2777;
}
.vex-theme-pink .mat-icon.mat-accent,
.vex-theme-pink.light .mat-icon.mat-accent,
.vex-theme-pink .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-pink .mat-icon.mat-warn,
.vex-theme-pink.light .mat-icon.mat-warn,
.vex-theme-pink .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #db2777;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #db2777;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #db2777;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-pink .mat-step-header.mat-accent,
.vex-theme-pink.light .mat-step-header.mat-accent,
.vex-theme-pink .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-pink .mat-step-header.mat-warn,
.vex-theme-pink.light .mat-step-header.mat-warn,
.vex-theme-pink .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-pink .mat-toolbar.mat-primary,
.vex-theme-pink.light .mat-toolbar.mat-primary,
.vex-theme-pink .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #db2777;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-pink .mat-toolbar.mat-accent,
.vex-theme-pink.light .mat-toolbar.mat-accent,
.vex-theme-pink .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-pink .mat-toolbar.mat-warn,
.vex-theme-pink.light .mat-toolbar.mat-warn,
.vex-theme-pink .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-pink,
.vex-theme-pink.light,
.vex-theme-pink .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #ec4899;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-pink.dark .mat-accent,
.vex-theme-pink .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-pink.dark .mat-warn,
.vex-theme-pink .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-pink.dark .mat-primary,
.vex-theme-pink .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #ec4899;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ec4899;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-pink.dark .mat-accent,
.vex-theme-pink .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-pink.dark .mat-warn,
.vex-theme-pink .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-pink.dark .mat-mdc-progress-bar,
.vex-theme-pink .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #ec4899;
  --mat-progress-bar-track-color: rgba(236, 72, 153, 0.25);
}
.vex-theme-pink.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-pink .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-pink.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-pink .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ec4899 87%, transparent);
  --mat-form-field-filled-caret-color: #ec4899;
  --mat-form-field-filled-focus-active-indicator-color: #ec4899;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ec4899 87%, transparent);
  --mat-form-field-outlined-caret-color: #ec4899;
  --mat-form-field-outlined-focus-outline-color: #ec4899;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ec4899 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-pink.dark .mat-mdc-form-field.mat-accent,
.vex-theme-pink .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-pink.dark .mat-mdc-form-field.mat-warn,
.vex-theme-pink .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ec4899;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-pink.dark .mat-mdc-form-field.mat-accent,
.vex-theme-pink .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-pink.dark .mat-mdc-form-field.mat-warn,
.vex-theme-pink .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-pink.dark .mat-mdc-standard-chip,
.vex-theme-pink .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-pink.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-pink.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-pink .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-pink .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ec4899;
  --mat-chip-elevated-disabled-container-color: #ec4899;
  --mat-chip-elevated-selected-container-color: #ec4899;
  --mat-chip-flat-disabled-selected-container-color: #ec4899;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-pink.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-pink .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-pink .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-pink.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-pink .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-pink .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ec4899;
  --mat-slide-toggle-selected-handle-color: #ec4899;
  --mat-slide-toggle-selected-hover-state-layer-color: #ec4899;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ec4899;
  --mat-slide-toggle-selected-focus-handle-color: #ec4899;
  --mat-slide-toggle-selected-hover-handle-color: #ec4899;
  --mat-slide-toggle-selected-pressed-handle-color: #ec4899;
  --mat-slide-toggle-selected-focus-track-color: #db2777;
  --mat-slide-toggle-selected-hover-track-color: #db2777;
  --mat-slide-toggle-selected-pressed-track-color: #db2777;
  --mat-slide-toggle-selected-track-color: #db2777;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-pink.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-pink .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-pink.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-pink .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-pink.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-pink .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #ec4899;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ec4899;
  --mat-radio-selected-hover-icon-color: #ec4899;
  --mat-radio-selected-icon-color: #ec4899;
  --mat-radio-selected-pressed-icon-color: #ec4899;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-pink.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-pink .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-pink.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-pink .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-slider-active-track-color: #ec4899;
  --mat-slider-focus-handle-color: #ec4899;
  --mat-slider-handle-color: #ec4899;
  --mat-slider-hover-handle-color: #ec4899;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ec4899 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ec4899 4%, transparent);
  --mat-slider-inactive-track-color: #ec4899;
  --mat-slider-ripple-color: #ec4899;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ec4899;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-pink.dark .mat-accent,
.vex-theme-pink .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-pink.dark .mat-warn,
.vex-theme-pink .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-pink.dark .mdc-list-item__start,
.vex-theme-pink.dark .mdc-list-item__end,
.vex-theme-pink .dark .mdc-list-item__start,
.vex-theme-pink .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ec4899;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ec4899;
  --mat-radio-selected-hover-icon-color: #ec4899;
  --mat-radio-selected-icon-color: #ec4899;
  --mat-radio-selected-pressed-icon-color: #ec4899;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-pink.dark .mat-accent .mdc-list-item__start,
.vex-theme-pink.dark .mat-accent .mdc-list-item__end,
.vex-theme-pink .dark .mat-accent .mdc-list-item__start,
.vex-theme-pink .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-pink.dark .mat-warn .mdc-list-item__start,
.vex-theme-pink.dark .mat-warn .mdc-list-item__end,
.vex-theme-pink .dark .mat-warn .mdc-list-item__start,
.vex-theme-pink .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-pink.dark .mat-mdc-list-option,
.vex-theme-pink .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ec4899;
  --mat-checkbox-selected-hover-icon-color: #ec4899;
  --mat-checkbox-selected-icon-color: #ec4899;
  --mat-checkbox-selected-pressed-icon-color: #ec4899;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ec4899;
  --mat-checkbox-selected-hover-state-layer-color: #ec4899;
  --mat-checkbox-selected-pressed-state-layer-color: #ec4899;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-list-option.mat-accent,
.vex-theme-pink .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-list-option.mat-warn,
.vex-theme-pink .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-pink.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-pink.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-pink.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-pink .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-pink .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-pink .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-pink .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #ec4899;
}
.vex-theme-pink.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-pink.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-pink.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-pink .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-pink .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-pink .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-pink.dark .mat-mdc-tab-group,
.vex-theme-pink.dark .mat-mdc-tab-nav-bar,
.vex-theme-pink .dark .mat-mdc-tab-group,
.vex-theme-pink .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ec4899;
  --mat-tab-active-ripple-color: #ec4899;
  --mat-tab-inactive-ripple-color: #ec4899;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ec4899;
  --mat-tab-active-hover-label-text-color: #ec4899;
  --mat-tab-active-focus-indicator-color: #ec4899;
  --mat-tab-active-hover-indicator-color: #ec4899;
  --mat-tab-active-indicator-color: #ec4899;
}
.vex-theme-pink.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-pink.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-pink .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-pink .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-pink.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-pink.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-pink .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-pink .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-pink.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-pink.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-pink .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-pink .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #ec4899;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-pink.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-pink .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-pink .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-pink.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-pink .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-pink .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-pink .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ec4899;
  --mat-checkbox-selected-hover-icon-color: #ec4899;
  --mat-checkbox-selected-icon-color: #ec4899;
  --mat-checkbox-selected-pressed-icon-color: #ec4899;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ec4899;
  --mat-checkbox-selected-hover-state-layer-color: #ec4899;
  --mat-checkbox-selected-pressed-state-layer-color: #ec4899;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-pink .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-button.mat-primary,
.vex-theme-pink.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-pink.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-pink.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-pink.dark .mat-tonal-button.mat-primary,
.vex-theme-pink .dark .mat-mdc-button.mat-primary,
.vex-theme-pink .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-pink .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-pink .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-pink .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #ec4899;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ec4899;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ec4899 12%, transparent);
  --mat-button-outlined-state-layer-color: #ec4899;
  --mat-button-protected-container-color: #ec4899;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ec4899;
  --mat-button-text-ripple-color: color-mix(in srgb, #ec4899 12%, transparent);
  --mat-button-text-state-layer-color: #ec4899;
  --mat-button-tonal-container-color: #ec4899;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-button.mat-accent,
.vex-theme-pink.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-pink.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-pink.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-pink.dark .mat-tonal-button.mat-accent,
.vex-theme-pink .dark .mat-mdc-button.mat-accent,
.vex-theme-pink .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-pink .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-pink .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-pink .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-button.mat-warn,
.vex-theme-pink.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-pink.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-pink.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-pink.dark .mat-tonal-button.mat-warn,
.vex-theme-pink .dark .mat-mdc-button.mat-warn,
.vex-theme-pink .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-pink .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-pink .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-pink .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-pink .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #ec4899;
  --mat-icon-button-state-layer-color: #ec4899;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ec4899 12%, transparent);
}
.vex-theme-pink.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-pink .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-pink.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-pink .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-pink.dark .mat-mdc-fab.mat-primary,
.vex-theme-pink.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-pink .dark .mat-mdc-fab.mat-primary,
.vex-theme-pink .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #ec4899;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ec4899 12%, transparent);
  --mat-fab-small-container-color: #ec4899;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-fab.mat-accent,
.vex-theme-pink.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-pink .dark .mat-mdc-fab.mat-accent,
.vex-theme-pink .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-pink.dark .mat-mdc-fab.mat-warn,
.vex-theme-pink.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-pink .dark .mat-mdc-fab.mat-warn,
.vex-theme-pink .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #db2777;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #ec4899;
}
.vex-theme-pink.dark .mat-accent,
.vex-theme-pink .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-pink.dark .mat-warn,
.vex-theme-pink .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-badge-background-color: #ec4899;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-pink.dark .mat-badge-accent,
.vex-theme-pink .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-pink.dark .mat-badge-warn,
.vex-theme-pink .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ec4899 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ec4899;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ec4899 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ec4899 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ec4899 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ec4899;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-pink.dark .mat-datepicker-content.mat-accent,
.vex-theme-pink.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-pink .dark .mat-datepicker-content.mat-accent,
.vex-theme-pink .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-pink.dark .mat-datepicker-content.mat-warn,
.vex-theme-pink.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-pink .dark .mat-datepicker-content.mat-warn,
.vex-theme-pink .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-pink.dark .mat-icon.mat-primary,
.vex-theme-pink .dark .mat-icon.mat-primary {
  --mat-icon-color: #ec4899;
}
.vex-theme-pink.dark .mat-icon.mat-accent,
.vex-theme-pink .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-pink.dark .mat-icon.mat-warn,
.vex-theme-pink .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ec4899;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ec4899;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ec4899;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-pink.dark .mat-step-header.mat-accent,
.vex-theme-pink .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-pink.dark .mat-step-header.mat-warn,
.vex-theme-pink .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-pink.dark .mat-toolbar.mat-primary,
.vex-theme-pink .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #ec4899;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-pink.dark .mat-toolbar.mat-accent,
.vex-theme-pink .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-pink.dark .mat-toolbar.mat-warn,
.vex-theme-pink .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #e11d48;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-rose .mat-accent,
.vex-theme-rose.light .mat-accent,
.vex-theme-rose .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-rose .mat-warn,
.vex-theme-rose.light .mat-warn,
.vex-theme-rose .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-rose .mat-primary,
.vex-theme-rose.light .mat-primary,
.vex-theme-rose .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #e11d48;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #e11d48;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-rose .mat-accent,
.vex-theme-rose.light .mat-accent,
.vex-theme-rose .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-rose .mat-warn,
.vex-theme-rose.light .mat-warn,
.vex-theme-rose .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-rose .mat-mdc-progress-bar,
.vex-theme-rose.light .mat-mdc-progress-bar,
.vex-theme-rose .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #e11d48;
  --mat-progress-bar-track-color: rgba(225, 29, 72, 0.25);
}
.vex-theme-rose .mat-mdc-progress-bar.mat-accent,
.vex-theme-rose.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-rose .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-rose .mat-mdc-progress-bar.mat-warn,
.vex-theme-rose.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-rose .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #e11d48 87%, transparent);
  --mat-form-field-filled-caret-color: #e11d48;
  --mat-form-field-filled-focus-active-indicator-color: #e11d48;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #e11d48 87%, transparent);
  --mat-form-field-outlined-caret-color: #e11d48;
  --mat-form-field-outlined-focus-outline-color: #e11d48;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #e11d48 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-rose .mat-mdc-form-field.mat-accent,
.vex-theme-rose.light .mat-mdc-form-field.mat-accent,
.vex-theme-rose .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-rose .mat-mdc-form-field.mat-warn,
.vex-theme-rose.light .mat-mdc-form-field.mat-warn,
.vex-theme-rose .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #e11d48;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-rose .mat-mdc-form-field.mat-accent,
.vex-theme-rose.light .mat-mdc-form-field.mat-accent,
.vex-theme-rose .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-rose .mat-mdc-form-field.mat-warn,
.vex-theme-rose.light .mat-mdc-form-field.mat-warn,
.vex-theme-rose .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-rose .mat-mdc-standard-chip,
.vex-theme-rose.light .mat-mdc-standard-chip,
.vex-theme-rose .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-rose .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-rose.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-rose.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-rose .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-rose .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #e11d48;
  --mat-chip-elevated-disabled-container-color: #e11d48;
  --mat-chip-elevated-selected-container-color: #e11d48;
  --mat-chip-flat-disabled-selected-container-color: #e11d48;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-rose .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-rose .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-rose.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-rose.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-rose .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-rose .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-rose .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-rose .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-rose.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-rose.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-rose .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-rose .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #e11d48;
  --mat-slide-toggle-selected-handle-color: #e11d48;
  --mat-slide-toggle-selected-hover-state-layer-color: #e11d48;
  --mat-slide-toggle-selected-pressed-state-layer-color: #e11d48;
  --mat-slide-toggle-selected-focus-handle-color: #e11d48;
  --mat-slide-toggle-selected-hover-handle-color: #e11d48;
  --mat-slide-toggle-selected-pressed-handle-color: #e11d48;
  --mat-slide-toggle-selected-focus-track-color: #fda4af;
  --mat-slide-toggle-selected-hover-track-color: #fda4af;
  --mat-slide-toggle-selected-pressed-track-color: #fda4af;
  --mat-slide-toggle-selected-track-color: #fda4af;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-rose .mat-mdc-slide-toggle.mat-accent,
.vex-theme-rose.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-rose .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-rose .mat-mdc-slide-toggle.mat-warn,
.vex-theme-rose.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-rose .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-rose .mat-mdc-radio-button.mat-primary,
.vex-theme-rose.light .mat-mdc-radio-button.mat-primary,
.vex-theme-rose .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #e11d48;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #e11d48;
  --mat-radio-selected-hover-icon-color: #e11d48;
  --mat-radio-selected-icon-color: #e11d48;
  --mat-radio-selected-pressed-icon-color: #e11d48;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-radio-button.mat-accent,
.vex-theme-rose.light .mat-mdc-radio-button.mat-accent,
.vex-theme-rose .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-radio-button.mat-warn,
.vex-theme-rose.light .mat-mdc-radio-button.mat-warn,
.vex-theme-rose .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-slider-active-track-color: #e11d48;
  --mat-slider-focus-handle-color: #e11d48;
  --mat-slider-handle-color: #e11d48;
  --mat-slider-hover-handle-color: #e11d48;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #e11d48 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #e11d48 4%, transparent);
  --mat-slider-inactive-track-color: #e11d48;
  --mat-slider-ripple-color: #e11d48;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #e11d48;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-accent,
.vex-theme-rose.light .mat-accent,
.vex-theme-rose .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-rose .mat-warn,
.vex-theme-rose.light .mat-warn,
.vex-theme-rose .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-rose .mdc-list-item__start,
.vex-theme-rose .mdc-list-item__end,
.vex-theme-rose.light .mdc-list-item__start,
.vex-theme-rose.light .mdc-list-item__end,
.vex-theme-rose .light .mdc-list-item__start,
.vex-theme-rose .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #e11d48;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #e11d48;
  --mat-radio-selected-hover-icon-color: #e11d48;
  --mat-radio-selected-icon-color: #e11d48;
  --mat-radio-selected-pressed-icon-color: #e11d48;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-accent .mdc-list-item__start,
.vex-theme-rose .mat-accent .mdc-list-item__end,
.vex-theme-rose.light .mat-accent .mdc-list-item__start,
.vex-theme-rose.light .mat-accent .mdc-list-item__end,
.vex-theme-rose .light .mat-accent .mdc-list-item__start,
.vex-theme-rose .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-warn .mdc-list-item__start,
.vex-theme-rose .mat-warn .mdc-list-item__end,
.vex-theme-rose.light .mat-warn .mdc-list-item__start,
.vex-theme-rose.light .mat-warn .mdc-list-item__end,
.vex-theme-rose .light .mat-warn .mdc-list-item__start,
.vex-theme-rose .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-list-option,
.vex-theme-rose.light .mat-mdc-list-option,
.vex-theme-rose .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #e11d48;
  --mat-checkbox-selected-hover-icon-color: #e11d48;
  --mat-checkbox-selected-icon-color: #e11d48;
  --mat-checkbox-selected-pressed-icon-color: #e11d48;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #e11d48;
  --mat-checkbox-selected-hover-state-layer-color: #e11d48;
  --mat-checkbox-selected-pressed-state-layer-color: #e11d48;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-list-option.mat-accent,
.vex-theme-rose.light .mat-mdc-list-option.mat-accent,
.vex-theme-rose .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-list-option.mat-warn,
.vex-theme-rose.light .mat-mdc-list-option.mat-warn,
.vex-theme-rose .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-rose .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-rose .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-rose .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-rose.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-rose.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-rose.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-rose.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-rose .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-rose .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-rose .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-rose .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #e11d48;
}
.vex-theme-rose .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-rose .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-rose .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-rose.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-rose.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-rose.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-rose .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-rose .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-rose .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-rose .mat-mdc-tab-group,
.vex-theme-rose .mat-mdc-tab-nav-bar,
.vex-theme-rose.light .mat-mdc-tab-group,
.vex-theme-rose.light .mat-mdc-tab-nav-bar,
.vex-theme-rose .light .mat-mdc-tab-group,
.vex-theme-rose .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #e11d48;
  --mat-tab-active-ripple-color: #e11d48;
  --mat-tab-inactive-ripple-color: #e11d48;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #e11d48;
  --mat-tab-active-hover-label-text-color: #e11d48;
  --mat-tab-active-focus-indicator-color: #e11d48;
  --mat-tab-active-hover-indicator-color: #e11d48;
  --mat-tab-active-indicator-color: #e11d48;
}
.vex-theme-rose .mat-mdc-tab-group.mat-accent,
.vex-theme-rose .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-rose.light .mat-mdc-tab-group.mat-accent,
.vex-theme-rose.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-rose .light .mat-mdc-tab-group.mat-accent,
.vex-theme-rose .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-rose .mat-mdc-tab-group.mat-warn,
.vex-theme-rose .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-rose.light .mat-mdc-tab-group.mat-warn,
.vex-theme-rose.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-rose .light .mat-mdc-tab-group.mat-warn,
.vex-theme-rose .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-rose .mat-mdc-tab-group.mat-background-primary,
.vex-theme-rose .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-rose.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-rose.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-rose .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-rose .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #e11d48;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-rose .mat-mdc-tab-group.mat-background-accent,
.vex-theme-rose .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-rose.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-rose.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-rose .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-rose .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-rose .mat-mdc-tab-group.mat-background-warn,
.vex-theme-rose .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-rose.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-rose.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-rose .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-rose .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-checkbox.mat-primary,
.vex-theme-rose.light .mat-mdc-checkbox.mat-primary,
.vex-theme-rose .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #e11d48;
  --mat-checkbox-selected-hover-icon-color: #e11d48;
  --mat-checkbox-selected-icon-color: #e11d48;
  --mat-checkbox-selected-pressed-icon-color: #e11d48;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #e11d48;
  --mat-checkbox-selected-hover-state-layer-color: #e11d48;
  --mat-checkbox-selected-pressed-state-layer-color: #e11d48;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-checkbox.mat-warn,
.vex-theme-rose.light .mat-mdc-checkbox.mat-warn,
.vex-theme-rose .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-button.mat-primary,
.vex-theme-rose .mat-mdc-unelevated-button.mat-primary,
.vex-theme-rose .mat-mdc-raised-button.mat-primary,
.vex-theme-rose .mat-mdc-outlined-button.mat-primary,
.vex-theme-rose .mat-tonal-button.mat-primary,
.vex-theme-rose.light .mat-mdc-button.mat-primary,
.vex-theme-rose.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-rose.light .mat-mdc-raised-button.mat-primary,
.vex-theme-rose.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-rose.light .mat-tonal-button.mat-primary,
.vex-theme-rose .light .mat-mdc-button.mat-primary,
.vex-theme-rose .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-rose .light .mat-mdc-raised-button.mat-primary,
.vex-theme-rose .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-rose .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #e11d48;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #e11d48;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #e11d48 12%, transparent);
  --mat-button-outlined-state-layer-color: #e11d48;
  --mat-button-protected-container-color: #e11d48;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #e11d48;
  --mat-button-text-ripple-color: color-mix(in srgb, #e11d48 12%, transparent);
  --mat-button-text-state-layer-color: #e11d48;
  --mat-button-tonal-container-color: #e11d48;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-rose .mat-mdc-button.mat-accent,
.vex-theme-rose .mat-mdc-unelevated-button.mat-accent,
.vex-theme-rose .mat-mdc-raised-button.mat-accent,
.vex-theme-rose .mat-mdc-outlined-button.mat-accent,
.vex-theme-rose .mat-tonal-button.mat-accent,
.vex-theme-rose.light .mat-mdc-button.mat-accent,
.vex-theme-rose.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-rose.light .mat-mdc-raised-button.mat-accent,
.vex-theme-rose.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-rose.light .mat-tonal-button.mat-accent,
.vex-theme-rose .light .mat-mdc-button.mat-accent,
.vex-theme-rose .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-rose .light .mat-mdc-raised-button.mat-accent,
.vex-theme-rose .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-rose .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-rose .mat-mdc-button.mat-warn,
.vex-theme-rose .mat-mdc-unelevated-button.mat-warn,
.vex-theme-rose .mat-mdc-raised-button.mat-warn,
.vex-theme-rose .mat-mdc-outlined-button.mat-warn,
.vex-theme-rose .mat-tonal-button.mat-warn,
.vex-theme-rose.light .mat-mdc-button.mat-warn,
.vex-theme-rose.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-rose.light .mat-mdc-raised-button.mat-warn,
.vex-theme-rose.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-rose.light .mat-tonal-button.mat-warn,
.vex-theme-rose .light .mat-mdc-button.mat-warn,
.vex-theme-rose .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-rose .light .mat-mdc-raised-button.mat-warn,
.vex-theme-rose .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-rose .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-icon-button.mat-primary,
.vex-theme-rose.light .mat-mdc-icon-button.mat-primary,
.vex-theme-rose .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #e11d48;
  --mat-icon-button-state-layer-color: #e11d48;
  --mat-icon-button-ripple-color: color-mix(in srgb, #e11d48 12%, transparent);
}
.vex-theme-rose .mat-mdc-icon-button.mat-accent,
.vex-theme-rose.light .mat-mdc-icon-button.mat-accent,
.vex-theme-rose .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-rose .mat-mdc-icon-button.mat-warn,
.vex-theme-rose.light .mat-mdc-icon-button.mat-warn,
.vex-theme-rose .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-mdc-fab.mat-primary,
.vex-theme-rose .mat-mdc-mini-fab.mat-primary,
.vex-theme-rose.light .mat-mdc-fab.mat-primary,
.vex-theme-rose.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-rose .light .mat-mdc-fab.mat-primary,
.vex-theme-rose .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #e11d48;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #e11d48 12%, transparent);
  --mat-fab-small-container-color: #e11d48;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-rose .mat-mdc-fab.mat-accent,
.vex-theme-rose .mat-mdc-mini-fab.mat-accent,
.vex-theme-rose.light .mat-mdc-fab.mat-accent,
.vex-theme-rose.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-rose .light .mat-mdc-fab.mat-accent,
.vex-theme-rose .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-rose .mat-mdc-fab.mat-warn,
.vex-theme-rose .mat-mdc-mini-fab.mat-warn,
.vex-theme-rose.light .mat-mdc-fab.mat-warn,
.vex-theme-rose.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-rose .light .mat-mdc-fab.mat-warn,
.vex-theme-rose .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #fda4af;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #e11d48;
}
.vex-theme-rose .mat-accent,
.vex-theme-rose.light .mat-accent,
.vex-theme-rose .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-rose .mat-warn,
.vex-theme-rose.light .mat-warn,
.vex-theme-rose .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-badge-background-color: #e11d48;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-rose .mat-badge-accent,
.vex-theme-rose.light .mat-badge-accent,
.vex-theme-rose .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-rose .mat-badge-warn,
.vex-theme-rose.light .mat-badge-warn,
.vex-theme-rose .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #e11d48 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #e11d48;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #e11d48 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #e11d48 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #e11d48 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #e11d48;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-datepicker-content.mat-accent,
.vex-theme-rose .mat-datepicker-toggle-active.mat-accent,
.vex-theme-rose.light .mat-datepicker-content.mat-accent,
.vex-theme-rose.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-rose .light .mat-datepicker-content.mat-accent,
.vex-theme-rose .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-datepicker-content.mat-warn,
.vex-theme-rose .mat-datepicker-toggle-active.mat-warn,
.vex-theme-rose.light .mat-datepicker-content.mat-warn,
.vex-theme-rose.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-rose .light .mat-datepicker-content.mat-warn,
.vex-theme-rose .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-rose .mat-icon.mat-primary,
.vex-theme-rose.light .mat-icon.mat-primary,
.vex-theme-rose .light .mat-icon.mat-primary {
  --mat-icon-color: #e11d48;
}
.vex-theme-rose .mat-icon.mat-accent,
.vex-theme-rose.light .mat-icon.mat-accent,
.vex-theme-rose .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-rose .mat-icon.mat-warn,
.vex-theme-rose.light .mat-icon.mat-warn,
.vex-theme-rose .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #e11d48;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #e11d48;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #e11d48;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-rose .mat-step-header.mat-accent,
.vex-theme-rose.light .mat-step-header.mat-accent,
.vex-theme-rose .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-rose .mat-step-header.mat-warn,
.vex-theme-rose.light .mat-step-header.mat-warn,
.vex-theme-rose .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-rose .mat-toolbar.mat-primary,
.vex-theme-rose.light .mat-toolbar.mat-primary,
.vex-theme-rose .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #e11d48;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-rose .mat-toolbar.mat-accent,
.vex-theme-rose.light .mat-toolbar.mat-accent,
.vex-theme-rose .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-rose .mat-toolbar.mat-warn,
.vex-theme-rose.light .mat-toolbar.mat-warn,
.vex-theme-rose .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-rose,
.vex-theme-rose.light,
.vex-theme-rose .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #f43f5e;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-rose.dark .mat-accent,
.vex-theme-rose .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-rose.dark .mat-warn,
.vex-theme-rose .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-rose.dark .mat-primary,
.vex-theme-rose .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #f43f5e;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f43f5e;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-rose.dark .mat-accent,
.vex-theme-rose .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-rose.dark .mat-warn,
.vex-theme-rose .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-rose.dark .mat-mdc-progress-bar,
.vex-theme-rose .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #f43f5e;
  --mat-progress-bar-track-color: rgba(244, 63, 94, 0.25);
}
.vex-theme-rose.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-rose .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-rose.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-rose .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f43f5e 87%, transparent);
  --mat-form-field-filled-caret-color: #f43f5e;
  --mat-form-field-filled-focus-active-indicator-color: #f43f5e;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f43f5e 87%, transparent);
  --mat-form-field-outlined-caret-color: #f43f5e;
  --mat-form-field-outlined-focus-outline-color: #f43f5e;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f43f5e 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-rose.dark .mat-mdc-form-field.mat-accent,
.vex-theme-rose .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-rose.dark .mat-mdc-form-field.mat-warn,
.vex-theme-rose .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f43f5e;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-rose.dark .mat-mdc-form-field.mat-accent,
.vex-theme-rose .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-rose.dark .mat-mdc-form-field.mat-warn,
.vex-theme-rose .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-rose.dark .mat-mdc-standard-chip,
.vex-theme-rose .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-rose.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-rose.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-rose .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-rose .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f43f5e;
  --mat-chip-elevated-disabled-container-color: #f43f5e;
  --mat-chip-elevated-selected-container-color: #f43f5e;
  --mat-chip-flat-disabled-selected-container-color: #f43f5e;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-rose.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-rose .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-rose .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-rose.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-rose .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-rose .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f43f5e;
  --mat-slide-toggle-selected-handle-color: #f43f5e;
  --mat-slide-toggle-selected-hover-state-layer-color: #f43f5e;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f43f5e;
  --mat-slide-toggle-selected-focus-handle-color: #f43f5e;
  --mat-slide-toggle-selected-hover-handle-color: #f43f5e;
  --mat-slide-toggle-selected-pressed-handle-color: #f43f5e;
  --mat-slide-toggle-selected-focus-track-color: #e11d48;
  --mat-slide-toggle-selected-hover-track-color: #e11d48;
  --mat-slide-toggle-selected-pressed-track-color: #e11d48;
  --mat-slide-toggle-selected-track-color: #e11d48;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-rose.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-rose .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-rose.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-rose .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-rose.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-rose .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #f43f5e;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f43f5e;
  --mat-radio-selected-hover-icon-color: #f43f5e;
  --mat-radio-selected-icon-color: #f43f5e;
  --mat-radio-selected-pressed-icon-color: #f43f5e;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-rose.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-rose .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-rose.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-rose .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-slider-active-track-color: #f43f5e;
  --mat-slider-focus-handle-color: #f43f5e;
  --mat-slider-handle-color: #f43f5e;
  --mat-slider-hover-handle-color: #f43f5e;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f43f5e 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f43f5e 4%, transparent);
  --mat-slider-inactive-track-color: #f43f5e;
  --mat-slider-ripple-color: #f43f5e;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f43f5e;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-rose.dark .mat-accent,
.vex-theme-rose .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-rose.dark .mat-warn,
.vex-theme-rose .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-rose.dark .mdc-list-item__start,
.vex-theme-rose.dark .mdc-list-item__end,
.vex-theme-rose .dark .mdc-list-item__start,
.vex-theme-rose .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f43f5e;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f43f5e;
  --mat-radio-selected-hover-icon-color: #f43f5e;
  --mat-radio-selected-icon-color: #f43f5e;
  --mat-radio-selected-pressed-icon-color: #f43f5e;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-rose.dark .mat-accent .mdc-list-item__start,
.vex-theme-rose.dark .mat-accent .mdc-list-item__end,
.vex-theme-rose .dark .mat-accent .mdc-list-item__start,
.vex-theme-rose .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-rose.dark .mat-warn .mdc-list-item__start,
.vex-theme-rose.dark .mat-warn .mdc-list-item__end,
.vex-theme-rose .dark .mat-warn .mdc-list-item__start,
.vex-theme-rose .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-rose.dark .mat-mdc-list-option,
.vex-theme-rose .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f43f5e;
  --mat-checkbox-selected-hover-icon-color: #f43f5e;
  --mat-checkbox-selected-icon-color: #f43f5e;
  --mat-checkbox-selected-pressed-icon-color: #f43f5e;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f43f5e;
  --mat-checkbox-selected-hover-state-layer-color: #f43f5e;
  --mat-checkbox-selected-pressed-state-layer-color: #f43f5e;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-list-option.mat-accent,
.vex-theme-rose .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-list-option.mat-warn,
.vex-theme-rose .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-rose.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-rose.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-rose.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-rose .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-rose .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-rose .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-rose .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #f43f5e;
}
.vex-theme-rose.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-rose.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-rose.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-rose .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-rose .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-rose .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-rose.dark .mat-mdc-tab-group,
.vex-theme-rose.dark .mat-mdc-tab-nav-bar,
.vex-theme-rose .dark .mat-mdc-tab-group,
.vex-theme-rose .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f43f5e;
  --mat-tab-active-ripple-color: #f43f5e;
  --mat-tab-inactive-ripple-color: #f43f5e;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f43f5e;
  --mat-tab-active-hover-label-text-color: #f43f5e;
  --mat-tab-active-focus-indicator-color: #f43f5e;
  --mat-tab-active-hover-indicator-color: #f43f5e;
  --mat-tab-active-indicator-color: #f43f5e;
}
.vex-theme-rose.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-rose.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-rose .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-rose .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-rose.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-rose.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-rose .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-rose .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-rose.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-rose.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-rose .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-rose .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #f43f5e;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-rose.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-rose .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-rose .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-rose.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-rose .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-rose .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-rose .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f43f5e;
  --mat-checkbox-selected-hover-icon-color: #f43f5e;
  --mat-checkbox-selected-icon-color: #f43f5e;
  --mat-checkbox-selected-pressed-icon-color: #f43f5e;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f43f5e;
  --mat-checkbox-selected-hover-state-layer-color: #f43f5e;
  --mat-checkbox-selected-pressed-state-layer-color: #f43f5e;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-rose .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-button.mat-primary,
.vex-theme-rose.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-rose.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-rose.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-rose.dark .mat-tonal-button.mat-primary,
.vex-theme-rose .dark .mat-mdc-button.mat-primary,
.vex-theme-rose .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-rose .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-rose .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-rose .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #f43f5e;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f43f5e;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f43f5e 12%, transparent);
  --mat-button-outlined-state-layer-color: #f43f5e;
  --mat-button-protected-container-color: #f43f5e;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f43f5e;
  --mat-button-text-ripple-color: color-mix(in srgb, #f43f5e 12%, transparent);
  --mat-button-text-state-layer-color: #f43f5e;
  --mat-button-tonal-container-color: #f43f5e;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-button.mat-accent,
.vex-theme-rose.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-rose.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-rose.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-rose.dark .mat-tonal-button.mat-accent,
.vex-theme-rose .dark .mat-mdc-button.mat-accent,
.vex-theme-rose .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-rose .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-rose .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-rose .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-button.mat-warn,
.vex-theme-rose.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-rose.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-rose.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-rose.dark .mat-tonal-button.mat-warn,
.vex-theme-rose .dark .mat-mdc-button.mat-warn,
.vex-theme-rose .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-rose .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-rose .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-rose .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-rose .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #f43f5e;
  --mat-icon-button-state-layer-color: #f43f5e;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f43f5e 12%, transparent);
}
.vex-theme-rose.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-rose .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-rose.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-rose .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-rose.dark .mat-mdc-fab.mat-primary,
.vex-theme-rose.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-rose .dark .mat-mdc-fab.mat-primary,
.vex-theme-rose .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #f43f5e;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f43f5e 12%, transparent);
  --mat-fab-small-container-color: #f43f5e;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-fab.mat-accent,
.vex-theme-rose.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-rose .dark .mat-mdc-fab.mat-accent,
.vex-theme-rose .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-rose.dark .mat-mdc-fab.mat-warn,
.vex-theme-rose.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-rose .dark .mat-mdc-fab.mat-warn,
.vex-theme-rose .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #e11d48;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #f43f5e;
}
.vex-theme-rose.dark .mat-accent,
.vex-theme-rose .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-rose.dark .mat-warn,
.vex-theme-rose .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-badge-background-color: #f43f5e;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-rose.dark .mat-badge-accent,
.vex-theme-rose .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-rose.dark .mat-badge-warn,
.vex-theme-rose .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f43f5e 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f43f5e;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f43f5e 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f43f5e 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f43f5e 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f43f5e;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-rose.dark .mat-datepicker-content.mat-accent,
.vex-theme-rose.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-rose .dark .mat-datepicker-content.mat-accent,
.vex-theme-rose .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-rose.dark .mat-datepicker-content.mat-warn,
.vex-theme-rose.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-rose .dark .mat-datepicker-content.mat-warn,
.vex-theme-rose .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-rose.dark .mat-icon.mat-primary,
.vex-theme-rose .dark .mat-icon.mat-primary {
  --mat-icon-color: #f43f5e;
}
.vex-theme-rose.dark .mat-icon.mat-accent,
.vex-theme-rose .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-rose.dark .mat-icon.mat-warn,
.vex-theme-rose .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f43f5e;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f43f5e;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f43f5e;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-rose.dark .mat-step-header.mat-accent,
.vex-theme-rose .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-rose.dark .mat-step-header.mat-warn,
.vex-theme-rose .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-rose.dark .mat-toolbar.mat-primary,
.vex-theme-rose .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #f43f5e;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-rose.dark .mat-toolbar.mat-accent,
.vex-theme-rose .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-rose.dark .mat-toolbar.mat-warn,
.vex-theme-rose .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #475569;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-slate .mat-accent,
.vex-theme-slate.light .mat-accent,
.vex-theme-slate .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-slate .mat-warn,
.vex-theme-slate.light .mat-warn,
.vex-theme-slate .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-slate .mat-primary,
.vex-theme-slate.light .mat-primary,
.vex-theme-slate .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #475569;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #475569;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-slate .mat-accent,
.vex-theme-slate.light .mat-accent,
.vex-theme-slate .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-slate .mat-warn,
.vex-theme-slate.light .mat-warn,
.vex-theme-slate .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-slate .mat-mdc-progress-bar,
.vex-theme-slate.light .mat-mdc-progress-bar,
.vex-theme-slate .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #475569;
  --mat-progress-bar-track-color: rgba(71, 85, 105, 0.25);
}
.vex-theme-slate .mat-mdc-progress-bar.mat-accent,
.vex-theme-slate.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-slate .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-slate .mat-mdc-progress-bar.mat-warn,
.vex-theme-slate.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-slate .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #475569 87%, transparent);
  --mat-form-field-filled-caret-color: #475569;
  --mat-form-field-filled-focus-active-indicator-color: #475569;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #475569 87%, transparent);
  --mat-form-field-outlined-caret-color: #475569;
  --mat-form-field-outlined-focus-outline-color: #475569;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #475569 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-slate .mat-mdc-form-field.mat-accent,
.vex-theme-slate.light .mat-mdc-form-field.mat-accent,
.vex-theme-slate .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-slate .mat-mdc-form-field.mat-warn,
.vex-theme-slate.light .mat-mdc-form-field.mat-warn,
.vex-theme-slate .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #475569;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-slate .mat-mdc-form-field.mat-accent,
.vex-theme-slate.light .mat-mdc-form-field.mat-accent,
.vex-theme-slate .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-slate .mat-mdc-form-field.mat-warn,
.vex-theme-slate.light .mat-mdc-form-field.mat-warn,
.vex-theme-slate .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-slate .mat-mdc-standard-chip,
.vex-theme-slate.light .mat-mdc-standard-chip,
.vex-theme-slate .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-slate .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-slate.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-slate.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-slate .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-slate .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #475569;
  --mat-chip-elevated-disabled-container-color: #475569;
  --mat-chip-elevated-selected-container-color: #475569;
  --mat-chip-flat-disabled-selected-container-color: #475569;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-slate .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-slate .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-slate.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-slate.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-slate .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-slate .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-slate .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-slate .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-slate.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-slate.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-slate .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-slate .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #475569;
  --mat-slide-toggle-selected-handle-color: #475569;
  --mat-slide-toggle-selected-hover-state-layer-color: #475569;
  --mat-slide-toggle-selected-pressed-state-layer-color: #475569;
  --mat-slide-toggle-selected-focus-handle-color: #475569;
  --mat-slide-toggle-selected-hover-handle-color: #475569;
  --mat-slide-toggle-selected-pressed-handle-color: #475569;
  --mat-slide-toggle-selected-focus-track-color: #cbd5e1;
  --mat-slide-toggle-selected-hover-track-color: #cbd5e1;
  --mat-slide-toggle-selected-pressed-track-color: #cbd5e1;
  --mat-slide-toggle-selected-track-color: #cbd5e1;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-slate .mat-mdc-slide-toggle.mat-accent,
.vex-theme-slate.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-slate .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-slate .mat-mdc-slide-toggle.mat-warn,
.vex-theme-slate.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-slate .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-slate .mat-mdc-radio-button.mat-primary,
.vex-theme-slate.light .mat-mdc-radio-button.mat-primary,
.vex-theme-slate .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #475569;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #475569;
  --mat-radio-selected-hover-icon-color: #475569;
  --mat-radio-selected-icon-color: #475569;
  --mat-radio-selected-pressed-icon-color: #475569;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-radio-button.mat-accent,
.vex-theme-slate.light .mat-mdc-radio-button.mat-accent,
.vex-theme-slate .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-radio-button.mat-warn,
.vex-theme-slate.light .mat-mdc-radio-button.mat-warn,
.vex-theme-slate .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-slider-active-track-color: #475569;
  --mat-slider-focus-handle-color: #475569;
  --mat-slider-handle-color: #475569;
  --mat-slider-hover-handle-color: #475569;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #475569 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #475569 4%, transparent);
  --mat-slider-inactive-track-color: #475569;
  --mat-slider-ripple-color: #475569;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #475569;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-accent,
.vex-theme-slate.light .mat-accent,
.vex-theme-slate .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-slate .mat-warn,
.vex-theme-slate.light .mat-warn,
.vex-theme-slate .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-slate .mdc-list-item__start,
.vex-theme-slate .mdc-list-item__end,
.vex-theme-slate.light .mdc-list-item__start,
.vex-theme-slate.light .mdc-list-item__end,
.vex-theme-slate .light .mdc-list-item__start,
.vex-theme-slate .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #475569;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #475569;
  --mat-radio-selected-hover-icon-color: #475569;
  --mat-radio-selected-icon-color: #475569;
  --mat-radio-selected-pressed-icon-color: #475569;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-accent .mdc-list-item__start,
.vex-theme-slate .mat-accent .mdc-list-item__end,
.vex-theme-slate.light .mat-accent .mdc-list-item__start,
.vex-theme-slate.light .mat-accent .mdc-list-item__end,
.vex-theme-slate .light .mat-accent .mdc-list-item__start,
.vex-theme-slate .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-warn .mdc-list-item__start,
.vex-theme-slate .mat-warn .mdc-list-item__end,
.vex-theme-slate.light .mat-warn .mdc-list-item__start,
.vex-theme-slate.light .mat-warn .mdc-list-item__end,
.vex-theme-slate .light .mat-warn .mdc-list-item__start,
.vex-theme-slate .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-list-option,
.vex-theme-slate.light .mat-mdc-list-option,
.vex-theme-slate .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #475569;
  --mat-checkbox-selected-hover-icon-color: #475569;
  --mat-checkbox-selected-icon-color: #475569;
  --mat-checkbox-selected-pressed-icon-color: #475569;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #475569;
  --mat-checkbox-selected-hover-state-layer-color: #475569;
  --mat-checkbox-selected-pressed-state-layer-color: #475569;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-list-option.mat-accent,
.vex-theme-slate.light .mat-mdc-list-option.mat-accent,
.vex-theme-slate .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-list-option.mat-warn,
.vex-theme-slate.light .mat-mdc-list-option.mat-warn,
.vex-theme-slate .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-slate .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-slate .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-slate .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-slate.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-slate.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-slate.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-slate.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-slate .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-slate .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-slate .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-slate .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #475569;
}
.vex-theme-slate .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-slate .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-slate .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-slate.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-slate.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-slate.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-slate .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-slate .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-slate .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-slate .mat-mdc-tab-group,
.vex-theme-slate .mat-mdc-tab-nav-bar,
.vex-theme-slate.light .mat-mdc-tab-group,
.vex-theme-slate.light .mat-mdc-tab-nav-bar,
.vex-theme-slate .light .mat-mdc-tab-group,
.vex-theme-slate .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #475569;
  --mat-tab-active-ripple-color: #475569;
  --mat-tab-inactive-ripple-color: #475569;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #475569;
  --mat-tab-active-hover-label-text-color: #475569;
  --mat-tab-active-focus-indicator-color: #475569;
  --mat-tab-active-hover-indicator-color: #475569;
  --mat-tab-active-indicator-color: #475569;
}
.vex-theme-slate .mat-mdc-tab-group.mat-accent,
.vex-theme-slate .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-slate.light .mat-mdc-tab-group.mat-accent,
.vex-theme-slate.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-slate .light .mat-mdc-tab-group.mat-accent,
.vex-theme-slate .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-slate .mat-mdc-tab-group.mat-warn,
.vex-theme-slate .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-slate.light .mat-mdc-tab-group.mat-warn,
.vex-theme-slate.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-slate .light .mat-mdc-tab-group.mat-warn,
.vex-theme-slate .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-slate .mat-mdc-tab-group.mat-background-primary,
.vex-theme-slate .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-slate.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-slate.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-slate .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-slate .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #475569;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-slate .mat-mdc-tab-group.mat-background-accent,
.vex-theme-slate .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-slate.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-slate.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-slate .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-slate .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-slate .mat-mdc-tab-group.mat-background-warn,
.vex-theme-slate .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-slate.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-slate.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-slate .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-slate .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-checkbox.mat-primary,
.vex-theme-slate.light .mat-mdc-checkbox.mat-primary,
.vex-theme-slate .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #475569;
  --mat-checkbox-selected-hover-icon-color: #475569;
  --mat-checkbox-selected-icon-color: #475569;
  --mat-checkbox-selected-pressed-icon-color: #475569;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #475569;
  --mat-checkbox-selected-hover-state-layer-color: #475569;
  --mat-checkbox-selected-pressed-state-layer-color: #475569;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-checkbox.mat-warn,
.vex-theme-slate.light .mat-mdc-checkbox.mat-warn,
.vex-theme-slate .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-button.mat-primary,
.vex-theme-slate .mat-mdc-unelevated-button.mat-primary,
.vex-theme-slate .mat-mdc-raised-button.mat-primary,
.vex-theme-slate .mat-mdc-outlined-button.mat-primary,
.vex-theme-slate .mat-tonal-button.mat-primary,
.vex-theme-slate.light .mat-mdc-button.mat-primary,
.vex-theme-slate.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-slate.light .mat-mdc-raised-button.mat-primary,
.vex-theme-slate.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-slate.light .mat-tonal-button.mat-primary,
.vex-theme-slate .light .mat-mdc-button.mat-primary,
.vex-theme-slate .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-slate .light .mat-mdc-raised-button.mat-primary,
.vex-theme-slate .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-slate .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #475569;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #475569;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #475569 12%, transparent);
  --mat-button-outlined-state-layer-color: #475569;
  --mat-button-protected-container-color: #475569;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #475569;
  --mat-button-text-ripple-color: color-mix(in srgb, #475569 12%, transparent);
  --mat-button-text-state-layer-color: #475569;
  --mat-button-tonal-container-color: #475569;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-slate .mat-mdc-button.mat-accent,
.vex-theme-slate .mat-mdc-unelevated-button.mat-accent,
.vex-theme-slate .mat-mdc-raised-button.mat-accent,
.vex-theme-slate .mat-mdc-outlined-button.mat-accent,
.vex-theme-slate .mat-tonal-button.mat-accent,
.vex-theme-slate.light .mat-mdc-button.mat-accent,
.vex-theme-slate.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-slate.light .mat-mdc-raised-button.mat-accent,
.vex-theme-slate.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-slate.light .mat-tonal-button.mat-accent,
.vex-theme-slate .light .mat-mdc-button.mat-accent,
.vex-theme-slate .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-slate .light .mat-mdc-raised-button.mat-accent,
.vex-theme-slate .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-slate .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-slate .mat-mdc-button.mat-warn,
.vex-theme-slate .mat-mdc-unelevated-button.mat-warn,
.vex-theme-slate .mat-mdc-raised-button.mat-warn,
.vex-theme-slate .mat-mdc-outlined-button.mat-warn,
.vex-theme-slate .mat-tonal-button.mat-warn,
.vex-theme-slate.light .mat-mdc-button.mat-warn,
.vex-theme-slate.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-slate.light .mat-mdc-raised-button.mat-warn,
.vex-theme-slate.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-slate.light .mat-tonal-button.mat-warn,
.vex-theme-slate .light .mat-mdc-button.mat-warn,
.vex-theme-slate .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-slate .light .mat-mdc-raised-button.mat-warn,
.vex-theme-slate .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-slate .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-icon-button.mat-primary,
.vex-theme-slate.light .mat-mdc-icon-button.mat-primary,
.vex-theme-slate .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #475569;
  --mat-icon-button-state-layer-color: #475569;
  --mat-icon-button-ripple-color: color-mix(in srgb, #475569 12%, transparent);
}
.vex-theme-slate .mat-mdc-icon-button.mat-accent,
.vex-theme-slate.light .mat-mdc-icon-button.mat-accent,
.vex-theme-slate .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-slate .mat-mdc-icon-button.mat-warn,
.vex-theme-slate.light .mat-mdc-icon-button.mat-warn,
.vex-theme-slate .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-mdc-fab.mat-primary,
.vex-theme-slate .mat-mdc-mini-fab.mat-primary,
.vex-theme-slate.light .mat-mdc-fab.mat-primary,
.vex-theme-slate.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-slate .light .mat-mdc-fab.mat-primary,
.vex-theme-slate .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #475569;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #475569 12%, transparent);
  --mat-fab-small-container-color: #475569;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-slate .mat-mdc-fab.mat-accent,
.vex-theme-slate .mat-mdc-mini-fab.mat-accent,
.vex-theme-slate.light .mat-mdc-fab.mat-accent,
.vex-theme-slate.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-slate .light .mat-mdc-fab.mat-accent,
.vex-theme-slate .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-slate .mat-mdc-fab.mat-warn,
.vex-theme-slate .mat-mdc-mini-fab.mat-warn,
.vex-theme-slate.light .mat-mdc-fab.mat-warn,
.vex-theme-slate.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-slate .light .mat-mdc-fab.mat-warn,
.vex-theme-slate .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #cbd5e1;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #475569;
}
.vex-theme-slate .mat-accent,
.vex-theme-slate.light .mat-accent,
.vex-theme-slate .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-slate .mat-warn,
.vex-theme-slate.light .mat-warn,
.vex-theme-slate .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-badge-background-color: #475569;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-slate .mat-badge-accent,
.vex-theme-slate.light .mat-badge-accent,
.vex-theme-slate .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-slate .mat-badge-warn,
.vex-theme-slate.light .mat-badge-warn,
.vex-theme-slate .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #475569 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #475569;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #475569 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #475569 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #475569 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #475569;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-datepicker-content.mat-accent,
.vex-theme-slate .mat-datepicker-toggle-active.mat-accent,
.vex-theme-slate.light .mat-datepicker-content.mat-accent,
.vex-theme-slate.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-slate .light .mat-datepicker-content.mat-accent,
.vex-theme-slate .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-datepicker-content.mat-warn,
.vex-theme-slate .mat-datepicker-toggle-active.mat-warn,
.vex-theme-slate.light .mat-datepicker-content.mat-warn,
.vex-theme-slate.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-slate .light .mat-datepicker-content.mat-warn,
.vex-theme-slate .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-slate .mat-icon.mat-primary,
.vex-theme-slate.light .mat-icon.mat-primary,
.vex-theme-slate .light .mat-icon.mat-primary {
  --mat-icon-color: #475569;
}
.vex-theme-slate .mat-icon.mat-accent,
.vex-theme-slate.light .mat-icon.mat-accent,
.vex-theme-slate .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-slate .mat-icon.mat-warn,
.vex-theme-slate.light .mat-icon.mat-warn,
.vex-theme-slate .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #475569;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #475569;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #475569;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-slate .mat-step-header.mat-accent,
.vex-theme-slate.light .mat-step-header.mat-accent,
.vex-theme-slate .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-slate .mat-step-header.mat-warn,
.vex-theme-slate.light .mat-step-header.mat-warn,
.vex-theme-slate .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-slate .mat-toolbar.mat-primary,
.vex-theme-slate.light .mat-toolbar.mat-primary,
.vex-theme-slate .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #475569;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-slate .mat-toolbar.mat-accent,
.vex-theme-slate.light .mat-toolbar.mat-accent,
.vex-theme-slate .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-slate .mat-toolbar.mat-warn,
.vex-theme-slate.light .mat-toolbar.mat-warn,
.vex-theme-slate .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-slate,
.vex-theme-slate.light,
.vex-theme-slate .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #64748b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-slate.dark .mat-accent,
.vex-theme-slate .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-slate.dark .mat-warn,
.vex-theme-slate .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-slate.dark .mat-primary,
.vex-theme-slate .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #64748b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #64748b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-slate.dark .mat-accent,
.vex-theme-slate .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-slate.dark .mat-warn,
.vex-theme-slate .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-slate.dark .mat-mdc-progress-bar,
.vex-theme-slate .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #64748b;
  --mat-progress-bar-track-color: rgba(100, 116, 139, 0.25);
}
.vex-theme-slate.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-slate .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-slate.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-slate .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #64748b 87%, transparent);
  --mat-form-field-filled-caret-color: #64748b;
  --mat-form-field-filled-focus-active-indicator-color: #64748b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #64748b 87%, transparent);
  --mat-form-field-outlined-caret-color: #64748b;
  --mat-form-field-outlined-focus-outline-color: #64748b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #64748b 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-slate.dark .mat-mdc-form-field.mat-accent,
.vex-theme-slate .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-slate.dark .mat-mdc-form-field.mat-warn,
.vex-theme-slate .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #64748b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-slate.dark .mat-mdc-form-field.mat-accent,
.vex-theme-slate .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-slate.dark .mat-mdc-form-field.mat-warn,
.vex-theme-slate .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-slate.dark .mat-mdc-standard-chip,
.vex-theme-slate .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-slate.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-slate.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-slate .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-slate .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #64748b;
  --mat-chip-elevated-disabled-container-color: #64748b;
  --mat-chip-elevated-selected-container-color: #64748b;
  --mat-chip-flat-disabled-selected-container-color: #64748b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-slate.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-slate .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-slate .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-slate.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-slate .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-slate .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #64748b;
  --mat-slide-toggle-selected-handle-color: #64748b;
  --mat-slide-toggle-selected-hover-state-layer-color: #64748b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #64748b;
  --mat-slide-toggle-selected-focus-handle-color: #64748b;
  --mat-slide-toggle-selected-hover-handle-color: #64748b;
  --mat-slide-toggle-selected-pressed-handle-color: #64748b;
  --mat-slide-toggle-selected-focus-track-color: #475569;
  --mat-slide-toggle-selected-hover-track-color: #475569;
  --mat-slide-toggle-selected-pressed-track-color: #475569;
  --mat-slide-toggle-selected-track-color: #475569;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-slate.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-slate .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-slate.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-slate .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-slate.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-slate .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #64748b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #64748b;
  --mat-radio-selected-hover-icon-color: #64748b;
  --mat-radio-selected-icon-color: #64748b;
  --mat-radio-selected-pressed-icon-color: #64748b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-slate.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-slate .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-slate.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-slate .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-slider-active-track-color: #64748b;
  --mat-slider-focus-handle-color: #64748b;
  --mat-slider-handle-color: #64748b;
  --mat-slider-hover-handle-color: #64748b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #64748b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #64748b 4%, transparent);
  --mat-slider-inactive-track-color: #64748b;
  --mat-slider-ripple-color: #64748b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #64748b;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-slate.dark .mat-accent,
.vex-theme-slate .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-slate.dark .mat-warn,
.vex-theme-slate .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-slate.dark .mdc-list-item__start,
.vex-theme-slate.dark .mdc-list-item__end,
.vex-theme-slate .dark .mdc-list-item__start,
.vex-theme-slate .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #64748b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #64748b;
  --mat-radio-selected-hover-icon-color: #64748b;
  --mat-radio-selected-icon-color: #64748b;
  --mat-radio-selected-pressed-icon-color: #64748b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-slate.dark .mat-accent .mdc-list-item__start,
.vex-theme-slate.dark .mat-accent .mdc-list-item__end,
.vex-theme-slate .dark .mat-accent .mdc-list-item__start,
.vex-theme-slate .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-slate.dark .mat-warn .mdc-list-item__start,
.vex-theme-slate.dark .mat-warn .mdc-list-item__end,
.vex-theme-slate .dark .mat-warn .mdc-list-item__start,
.vex-theme-slate .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-slate.dark .mat-mdc-list-option,
.vex-theme-slate .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #64748b;
  --mat-checkbox-selected-hover-icon-color: #64748b;
  --mat-checkbox-selected-icon-color: #64748b;
  --mat-checkbox-selected-pressed-icon-color: #64748b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #64748b;
  --mat-checkbox-selected-hover-state-layer-color: #64748b;
  --mat-checkbox-selected-pressed-state-layer-color: #64748b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-list-option.mat-accent,
.vex-theme-slate .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-list-option.mat-warn,
.vex-theme-slate .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-slate.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-slate.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-slate.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-slate .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-slate .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-slate .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-slate .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #64748b;
}
.vex-theme-slate.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-slate.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-slate.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-slate .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-slate .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-slate .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-slate.dark .mat-mdc-tab-group,
.vex-theme-slate.dark .mat-mdc-tab-nav-bar,
.vex-theme-slate .dark .mat-mdc-tab-group,
.vex-theme-slate .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #64748b;
  --mat-tab-active-ripple-color: #64748b;
  --mat-tab-inactive-ripple-color: #64748b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #64748b;
  --mat-tab-active-hover-label-text-color: #64748b;
  --mat-tab-active-focus-indicator-color: #64748b;
  --mat-tab-active-hover-indicator-color: #64748b;
  --mat-tab-active-indicator-color: #64748b;
}
.vex-theme-slate.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-slate.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-slate .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-slate .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-slate.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-slate.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-slate .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-slate .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-slate.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-slate.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-slate .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-slate .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #64748b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-slate.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-slate .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-slate .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-slate.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-slate .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-slate .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-slate .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #64748b;
  --mat-checkbox-selected-hover-icon-color: #64748b;
  --mat-checkbox-selected-icon-color: #64748b;
  --mat-checkbox-selected-pressed-icon-color: #64748b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #64748b;
  --mat-checkbox-selected-hover-state-layer-color: #64748b;
  --mat-checkbox-selected-pressed-state-layer-color: #64748b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-slate .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-button.mat-primary,
.vex-theme-slate.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-slate.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-slate.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-slate.dark .mat-tonal-button.mat-primary,
.vex-theme-slate .dark .mat-mdc-button.mat-primary,
.vex-theme-slate .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-slate .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-slate .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-slate .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #64748b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #64748b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #64748b 12%, transparent);
  --mat-button-outlined-state-layer-color: #64748b;
  --mat-button-protected-container-color: #64748b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #64748b;
  --mat-button-text-ripple-color: color-mix(in srgb, #64748b 12%, transparent);
  --mat-button-text-state-layer-color: #64748b;
  --mat-button-tonal-container-color: #64748b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-button.mat-accent,
.vex-theme-slate.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-slate.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-slate.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-slate.dark .mat-tonal-button.mat-accent,
.vex-theme-slate .dark .mat-mdc-button.mat-accent,
.vex-theme-slate .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-slate .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-slate .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-slate .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-button.mat-warn,
.vex-theme-slate.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-slate.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-slate.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-slate.dark .mat-tonal-button.mat-warn,
.vex-theme-slate .dark .mat-mdc-button.mat-warn,
.vex-theme-slate .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-slate .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-slate .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-slate .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-slate .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #64748b;
  --mat-icon-button-state-layer-color: #64748b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #64748b 12%, transparent);
}
.vex-theme-slate.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-slate .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-slate.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-slate .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-slate.dark .mat-mdc-fab.mat-primary,
.vex-theme-slate.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-slate .dark .mat-mdc-fab.mat-primary,
.vex-theme-slate .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #64748b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #64748b 12%, transparent);
  --mat-fab-small-container-color: #64748b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-fab.mat-accent,
.vex-theme-slate.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-slate .dark .mat-mdc-fab.mat-accent,
.vex-theme-slate .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-slate.dark .mat-mdc-fab.mat-warn,
.vex-theme-slate.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-slate .dark .mat-mdc-fab.mat-warn,
.vex-theme-slate .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #475569;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #64748b;
}
.vex-theme-slate.dark .mat-accent,
.vex-theme-slate .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-slate.dark .mat-warn,
.vex-theme-slate .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-badge-background-color: #64748b;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-slate.dark .mat-badge-accent,
.vex-theme-slate .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-slate.dark .mat-badge-warn,
.vex-theme-slate .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #64748b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #64748b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #64748b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #64748b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #64748b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #64748b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-slate.dark .mat-datepicker-content.mat-accent,
.vex-theme-slate.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-slate .dark .mat-datepicker-content.mat-accent,
.vex-theme-slate .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-slate.dark .mat-datepicker-content.mat-warn,
.vex-theme-slate.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-slate .dark .mat-datepicker-content.mat-warn,
.vex-theme-slate .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-slate.dark .mat-icon.mat-primary,
.vex-theme-slate .dark .mat-icon.mat-primary {
  --mat-icon-color: #64748b;
}
.vex-theme-slate.dark .mat-icon.mat-accent,
.vex-theme-slate .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-slate.dark .mat-icon.mat-warn,
.vex-theme-slate .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #64748b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #64748b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #64748b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-slate.dark .mat-step-header.mat-accent,
.vex-theme-slate .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-slate.dark .mat-step-header.mat-warn,
.vex-theme-slate .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-slate.dark .mat-toolbar.mat-primary,
.vex-theme-slate .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #64748b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-slate.dark .mat-toolbar.mat-accent,
.vex-theme-slate .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-slate.dark .mat-toolbar.mat-warn,
.vex-theme-slate .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #4b5563;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-gray .mat-accent,
.vex-theme-gray.light .mat-accent,
.vex-theme-gray .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-gray .mat-warn,
.vex-theme-gray.light .mat-warn,
.vex-theme-gray .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-gray .mat-primary,
.vex-theme-gray.light .mat-primary,
.vex-theme-gray .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #4b5563;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #4b5563;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-gray .mat-accent,
.vex-theme-gray.light .mat-accent,
.vex-theme-gray .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-gray .mat-warn,
.vex-theme-gray.light .mat-warn,
.vex-theme-gray .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-gray .mat-mdc-progress-bar,
.vex-theme-gray.light .mat-mdc-progress-bar,
.vex-theme-gray .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #4b5563;
  --mat-progress-bar-track-color: rgba(75, 85, 99, 0.25);
}
.vex-theme-gray .mat-mdc-progress-bar.mat-accent,
.vex-theme-gray.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-gray .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-gray .mat-mdc-progress-bar.mat-warn,
.vex-theme-gray.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-gray .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #4b5563 87%, transparent);
  --mat-form-field-filled-caret-color: #4b5563;
  --mat-form-field-filled-focus-active-indicator-color: #4b5563;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #4b5563 87%, transparent);
  --mat-form-field-outlined-caret-color: #4b5563;
  --mat-form-field-outlined-focus-outline-color: #4b5563;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #4b5563 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-gray .mat-mdc-form-field.mat-accent,
.vex-theme-gray.light .mat-mdc-form-field.mat-accent,
.vex-theme-gray .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-gray .mat-mdc-form-field.mat-warn,
.vex-theme-gray.light .mat-mdc-form-field.mat-warn,
.vex-theme-gray .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #4b5563;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-gray .mat-mdc-form-field.mat-accent,
.vex-theme-gray.light .mat-mdc-form-field.mat-accent,
.vex-theme-gray .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-gray .mat-mdc-form-field.mat-warn,
.vex-theme-gray.light .mat-mdc-form-field.mat-warn,
.vex-theme-gray .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-gray .mat-mdc-standard-chip,
.vex-theme-gray.light .mat-mdc-standard-chip,
.vex-theme-gray .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-gray .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-gray.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-gray.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-gray .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-gray .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #4b5563;
  --mat-chip-elevated-disabled-container-color: #4b5563;
  --mat-chip-elevated-selected-container-color: #4b5563;
  --mat-chip-flat-disabled-selected-container-color: #4b5563;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-gray .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-gray .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-gray.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-gray.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-gray .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-gray .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-gray .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-gray .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-gray.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-gray.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-gray .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-gray .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #4b5563;
  --mat-slide-toggle-selected-handle-color: #4b5563;
  --mat-slide-toggle-selected-hover-state-layer-color: #4b5563;
  --mat-slide-toggle-selected-pressed-state-layer-color: #4b5563;
  --mat-slide-toggle-selected-focus-handle-color: #4b5563;
  --mat-slide-toggle-selected-hover-handle-color: #4b5563;
  --mat-slide-toggle-selected-pressed-handle-color: #4b5563;
  --mat-slide-toggle-selected-focus-track-color: #d1d5db;
  --mat-slide-toggle-selected-hover-track-color: #d1d5db;
  --mat-slide-toggle-selected-pressed-track-color: #d1d5db;
  --mat-slide-toggle-selected-track-color: #d1d5db;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-gray .mat-mdc-slide-toggle.mat-accent,
.vex-theme-gray.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-gray .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-gray .mat-mdc-slide-toggle.mat-warn,
.vex-theme-gray.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-gray .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-gray .mat-mdc-radio-button.mat-primary,
.vex-theme-gray.light .mat-mdc-radio-button.mat-primary,
.vex-theme-gray .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #4b5563;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #4b5563;
  --mat-radio-selected-hover-icon-color: #4b5563;
  --mat-radio-selected-icon-color: #4b5563;
  --mat-radio-selected-pressed-icon-color: #4b5563;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-radio-button.mat-accent,
.vex-theme-gray.light .mat-mdc-radio-button.mat-accent,
.vex-theme-gray .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-radio-button.mat-warn,
.vex-theme-gray.light .mat-mdc-radio-button.mat-warn,
.vex-theme-gray .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-slider-active-track-color: #4b5563;
  --mat-slider-focus-handle-color: #4b5563;
  --mat-slider-handle-color: #4b5563;
  --mat-slider-hover-handle-color: #4b5563;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #4b5563 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #4b5563 4%, transparent);
  --mat-slider-inactive-track-color: #4b5563;
  --mat-slider-ripple-color: #4b5563;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #4b5563;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-accent,
.vex-theme-gray.light .mat-accent,
.vex-theme-gray .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-gray .mat-warn,
.vex-theme-gray.light .mat-warn,
.vex-theme-gray .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-gray .mdc-list-item__start,
.vex-theme-gray .mdc-list-item__end,
.vex-theme-gray.light .mdc-list-item__start,
.vex-theme-gray.light .mdc-list-item__end,
.vex-theme-gray .light .mdc-list-item__start,
.vex-theme-gray .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #4b5563;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #4b5563;
  --mat-radio-selected-hover-icon-color: #4b5563;
  --mat-radio-selected-icon-color: #4b5563;
  --mat-radio-selected-pressed-icon-color: #4b5563;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-accent .mdc-list-item__start,
.vex-theme-gray .mat-accent .mdc-list-item__end,
.vex-theme-gray.light .mat-accent .mdc-list-item__start,
.vex-theme-gray.light .mat-accent .mdc-list-item__end,
.vex-theme-gray .light .mat-accent .mdc-list-item__start,
.vex-theme-gray .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-warn .mdc-list-item__start,
.vex-theme-gray .mat-warn .mdc-list-item__end,
.vex-theme-gray.light .mat-warn .mdc-list-item__start,
.vex-theme-gray.light .mat-warn .mdc-list-item__end,
.vex-theme-gray .light .mat-warn .mdc-list-item__start,
.vex-theme-gray .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-list-option,
.vex-theme-gray.light .mat-mdc-list-option,
.vex-theme-gray .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #4b5563;
  --mat-checkbox-selected-hover-icon-color: #4b5563;
  --mat-checkbox-selected-icon-color: #4b5563;
  --mat-checkbox-selected-pressed-icon-color: #4b5563;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #4b5563;
  --mat-checkbox-selected-hover-state-layer-color: #4b5563;
  --mat-checkbox-selected-pressed-state-layer-color: #4b5563;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-list-option.mat-accent,
.vex-theme-gray.light .mat-mdc-list-option.mat-accent,
.vex-theme-gray .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-list-option.mat-warn,
.vex-theme-gray.light .mat-mdc-list-option.mat-warn,
.vex-theme-gray .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-gray .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-gray .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-gray .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-gray.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-gray.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-gray.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-gray.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-gray .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-gray .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-gray .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-gray .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #4b5563;
}
.vex-theme-gray .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-gray .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-gray .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-gray.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-gray.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-gray.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-gray .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-gray .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-gray .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-gray .mat-mdc-tab-group,
.vex-theme-gray .mat-mdc-tab-nav-bar,
.vex-theme-gray.light .mat-mdc-tab-group,
.vex-theme-gray.light .mat-mdc-tab-nav-bar,
.vex-theme-gray .light .mat-mdc-tab-group,
.vex-theme-gray .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #4b5563;
  --mat-tab-active-ripple-color: #4b5563;
  --mat-tab-inactive-ripple-color: #4b5563;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #4b5563;
  --mat-tab-active-hover-label-text-color: #4b5563;
  --mat-tab-active-focus-indicator-color: #4b5563;
  --mat-tab-active-hover-indicator-color: #4b5563;
  --mat-tab-active-indicator-color: #4b5563;
}
.vex-theme-gray .mat-mdc-tab-group.mat-accent,
.vex-theme-gray .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-gray.light .mat-mdc-tab-group.mat-accent,
.vex-theme-gray.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-gray .light .mat-mdc-tab-group.mat-accent,
.vex-theme-gray .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-gray .mat-mdc-tab-group.mat-warn,
.vex-theme-gray .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-gray.light .mat-mdc-tab-group.mat-warn,
.vex-theme-gray.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-gray .light .mat-mdc-tab-group.mat-warn,
.vex-theme-gray .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-gray .mat-mdc-tab-group.mat-background-primary,
.vex-theme-gray .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-gray.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-gray.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-gray .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-gray .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #4b5563;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-gray .mat-mdc-tab-group.mat-background-accent,
.vex-theme-gray .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-gray.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-gray.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-gray .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-gray .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-gray .mat-mdc-tab-group.mat-background-warn,
.vex-theme-gray .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-gray.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-gray.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-gray .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-gray .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-checkbox.mat-primary,
.vex-theme-gray.light .mat-mdc-checkbox.mat-primary,
.vex-theme-gray .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #4b5563;
  --mat-checkbox-selected-hover-icon-color: #4b5563;
  --mat-checkbox-selected-icon-color: #4b5563;
  --mat-checkbox-selected-pressed-icon-color: #4b5563;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #4b5563;
  --mat-checkbox-selected-hover-state-layer-color: #4b5563;
  --mat-checkbox-selected-pressed-state-layer-color: #4b5563;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-checkbox.mat-warn,
.vex-theme-gray.light .mat-mdc-checkbox.mat-warn,
.vex-theme-gray .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-button.mat-primary,
.vex-theme-gray .mat-mdc-unelevated-button.mat-primary,
.vex-theme-gray .mat-mdc-raised-button.mat-primary,
.vex-theme-gray .mat-mdc-outlined-button.mat-primary,
.vex-theme-gray .mat-tonal-button.mat-primary,
.vex-theme-gray.light .mat-mdc-button.mat-primary,
.vex-theme-gray.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-gray.light .mat-mdc-raised-button.mat-primary,
.vex-theme-gray.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-gray.light .mat-tonal-button.mat-primary,
.vex-theme-gray .light .mat-mdc-button.mat-primary,
.vex-theme-gray .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-gray .light .mat-mdc-raised-button.mat-primary,
.vex-theme-gray .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-gray .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #4b5563;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #4b5563;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #4b5563 12%, transparent);
  --mat-button-outlined-state-layer-color: #4b5563;
  --mat-button-protected-container-color: #4b5563;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #4b5563;
  --mat-button-text-ripple-color: color-mix(in srgb, #4b5563 12%, transparent);
  --mat-button-text-state-layer-color: #4b5563;
  --mat-button-tonal-container-color: #4b5563;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-gray .mat-mdc-button.mat-accent,
.vex-theme-gray .mat-mdc-unelevated-button.mat-accent,
.vex-theme-gray .mat-mdc-raised-button.mat-accent,
.vex-theme-gray .mat-mdc-outlined-button.mat-accent,
.vex-theme-gray .mat-tonal-button.mat-accent,
.vex-theme-gray.light .mat-mdc-button.mat-accent,
.vex-theme-gray.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-gray.light .mat-mdc-raised-button.mat-accent,
.vex-theme-gray.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-gray.light .mat-tonal-button.mat-accent,
.vex-theme-gray .light .mat-mdc-button.mat-accent,
.vex-theme-gray .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-gray .light .mat-mdc-raised-button.mat-accent,
.vex-theme-gray .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-gray .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-gray .mat-mdc-button.mat-warn,
.vex-theme-gray .mat-mdc-unelevated-button.mat-warn,
.vex-theme-gray .mat-mdc-raised-button.mat-warn,
.vex-theme-gray .mat-mdc-outlined-button.mat-warn,
.vex-theme-gray .mat-tonal-button.mat-warn,
.vex-theme-gray.light .mat-mdc-button.mat-warn,
.vex-theme-gray.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-gray.light .mat-mdc-raised-button.mat-warn,
.vex-theme-gray.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-gray.light .mat-tonal-button.mat-warn,
.vex-theme-gray .light .mat-mdc-button.mat-warn,
.vex-theme-gray .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-gray .light .mat-mdc-raised-button.mat-warn,
.vex-theme-gray .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-gray .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-icon-button.mat-primary,
.vex-theme-gray.light .mat-mdc-icon-button.mat-primary,
.vex-theme-gray .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #4b5563;
  --mat-icon-button-state-layer-color: #4b5563;
  --mat-icon-button-ripple-color: color-mix(in srgb, #4b5563 12%, transparent);
}
.vex-theme-gray .mat-mdc-icon-button.mat-accent,
.vex-theme-gray.light .mat-mdc-icon-button.mat-accent,
.vex-theme-gray .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-gray .mat-mdc-icon-button.mat-warn,
.vex-theme-gray.light .mat-mdc-icon-button.mat-warn,
.vex-theme-gray .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-mdc-fab.mat-primary,
.vex-theme-gray .mat-mdc-mini-fab.mat-primary,
.vex-theme-gray.light .mat-mdc-fab.mat-primary,
.vex-theme-gray.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-gray .light .mat-mdc-fab.mat-primary,
.vex-theme-gray .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #4b5563;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #4b5563 12%, transparent);
  --mat-fab-small-container-color: #4b5563;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-gray .mat-mdc-fab.mat-accent,
.vex-theme-gray .mat-mdc-mini-fab.mat-accent,
.vex-theme-gray.light .mat-mdc-fab.mat-accent,
.vex-theme-gray.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-gray .light .mat-mdc-fab.mat-accent,
.vex-theme-gray .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-gray .mat-mdc-fab.mat-warn,
.vex-theme-gray .mat-mdc-mini-fab.mat-warn,
.vex-theme-gray.light .mat-mdc-fab.mat-warn,
.vex-theme-gray.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-gray .light .mat-mdc-fab.mat-warn,
.vex-theme-gray .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #d1d5db;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #4b5563;
}
.vex-theme-gray .mat-accent,
.vex-theme-gray.light .mat-accent,
.vex-theme-gray .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-gray .mat-warn,
.vex-theme-gray.light .mat-warn,
.vex-theme-gray .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-badge-background-color: #4b5563;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-gray .mat-badge-accent,
.vex-theme-gray.light .mat-badge-accent,
.vex-theme-gray .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-gray .mat-badge-warn,
.vex-theme-gray.light .mat-badge-warn,
.vex-theme-gray .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #4b5563 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #4b5563;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #4b5563 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #4b5563 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #4b5563 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #4b5563;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-datepicker-content.mat-accent,
.vex-theme-gray .mat-datepicker-toggle-active.mat-accent,
.vex-theme-gray.light .mat-datepicker-content.mat-accent,
.vex-theme-gray.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-gray .light .mat-datepicker-content.mat-accent,
.vex-theme-gray .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-datepicker-content.mat-warn,
.vex-theme-gray .mat-datepicker-toggle-active.mat-warn,
.vex-theme-gray.light .mat-datepicker-content.mat-warn,
.vex-theme-gray.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-gray .light .mat-datepicker-content.mat-warn,
.vex-theme-gray .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-gray .mat-icon.mat-primary,
.vex-theme-gray.light .mat-icon.mat-primary,
.vex-theme-gray .light .mat-icon.mat-primary {
  --mat-icon-color: #4b5563;
}
.vex-theme-gray .mat-icon.mat-accent,
.vex-theme-gray.light .mat-icon.mat-accent,
.vex-theme-gray .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-gray .mat-icon.mat-warn,
.vex-theme-gray.light .mat-icon.mat-warn,
.vex-theme-gray .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #4b5563;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #4b5563;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #4b5563;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-gray .mat-step-header.mat-accent,
.vex-theme-gray.light .mat-step-header.mat-accent,
.vex-theme-gray .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-gray .mat-step-header.mat-warn,
.vex-theme-gray.light .mat-step-header.mat-warn,
.vex-theme-gray .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-gray .mat-toolbar.mat-primary,
.vex-theme-gray.light .mat-toolbar.mat-primary,
.vex-theme-gray .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #4b5563;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-gray .mat-toolbar.mat-accent,
.vex-theme-gray.light .mat-toolbar.mat-accent,
.vex-theme-gray .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-gray .mat-toolbar.mat-warn,
.vex-theme-gray.light .mat-toolbar.mat-warn,
.vex-theme-gray .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-gray,
.vex-theme-gray.light,
.vex-theme-gray .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #6b7280;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-gray.dark .mat-accent,
.vex-theme-gray .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-gray.dark .mat-warn,
.vex-theme-gray .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-gray.dark .mat-primary,
.vex-theme-gray .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #6b7280;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #6b7280;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-gray.dark .mat-accent,
.vex-theme-gray .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-gray.dark .mat-warn,
.vex-theme-gray .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-gray.dark .mat-mdc-progress-bar,
.vex-theme-gray .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #6b7280;
  --mat-progress-bar-track-color: rgba(107, 114, 128, 0.25);
}
.vex-theme-gray.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-gray .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-gray.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-gray .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #6b7280 87%, transparent);
  --mat-form-field-filled-caret-color: #6b7280;
  --mat-form-field-filled-focus-active-indicator-color: #6b7280;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #6b7280 87%, transparent);
  --mat-form-field-outlined-caret-color: #6b7280;
  --mat-form-field-outlined-focus-outline-color: #6b7280;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #6b7280 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-gray.dark .mat-mdc-form-field.mat-accent,
.vex-theme-gray .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-gray.dark .mat-mdc-form-field.mat-warn,
.vex-theme-gray .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #6b7280;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-gray.dark .mat-mdc-form-field.mat-accent,
.vex-theme-gray .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-gray.dark .mat-mdc-form-field.mat-warn,
.vex-theme-gray .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-gray.dark .mat-mdc-standard-chip,
.vex-theme-gray .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-gray.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-gray.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-gray .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-gray .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #6b7280;
  --mat-chip-elevated-disabled-container-color: #6b7280;
  --mat-chip-elevated-selected-container-color: #6b7280;
  --mat-chip-flat-disabled-selected-container-color: #6b7280;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-gray.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-gray .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-gray .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-gray.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-gray .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-gray .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #6b7280;
  --mat-slide-toggle-selected-handle-color: #6b7280;
  --mat-slide-toggle-selected-hover-state-layer-color: #6b7280;
  --mat-slide-toggle-selected-pressed-state-layer-color: #6b7280;
  --mat-slide-toggle-selected-focus-handle-color: #6b7280;
  --mat-slide-toggle-selected-hover-handle-color: #6b7280;
  --mat-slide-toggle-selected-pressed-handle-color: #6b7280;
  --mat-slide-toggle-selected-focus-track-color: #4b5563;
  --mat-slide-toggle-selected-hover-track-color: #4b5563;
  --mat-slide-toggle-selected-pressed-track-color: #4b5563;
  --mat-slide-toggle-selected-track-color: #4b5563;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-gray.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-gray .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-gray.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-gray .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-gray.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-gray .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #6b7280;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #6b7280;
  --mat-radio-selected-hover-icon-color: #6b7280;
  --mat-radio-selected-icon-color: #6b7280;
  --mat-radio-selected-pressed-icon-color: #6b7280;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-gray.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-gray .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-gray.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-gray .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-slider-active-track-color: #6b7280;
  --mat-slider-focus-handle-color: #6b7280;
  --mat-slider-handle-color: #6b7280;
  --mat-slider-hover-handle-color: #6b7280;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #6b7280 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #6b7280 4%, transparent);
  --mat-slider-inactive-track-color: #6b7280;
  --mat-slider-ripple-color: #6b7280;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #6b7280;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-gray.dark .mat-accent,
.vex-theme-gray .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-gray.dark .mat-warn,
.vex-theme-gray .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-gray.dark .mdc-list-item__start,
.vex-theme-gray.dark .mdc-list-item__end,
.vex-theme-gray .dark .mdc-list-item__start,
.vex-theme-gray .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #6b7280;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #6b7280;
  --mat-radio-selected-hover-icon-color: #6b7280;
  --mat-radio-selected-icon-color: #6b7280;
  --mat-radio-selected-pressed-icon-color: #6b7280;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-gray.dark .mat-accent .mdc-list-item__start,
.vex-theme-gray.dark .mat-accent .mdc-list-item__end,
.vex-theme-gray .dark .mat-accent .mdc-list-item__start,
.vex-theme-gray .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-gray.dark .mat-warn .mdc-list-item__start,
.vex-theme-gray.dark .mat-warn .mdc-list-item__end,
.vex-theme-gray .dark .mat-warn .mdc-list-item__start,
.vex-theme-gray .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-gray.dark .mat-mdc-list-option,
.vex-theme-gray .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #6b7280;
  --mat-checkbox-selected-hover-icon-color: #6b7280;
  --mat-checkbox-selected-icon-color: #6b7280;
  --mat-checkbox-selected-pressed-icon-color: #6b7280;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #6b7280;
  --mat-checkbox-selected-hover-state-layer-color: #6b7280;
  --mat-checkbox-selected-pressed-state-layer-color: #6b7280;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-list-option.mat-accent,
.vex-theme-gray .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-list-option.mat-warn,
.vex-theme-gray .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-gray.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-gray.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-gray.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-gray .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-gray .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-gray .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-gray .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #6b7280;
}
.vex-theme-gray.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-gray.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-gray.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-gray .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-gray .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-gray .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-gray.dark .mat-mdc-tab-group,
.vex-theme-gray.dark .mat-mdc-tab-nav-bar,
.vex-theme-gray .dark .mat-mdc-tab-group,
.vex-theme-gray .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #6b7280;
  --mat-tab-active-ripple-color: #6b7280;
  --mat-tab-inactive-ripple-color: #6b7280;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #6b7280;
  --mat-tab-active-hover-label-text-color: #6b7280;
  --mat-tab-active-focus-indicator-color: #6b7280;
  --mat-tab-active-hover-indicator-color: #6b7280;
  --mat-tab-active-indicator-color: #6b7280;
}
.vex-theme-gray.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-gray.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-gray .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-gray .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-gray.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-gray.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-gray .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-gray .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-gray.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-gray.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-gray .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-gray .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #6b7280;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-gray.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-gray .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-gray .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-gray.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-gray .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-gray .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-gray .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #6b7280;
  --mat-checkbox-selected-hover-icon-color: #6b7280;
  --mat-checkbox-selected-icon-color: #6b7280;
  --mat-checkbox-selected-pressed-icon-color: #6b7280;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #6b7280;
  --mat-checkbox-selected-hover-state-layer-color: #6b7280;
  --mat-checkbox-selected-pressed-state-layer-color: #6b7280;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-gray .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-button.mat-primary,
.vex-theme-gray.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-gray.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-gray.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-gray.dark .mat-tonal-button.mat-primary,
.vex-theme-gray .dark .mat-mdc-button.mat-primary,
.vex-theme-gray .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-gray .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-gray .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-gray .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #6b7280;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #6b7280;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #6b7280 12%, transparent);
  --mat-button-outlined-state-layer-color: #6b7280;
  --mat-button-protected-container-color: #6b7280;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #6b7280;
  --mat-button-text-ripple-color: color-mix(in srgb, #6b7280 12%, transparent);
  --mat-button-text-state-layer-color: #6b7280;
  --mat-button-tonal-container-color: #6b7280;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-button.mat-accent,
.vex-theme-gray.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-gray.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-gray.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-gray.dark .mat-tonal-button.mat-accent,
.vex-theme-gray .dark .mat-mdc-button.mat-accent,
.vex-theme-gray .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-gray .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-gray .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-gray .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-button.mat-warn,
.vex-theme-gray.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-gray.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-gray.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-gray.dark .mat-tonal-button.mat-warn,
.vex-theme-gray .dark .mat-mdc-button.mat-warn,
.vex-theme-gray .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-gray .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-gray .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-gray .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-gray .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #6b7280;
  --mat-icon-button-state-layer-color: #6b7280;
  --mat-icon-button-ripple-color: color-mix(in srgb, #6b7280 12%, transparent);
}
.vex-theme-gray.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-gray .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-gray.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-gray .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-gray.dark .mat-mdc-fab.mat-primary,
.vex-theme-gray.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-gray .dark .mat-mdc-fab.mat-primary,
.vex-theme-gray .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #6b7280;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #6b7280 12%, transparent);
  --mat-fab-small-container-color: #6b7280;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-fab.mat-accent,
.vex-theme-gray.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-gray .dark .mat-mdc-fab.mat-accent,
.vex-theme-gray .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-gray.dark .mat-mdc-fab.mat-warn,
.vex-theme-gray.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-gray .dark .mat-mdc-fab.mat-warn,
.vex-theme-gray .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #4b5563;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #6b7280;
}
.vex-theme-gray.dark .mat-accent,
.vex-theme-gray .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-gray.dark .mat-warn,
.vex-theme-gray .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-badge-background-color: #6b7280;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-gray.dark .mat-badge-accent,
.vex-theme-gray .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-gray.dark .mat-badge-warn,
.vex-theme-gray .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #6b7280 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #6b7280;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #6b7280 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #6b7280 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #6b7280 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #6b7280;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-gray.dark .mat-datepicker-content.mat-accent,
.vex-theme-gray.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-gray .dark .mat-datepicker-content.mat-accent,
.vex-theme-gray .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-gray.dark .mat-datepicker-content.mat-warn,
.vex-theme-gray.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-gray .dark .mat-datepicker-content.mat-warn,
.vex-theme-gray .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-gray.dark .mat-icon.mat-primary,
.vex-theme-gray .dark .mat-icon.mat-primary {
  --mat-icon-color: #6b7280;
}
.vex-theme-gray.dark .mat-icon.mat-accent,
.vex-theme-gray .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-gray.dark .mat-icon.mat-warn,
.vex-theme-gray .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #6b7280;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #6b7280;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #6b7280;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-gray.dark .mat-step-header.mat-accent,
.vex-theme-gray .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-gray.dark .mat-step-header.mat-warn,
.vex-theme-gray .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-gray.dark .mat-toolbar.mat-primary,
.vex-theme-gray .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #6b7280;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-gray.dark .mat-toolbar.mat-accent,
.vex-theme-gray .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-gray.dark .mat-toolbar.mat-warn,
.vex-theme-gray .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #52525b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-zinc .mat-accent,
.vex-theme-zinc.light .mat-accent,
.vex-theme-zinc .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-zinc .mat-warn,
.vex-theme-zinc.light .mat-warn,
.vex-theme-zinc .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-zinc .mat-primary,
.vex-theme-zinc.light .mat-primary,
.vex-theme-zinc .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #52525b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #52525b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-zinc .mat-accent,
.vex-theme-zinc.light .mat-accent,
.vex-theme-zinc .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-zinc .mat-warn,
.vex-theme-zinc.light .mat-warn,
.vex-theme-zinc .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-zinc .mat-mdc-progress-bar,
.vex-theme-zinc.light .mat-mdc-progress-bar,
.vex-theme-zinc .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #52525b;
  --mat-progress-bar-track-color: rgba(82, 82, 91, 0.25);
}
.vex-theme-zinc .mat-mdc-progress-bar.mat-accent,
.vex-theme-zinc.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-zinc .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-zinc .mat-mdc-progress-bar.mat-warn,
.vex-theme-zinc.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-zinc .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #52525b 87%, transparent);
  --mat-form-field-filled-caret-color: #52525b;
  --mat-form-field-filled-focus-active-indicator-color: #52525b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #52525b 87%, transparent);
  --mat-form-field-outlined-caret-color: #52525b;
  --mat-form-field-outlined-focus-outline-color: #52525b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #52525b 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-zinc .mat-mdc-form-field.mat-accent,
.vex-theme-zinc.light .mat-mdc-form-field.mat-accent,
.vex-theme-zinc .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-zinc .mat-mdc-form-field.mat-warn,
.vex-theme-zinc.light .mat-mdc-form-field.mat-warn,
.vex-theme-zinc .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #52525b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-zinc .mat-mdc-form-field.mat-accent,
.vex-theme-zinc.light .mat-mdc-form-field.mat-accent,
.vex-theme-zinc .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-zinc .mat-mdc-form-field.mat-warn,
.vex-theme-zinc.light .mat-mdc-form-field.mat-warn,
.vex-theme-zinc .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-zinc .mat-mdc-standard-chip,
.vex-theme-zinc.light .mat-mdc-standard-chip,
.vex-theme-zinc .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-zinc .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-zinc.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-zinc.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-zinc .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-zinc .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #52525b;
  --mat-chip-elevated-disabled-container-color: #52525b;
  --mat-chip-elevated-selected-container-color: #52525b;
  --mat-chip-flat-disabled-selected-container-color: #52525b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-zinc .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-zinc .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-zinc.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-zinc.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-zinc .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-zinc .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-zinc .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-zinc .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-zinc.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-zinc.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-zinc .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-zinc .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #52525b;
  --mat-slide-toggle-selected-handle-color: #52525b;
  --mat-slide-toggle-selected-hover-state-layer-color: #52525b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #52525b;
  --mat-slide-toggle-selected-focus-handle-color: #52525b;
  --mat-slide-toggle-selected-hover-handle-color: #52525b;
  --mat-slide-toggle-selected-pressed-handle-color: #52525b;
  --mat-slide-toggle-selected-focus-track-color: #d4d4d8;
  --mat-slide-toggle-selected-hover-track-color: #d4d4d8;
  --mat-slide-toggle-selected-pressed-track-color: #d4d4d8;
  --mat-slide-toggle-selected-track-color: #d4d4d8;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-zinc .mat-mdc-slide-toggle.mat-accent,
.vex-theme-zinc.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-zinc .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-zinc .mat-mdc-slide-toggle.mat-warn,
.vex-theme-zinc.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-zinc .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-zinc .mat-mdc-radio-button.mat-primary,
.vex-theme-zinc.light .mat-mdc-radio-button.mat-primary,
.vex-theme-zinc .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #52525b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #52525b;
  --mat-radio-selected-hover-icon-color: #52525b;
  --mat-radio-selected-icon-color: #52525b;
  --mat-radio-selected-pressed-icon-color: #52525b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-radio-button.mat-accent,
.vex-theme-zinc.light .mat-mdc-radio-button.mat-accent,
.vex-theme-zinc .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-radio-button.mat-warn,
.vex-theme-zinc.light .mat-mdc-radio-button.mat-warn,
.vex-theme-zinc .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-slider-active-track-color: #52525b;
  --mat-slider-focus-handle-color: #52525b;
  --mat-slider-handle-color: #52525b;
  --mat-slider-hover-handle-color: #52525b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #52525b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #52525b 4%, transparent);
  --mat-slider-inactive-track-color: #52525b;
  --mat-slider-ripple-color: #52525b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #52525b;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-accent,
.vex-theme-zinc.light .mat-accent,
.vex-theme-zinc .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-zinc .mat-warn,
.vex-theme-zinc.light .mat-warn,
.vex-theme-zinc .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-zinc .mdc-list-item__start,
.vex-theme-zinc .mdc-list-item__end,
.vex-theme-zinc.light .mdc-list-item__start,
.vex-theme-zinc.light .mdc-list-item__end,
.vex-theme-zinc .light .mdc-list-item__start,
.vex-theme-zinc .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #52525b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #52525b;
  --mat-radio-selected-hover-icon-color: #52525b;
  --mat-radio-selected-icon-color: #52525b;
  --mat-radio-selected-pressed-icon-color: #52525b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-accent .mdc-list-item__start,
.vex-theme-zinc .mat-accent .mdc-list-item__end,
.vex-theme-zinc.light .mat-accent .mdc-list-item__start,
.vex-theme-zinc.light .mat-accent .mdc-list-item__end,
.vex-theme-zinc .light .mat-accent .mdc-list-item__start,
.vex-theme-zinc .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-warn .mdc-list-item__start,
.vex-theme-zinc .mat-warn .mdc-list-item__end,
.vex-theme-zinc.light .mat-warn .mdc-list-item__start,
.vex-theme-zinc.light .mat-warn .mdc-list-item__end,
.vex-theme-zinc .light .mat-warn .mdc-list-item__start,
.vex-theme-zinc .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-list-option,
.vex-theme-zinc.light .mat-mdc-list-option,
.vex-theme-zinc .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #52525b;
  --mat-checkbox-selected-hover-icon-color: #52525b;
  --mat-checkbox-selected-icon-color: #52525b;
  --mat-checkbox-selected-pressed-icon-color: #52525b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #52525b;
  --mat-checkbox-selected-hover-state-layer-color: #52525b;
  --mat-checkbox-selected-pressed-state-layer-color: #52525b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-list-option.mat-accent,
.vex-theme-zinc.light .mat-mdc-list-option.mat-accent,
.vex-theme-zinc .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-list-option.mat-warn,
.vex-theme-zinc.light .mat-mdc-list-option.mat-warn,
.vex-theme-zinc .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-zinc .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-zinc .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-zinc .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-zinc.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-zinc.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-zinc.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-zinc.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-zinc .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-zinc .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-zinc .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-zinc .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #52525b;
}
.vex-theme-zinc .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-zinc .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-zinc .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-zinc.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-zinc.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-zinc.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-zinc .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-zinc .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-zinc .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-zinc .mat-mdc-tab-group,
.vex-theme-zinc .mat-mdc-tab-nav-bar,
.vex-theme-zinc.light .mat-mdc-tab-group,
.vex-theme-zinc.light .mat-mdc-tab-nav-bar,
.vex-theme-zinc .light .mat-mdc-tab-group,
.vex-theme-zinc .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #52525b;
  --mat-tab-active-ripple-color: #52525b;
  --mat-tab-inactive-ripple-color: #52525b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #52525b;
  --mat-tab-active-hover-label-text-color: #52525b;
  --mat-tab-active-focus-indicator-color: #52525b;
  --mat-tab-active-hover-indicator-color: #52525b;
  --mat-tab-active-indicator-color: #52525b;
}
.vex-theme-zinc .mat-mdc-tab-group.mat-accent,
.vex-theme-zinc .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-zinc.light .mat-mdc-tab-group.mat-accent,
.vex-theme-zinc.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-zinc .light .mat-mdc-tab-group.mat-accent,
.vex-theme-zinc .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-zinc .mat-mdc-tab-group.mat-warn,
.vex-theme-zinc .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-zinc.light .mat-mdc-tab-group.mat-warn,
.vex-theme-zinc.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-zinc .light .mat-mdc-tab-group.mat-warn,
.vex-theme-zinc .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-zinc .mat-mdc-tab-group.mat-background-primary,
.vex-theme-zinc .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-zinc.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-zinc.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-zinc .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-zinc .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #52525b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-zinc .mat-mdc-tab-group.mat-background-accent,
.vex-theme-zinc .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-zinc.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-zinc.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-zinc .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-zinc .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-zinc .mat-mdc-tab-group.mat-background-warn,
.vex-theme-zinc .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-zinc.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-zinc.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-zinc .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-zinc .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-checkbox.mat-primary,
.vex-theme-zinc.light .mat-mdc-checkbox.mat-primary,
.vex-theme-zinc .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #52525b;
  --mat-checkbox-selected-hover-icon-color: #52525b;
  --mat-checkbox-selected-icon-color: #52525b;
  --mat-checkbox-selected-pressed-icon-color: #52525b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #52525b;
  --mat-checkbox-selected-hover-state-layer-color: #52525b;
  --mat-checkbox-selected-pressed-state-layer-color: #52525b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-checkbox.mat-warn,
.vex-theme-zinc.light .mat-mdc-checkbox.mat-warn,
.vex-theme-zinc .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-button.mat-primary,
.vex-theme-zinc .mat-mdc-unelevated-button.mat-primary,
.vex-theme-zinc .mat-mdc-raised-button.mat-primary,
.vex-theme-zinc .mat-mdc-outlined-button.mat-primary,
.vex-theme-zinc .mat-tonal-button.mat-primary,
.vex-theme-zinc.light .mat-mdc-button.mat-primary,
.vex-theme-zinc.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-zinc.light .mat-mdc-raised-button.mat-primary,
.vex-theme-zinc.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-zinc.light .mat-tonal-button.mat-primary,
.vex-theme-zinc .light .mat-mdc-button.mat-primary,
.vex-theme-zinc .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-zinc .light .mat-mdc-raised-button.mat-primary,
.vex-theme-zinc .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-zinc .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #52525b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #52525b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #52525b 12%, transparent);
  --mat-button-outlined-state-layer-color: #52525b;
  --mat-button-protected-container-color: #52525b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #52525b;
  --mat-button-text-ripple-color: color-mix(in srgb, #52525b 12%, transparent);
  --mat-button-text-state-layer-color: #52525b;
  --mat-button-tonal-container-color: #52525b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-zinc .mat-mdc-button.mat-accent,
.vex-theme-zinc .mat-mdc-unelevated-button.mat-accent,
.vex-theme-zinc .mat-mdc-raised-button.mat-accent,
.vex-theme-zinc .mat-mdc-outlined-button.mat-accent,
.vex-theme-zinc .mat-tonal-button.mat-accent,
.vex-theme-zinc.light .mat-mdc-button.mat-accent,
.vex-theme-zinc.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-zinc.light .mat-mdc-raised-button.mat-accent,
.vex-theme-zinc.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-zinc.light .mat-tonal-button.mat-accent,
.vex-theme-zinc .light .mat-mdc-button.mat-accent,
.vex-theme-zinc .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-zinc .light .mat-mdc-raised-button.mat-accent,
.vex-theme-zinc .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-zinc .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-zinc .mat-mdc-button.mat-warn,
.vex-theme-zinc .mat-mdc-unelevated-button.mat-warn,
.vex-theme-zinc .mat-mdc-raised-button.mat-warn,
.vex-theme-zinc .mat-mdc-outlined-button.mat-warn,
.vex-theme-zinc .mat-tonal-button.mat-warn,
.vex-theme-zinc.light .mat-mdc-button.mat-warn,
.vex-theme-zinc.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-zinc.light .mat-mdc-raised-button.mat-warn,
.vex-theme-zinc.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-zinc.light .mat-tonal-button.mat-warn,
.vex-theme-zinc .light .mat-mdc-button.mat-warn,
.vex-theme-zinc .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-zinc .light .mat-mdc-raised-button.mat-warn,
.vex-theme-zinc .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-zinc .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-icon-button.mat-primary,
.vex-theme-zinc.light .mat-mdc-icon-button.mat-primary,
.vex-theme-zinc .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #52525b;
  --mat-icon-button-state-layer-color: #52525b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #52525b 12%, transparent);
}
.vex-theme-zinc .mat-mdc-icon-button.mat-accent,
.vex-theme-zinc.light .mat-mdc-icon-button.mat-accent,
.vex-theme-zinc .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-zinc .mat-mdc-icon-button.mat-warn,
.vex-theme-zinc.light .mat-mdc-icon-button.mat-warn,
.vex-theme-zinc .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-mdc-fab.mat-primary,
.vex-theme-zinc .mat-mdc-mini-fab.mat-primary,
.vex-theme-zinc.light .mat-mdc-fab.mat-primary,
.vex-theme-zinc.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-zinc .light .mat-mdc-fab.mat-primary,
.vex-theme-zinc .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #52525b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #52525b 12%, transparent);
  --mat-fab-small-container-color: #52525b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-zinc .mat-mdc-fab.mat-accent,
.vex-theme-zinc .mat-mdc-mini-fab.mat-accent,
.vex-theme-zinc.light .mat-mdc-fab.mat-accent,
.vex-theme-zinc.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-zinc .light .mat-mdc-fab.mat-accent,
.vex-theme-zinc .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-zinc .mat-mdc-fab.mat-warn,
.vex-theme-zinc .mat-mdc-mini-fab.mat-warn,
.vex-theme-zinc.light .mat-mdc-fab.mat-warn,
.vex-theme-zinc.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-zinc .light .mat-mdc-fab.mat-warn,
.vex-theme-zinc .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #d4d4d8;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #52525b;
}
.vex-theme-zinc .mat-accent,
.vex-theme-zinc.light .mat-accent,
.vex-theme-zinc .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-zinc .mat-warn,
.vex-theme-zinc.light .mat-warn,
.vex-theme-zinc .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-badge-background-color: #52525b;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-zinc .mat-badge-accent,
.vex-theme-zinc.light .mat-badge-accent,
.vex-theme-zinc .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-zinc .mat-badge-warn,
.vex-theme-zinc.light .mat-badge-warn,
.vex-theme-zinc .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #52525b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #52525b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #52525b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #52525b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #52525b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #52525b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-datepicker-content.mat-accent,
.vex-theme-zinc .mat-datepicker-toggle-active.mat-accent,
.vex-theme-zinc.light .mat-datepicker-content.mat-accent,
.vex-theme-zinc.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-zinc .light .mat-datepicker-content.mat-accent,
.vex-theme-zinc .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-datepicker-content.mat-warn,
.vex-theme-zinc .mat-datepicker-toggle-active.mat-warn,
.vex-theme-zinc.light .mat-datepicker-content.mat-warn,
.vex-theme-zinc.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-zinc .light .mat-datepicker-content.mat-warn,
.vex-theme-zinc .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-zinc .mat-icon.mat-primary,
.vex-theme-zinc.light .mat-icon.mat-primary,
.vex-theme-zinc .light .mat-icon.mat-primary {
  --mat-icon-color: #52525b;
}
.vex-theme-zinc .mat-icon.mat-accent,
.vex-theme-zinc.light .mat-icon.mat-accent,
.vex-theme-zinc .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-zinc .mat-icon.mat-warn,
.vex-theme-zinc.light .mat-icon.mat-warn,
.vex-theme-zinc .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #52525b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #52525b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #52525b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-zinc .mat-step-header.mat-accent,
.vex-theme-zinc.light .mat-step-header.mat-accent,
.vex-theme-zinc .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-zinc .mat-step-header.mat-warn,
.vex-theme-zinc.light .mat-step-header.mat-warn,
.vex-theme-zinc .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-zinc .mat-toolbar.mat-primary,
.vex-theme-zinc.light .mat-toolbar.mat-primary,
.vex-theme-zinc .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #52525b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-zinc .mat-toolbar.mat-accent,
.vex-theme-zinc.light .mat-toolbar.mat-accent,
.vex-theme-zinc .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-zinc .mat-toolbar.mat-warn,
.vex-theme-zinc.light .mat-toolbar.mat-warn,
.vex-theme-zinc .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-zinc,
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #71717a;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-zinc.dark .mat-accent,
.vex-theme-zinc .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-zinc.dark .mat-warn,
.vex-theme-zinc .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-zinc.dark .mat-primary,
.vex-theme-zinc .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #71717a;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #71717a;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-zinc.dark .mat-accent,
.vex-theme-zinc .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-zinc.dark .mat-warn,
.vex-theme-zinc .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-zinc.dark .mat-mdc-progress-bar,
.vex-theme-zinc .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #71717a;
  --mat-progress-bar-track-color: rgba(113, 113, 122, 0.25);
}
.vex-theme-zinc.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-zinc .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-zinc.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-zinc .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #71717a 87%, transparent);
  --mat-form-field-filled-caret-color: #71717a;
  --mat-form-field-filled-focus-active-indicator-color: #71717a;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #71717a 87%, transparent);
  --mat-form-field-outlined-caret-color: #71717a;
  --mat-form-field-outlined-focus-outline-color: #71717a;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #71717a 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-zinc.dark .mat-mdc-form-field.mat-accent,
.vex-theme-zinc .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-zinc.dark .mat-mdc-form-field.mat-warn,
.vex-theme-zinc .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #71717a;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-zinc.dark .mat-mdc-form-field.mat-accent,
.vex-theme-zinc .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-zinc.dark .mat-mdc-form-field.mat-warn,
.vex-theme-zinc .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-zinc.dark .mat-mdc-standard-chip,
.vex-theme-zinc .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-zinc.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-zinc.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-zinc .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-zinc .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #71717a;
  --mat-chip-elevated-disabled-container-color: #71717a;
  --mat-chip-elevated-selected-container-color: #71717a;
  --mat-chip-flat-disabled-selected-container-color: #71717a;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-zinc.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-zinc .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-zinc .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-zinc.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-zinc .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-zinc .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #71717a;
  --mat-slide-toggle-selected-handle-color: #71717a;
  --mat-slide-toggle-selected-hover-state-layer-color: #71717a;
  --mat-slide-toggle-selected-pressed-state-layer-color: #71717a;
  --mat-slide-toggle-selected-focus-handle-color: #71717a;
  --mat-slide-toggle-selected-hover-handle-color: #71717a;
  --mat-slide-toggle-selected-pressed-handle-color: #71717a;
  --mat-slide-toggle-selected-focus-track-color: #52525b;
  --mat-slide-toggle-selected-hover-track-color: #52525b;
  --mat-slide-toggle-selected-pressed-track-color: #52525b;
  --mat-slide-toggle-selected-track-color: #52525b;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-zinc.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-zinc .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-zinc.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-zinc .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-zinc.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-zinc .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #71717a;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #71717a;
  --mat-radio-selected-hover-icon-color: #71717a;
  --mat-radio-selected-icon-color: #71717a;
  --mat-radio-selected-pressed-icon-color: #71717a;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-zinc.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-zinc .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-zinc.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-zinc .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-slider-active-track-color: #71717a;
  --mat-slider-focus-handle-color: #71717a;
  --mat-slider-handle-color: #71717a;
  --mat-slider-hover-handle-color: #71717a;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #71717a 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #71717a 4%, transparent);
  --mat-slider-inactive-track-color: #71717a;
  --mat-slider-ripple-color: #71717a;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #71717a;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-zinc.dark .mat-accent,
.vex-theme-zinc .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-zinc.dark .mat-warn,
.vex-theme-zinc .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-zinc.dark .mdc-list-item__start,
.vex-theme-zinc.dark .mdc-list-item__end,
.vex-theme-zinc .dark .mdc-list-item__start,
.vex-theme-zinc .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #71717a;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #71717a;
  --mat-radio-selected-hover-icon-color: #71717a;
  --mat-radio-selected-icon-color: #71717a;
  --mat-radio-selected-pressed-icon-color: #71717a;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-zinc.dark .mat-accent .mdc-list-item__start,
.vex-theme-zinc.dark .mat-accent .mdc-list-item__end,
.vex-theme-zinc .dark .mat-accent .mdc-list-item__start,
.vex-theme-zinc .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-zinc.dark .mat-warn .mdc-list-item__start,
.vex-theme-zinc.dark .mat-warn .mdc-list-item__end,
.vex-theme-zinc .dark .mat-warn .mdc-list-item__start,
.vex-theme-zinc .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-zinc.dark .mat-mdc-list-option,
.vex-theme-zinc .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #71717a;
  --mat-checkbox-selected-hover-icon-color: #71717a;
  --mat-checkbox-selected-icon-color: #71717a;
  --mat-checkbox-selected-pressed-icon-color: #71717a;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #71717a;
  --mat-checkbox-selected-hover-state-layer-color: #71717a;
  --mat-checkbox-selected-pressed-state-layer-color: #71717a;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-list-option.mat-accent,
.vex-theme-zinc .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-list-option.mat-warn,
.vex-theme-zinc .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-zinc.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-zinc.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-zinc.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-zinc .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-zinc .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-zinc .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-zinc .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #71717a;
}
.vex-theme-zinc.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-zinc.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-zinc.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-zinc .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-zinc .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-zinc .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-zinc.dark .mat-mdc-tab-group,
.vex-theme-zinc.dark .mat-mdc-tab-nav-bar,
.vex-theme-zinc .dark .mat-mdc-tab-group,
.vex-theme-zinc .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #71717a;
  --mat-tab-active-ripple-color: #71717a;
  --mat-tab-inactive-ripple-color: #71717a;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #71717a;
  --mat-tab-active-hover-label-text-color: #71717a;
  --mat-tab-active-focus-indicator-color: #71717a;
  --mat-tab-active-hover-indicator-color: #71717a;
  --mat-tab-active-indicator-color: #71717a;
}
.vex-theme-zinc.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-zinc.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-zinc .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-zinc .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-zinc.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-zinc.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-zinc .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-zinc .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-zinc.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-zinc.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-zinc .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-zinc .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #71717a;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-zinc.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-zinc .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-zinc .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-zinc.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-zinc .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-zinc .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-zinc .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #71717a;
  --mat-checkbox-selected-hover-icon-color: #71717a;
  --mat-checkbox-selected-icon-color: #71717a;
  --mat-checkbox-selected-pressed-icon-color: #71717a;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #71717a;
  --mat-checkbox-selected-hover-state-layer-color: #71717a;
  --mat-checkbox-selected-pressed-state-layer-color: #71717a;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-zinc .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-button.mat-primary,
.vex-theme-zinc.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-zinc.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-zinc.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-zinc.dark .mat-tonal-button.mat-primary,
.vex-theme-zinc .dark .mat-mdc-button.mat-primary,
.vex-theme-zinc .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-zinc .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-zinc .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-zinc .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #71717a;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #71717a;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #71717a 12%, transparent);
  --mat-button-outlined-state-layer-color: #71717a;
  --mat-button-protected-container-color: #71717a;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #71717a;
  --mat-button-text-ripple-color: color-mix(in srgb, #71717a 12%, transparent);
  --mat-button-text-state-layer-color: #71717a;
  --mat-button-tonal-container-color: #71717a;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-button.mat-accent,
.vex-theme-zinc.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-zinc.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-zinc.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-zinc.dark .mat-tonal-button.mat-accent,
.vex-theme-zinc .dark .mat-mdc-button.mat-accent,
.vex-theme-zinc .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-zinc .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-zinc .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-zinc .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-button.mat-warn,
.vex-theme-zinc.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-zinc.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-zinc.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-zinc.dark .mat-tonal-button.mat-warn,
.vex-theme-zinc .dark .mat-mdc-button.mat-warn,
.vex-theme-zinc .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-zinc .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-zinc .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-zinc .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-zinc .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #71717a;
  --mat-icon-button-state-layer-color: #71717a;
  --mat-icon-button-ripple-color: color-mix(in srgb, #71717a 12%, transparent);
}
.vex-theme-zinc.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-zinc .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-zinc.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-zinc .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-zinc.dark .mat-mdc-fab.mat-primary,
.vex-theme-zinc.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-zinc .dark .mat-mdc-fab.mat-primary,
.vex-theme-zinc .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #71717a;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #71717a 12%, transparent);
  --mat-fab-small-container-color: #71717a;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-fab.mat-accent,
.vex-theme-zinc.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-zinc .dark .mat-mdc-fab.mat-accent,
.vex-theme-zinc .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-zinc.dark .mat-mdc-fab.mat-warn,
.vex-theme-zinc.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-zinc .dark .mat-mdc-fab.mat-warn,
.vex-theme-zinc .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #52525b;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #71717a;
}
.vex-theme-zinc.dark .mat-accent,
.vex-theme-zinc .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-zinc.dark .mat-warn,
.vex-theme-zinc .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-badge-background-color: #71717a;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-zinc.dark .mat-badge-accent,
.vex-theme-zinc .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-zinc.dark .mat-badge-warn,
.vex-theme-zinc .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #71717a 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #71717a;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #71717a 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #71717a 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #71717a 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #71717a;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-zinc.dark .mat-datepicker-content.mat-accent,
.vex-theme-zinc.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-zinc .dark .mat-datepicker-content.mat-accent,
.vex-theme-zinc .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-zinc.dark .mat-datepicker-content.mat-warn,
.vex-theme-zinc.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-zinc .dark .mat-datepicker-content.mat-warn,
.vex-theme-zinc .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-zinc.dark .mat-icon.mat-primary,
.vex-theme-zinc .dark .mat-icon.mat-primary {
  --mat-icon-color: #71717a;
}
.vex-theme-zinc.dark .mat-icon.mat-accent,
.vex-theme-zinc .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-zinc.dark .mat-icon.mat-warn,
.vex-theme-zinc .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #71717a;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #71717a;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #71717a;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-zinc.dark .mat-step-header.mat-accent,
.vex-theme-zinc .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-zinc.dark .mat-step-header.mat-warn,
.vex-theme-zinc .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-zinc.dark .mat-toolbar.mat-primary,
.vex-theme-zinc .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #71717a;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-zinc.dark .mat-toolbar.mat-accent,
.vex-theme-zinc .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-zinc.dark .mat-toolbar.mat-warn,
.vex-theme-zinc .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #525252;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-neutral .mat-accent,
.vex-theme-neutral.light .mat-accent,
.vex-theme-neutral .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-neutral .mat-warn,
.vex-theme-neutral.light .mat-warn,
.vex-theme-neutral .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-neutral .mat-primary,
.vex-theme-neutral.light .mat-primary,
.vex-theme-neutral .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #525252;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #525252;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-neutral .mat-accent,
.vex-theme-neutral.light .mat-accent,
.vex-theme-neutral .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-neutral .mat-warn,
.vex-theme-neutral.light .mat-warn,
.vex-theme-neutral .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-neutral .mat-mdc-progress-bar,
.vex-theme-neutral.light .mat-mdc-progress-bar,
.vex-theme-neutral .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #525252;
  --mat-progress-bar-track-color: rgba(82, 82, 82, 0.25);
}
.vex-theme-neutral .mat-mdc-progress-bar.mat-accent,
.vex-theme-neutral.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-neutral .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-neutral .mat-mdc-progress-bar.mat-warn,
.vex-theme-neutral.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-neutral .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #525252 87%, transparent);
  --mat-form-field-filled-caret-color: #525252;
  --mat-form-field-filled-focus-active-indicator-color: #525252;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #525252 87%, transparent);
  --mat-form-field-outlined-caret-color: #525252;
  --mat-form-field-outlined-focus-outline-color: #525252;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #525252 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-neutral .mat-mdc-form-field.mat-accent,
.vex-theme-neutral.light .mat-mdc-form-field.mat-accent,
.vex-theme-neutral .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-neutral .mat-mdc-form-field.mat-warn,
.vex-theme-neutral.light .mat-mdc-form-field.mat-warn,
.vex-theme-neutral .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #525252;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-neutral .mat-mdc-form-field.mat-accent,
.vex-theme-neutral.light .mat-mdc-form-field.mat-accent,
.vex-theme-neutral .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-neutral .mat-mdc-form-field.mat-warn,
.vex-theme-neutral.light .mat-mdc-form-field.mat-warn,
.vex-theme-neutral .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-neutral .mat-mdc-standard-chip,
.vex-theme-neutral.light .mat-mdc-standard-chip,
.vex-theme-neutral .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-neutral .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-neutral.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-neutral.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-neutral .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-neutral .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #525252;
  --mat-chip-elevated-disabled-container-color: #525252;
  --mat-chip-elevated-selected-container-color: #525252;
  --mat-chip-flat-disabled-selected-container-color: #525252;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-neutral .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-neutral .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-neutral.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-neutral.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-neutral .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-neutral .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-neutral .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-neutral .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-neutral.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-neutral.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-neutral .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-neutral .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #525252;
  --mat-slide-toggle-selected-handle-color: #525252;
  --mat-slide-toggle-selected-hover-state-layer-color: #525252;
  --mat-slide-toggle-selected-pressed-state-layer-color: #525252;
  --mat-slide-toggle-selected-focus-handle-color: #525252;
  --mat-slide-toggle-selected-hover-handle-color: #525252;
  --mat-slide-toggle-selected-pressed-handle-color: #525252;
  --mat-slide-toggle-selected-focus-track-color: #d4d4d4;
  --mat-slide-toggle-selected-hover-track-color: #d4d4d4;
  --mat-slide-toggle-selected-pressed-track-color: #d4d4d4;
  --mat-slide-toggle-selected-track-color: #d4d4d4;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-neutral .mat-mdc-slide-toggle.mat-accent,
.vex-theme-neutral.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-neutral .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-neutral .mat-mdc-slide-toggle.mat-warn,
.vex-theme-neutral.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-neutral .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-neutral .mat-mdc-radio-button.mat-primary,
.vex-theme-neutral.light .mat-mdc-radio-button.mat-primary,
.vex-theme-neutral .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #525252;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #525252;
  --mat-radio-selected-hover-icon-color: #525252;
  --mat-radio-selected-icon-color: #525252;
  --mat-radio-selected-pressed-icon-color: #525252;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-radio-button.mat-accent,
.vex-theme-neutral.light .mat-mdc-radio-button.mat-accent,
.vex-theme-neutral .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-radio-button.mat-warn,
.vex-theme-neutral.light .mat-mdc-radio-button.mat-warn,
.vex-theme-neutral .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-slider-active-track-color: #525252;
  --mat-slider-focus-handle-color: #525252;
  --mat-slider-handle-color: #525252;
  --mat-slider-hover-handle-color: #525252;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #525252 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #525252 4%, transparent);
  --mat-slider-inactive-track-color: #525252;
  --mat-slider-ripple-color: #525252;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #525252;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-accent,
.vex-theme-neutral.light .mat-accent,
.vex-theme-neutral .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-neutral .mat-warn,
.vex-theme-neutral.light .mat-warn,
.vex-theme-neutral .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-neutral .mdc-list-item__start,
.vex-theme-neutral .mdc-list-item__end,
.vex-theme-neutral.light .mdc-list-item__start,
.vex-theme-neutral.light .mdc-list-item__end,
.vex-theme-neutral .light .mdc-list-item__start,
.vex-theme-neutral .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #525252;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #525252;
  --mat-radio-selected-hover-icon-color: #525252;
  --mat-radio-selected-icon-color: #525252;
  --mat-radio-selected-pressed-icon-color: #525252;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-accent .mdc-list-item__start,
.vex-theme-neutral .mat-accent .mdc-list-item__end,
.vex-theme-neutral.light .mat-accent .mdc-list-item__start,
.vex-theme-neutral.light .mat-accent .mdc-list-item__end,
.vex-theme-neutral .light .mat-accent .mdc-list-item__start,
.vex-theme-neutral .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-warn .mdc-list-item__start,
.vex-theme-neutral .mat-warn .mdc-list-item__end,
.vex-theme-neutral.light .mat-warn .mdc-list-item__start,
.vex-theme-neutral.light .mat-warn .mdc-list-item__end,
.vex-theme-neutral .light .mat-warn .mdc-list-item__start,
.vex-theme-neutral .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-list-option,
.vex-theme-neutral.light .mat-mdc-list-option,
.vex-theme-neutral .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #525252;
  --mat-checkbox-selected-hover-icon-color: #525252;
  --mat-checkbox-selected-icon-color: #525252;
  --mat-checkbox-selected-pressed-icon-color: #525252;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #525252;
  --mat-checkbox-selected-hover-state-layer-color: #525252;
  --mat-checkbox-selected-pressed-state-layer-color: #525252;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-list-option.mat-accent,
.vex-theme-neutral.light .mat-mdc-list-option.mat-accent,
.vex-theme-neutral .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-list-option.mat-warn,
.vex-theme-neutral.light .mat-mdc-list-option.mat-warn,
.vex-theme-neutral .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-neutral .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-neutral .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-neutral .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-neutral.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-neutral.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-neutral.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-neutral.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-neutral .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-neutral .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-neutral .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-neutral .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #525252;
}
.vex-theme-neutral .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-neutral .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-neutral .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-neutral.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-neutral.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-neutral.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-neutral .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-neutral .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-neutral .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-neutral .mat-mdc-tab-group,
.vex-theme-neutral .mat-mdc-tab-nav-bar,
.vex-theme-neutral.light .mat-mdc-tab-group,
.vex-theme-neutral.light .mat-mdc-tab-nav-bar,
.vex-theme-neutral .light .mat-mdc-tab-group,
.vex-theme-neutral .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #525252;
  --mat-tab-active-ripple-color: #525252;
  --mat-tab-inactive-ripple-color: #525252;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #525252;
  --mat-tab-active-hover-label-text-color: #525252;
  --mat-tab-active-focus-indicator-color: #525252;
  --mat-tab-active-hover-indicator-color: #525252;
  --mat-tab-active-indicator-color: #525252;
}
.vex-theme-neutral .mat-mdc-tab-group.mat-accent,
.vex-theme-neutral .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-neutral.light .mat-mdc-tab-group.mat-accent,
.vex-theme-neutral.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-neutral .light .mat-mdc-tab-group.mat-accent,
.vex-theme-neutral .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-neutral .mat-mdc-tab-group.mat-warn,
.vex-theme-neutral .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-neutral.light .mat-mdc-tab-group.mat-warn,
.vex-theme-neutral.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-neutral .light .mat-mdc-tab-group.mat-warn,
.vex-theme-neutral .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-neutral .mat-mdc-tab-group.mat-background-primary,
.vex-theme-neutral .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-neutral.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-neutral.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-neutral .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-neutral .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #525252;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-neutral .mat-mdc-tab-group.mat-background-accent,
.vex-theme-neutral .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-neutral.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-neutral.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-neutral .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-neutral .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-neutral .mat-mdc-tab-group.mat-background-warn,
.vex-theme-neutral .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-neutral.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-neutral.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-neutral .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-neutral .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-checkbox.mat-primary,
.vex-theme-neutral.light .mat-mdc-checkbox.mat-primary,
.vex-theme-neutral .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #525252;
  --mat-checkbox-selected-hover-icon-color: #525252;
  --mat-checkbox-selected-icon-color: #525252;
  --mat-checkbox-selected-pressed-icon-color: #525252;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #525252;
  --mat-checkbox-selected-hover-state-layer-color: #525252;
  --mat-checkbox-selected-pressed-state-layer-color: #525252;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-checkbox.mat-warn,
.vex-theme-neutral.light .mat-mdc-checkbox.mat-warn,
.vex-theme-neutral .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-button.mat-primary,
.vex-theme-neutral .mat-mdc-unelevated-button.mat-primary,
.vex-theme-neutral .mat-mdc-raised-button.mat-primary,
.vex-theme-neutral .mat-mdc-outlined-button.mat-primary,
.vex-theme-neutral .mat-tonal-button.mat-primary,
.vex-theme-neutral.light .mat-mdc-button.mat-primary,
.vex-theme-neutral.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-neutral.light .mat-mdc-raised-button.mat-primary,
.vex-theme-neutral.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-neutral.light .mat-tonal-button.mat-primary,
.vex-theme-neutral .light .mat-mdc-button.mat-primary,
.vex-theme-neutral .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-neutral .light .mat-mdc-raised-button.mat-primary,
.vex-theme-neutral .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-neutral .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #525252;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #525252;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #525252 12%, transparent);
  --mat-button-outlined-state-layer-color: #525252;
  --mat-button-protected-container-color: #525252;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #525252;
  --mat-button-text-ripple-color: color-mix(in srgb, #525252 12%, transparent);
  --mat-button-text-state-layer-color: #525252;
  --mat-button-tonal-container-color: #525252;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-neutral .mat-mdc-button.mat-accent,
.vex-theme-neutral .mat-mdc-unelevated-button.mat-accent,
.vex-theme-neutral .mat-mdc-raised-button.mat-accent,
.vex-theme-neutral .mat-mdc-outlined-button.mat-accent,
.vex-theme-neutral .mat-tonal-button.mat-accent,
.vex-theme-neutral.light .mat-mdc-button.mat-accent,
.vex-theme-neutral.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-neutral.light .mat-mdc-raised-button.mat-accent,
.vex-theme-neutral.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-neutral.light .mat-tonal-button.mat-accent,
.vex-theme-neutral .light .mat-mdc-button.mat-accent,
.vex-theme-neutral .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-neutral .light .mat-mdc-raised-button.mat-accent,
.vex-theme-neutral .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-neutral .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-neutral .mat-mdc-button.mat-warn,
.vex-theme-neutral .mat-mdc-unelevated-button.mat-warn,
.vex-theme-neutral .mat-mdc-raised-button.mat-warn,
.vex-theme-neutral .mat-mdc-outlined-button.mat-warn,
.vex-theme-neutral .mat-tonal-button.mat-warn,
.vex-theme-neutral.light .mat-mdc-button.mat-warn,
.vex-theme-neutral.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-neutral.light .mat-mdc-raised-button.mat-warn,
.vex-theme-neutral.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-neutral.light .mat-tonal-button.mat-warn,
.vex-theme-neutral .light .mat-mdc-button.mat-warn,
.vex-theme-neutral .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-neutral .light .mat-mdc-raised-button.mat-warn,
.vex-theme-neutral .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-neutral .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-icon-button.mat-primary,
.vex-theme-neutral.light .mat-mdc-icon-button.mat-primary,
.vex-theme-neutral .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #525252;
  --mat-icon-button-state-layer-color: #525252;
  --mat-icon-button-ripple-color: color-mix(in srgb, #525252 12%, transparent);
}
.vex-theme-neutral .mat-mdc-icon-button.mat-accent,
.vex-theme-neutral.light .mat-mdc-icon-button.mat-accent,
.vex-theme-neutral .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-neutral .mat-mdc-icon-button.mat-warn,
.vex-theme-neutral.light .mat-mdc-icon-button.mat-warn,
.vex-theme-neutral .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-mdc-fab.mat-primary,
.vex-theme-neutral .mat-mdc-mini-fab.mat-primary,
.vex-theme-neutral.light .mat-mdc-fab.mat-primary,
.vex-theme-neutral.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-neutral .light .mat-mdc-fab.mat-primary,
.vex-theme-neutral .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #525252;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #525252 12%, transparent);
  --mat-fab-small-container-color: #525252;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-neutral .mat-mdc-fab.mat-accent,
.vex-theme-neutral .mat-mdc-mini-fab.mat-accent,
.vex-theme-neutral.light .mat-mdc-fab.mat-accent,
.vex-theme-neutral.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-neutral .light .mat-mdc-fab.mat-accent,
.vex-theme-neutral .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-neutral .mat-mdc-fab.mat-warn,
.vex-theme-neutral .mat-mdc-mini-fab.mat-warn,
.vex-theme-neutral.light .mat-mdc-fab.mat-warn,
.vex-theme-neutral.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-neutral .light .mat-mdc-fab.mat-warn,
.vex-theme-neutral .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #d4d4d4;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #525252;
}
.vex-theme-neutral .mat-accent,
.vex-theme-neutral.light .mat-accent,
.vex-theme-neutral .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-neutral .mat-warn,
.vex-theme-neutral.light .mat-warn,
.vex-theme-neutral .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-badge-background-color: #525252;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-neutral .mat-badge-accent,
.vex-theme-neutral.light .mat-badge-accent,
.vex-theme-neutral .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-neutral .mat-badge-warn,
.vex-theme-neutral.light .mat-badge-warn,
.vex-theme-neutral .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #525252 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #525252;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #525252 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #525252 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #525252 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #525252;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-datepicker-content.mat-accent,
.vex-theme-neutral .mat-datepicker-toggle-active.mat-accent,
.vex-theme-neutral.light .mat-datepicker-content.mat-accent,
.vex-theme-neutral.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-neutral .light .mat-datepicker-content.mat-accent,
.vex-theme-neutral .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-datepicker-content.mat-warn,
.vex-theme-neutral .mat-datepicker-toggle-active.mat-warn,
.vex-theme-neutral.light .mat-datepicker-content.mat-warn,
.vex-theme-neutral.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-neutral .light .mat-datepicker-content.mat-warn,
.vex-theme-neutral .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-neutral .mat-icon.mat-primary,
.vex-theme-neutral.light .mat-icon.mat-primary,
.vex-theme-neutral .light .mat-icon.mat-primary {
  --mat-icon-color: #525252;
}
.vex-theme-neutral .mat-icon.mat-accent,
.vex-theme-neutral.light .mat-icon.mat-accent,
.vex-theme-neutral .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-neutral .mat-icon.mat-warn,
.vex-theme-neutral.light .mat-icon.mat-warn,
.vex-theme-neutral .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #525252;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #525252;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #525252;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-neutral .mat-step-header.mat-accent,
.vex-theme-neutral.light .mat-step-header.mat-accent,
.vex-theme-neutral .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-neutral .mat-step-header.mat-warn,
.vex-theme-neutral.light .mat-step-header.mat-warn,
.vex-theme-neutral .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-neutral .mat-toolbar.mat-primary,
.vex-theme-neutral.light .mat-toolbar.mat-primary,
.vex-theme-neutral .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #525252;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-neutral .mat-toolbar.mat-accent,
.vex-theme-neutral.light .mat-toolbar.mat-accent,
.vex-theme-neutral .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-neutral .mat-toolbar.mat-warn,
.vex-theme-neutral.light .mat-toolbar.mat-warn,
.vex-theme-neutral .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-neutral,
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #737373;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-neutral.dark .mat-accent,
.vex-theme-neutral .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-neutral.dark .mat-warn,
.vex-theme-neutral .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-neutral.dark .mat-primary,
.vex-theme-neutral .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #737373;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #737373;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-neutral.dark .mat-accent,
.vex-theme-neutral .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-neutral.dark .mat-warn,
.vex-theme-neutral .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-neutral.dark .mat-mdc-progress-bar,
.vex-theme-neutral .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #737373;
  --mat-progress-bar-track-color: rgba(115, 115, 115, 0.25);
}
.vex-theme-neutral.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-neutral .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-neutral.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-neutral .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #737373 87%, transparent);
  --mat-form-field-filled-caret-color: #737373;
  --mat-form-field-filled-focus-active-indicator-color: #737373;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #737373 87%, transparent);
  --mat-form-field-outlined-caret-color: #737373;
  --mat-form-field-outlined-focus-outline-color: #737373;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #737373 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-neutral.dark .mat-mdc-form-field.mat-accent,
.vex-theme-neutral .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-neutral.dark .mat-mdc-form-field.mat-warn,
.vex-theme-neutral .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #737373;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-neutral.dark .mat-mdc-form-field.mat-accent,
.vex-theme-neutral .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-neutral.dark .mat-mdc-form-field.mat-warn,
.vex-theme-neutral .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-neutral.dark .mat-mdc-standard-chip,
.vex-theme-neutral .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-neutral.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-neutral.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-neutral .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-neutral .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #737373;
  --mat-chip-elevated-disabled-container-color: #737373;
  --mat-chip-elevated-selected-container-color: #737373;
  --mat-chip-flat-disabled-selected-container-color: #737373;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-neutral.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-neutral .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-neutral .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-neutral.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-neutral .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-neutral .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #737373;
  --mat-slide-toggle-selected-handle-color: #737373;
  --mat-slide-toggle-selected-hover-state-layer-color: #737373;
  --mat-slide-toggle-selected-pressed-state-layer-color: #737373;
  --mat-slide-toggle-selected-focus-handle-color: #737373;
  --mat-slide-toggle-selected-hover-handle-color: #737373;
  --mat-slide-toggle-selected-pressed-handle-color: #737373;
  --mat-slide-toggle-selected-focus-track-color: #525252;
  --mat-slide-toggle-selected-hover-track-color: #525252;
  --mat-slide-toggle-selected-pressed-track-color: #525252;
  --mat-slide-toggle-selected-track-color: #525252;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-neutral.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-neutral .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-neutral.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-neutral .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-neutral.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-neutral .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #737373;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #737373;
  --mat-radio-selected-hover-icon-color: #737373;
  --mat-radio-selected-icon-color: #737373;
  --mat-radio-selected-pressed-icon-color: #737373;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-neutral.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-neutral .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-neutral.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-neutral .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-slider-active-track-color: #737373;
  --mat-slider-focus-handle-color: #737373;
  --mat-slider-handle-color: #737373;
  --mat-slider-hover-handle-color: #737373;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #737373 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #737373 4%, transparent);
  --mat-slider-inactive-track-color: #737373;
  --mat-slider-ripple-color: #737373;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #737373;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-neutral.dark .mat-accent,
.vex-theme-neutral .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-neutral.dark .mat-warn,
.vex-theme-neutral .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-neutral.dark .mdc-list-item__start,
.vex-theme-neutral.dark .mdc-list-item__end,
.vex-theme-neutral .dark .mdc-list-item__start,
.vex-theme-neutral .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #737373;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #737373;
  --mat-radio-selected-hover-icon-color: #737373;
  --mat-radio-selected-icon-color: #737373;
  --mat-radio-selected-pressed-icon-color: #737373;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-neutral.dark .mat-accent .mdc-list-item__start,
.vex-theme-neutral.dark .mat-accent .mdc-list-item__end,
.vex-theme-neutral .dark .mat-accent .mdc-list-item__start,
.vex-theme-neutral .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-neutral.dark .mat-warn .mdc-list-item__start,
.vex-theme-neutral.dark .mat-warn .mdc-list-item__end,
.vex-theme-neutral .dark .mat-warn .mdc-list-item__start,
.vex-theme-neutral .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-neutral.dark .mat-mdc-list-option,
.vex-theme-neutral .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #737373;
  --mat-checkbox-selected-hover-icon-color: #737373;
  --mat-checkbox-selected-icon-color: #737373;
  --mat-checkbox-selected-pressed-icon-color: #737373;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #737373;
  --mat-checkbox-selected-hover-state-layer-color: #737373;
  --mat-checkbox-selected-pressed-state-layer-color: #737373;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-list-option.mat-accent,
.vex-theme-neutral .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-list-option.mat-warn,
.vex-theme-neutral .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-neutral.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-neutral.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-neutral.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-neutral .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-neutral .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-neutral .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-neutral .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #737373;
}
.vex-theme-neutral.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-neutral.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-neutral.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-neutral .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-neutral .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-neutral .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-neutral.dark .mat-mdc-tab-group,
.vex-theme-neutral.dark .mat-mdc-tab-nav-bar,
.vex-theme-neutral .dark .mat-mdc-tab-group,
.vex-theme-neutral .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #737373;
  --mat-tab-active-ripple-color: #737373;
  --mat-tab-inactive-ripple-color: #737373;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #737373;
  --mat-tab-active-hover-label-text-color: #737373;
  --mat-tab-active-focus-indicator-color: #737373;
  --mat-tab-active-hover-indicator-color: #737373;
  --mat-tab-active-indicator-color: #737373;
}
.vex-theme-neutral.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-neutral.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-neutral .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-neutral .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-neutral.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-neutral.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-neutral .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-neutral .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-neutral.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-neutral.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-neutral .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-neutral .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #737373;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-neutral.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-neutral .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-neutral .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-neutral.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-neutral .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-neutral .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-neutral .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #737373;
  --mat-checkbox-selected-hover-icon-color: #737373;
  --mat-checkbox-selected-icon-color: #737373;
  --mat-checkbox-selected-pressed-icon-color: #737373;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #737373;
  --mat-checkbox-selected-hover-state-layer-color: #737373;
  --mat-checkbox-selected-pressed-state-layer-color: #737373;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-neutral .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-button.mat-primary,
.vex-theme-neutral.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-neutral.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-neutral.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-neutral.dark .mat-tonal-button.mat-primary,
.vex-theme-neutral .dark .mat-mdc-button.mat-primary,
.vex-theme-neutral .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-neutral .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-neutral .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-neutral .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #737373;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #737373;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #737373 12%, transparent);
  --mat-button-outlined-state-layer-color: #737373;
  --mat-button-protected-container-color: #737373;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #737373;
  --mat-button-text-ripple-color: color-mix(in srgb, #737373 12%, transparent);
  --mat-button-text-state-layer-color: #737373;
  --mat-button-tonal-container-color: #737373;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-button.mat-accent,
.vex-theme-neutral.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-neutral.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-neutral.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-neutral.dark .mat-tonal-button.mat-accent,
.vex-theme-neutral .dark .mat-mdc-button.mat-accent,
.vex-theme-neutral .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-neutral .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-neutral .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-neutral .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-button.mat-warn,
.vex-theme-neutral.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-neutral.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-neutral.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-neutral.dark .mat-tonal-button.mat-warn,
.vex-theme-neutral .dark .mat-mdc-button.mat-warn,
.vex-theme-neutral .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-neutral .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-neutral .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-neutral .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-neutral .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #737373;
  --mat-icon-button-state-layer-color: #737373;
  --mat-icon-button-ripple-color: color-mix(in srgb, #737373 12%, transparent);
}
.vex-theme-neutral.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-neutral .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-neutral.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-neutral .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-neutral.dark .mat-mdc-fab.mat-primary,
.vex-theme-neutral.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-neutral .dark .mat-mdc-fab.mat-primary,
.vex-theme-neutral .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #737373;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #737373 12%, transparent);
  --mat-fab-small-container-color: #737373;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-fab.mat-accent,
.vex-theme-neutral.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-neutral .dark .mat-mdc-fab.mat-accent,
.vex-theme-neutral .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-neutral.dark .mat-mdc-fab.mat-warn,
.vex-theme-neutral.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-neutral .dark .mat-mdc-fab.mat-warn,
.vex-theme-neutral .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #525252;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #737373;
}
.vex-theme-neutral.dark .mat-accent,
.vex-theme-neutral .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-neutral.dark .mat-warn,
.vex-theme-neutral .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-badge-background-color: #737373;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-neutral.dark .mat-badge-accent,
.vex-theme-neutral .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-neutral.dark .mat-badge-warn,
.vex-theme-neutral .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #737373 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #737373;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #737373 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #737373 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #737373 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #737373;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-neutral.dark .mat-datepicker-content.mat-accent,
.vex-theme-neutral.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-neutral .dark .mat-datepicker-content.mat-accent,
.vex-theme-neutral .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-neutral.dark .mat-datepicker-content.mat-warn,
.vex-theme-neutral.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-neutral .dark .mat-datepicker-content.mat-warn,
.vex-theme-neutral .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-neutral.dark .mat-icon.mat-primary,
.vex-theme-neutral .dark .mat-icon.mat-primary {
  --mat-icon-color: #737373;
}
.vex-theme-neutral.dark .mat-icon.mat-accent,
.vex-theme-neutral .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-neutral.dark .mat-icon.mat-warn,
.vex-theme-neutral .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #737373;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #737373;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #737373;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-neutral.dark .mat-step-header.mat-accent,
.vex-theme-neutral .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-neutral.dark .mat-step-header.mat-warn,
.vex-theme-neutral .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-neutral.dark .mat-toolbar.mat-primary,
.vex-theme-neutral .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #737373;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-neutral.dark .mat-toolbar.mat-accent,
.vex-theme-neutral .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-neutral.dark .mat-toolbar.mat-warn,
.vex-theme-neutral .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #57534e;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-stone .mat-accent,
.vex-theme-stone.light .mat-accent,
.vex-theme-stone .light .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-stone .mat-warn,
.vex-theme-stone.light .mat-warn,
.vex-theme-stone .light .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-stone .mat-primary,
.vex-theme-stone.light .mat-primary,
.vex-theme-stone .light .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #57534e;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #57534e;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-stone .mat-accent,
.vex-theme-stone.light .mat-accent,
.vex-theme-stone .light .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-stone .mat-warn,
.vex-theme-stone.light .mat-warn,
.vex-theme-stone .light .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-stone .mat-mdc-progress-bar,
.vex-theme-stone.light .mat-mdc-progress-bar,
.vex-theme-stone .light .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #57534e;
  --mat-progress-bar-track-color: rgba(87, 83, 78, 0.25);
}
.vex-theme-stone .mat-mdc-progress-bar.mat-accent,
.vex-theme-stone.light .mat-mdc-progress-bar.mat-accent,
.vex-theme-stone .light .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-stone .mat-mdc-progress-bar.mat-warn,
.vex-theme-stone.light .mat-mdc-progress-bar.mat-warn,
.vex-theme-stone .light .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #57534e 87%, transparent);
  --mat-form-field-filled-caret-color: #57534e;
  --mat-form-field-filled-focus-active-indicator-color: #57534e;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #57534e 87%, transparent);
  --mat-form-field-outlined-caret-color: #57534e;
  --mat-form-field-outlined-focus-outline-color: #57534e;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #57534e 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-stone .mat-mdc-form-field.mat-accent,
.vex-theme-stone.light .mat-mdc-form-field.mat-accent,
.vex-theme-stone .light .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-stone .mat-mdc-form-field.mat-warn,
.vex-theme-stone.light .mat-mdc-form-field.mat-warn,
.vex-theme-stone .light .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #57534e;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-stone .mat-mdc-form-field.mat-accent,
.vex-theme-stone.light .mat-mdc-form-field.mat-accent,
.vex-theme-stone .light .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-stone .mat-mdc-form-field.mat-warn,
.vex-theme-stone.light .mat-mdc-form-field.mat-warn,
.vex-theme-stone .light .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.vex-theme-stone .mat-mdc-standard-chip,
.vex-theme-stone.light .mat-mdc-standard-chip,
.vex-theme-stone .light .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-stone .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-stone.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-stone.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-stone .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-stone .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #57534e;
  --mat-chip-elevated-disabled-container-color: #57534e;
  --mat-chip-elevated-selected-container-color: #57534e;
  --mat-chip-flat-disabled-selected-container-color: #57534e;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-stone .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-stone .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-stone.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-stone.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-stone .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-stone .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-stone .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-stone .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-stone.light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-stone.light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-stone .light .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-stone .light .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #57534e;
  --mat-slide-toggle-selected-handle-color: #57534e;
  --mat-slide-toggle-selected-hover-state-layer-color: #57534e;
  --mat-slide-toggle-selected-pressed-state-layer-color: #57534e;
  --mat-slide-toggle-selected-focus-handle-color: #57534e;
  --mat-slide-toggle-selected-hover-handle-color: #57534e;
  --mat-slide-toggle-selected-pressed-handle-color: #57534e;
  --mat-slide-toggle-selected-focus-track-color: #d6d3d1;
  --mat-slide-toggle-selected-hover-track-color: #d6d3d1;
  --mat-slide-toggle-selected-pressed-track-color: #d6d3d1;
  --mat-slide-toggle-selected-track-color: #d6d3d1;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.vex-theme-stone .mat-mdc-slide-toggle.mat-accent,
.vex-theme-stone.light .mat-mdc-slide-toggle.mat-accent,
.vex-theme-stone .light .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #fcd34d;
  --mat-slide-toggle-selected-hover-track-color: #fcd34d;
  --mat-slide-toggle-selected-pressed-track-color: #fcd34d;
  --mat-slide-toggle-selected-track-color: #fcd34d;
}
.vex-theme-stone .mat-mdc-slide-toggle.mat-warn,
.vex-theme-stone.light .mat-mdc-slide-toggle.mat-warn,
.vex-theme-stone .light .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #fca5a5;
  --mat-slide-toggle-selected-hover-track-color: #fca5a5;
  --mat-slide-toggle-selected-pressed-track-color: #fca5a5;
  --mat-slide-toggle-selected-track-color: #fca5a5;
}
.vex-theme-stone .mat-mdc-radio-button.mat-primary,
.vex-theme-stone.light .mat-mdc-radio-button.mat-primary,
.vex-theme-stone .light .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #57534e;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #57534e;
  --mat-radio-selected-hover-icon-color: #57534e;
  --mat-radio-selected-icon-color: #57534e;
  --mat-radio-selected-pressed-icon-color: #57534e;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-radio-button.mat-accent,
.vex-theme-stone.light .mat-mdc-radio-button.mat-accent,
.vex-theme-stone .light .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-radio-button.mat-warn,
.vex-theme-stone.light .mat-mdc-radio-button.mat-warn,
.vex-theme-stone .light .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-slider-active-track-color: #57534e;
  --mat-slider-focus-handle-color: #57534e;
  --mat-slider-handle-color: #57534e;
  --mat-slider-hover-handle-color: #57534e;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #57534e 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #57534e 4%, transparent);
  --mat-slider-inactive-track-color: #57534e;
  --mat-slider-ripple-color: #57534e;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #57534e;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-accent,
.vex-theme-stone.light .mat-accent,
.vex-theme-stone .light .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-stone .mat-warn,
.vex-theme-stone.light .mat-warn,
.vex-theme-stone .light .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-stone .mdc-list-item__start,
.vex-theme-stone .mdc-list-item__end,
.vex-theme-stone.light .mdc-list-item__start,
.vex-theme-stone.light .mdc-list-item__end,
.vex-theme-stone .light .mdc-list-item__start,
.vex-theme-stone .light .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #57534e;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #57534e;
  --mat-radio-selected-hover-icon-color: #57534e;
  --mat-radio-selected-icon-color: #57534e;
  --mat-radio-selected-pressed-icon-color: #57534e;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-accent .mdc-list-item__start,
.vex-theme-stone .mat-accent .mdc-list-item__end,
.vex-theme-stone.light .mat-accent .mdc-list-item__start,
.vex-theme-stone.light .mat-accent .mdc-list-item__end,
.vex-theme-stone .light .mat-accent .mdc-list-item__start,
.vex-theme-stone .light .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-warn .mdc-list-item__start,
.vex-theme-stone .mat-warn .mdc-list-item__end,
.vex-theme-stone.light .mat-warn .mdc-list-item__start,
.vex-theme-stone.light .mat-warn .mdc-list-item__end,
.vex-theme-stone .light .mat-warn .mdc-list-item__start,
.vex-theme-stone .light .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-list-option,
.vex-theme-stone.light .mat-mdc-list-option,
.vex-theme-stone .light .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #57534e;
  --mat-checkbox-selected-hover-icon-color: #57534e;
  --mat-checkbox-selected-icon-color: #57534e;
  --mat-checkbox-selected-pressed-icon-color: #57534e;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #57534e;
  --mat-checkbox-selected-hover-state-layer-color: #57534e;
  --mat-checkbox-selected-pressed-state-layer-color: #57534e;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-list-option.mat-accent,
.vex-theme-stone.light .mat-mdc-list-option.mat-accent,
.vex-theme-stone .light .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-list-option.mat-warn,
.vex-theme-stone.light .mat-mdc-list-option.mat-warn,
.vex-theme-stone .light .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-stone .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-stone .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-stone .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-stone.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-stone.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-stone.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-stone.light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-stone .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-stone .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-stone .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-stone .light .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #57534e;
}
.vex-theme-stone .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-stone .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-stone .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-stone.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-stone.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-stone.light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-stone .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-stone .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-stone .light .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-stone .mat-mdc-tab-group,
.vex-theme-stone .mat-mdc-tab-nav-bar,
.vex-theme-stone.light .mat-mdc-tab-group,
.vex-theme-stone.light .mat-mdc-tab-nav-bar,
.vex-theme-stone .light .mat-mdc-tab-group,
.vex-theme-stone .light .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #57534e;
  --mat-tab-active-ripple-color: #57534e;
  --mat-tab-inactive-ripple-color: #57534e;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #57534e;
  --mat-tab-active-hover-label-text-color: #57534e;
  --mat-tab-active-focus-indicator-color: #57534e;
  --mat-tab-active-hover-indicator-color: #57534e;
  --mat-tab-active-indicator-color: #57534e;
}
.vex-theme-stone .mat-mdc-tab-group.mat-accent,
.vex-theme-stone .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-stone.light .mat-mdc-tab-group.mat-accent,
.vex-theme-stone.light .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-stone .light .mat-mdc-tab-group.mat-accent,
.vex-theme-stone .light .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-stone .mat-mdc-tab-group.mat-warn,
.vex-theme-stone .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-stone.light .mat-mdc-tab-group.mat-warn,
.vex-theme-stone.light .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-stone .light .mat-mdc-tab-group.mat-warn,
.vex-theme-stone .light .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-stone .mat-mdc-tab-group.mat-background-primary,
.vex-theme-stone .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-stone.light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-stone.light .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-stone .light .mat-mdc-tab-group.mat-background-primary,
.vex-theme-stone .light .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #57534e;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-stone .mat-mdc-tab-group.mat-background-accent,
.vex-theme-stone .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-stone.light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-stone.light .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-stone .light .mat-mdc-tab-group.mat-background-accent,
.vex-theme-stone .light .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-stone .mat-mdc-tab-group.mat-background-warn,
.vex-theme-stone .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-stone.light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-stone.light .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-stone .light .mat-mdc-tab-group.mat-background-warn,
.vex-theme-stone .light .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-checkbox.mat-primary,
.vex-theme-stone.light .mat-mdc-checkbox.mat-primary,
.vex-theme-stone .light .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #57534e;
  --mat-checkbox-selected-hover-icon-color: #57534e;
  --mat-checkbox-selected-icon-color: #57534e;
  --mat-checkbox-selected-pressed-icon-color: #57534e;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #57534e;
  --mat-checkbox-selected-hover-state-layer-color: #57534e;
  --mat-checkbox-selected-pressed-state-layer-color: #57534e;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-checkbox.mat-warn,
.vex-theme-stone.light .mat-mdc-checkbox.mat-warn,
.vex-theme-stone .light .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-button.mat-primary,
.vex-theme-stone .mat-mdc-unelevated-button.mat-primary,
.vex-theme-stone .mat-mdc-raised-button.mat-primary,
.vex-theme-stone .mat-mdc-outlined-button.mat-primary,
.vex-theme-stone .mat-tonal-button.mat-primary,
.vex-theme-stone.light .mat-mdc-button.mat-primary,
.vex-theme-stone.light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-stone.light .mat-mdc-raised-button.mat-primary,
.vex-theme-stone.light .mat-mdc-outlined-button.mat-primary,
.vex-theme-stone.light .mat-tonal-button.mat-primary,
.vex-theme-stone .light .mat-mdc-button.mat-primary,
.vex-theme-stone .light .mat-mdc-unelevated-button.mat-primary,
.vex-theme-stone .light .mat-mdc-raised-button.mat-primary,
.vex-theme-stone .light .mat-mdc-outlined-button.mat-primary,
.vex-theme-stone .light .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #57534e;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #57534e;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #57534e 12%, transparent);
  --mat-button-outlined-state-layer-color: #57534e;
  --mat-button-protected-container-color: #57534e;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #57534e;
  --mat-button-text-ripple-color: color-mix(in srgb, #57534e 12%, transparent);
  --mat-button-text-state-layer-color: #57534e;
  --mat-button-tonal-container-color: #57534e;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-stone .mat-mdc-button.mat-accent,
.vex-theme-stone .mat-mdc-unelevated-button.mat-accent,
.vex-theme-stone .mat-mdc-raised-button.mat-accent,
.vex-theme-stone .mat-mdc-outlined-button.mat-accent,
.vex-theme-stone .mat-tonal-button.mat-accent,
.vex-theme-stone.light .mat-mdc-button.mat-accent,
.vex-theme-stone.light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-stone.light .mat-mdc-raised-button.mat-accent,
.vex-theme-stone.light .mat-mdc-outlined-button.mat-accent,
.vex-theme-stone.light .mat-tonal-button.mat-accent,
.vex-theme-stone .light .mat-mdc-button.mat-accent,
.vex-theme-stone .light .mat-mdc-unelevated-button.mat-accent,
.vex-theme-stone .light .mat-mdc-raised-button.mat-accent,
.vex-theme-stone .light .mat-mdc-outlined-button.mat-accent,
.vex-theme-stone .light .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-stone .mat-mdc-button.mat-warn,
.vex-theme-stone .mat-mdc-unelevated-button.mat-warn,
.vex-theme-stone .mat-mdc-raised-button.mat-warn,
.vex-theme-stone .mat-mdc-outlined-button.mat-warn,
.vex-theme-stone .mat-tonal-button.mat-warn,
.vex-theme-stone.light .mat-mdc-button.mat-warn,
.vex-theme-stone.light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-stone.light .mat-mdc-raised-button.mat-warn,
.vex-theme-stone.light .mat-mdc-outlined-button.mat-warn,
.vex-theme-stone.light .mat-tonal-button.mat-warn,
.vex-theme-stone .light .mat-mdc-button.mat-warn,
.vex-theme-stone .light .mat-mdc-unelevated-button.mat-warn,
.vex-theme-stone .light .mat-mdc-raised-button.mat-warn,
.vex-theme-stone .light .mat-mdc-outlined-button.mat-warn,
.vex-theme-stone .light .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-icon-button.mat-primary,
.vex-theme-stone.light .mat-mdc-icon-button.mat-primary,
.vex-theme-stone .light .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #57534e;
  --mat-icon-button-state-layer-color: #57534e;
  --mat-icon-button-ripple-color: color-mix(in srgb, #57534e 12%, transparent);
}
.vex-theme-stone .mat-mdc-icon-button.mat-accent,
.vex-theme-stone.light .mat-mdc-icon-button.mat-accent,
.vex-theme-stone .light .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-stone .mat-mdc-icon-button.mat-warn,
.vex-theme-stone.light .mat-mdc-icon-button.mat-warn,
.vex-theme-stone .light .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-mdc-fab.mat-primary,
.vex-theme-stone .mat-mdc-mini-fab.mat-primary,
.vex-theme-stone.light .mat-mdc-fab.mat-primary,
.vex-theme-stone.light .mat-mdc-mini-fab.mat-primary,
.vex-theme-stone .light .mat-mdc-fab.mat-primary,
.vex-theme-stone .light .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #57534e;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #57534e 12%, transparent);
  --mat-fab-small-container-color: #57534e;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-stone .mat-mdc-fab.mat-accent,
.vex-theme-stone .mat-mdc-mini-fab.mat-accent,
.vex-theme-stone.light .mat-mdc-fab.mat-accent,
.vex-theme-stone.light .mat-mdc-mini-fab.mat-accent,
.vex-theme-stone .light .mat-mdc-fab.mat-accent,
.vex-theme-stone .light .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-stone .mat-mdc-fab.mat-warn,
.vex-theme-stone .mat-mdc-mini-fab.mat-warn,
.vex-theme-stone.light .mat-mdc-fab.mat-warn,
.vex-theme-stone.light .mat-mdc-mini-fab.mat-warn,
.vex-theme-stone .light .mat-mdc-fab.mat-warn,
.vex-theme-stone .light .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #d6d3d1;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-progress-spinner-active-indicator-color: #57534e;
}
.vex-theme-stone .mat-accent,
.vex-theme-stone.light .mat-accent,
.vex-theme-stone .light .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-stone .mat-warn,
.vex-theme-stone.light .mat-warn,
.vex-theme-stone .light .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-badge-background-color: #57534e;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.vex-theme-stone .mat-badge-accent,
.vex-theme-stone.light .mat-badge-accent,
.vex-theme-stone .light .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-stone .mat-badge-warn,
.vex-theme-stone.light .mat-badge-warn,
.vex-theme-stone .light .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #57534e 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #57534e;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #57534e 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #57534e 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #57534e 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #57534e;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-datepicker-content.mat-accent,
.vex-theme-stone .mat-datepicker-toggle-active.mat-accent,
.vex-theme-stone.light .mat-datepicker-content.mat-accent,
.vex-theme-stone.light .mat-datepicker-toggle-active.mat-accent,
.vex-theme-stone .light .mat-datepicker-content.mat-accent,
.vex-theme-stone .light .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-datepicker-content.mat-warn,
.vex-theme-stone .mat-datepicker-toggle-active.mat-warn,
.vex-theme-stone.light .mat-datepicker-content.mat-warn,
.vex-theme-stone.light .mat-datepicker-toggle-active.mat-warn,
.vex-theme-stone .light .mat-datepicker-content.mat-warn,
.vex-theme-stone .light .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-icon-color: inherit;
}
.vex-theme-stone .mat-icon.mat-primary,
.vex-theme-stone.light .mat-icon.mat-primary,
.vex-theme-stone .light .mat-icon.mat-primary {
  --mat-icon-color: #57534e;
}
.vex-theme-stone .mat-icon.mat-accent,
.vex-theme-stone.light .mat-icon.mat-accent,
.vex-theme-stone .light .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-stone .mat-icon.mat-warn,
.vex-theme-stone.light .mat-icon.mat-warn,
.vex-theme-stone .light .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #57534e;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #57534e;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #57534e;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-stone .mat-step-header.mat-accent,
.vex-theme-stone.light .mat-step-header.mat-accent,
.vex-theme-stone .light .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-stone .mat-step-header.mat-warn,
.vex-theme-stone.light .mat-step-header.mat-warn,
.vex-theme-stone .light .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.vex-theme-stone .mat-toolbar.mat-primary,
.vex-theme-stone.light .mat-toolbar.mat-primary,
.vex-theme-stone .light .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #57534e;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-stone .mat-toolbar.mat-accent,
.vex-theme-stone.light .mat-toolbar.mat-accent,
.vex-theme-stone .light .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-stone .mat-toolbar.mat-warn,
.vex-theme-stone.light .mat-toolbar.mat-warn,
.vex-theme-stone .light .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-stone,
.vex-theme-stone.light,
.vex-theme-stone .light {
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-timepicker-container-background-color: white;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-app-background-color: #303030;
  --mat-app-text-color: white;
  --mat-app-elevation-shadow-level-0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7:
    0px 4px 5px -2px rgba(0, 0, 0, 0.2),
    0px 7px 10px 1px rgba(0, 0, 0, 0.14),
    0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9:
    0px 5px 6px -3px rgba(0, 0, 0, 0.2),
    0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10:
    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11:
    0px 6px 7px -4px rgba(0, 0, 0, 0.2),
    0px 11px 15px 1px rgba(0, 0, 0, 0.14),
    0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 13px 19px 2px rgba(0, 0, 0, 0.14),
    0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14:
    0px 7px 9px -4px rgba(0, 0, 0, 0.2),
    0px 14px 21px 2px rgba(0, 0, 0, 0.14),
    0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15:
    0px 8px 9px -5px rgba(0, 0, 0, 0.2),
    0px 15px 22px 2px rgba(0, 0, 0, 0.14),
    0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17:
    0px 8px 11px -5px rgba(0, 0, 0, 0.2),
    0px 17px 26px 2px rgba(0, 0, 0, 0.14),
    0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18:
    0px 9px 11px -5px rgba(0, 0, 0, 0.2),
    0px 18px 28px 2px rgba(0, 0, 0, 0.14),
    0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19:
    0px 9px 12px -6px rgba(0, 0, 0, 0.2),
    0px 19px 29px 2px rgba(0, 0, 0, 0.14),
    0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 20px 31px 3px rgba(0, 0, 0, 0.14),
    0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21:
    0px 10px 13px -6px rgba(0, 0, 0, 0.2),
    0px 21px 33px 3px rgba(0, 0, 0, 0.14),
    0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22:
    0px 10px 14px -6px rgba(0, 0, 0, 0.2),
    0px 22px 35px 3px rgba(0, 0, 0, 0.14),
    0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23:
    0px 11px 14px -7px rgba(0, 0, 0, 0.2),
    0px 23px 36px 3px rgba(0, 0, 0, 0.14),
    0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-label-text-color: #78716c;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-stone.dark .mat-accent,
.vex-theme-stone .dark .mat-accent {
  --mat-option-selected-state-label-text-color: #f59e0b;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-stone.dark .mat-warn,
.vex-theme-stone .dark .mat-warn {
  --mat-option-selected-state-label-text-color: #ef4444;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, white 12%, transparent);
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-optgroup-label-text-color: white;
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-stone.dark .mat-primary,
.vex-theme-stone .dark .mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #78716c;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #78716c;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-stone.dark .mat-accent,
.vex-theme-stone .dark .mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #f59e0b;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f59e0b;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-stone.dark .mat-warn,
.vex-theme-stone .dark .mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #ef4444;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #303030;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ef4444;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-card-elevated-container-color: #424242;
  --mat-card-elevated-container-elevation:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: #424242;
  --mat-card-outlined-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.7);
  --mat-card-filled-container-color: #424242;
  --mat-card-filled-container-elevation:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.vex-theme-stone.dark .mat-mdc-progress-bar,
.vex-theme-stone .dark .mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #78716c;
  --mat-progress-bar-track-color: rgba(120, 113, 108, 0.25);
}
.vex-theme-stone.dark .mat-mdc-progress-bar.mat-accent,
.vex-theme-stone .dark .mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #f59e0b;
  --mat-progress-bar-track-color: rgba(245, 158, 11, 0.25);
}
.vex-theme-stone.dark .mat-mdc-progress-bar.mat-warn,
.vex-theme-stone .dark .mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #ef4444;
  --mat-progress-bar-track-color: rgba(239, 68, 68, 0.25);
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-tooltip-container-color: white;
  --mat-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #78716c 87%, transparent);
  --mat-form-field-filled-caret-color: #78716c;
  --mat-form-field-filled-focus-active-indicator-color: #78716c;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #78716c 87%, transparent);
  --mat-form-field-outlined-caret-color: #78716c;
  --mat-form-field-outlined-focus-outline-color: #78716c;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #78716c 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-state-layer-color: white;
  --mat-form-field-error-text-color: #ef4444;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #4a4a4a;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, white 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-color: white;
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-error-hover-label-text-color: #ef4444;
  --mat-form-field-filled-error-focus-label-text-color: #ef4444;
  --mat-form-field-filled-error-label-text-color: #ef4444;
  --mat-form-field-filled-error-caret-color: #ef4444;
  --mat-form-field-filled-active-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: white;
  --mat-form-field-filled-error-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-error-hover-active-indicator-color: #ef4444;
  --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-hover-label-text-color: white;
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-color: white;
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(255, 255, 255, 0.7);
  --mat-form-field-outlined-error-caret-color: #ef4444;
  --mat-form-field-outlined-error-focus-label-text-color: #ef4444;
  --mat-form-field-outlined-error-label-text-color: #ef4444;
  --mat-form-field-outlined-error-hover-label-text-color: #ef4444;
  --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, white 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: white;
  --mat-form-field-outlined-error-focus-outline-color: #ef4444;
  --mat-form-field-outlined-error-hover-outline-color: #ef4444;
  --mat-form-field-outlined-error-outline-color: #ef4444;
}
.vex-theme-stone.dark .mat-mdc-form-field.mat-accent,
.vex-theme-stone .dark .mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-filled-caret-color: #f59e0b;
  --mat-form-field-filled-focus-active-indicator-color: #f59e0b;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
  --mat-form-field-outlined-caret-color: #f59e0b;
  --mat-form-field-outlined-focus-outline-color: #f59e0b;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f59e0b 87%, transparent);
}
.vex-theme-stone.dark .mat-mdc-form-field.mat-warn,
.vex-theme-stone .dark .mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-filled-caret-color: #ef4444;
  --mat-form-field-filled-focus-active-indicator-color: #ef4444;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
  --mat-form-field-outlined-caret-color: #ef4444;
  --mat-form-field-outlined-focus-outline-color: #ef4444;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ef4444 87%, transparent);
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #78716c;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-stone.dark .mat-mdc-form-field.mat-accent,
.vex-theme-stone .dark .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #f59e0b;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-stone.dark .mat-mdc-form-field.mat-warn,
.vex-theme-stone .dark .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: white;
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, 0.7);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);
  --mat-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);
  --mat-select-focused-arrow-color: #ef4444;
  --mat-select-invalid-arrow-color: #ef4444;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-autocomplete-background-color: #424242;
  --mat-dialog-container-color: #424242;
  --mat-dialog-subhead-color: white;
  --mat-dialog-supporting-text-color: rgba(255, 255, 255, 0.7);
}
.vex-theme-stone.dark .mat-mdc-standard-chip,
.vex-theme-stone .dark .mat-mdc-standard-chip {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.vex-theme-stone.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-stone.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.vex-theme-stone .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.vex-theme-stone .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #78716c;
  --mat-chip-elevated-disabled-container-color: #78716c;
  --mat-chip-elevated-selected-container-color: #78716c;
  --mat-chip-flat-disabled-selected-container-color: #78716c;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-stone.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent,
.vex-theme-stone .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.vex-theme-stone .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #f59e0b;
  --mat-chip-elevated-disabled-container-color: #f59e0b;
  --mat-chip-elevated-selected-container-color: #f59e0b;
  --mat-chip-flat-disabled-selected-container-color: #f59e0b;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-stone.dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn,
.vex-theme-stone .dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.vex-theme-stone .dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: #fff;
  --mat-chip-elevated-container-color: #ef4444;
  --mat-chip-elevated-disabled-container-color: #ef4444;
  --mat-chip-elevated-selected-container-color: #ef4444;
  --mat-chip-flat-disabled-selected-container-color: #ef4444;
  --mat-chip-focus-state-layer-color: white;
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: white;
  --mat-chip-label-text-color: #fff;
  --mat-chip-selected-disabled-trailing-icon-color: #fff;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: #fff;
  --mat-chip-selected-trailing-icon-color: #fff;
  --mat-chip-with-icon-disabled-icon-color: #fff;
  --mat-chip-with-icon-icon-color: #fff;
  --mat-chip-with-icon-selected-icon-color: #fff;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: #fff;
  --mat-chip-with-trailing-icon-trailing-icon-color: #fff;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #78716c;
  --mat-slide-toggle-selected-handle-color: #78716c;
  --mat-slide-toggle-selected-hover-state-layer-color: #78716c;
  --mat-slide-toggle-selected-pressed-state-layer-color: #78716c;
  --mat-slide-toggle-selected-focus-handle-color: #78716c;
  --mat-slide-toggle-selected-hover-handle-color: #78716c;
  --mat-slide-toggle-selected-pressed-handle-color: #78716c;
  --mat-slide-toggle-selected-focus-track-color: #57534e;
  --mat-slide-toggle-selected-hover-track-color: #57534e;
  --mat-slide-toggle-selected-pressed-track-color: #57534e;
  --mat-slide-toggle-selected-track-color: #57534e;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: white;
  --mat-slide-toggle-disabled-selected-track-color: white;
  --mat-slide-toggle-disabled-unselected-handle-color: white;
  --mat-slide-toggle-disabled-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-disabled-unselected-track-color: white;
  --mat-slide-toggle-handle-elevation-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: #424242;
  --mat-slide-toggle-label-text-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-focus-state-layer-color: white;
  --mat-slide-toggle-unselected-focus-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-icon-color: #4a4a4a;
  --mat-slide-toggle-unselected-handle-color: rgba(255, 255, 255, 0.7);
  --mat-slide-toggle-unselected-hover-state-layer-color: white;
  --mat-slide-toggle-unselected-hover-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(255, 255, 255, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: white;
  --mat-slide-toggle-unselected-track-color: rgba(255, 255, 255, 0.12);
}
.vex-theme-stone.dark .mat-mdc-slide-toggle.mat-accent,
.vex-theme-stone .dark .mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f59e0b;
  --mat-slide-toggle-selected-focus-handle-color: #f59e0b;
  --mat-slide-toggle-selected-hover-handle-color: #f59e0b;
  --mat-slide-toggle-selected-pressed-handle-color: #f59e0b;
  --mat-slide-toggle-selected-focus-track-color: #d97706;
  --mat-slide-toggle-selected-hover-track-color: #d97706;
  --mat-slide-toggle-selected-pressed-track-color: #d97706;
  --mat-slide-toggle-selected-track-color: #d97706;
}
.vex-theme-stone.dark .mat-mdc-slide-toggle.mat-warn,
.vex-theme-stone .dark .mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: #fff;
  --mat-slide-toggle-disabled-selected-icon-color: #fff;
  --mat-slide-toggle-selected-focus-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ef4444;
  --mat-slide-toggle-selected-focus-handle-color: #ef4444;
  --mat-slide-toggle-selected-hover-handle-color: #ef4444;
  --mat-slide-toggle-selected-pressed-handle-color: #ef4444;
  --mat-slide-toggle-selected-focus-track-color: #dc2626;
  --mat-slide-toggle-selected-hover-track-color: #dc2626;
  --mat-slide-toggle-selected-pressed-track-color: #dc2626;
  --mat-slide-toggle-selected-track-color: #dc2626;
}
.vex-theme-stone.dark .mat-mdc-radio-button.mat-primary,
.vex-theme-stone .dark .mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #78716c;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #78716c;
  --mat-radio-selected-hover-icon-color: #78716c;
  --mat-radio-selected-icon-color: #78716c;
  --mat-radio-selected-pressed-icon-color: #78716c;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-stone.dark .mat-mdc-radio-button.mat-accent,
.vex-theme-stone .dark .mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-stone.dark .mat-mdc-radio-button.mat-warn,
.vex-theme-stone .dark .mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-slider-active-track-color: #78716c;
  --mat-slider-focus-handle-color: #78716c;
  --mat-slider-handle-color: #78716c;
  --mat-slider-hover-handle-color: #78716c;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #78716c 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #78716c 4%, transparent);
  --mat-slider-inactive-track-color: #78716c;
  --mat-slider-ripple-color: #78716c;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #78716c;
  --mat-slider-disabled-active-track-color: white;
  --mat-slider-disabled-handle-color: white;
  --mat-slider-disabled-inactive-track-color: white;
  --mat-slider-label-container-color: white;
  --mat-slider-label-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: white;
  --mat-slider-with-tick-marks-disabled-container-color: white;
}
.vex-theme-stone.dark .mat-accent,
.vex-theme-stone .dark .mat-accent {
  --mat-slider-active-track-color: #f59e0b;
  --mat-slider-focus-handle-color: #f59e0b;
  --mat-slider-handle-color: #f59e0b;
  --mat-slider-hover-handle-color: #f59e0b;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-slider-inactive-track-color: #f59e0b;
  --mat-slider-ripple-color: #f59e0b;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #f59e0b;
}
.vex-theme-stone.dark .mat-warn,
.vex-theme-stone .dark .mat-warn {
  --mat-slider-active-track-color: #ef4444;
  --mat-slider-focus-handle-color: #ef4444;
  --mat-slider-handle-color: #ef4444;
  --mat-slider-hover-handle-color: #ef4444;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-slider-inactive-track-color: #ef4444;
  --mat-slider-ripple-color: #ef4444;
  --mat-slider-with-tick-marks-active-container-color: #fff;
  --mat-slider-with-tick-marks-inactive-container-color: #ef4444;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-menu-container-color: #424242;
  --mat-menu-divider-color: rgba(255, 255, 255, 0.12);
  --mat-list-list-item-label-text-color: white;
  --mat-list-list-item-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-disabled-label-text-color: white;
  --mat-list-list-item-disabled-leading-icon-color: white;
  --mat-list-list-item-disabled-trailing-icon-color: white;
  --mat-list-list-item-hover-label-text-color: white;
  --mat-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-hover-state-layer-color: white;
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, 0.7);
  --mat-list-list-item-focus-label-text-color: white;
  --mat-list-list-item-focus-state-layer-color: white;
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.vex-theme-stone.dark .mdc-list-item__start,
.vex-theme-stone.dark .mdc-list-item__end,
.vex-theme-stone .dark .mdc-list-item__start,
.vex-theme-stone .dark .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #78716c;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #78716c;
  --mat-radio-selected-hover-icon-color: #78716c;
  --mat-radio-selected-icon-color: #78716c;
  --mat-radio-selected-pressed-icon-color: #78716c;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-stone.dark .mat-accent .mdc-list-item__start,
.vex-theme-stone.dark .mat-accent .mdc-list-item__end,
.vex-theme-stone .dark .mat-accent .mdc-list-item__start,
.vex-theme-stone .dark .mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f59e0b;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #f59e0b;
  --mat-radio-selected-hover-icon-color: #f59e0b;
  --mat-radio-selected-icon-color: #f59e0b;
  --mat-radio-selected-pressed-icon-color: #f59e0b;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-stone.dark .mat-warn .mdc-list-item__start,
.vex-theme-stone.dark .mat-warn .mdc-list-item__end,
.vex-theme-stone .dark .mat-warn .mdc-list-item__start,
.vex-theme-stone .dark .mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ef4444;
  --mat-radio-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-radio-disabled-selected-icon-color: white;
  --mat-radio-disabled-unselected-icon-color: white;
  --mat-radio-label-text-color: white;
  --mat-radio-ripple-color: white;
  --mat-radio-selected-focus-icon-color: #ef4444;
  --mat-radio-selected-hover-icon-color: #ef4444;
  --mat-radio-selected-icon-color: #ef4444;
  --mat-radio-selected-pressed-icon-color: #ef4444;
  --mat-radio-unselected-focus-icon-color: white;
  --mat-radio-unselected-hover-icon-color: white;
  --mat-radio-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-radio-unselected-pressed-icon-color: white;
}
.vex-theme-stone.dark .mat-mdc-list-option,
.vex-theme-stone .dark .mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #78716c;
  --mat-checkbox-selected-hover-icon-color: #78716c;
  --mat-checkbox-selected-icon-color: #78716c;
  --mat-checkbox-selected-pressed-icon-color: #78716c;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #78716c;
  --mat-checkbox-selected-hover-state-layer-color: #78716c;
  --mat-checkbox-selected-pressed-state-layer-color: #78716c;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-list-option.mat-accent,
.vex-theme-stone .dark .mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-list-option.mat-warn,
.vex-theme-stone .dark .mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-stone.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-stone.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-stone.dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start,
.vex-theme-stone .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.vex-theme-stone .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.vex-theme-stone .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.vex-theme-stone .dark .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #78716c;
}
.vex-theme-stone.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-stone.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-stone.dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end,
.vex-theme-stone .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.vex-theme-stone .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.vex-theme-stone .dark .mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-paginator-container-text-color: white;
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, 0.7);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-stone.dark .mat-mdc-tab-group,
.vex-theme-stone.dark .mat-mdc-tab-nav-bar,
.vex-theme-stone .dark .mat-mdc-tab-group,
.vex-theme-stone .dark .mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #78716c;
  --mat-tab-active-ripple-color: #78716c;
  --mat-tab-inactive-ripple-color: #78716c;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #78716c;
  --mat-tab-active-hover-label-text-color: #78716c;
  --mat-tab-active-focus-indicator-color: #78716c;
  --mat-tab-active-hover-indicator-color: #78716c;
  --mat-tab-active-indicator-color: #78716c;
}
.vex-theme-stone.dark .mat-mdc-tab-group.mat-accent,
.vex-theme-stone.dark .mat-mdc-tab-nav-bar.mat-accent,
.vex-theme-stone .dark .mat-mdc-tab-group.mat-accent,
.vex-theme-stone .dark .mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #f59e0b;
  --mat-tab-active-ripple-color: #f59e0b;
  --mat-tab-inactive-ripple-color: #f59e0b;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #f59e0b;
  --mat-tab-active-hover-label-text-color: #f59e0b;
  --mat-tab-active-focus-indicator-color: #f59e0b;
  --mat-tab-active-hover-indicator-color: #f59e0b;
  --mat-tab-active-indicator-color: #f59e0b;
}
.vex-theme-stone.dark .mat-mdc-tab-group.mat-warn,
.vex-theme-stone.dark .mat-mdc-tab-nav-bar.mat-warn,
.vex-theme-stone .dark .mat-mdc-tab-group.mat-warn,
.vex-theme-stone .dark .mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(255, 255, 255, 0.7);
  --mat-tab-pagination-icon-color: white;
  --mat-tab-inactive-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-label-text-color: #ef4444;
  --mat-tab-active-ripple-color: #ef4444;
  --mat-tab-inactive-ripple-color: #ef4444;
  --mat-tab-inactive-focus-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-inactive-hover-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-tab-active-focus-label-text-color: #ef4444;
  --mat-tab-active-hover-label-text-color: #ef4444;
  --mat-tab-active-focus-indicator-color: #ef4444;
  --mat-tab-active-hover-indicator-color: #ef4444;
  --mat-tab-active-indicator-color: #ef4444;
}
.vex-theme-stone.dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-stone.dark .mat-mdc-tab-nav-bar.mat-background-primary,
.vex-theme-stone .dark .mat-mdc-tab-group.mat-background-primary,
.vex-theme-stone .dark .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #78716c;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-stone.dark .mat-mdc-tab-nav-bar.mat-background-accent,
.vex-theme-stone .dark .mat-mdc-tab-group.mat-background-accent,
.vex-theme-stone .dark .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #f59e0b;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-stone.dark .mat-mdc-tab-nav-bar.mat-background-warn,
.vex-theme-stone .dark .mat-mdc-tab-group.mat-background-warn,
.vex-theme-stone .dark .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #ef4444;
  --mat-tab-foreground-color: #fff;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-label-text-color: white;
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #f59e0b;
  --mat-checkbox-selected-hover-icon-color: #f59e0b;
  --mat-checkbox-selected-icon-color: #f59e0b;
  --mat-checkbox-selected-pressed-icon-color: #f59e0b;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #f59e0b;
  --mat-checkbox-selected-hover-state-layer-color: #f59e0b;
  --mat-checkbox-selected-pressed-state-layer-color: #f59e0b;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-checkbox.mat-primary,
.vex-theme-stone .dark .mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #78716c;
  --mat-checkbox-selected-hover-icon-color: #78716c;
  --mat-checkbox-selected-icon-color: #78716c;
  --mat-checkbox-selected-pressed-icon-color: #78716c;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #78716c;
  --mat-checkbox-selected-hover-state-layer-color: #78716c;
  --mat-checkbox-selected-pressed-state-layer-color: #78716c;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-checkbox.mat-warn,
.vex-theme-stone .dark .mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-checkbox-selected-checkmark-color: #fff;
  --mat-checkbox-selected-focus-icon-color: #ef4444;
  --mat-checkbox-selected-hover-icon-color: #ef4444;
  --mat-checkbox-selected-icon-color: #ef4444;
  --mat-checkbox-selected-pressed-icon-color: #ef4444;
  --mat-checkbox-unselected-focus-icon-color: white;
  --mat-checkbox-unselected-hover-icon-color: white;
  --mat-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.7);
  --mat-checkbox-selected-focus-state-layer-color: #ef4444;
  --mat-checkbox-selected-hover-state-layer-color: #ef4444;
  --mat-checkbox-selected-pressed-state-layer-color: #ef4444;
  --mat-checkbox-unselected-focus-state-layer-color: white;
  --mat-checkbox-unselected-hover-state-layer-color: white;
  --mat-checkbox-unselected-pressed-state-layer-color: white;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-button-filled-container-color: #424242;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: white;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-outlined-state-layer-color: white;
  --mat-button-protected-container-color: #424242;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: white;
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-text-state-layer-color: white;
  --mat-button-tonal-container-color: #424242;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-button.mat-primary,
.vex-theme-stone.dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-stone.dark .mat-mdc-raised-button.mat-primary,
.vex-theme-stone.dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-stone.dark .mat-tonal-button.mat-primary,
.vex-theme-stone .dark .mat-mdc-button.mat-primary,
.vex-theme-stone .dark .mat-mdc-unelevated-button.mat-primary,
.vex-theme-stone .dark .mat-mdc-raised-button.mat-primary,
.vex-theme-stone .dark .mat-mdc-outlined-button.mat-primary,
.vex-theme-stone .dark .mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #78716c;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #78716c;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #78716c 12%, transparent);
  --mat-button-outlined-state-layer-color: #78716c;
  --mat-button-protected-container-color: #78716c;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #78716c;
  --mat-button-text-ripple-color: color-mix(in srgb, #78716c 12%, transparent);
  --mat-button-text-state-layer-color: #78716c;
  --mat-button-tonal-container-color: #78716c;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-button.mat-accent,
.vex-theme-stone.dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-stone.dark .mat-mdc-raised-button.mat-accent,
.vex-theme-stone.dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-stone.dark .mat-tonal-button.mat-accent,
.vex-theme-stone .dark .mat-mdc-button.mat-accent,
.vex-theme-stone .dark .mat-mdc-unelevated-button.mat-accent,
.vex-theme-stone .dark .mat-mdc-raised-button.mat-accent,
.vex-theme-stone .dark .mat-mdc-outlined-button.mat-accent,
.vex-theme-stone .dark .mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #f59e0b;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #f59e0b;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-outlined-state-layer-color: #f59e0b;
  --mat-button-protected-container-color: #f59e0b;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #f59e0b;
  --mat-button-text-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-button-text-state-layer-color: #f59e0b;
  --mat-button-tonal-container-color: #f59e0b;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-button.mat-warn,
.vex-theme-stone.dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-stone.dark .mat-mdc-raised-button.mat-warn,
.vex-theme-stone.dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-stone.dark .mat-tonal-button.mat-warn,
.vex-theme-stone .dark .mat-mdc-button.mat-warn,
.vex-theme-stone .dark .mat-mdc-unelevated-button.mat-warn,
.vex-theme-stone .dark .mat-mdc-raised-button.mat-warn,
.vex-theme-stone .dark .mat-mdc-outlined-button.mat-warn,
.vex-theme-stone .dark .mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #ef4444;
  --mat-button-filled-label-text-color: #fff;
  --mat-button-filled-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-filled-state-layer-color: #fff;
  --mat-button-outlined-label-text-color: #ef4444;
  --mat-button-outlined-outline-color: rgba(255, 255, 255, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-outlined-state-layer-color: #ef4444;
  --mat-button-protected-container-color: #ef4444;
  --mat-button-protected-label-text-color: #fff;
  --mat-button-protected-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-protected-state-layer-color: #fff;
  --mat-button-text-label-text-color: #ef4444;
  --mat-button-text-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-button-text-state-layer-color: #ef4444;
  --mat-button-tonal-container-color: #ef4444;
  --mat-button-tonal-label-text-color: #fff;
  --mat-button-tonal-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-button-tonal-state-layer-color: #fff;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, white 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-icon-button-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-icon-button.mat-primary,
.vex-theme-stone .dark .mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #78716c;
  --mat-icon-button-state-layer-color: #78716c;
  --mat-icon-button-ripple-color: color-mix(in srgb, #78716c 12%, transparent);
}
.vex-theme-stone.dark .mat-mdc-icon-button.mat-accent,
.vex-theme-stone .dark .mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #f59e0b;
  --mat-icon-button-state-layer-color: #f59e0b;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
}
.vex-theme-stone.dark .mat-mdc-icon-button.mat-warn,
.vex-theme-stone .dark .mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #ef4444;
  --mat-icon-button-state-layer-color: #ef4444;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-fab-container-color: #424242;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: white;
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-container-color: #424242;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, white 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(255, 255, 255, 0.7);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.vex-theme-stone.dark .mat-mdc-fab.mat-primary,
.vex-theme-stone.dark .mat-mdc-mini-fab.mat-primary,
.vex-theme-stone .dark .mat-mdc-fab.mat-primary,
.vex-theme-stone .dark .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #78716c;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #78716c 12%, transparent);
  --mat-fab-small-container-color: #78716c;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-fab.mat-accent,
.vex-theme-stone.dark .mat-mdc-mini-fab.mat-accent,
.vex-theme-stone .dark .mat-mdc-fab.mat-accent,
.vex-theme-stone .dark .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #f59e0b;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-fab-small-container-color: #f59e0b;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-stone.dark .mat-mdc-fab.mat-warn,
.vex-theme-stone.dark .mat-mdc-mini-fab.mat-warn,
.vex-theme-stone .dark .mat-mdc-fab.mat-warn,
.vex-theme-stone .dark .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #ef4444;
  --mat-fab-foreground-color: #fff;
  --mat-fab-ripple-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-fab-small-container-color: #ef4444;
  --mat-fab-small-foreground-color: #fff;
  --mat-fab-small-ripple-color: color-mix(in srgb, #fff 12%, transparent);
  --mat-fab-small-state-layer-color: #fff;
  --mat-fab-state-layer-color: #fff;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-snack-bar-container-color: white;
  --mat-snack-bar-supporting-text-color: rgba(0, 0, 0, 0.87);
  --mat-snack-bar-button-color: #57534e;
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, 0.12);
  --mat-progress-spinner-active-indicator-color: #78716c;
}
.vex-theme-stone.dark .mat-accent,
.vex-theme-stone .dark .mat-accent {
  --mat-progress-spinner-active-indicator-color: #f59e0b;
}
.vex-theme-stone.dark .mat-warn,
.vex-theme-stone .dark .mat-warn {
  --mat-progress-spinner-active-indicator-color: #ef4444;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-badge-background-color: #78716c;
  --mat-badge-text-color: #fff;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
}
.vex-theme-stone.dark .mat-badge-accent,
.vex-theme-stone .dark .mat-badge-accent {
  --mat-badge-background-color: #f59e0b;
  --mat-badge-text-color: #fff;
}
.vex-theme-stone.dark .mat-badge-warn,
.vex-theme-stone .dark .mat-badge-warn {
  --mat-badge-background-color: #ef4444;
  --mat-badge-text-color: #fff;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242;
  --mat-button-toggle-background-color: #424242;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: #424242;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-divider-color: rgba(255, 255, 255, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: #424242;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: white;
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-legacy-text-color: white;
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-toggle-selected-state-text-color: white;
  --mat-button-toggle-state-layer-color: white;
  --mat-button-toggle-text-color: white;
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #78716c 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #78716c;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #78716c 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #78716c 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #78716c 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #78716c;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-stone.dark .mat-datepicker-content.mat-accent,
.vex-theme-stone.dark .mat-datepicker-toggle-active.mat-accent,
.vex-theme-stone .dark .mat-datepicker-content.mat-accent,
.vex-theme-stone .dark .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #f59e0b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f59e0b 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f59e0b 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f59e0b 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f59e0b;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-stone.dark .mat-datepicker-content.mat-warn,
.vex-theme-stone.dark .mat-datepicker-toggle-active.mat-warn,
.vex-theme-stone .dark .mat-datepicker-content.mat-warn,
.vex-theme-stone .dark .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ef4444 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
  --mat-datepicker-calendar-date-selected-state-background-color: #ef4444;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ef4444 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #fff;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ef4444 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ef4444 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ef4444;
  --mat-datepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-period-button-text-color: white;
  --mat-datepicker-calendar-period-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, 0.7);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, 0.7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, 0.7);
  --mat-icon-color: inherit;
}
.vex-theme-stone.dark .mat-icon.mat-primary,
.vex-theme-stone .dark .mat-icon.mat-primary {
  --mat-icon-color: #78716c;
}
.vex-theme-stone.dark .mat-icon.mat-accent,
.vex-theme-stone .dark .mat-icon.mat-accent {
  --mat-icon-color: #f59e0b;
}
.vex-theme-stone.dark .mat-icon.mat-warn,
.vex-theme-stone .dark .mat-icon.mat-warn {
  --mat-icon-color: #ef4444;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, 0.12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.6);
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #78716c;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #78716c;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #78716c;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, white 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, white 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #ef4444;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, 0.7);
  --mat-stepper-header-error-state-icon-foreground-color: #ef4444;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
.vex-theme-stone.dark .mat-step-header.mat-accent,
.vex-theme-stone .dark .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #f59e0b;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #f59e0b;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #f59e0b;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-stone.dark .mat-step-header.mat-warn,
.vex-theme-stone .dark .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #fff;
  --mat-stepper-header-selected-state-icon-background-color: #ef4444;
  --mat-stepper-header-selected-state-icon-foreground-color: #fff;
  --mat-stepper-header-done-state-icon-background-color: #ef4444;
  --mat-stepper-header-done-state-icon-foreground-color: #fff;
  --mat-stepper-header-edit-state-icon-background-color: #ef4444;
  --mat-stepper-header-edit-state-icon-foreground-color: #fff;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-sort-arrow-color: white;
  --mat-toolbar-container-background-color: #424242;
  --mat-toolbar-container-text-color: white;
}
.vex-theme-stone.dark .mat-toolbar.mat-primary,
.vex-theme-stone .dark .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #78716c;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-stone.dark .mat-toolbar.mat-accent,
.vex-theme-stone .dark .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #f59e0b;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-stone.dark .mat-toolbar.mat-warn,
.vex-theme-stone .dark .mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #ef4444;
  --mat-toolbar-container-text-color: #fff;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;
  --mat-timepicker-container-background-color: #424242;
}
.display-3 {
  font-size: 56px;
  font-weight: 400;
  line-height: 56px;
  font-family: var(--vex-font);
  letter-spacing: -0.02em;
}
.display-2 {
  font-size: 45px;
  font-weight: 400;
  line-height: 48px;
  font-family: var(--vex-font);
  letter-spacing: -0.005em;
}
.display-1,
h1 {
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;
  font-family: var(--vex-font);
  letter-spacing: normal;
}
.headline,
h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  font-family: var(--vex-font);
  letter-spacing: -0.019em;
}
.title,
h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  font-family: var(--vex-font);
  letter-spacing: -0.014em;
}
.subheading-2,
h4 {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  font-family: var(--vex-font);
  letter-spacing: -0.011em;
}
.subheading-1,
h5 {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  font-family: var(--vex-font);
  letter-spacing: -0.006em;
}
.body-2,
h6 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  font-family: var(--vex-font);
  letter-spacing: -0.006em;
}
.body-1,
p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  font-family: var(--vex-font);
  letter-spacing: -0.009em;
}
.caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  font-family: var(--vex-font);
  letter-spacing: 0;
}
.text-xs {
  letter-spacing: 0;
}
.text-sm {
  letter-spacing: -0.009em;
}
.text-base {
  letter-spacing: -0.011em;
}
.text-lg {
  letter-spacing: -0.014em;
}
.text-2xl {
  letter-spacing: -0.019em;
}
.text-3xl {
  letter-spacing: -0.021em;
}
body {
  --vex-font:
    loew-variable,
    "Inter var",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --vex-sidenav-width: 280px;
  --vex-sidenav-collapsed-width: 72px;
  --vex-sidenav-item-min-height: 48px;
  --vex-sidenav-item-padding-vertical: 0.5rem;
  --vex-sidenav-item-padding-horizontal: 1.5rem;
  --vex-sidenav-item-font-weight: 500;
  --vex-sidenav-item-icon-gap: 1rem;
  --vex-sidenav-item-icon-size: 1.5rem;
  --vex-sidenav-item-dropdown-gap: 0.75rem;
  --vex-toolbar-height: 64px;
  --vex-secondary-toolbar-height: 54px;
  --vex-navigation-height: 64px;
  --vex-footer-height: 56px;
  --vex-footer-z-index: 100;
  --vex-footer-elevation: 0 -10px 30px 0 rgba(82, 63, 104, 0.06);
  --vex-page-layout-header-height: 200px;
  --vex-page-layout-toolbar-height: 64px;
  --vex-blink-scrollbar-width: 12px;
  --vex-default-icon-size: 24px;
  --vex-border-radius: 0.25rem;
}
.vex-base-layout-container {
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.vex-layout-content {
  background: var(--vex-background-background);
  min-height: calc(100% - var(--vex-toolbar-height) - var(--vex-navigation-height));
  position: relative;
  width: 100%;
}
.vex-layout-footer-enabled .vex-layout-content {
  min-height: calc(100% - var(--vex-toolbar-height) - var(--vex-navigation-height) - var(--vex-footer-height));
}
.vex-layout-scroll-disabled {
  overflow: hidden;
}
.vex-layout-scroll-disabled .vex-layout-content {
  height: calc(100% - var(--vex-toolbar-height) - var(--vex-navigation-height));
  min-height: unset;
  overflow: hidden;
}
.vex-layout-scroll-disabled.vex-layout-footer-fixed .vex-layout-content,
.vex-layout-scroll-disabled.vex-layout-footer-enabled .vex-layout-content {
  height: calc(100% - var(--vex-toolbar-height) - var(--vex-navigation-height) - var(--vex-footer-height));
  min-height: unset;
}
@media (min-width: 1280px) {
  .vex-layout-scroll-disabled .vex-layout-content {
    height: 100%;
  }
  .vex-layout-scroll-disabled.vex-layout-footer-fixed .vex-layout-content,
  .vex-layout-scroll-disabled.vex-layout-footer-enabled .vex-layout-content {
    height: calc(100% - var(--vex-footer-height));
  }
}
.vex-layout-sidenav-container {
  background: var(--vex-background-background);
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
.vex-layout-sidenav-content {
  overflow-x: hidden;
  overflow-y: auto;
}
.vex-layout-search-overlay-open {
  overflow: hidden;
  position: fixed;
}
.vex-layout-search-overlay-open .vex-layout-sidenav-container {
  pointer-events: none;
  transform: perspective(1000px) translate3d(0, 50vh, 0) rotate3d(1, 0, 0, 30deg);
  transform-origin: 50vw 50vh;
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
  overflow: visible;
  border-radius: var(--vex-border-radius);
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.vex-layout-toolbar-fixed .vex-toolbar {
  position: fixed;
  width: var(--vex-toolbar-width);
  z-index: 50;
}
.vex-layout-toolbar-fixed .vex-layout-content {
  margin-top: calc(var(--vex-toolbar-height) + var(--vex-navigation-height));
}
@media (min-width: 1280px) {
  .vex-layout-toolbar-fixed .vex-layout-content {
    margin-top: var(--vex-navigation-height);
    margin-top: 0;
  }
}
.vex-layout-footer-fixed .vex-footer {
  box-shadow: var(--vex-footer-elevation);
  position: fixed;
}
.vex-layout-footer-fixed .vex-layout-content {
  margin-bottom: var(--vex-footer-height);
  min-height: calc(100% - var(--vex-toolbar-height) - var(--vex-navigation-height) - var(--vex-footer-height));
}
.vex-layout-footer-fixed.vex-layout-scroll-disabled .vex-layout-content {
  height: calc(100% - var(--vex-toolbar-height) - var(--vex-navigation-height) - var(--vex-footer-height));
}
.vex-layout-horizontal {
  --vex-navigation-height: 0.00001px;
  --vex-toolbar-width: 100%;
}
@media (min-width: 1280px) {
  .vex-layout-horizontal {
    --vex-toolbar-width: calc(100% - var(--vex-sidenav-width));
  }
  .vex-layout-horizontal.vex-layout-sidenav-collapsed {
    --vex-toolbar-width: calc(100% - var(--vex-sidenav-collapsed-width));
  }
}
.vex-layout-horizontal .vex-layout-sidenav-container {
  flex: 1;
}
.vex-layout-horizontal.vex-layout-footer-fixed.vex-layout-scroll-disabled .vex-layout-content {
  height: calc(100% - var(--vex-toolbar-height) - var(--vex-footer-height));
}
@media (min-width: 1280px) {
  body:not([dir=rtl]) .vex-layout-horizontal.vex-layout-sidenav-collapsed .vex-layout-sidenav-content {
    margin-left: var(--vex-sidenav-collapsed-width) !important;
    margin-right: 0 !important;
  }
  body:not([dir=rtl]) .vex-layout-horizontal:not(.vex-layout-sidenav-collapsed) .vex-layout-sidenav-content {
    margin-left: var(--vex-sidenav-width) !important;
    margin-right: 0 !important;
  }
  [dir=rtl] .vex-layout-horizontal.vex-layout-sidenav-collapsed .vex-layout-sidenav-content {
    margin-right: var(--vex-sidenav-collapsed-width) !important;
    margin-left: 0 !important;
  }
  [dir=rtl] .vex-layout-horizontal:not(.vex-layout-sidenav-collapsed) .vex-layout-sidenav-content {
    margin-right: var(--vex-sidenav-width) !important;
    margin-left: 0 !important;
  }
}
body.is-blink ::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0);
  height: var(--vex-blink-scrollbar-width);
  width: var(--vex-blink-scrollbar-width);
}
body.is-blink ::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.12);
}
body.is-blink ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--vex-blink-scrollbar-width);
  box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
}
body.is-blink ::-webkit-scrollbar-thumb:active {
  border-radius: var(--vex-blink-scrollbar-width);
  box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
}
.vex-scrollblock {
  position: fixed;
  width: 100%;
}
.vex-dialog-glossy .mat-mdc-dialog-container {
  border-radius: var(--vex-border-radius);
}
.is-blink .vex-dialog-glossy .mat-mdc-dialog-container .mdc-dialog__surface {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgb(var(--vex-background-card-rgb) / 0.6);
}
.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1280px) {
  .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    width: 100%;
  }
}
.card {
  border-radius: var(--vex-border-radius);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-card-rgb) / var(--tw-bg-opacity));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.avatar {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  background-color: var(--vex-background-hover);
  object-fit: cover;
}
.vex-layout-vertical {
  --vex-toolbar-width: 100%;
}
.vex-layout-vertical vex-secondary-toolbar .fixed {
  position: relative;
  top: 0px;
  margin-bottom: -1rem;
  border-top-width: 0px;
  background-image: none;
  padding-top: 0.75rem;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.vex-layout-vertical.vex-layout-footer-fixed.vex-layout-scroll-disabled .vex-layout-content {
  height: calc(100% - var(--vex-toolbar-height) - var(--vex-footer-height));
}
@media print {
  html,
  body {
    height: auto !important;
    overflow: initial !important;
  }
  .vex-toolbar,
  .vex-sidenav {
    display: none !important;
  }
  .vex-layout-content {
    margin-top: 0 !important;
  }
  .mat-drawer-container {
    overflow: visible !important;
  }
  .vex-layout-sidenav-content {
    margin-left: 0 !important;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--vex-background-card-rgb) / var(--tw-bg-opacity));
  }
  .vex-footer {
    display: none !important;
  }
  .config-panel-toggle {
    display: none !important;
  }
}
:root .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel {
  margin-top: 0.25rem;
  border-top-left-radius: var(--vex-border-radius);
  border-top-right-radius: var(--vex-border-radius);
}
:root .mat-mdc-autocomplete-panel {
  border-bottom-right-radius: var(--vex-border-radius);
  border-bottom-left-radius: var(--vex-border-radius);
}
:root .mat-mdc-autocomplete-panel .mat-mdc-option {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
:root .mat-mdc-button,
:root .mat-mdc-outlined-button,
:root .mat-mdc-unelevated-button,
:root .mat-mdc-raised-button {
  min-width: 6rem;
  border-radius: var(--vex-button-border-radius);
}
:root .vex-theme-lime .mat-mdc-unelevated-button.mat-primary,
:root .vex-theme-lime .mat-mdc-raised-button.mat-primary {
  --mdc-filled-button-label-text-color: white;
  --mdc-protected-button-label-text-color: white;
  color: white !important;
}
:root .mat-button-toggle-group:not(.mat-button-toggle-vertical) {
  border-radius: var(--vex-button-border-radius);
}
:root .mat-button-toggle-group:not(.mat-button-toggle-vertical) .mat-button-toggle:first-child .mat-button-toggle-label-content {
  padding-left: 1rem;
}
:root .mat-button-toggle-group:not(.mat-button-toggle-vertical) .mat-button-toggle:last-child .mat-button-toggle-label-content {
  padding-right: 1rem;
}
:root .mat-button-toggle-button {
  font-weight: 500;
}
:root .mat-mdc-icon-button .mat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:root .mat-mdc-card {
  border-radius: var(--vex-border-radius);
}
.vex-mat-dense-default {
  --mat-form-field-container-height: 48px;
  --mat-form-field-filled-label-display: none;
  --mat-form-field-container-vertical-padding: 12px;
  --mat-form-field-filled-with-label-container-padding-top: 12px;
  --mat-form-field-filled-with-label-container-padding-bottom: 12px;
  --mat-select-arrow-transform: none;
}
.vex-mat-dense-md {
  --mat-button-filled-container-height: 32px;
  --mat-button-filled-touch-target-display: block;
  --mat-button-outlined-container-height: 32px;
  --mat-button-outlined-touch-target-display: block;
  --mat-button-protected-container-height: 32px;
  --mat-button-protected-touch-target-display: block;
  --mat-button-text-container-height: 32px;
  --mat-button-text-touch-target-display: block;
  --mat-button-tonal-container-height: 32px;
  --mat-button-tonal-touch-target-display: block;
  --mat-button-toggle-height: 44px;
  --mat-checkbox-touch-target-display: block;
  --mat-checkbox-state-layer-size: 36px;
}
.vex-mat-dense-md .mat-mdc-chip.mat-mdc-standard-chip {
  --mat-chip-container-height: 28px;
}
.vex-mat-dense-md {
  --mat-expansion-header-collapsed-state-height: 44px;
  --mat-expansion-header-expanded-state-height: 60px;
  --mat-fab-small-touch-target-display: block;
  --mat-fab-touch-target-display: block;
  --mat-form-field-container-height: 52px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 14px;
  --mat-form-field-filled-with-label-container-padding-top: 22px;
  --mat-form-field-filled-with-label-container-padding-bottom: 6px;
  --mat-icon-button-touch-target-display: block;
}
.vex-mat-dense-md .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 44px;
  --mat-icon-button-state-layer-size: 44px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 10px;
}
.vex-mat-dense-md {
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
  --mat-list-list-item-one-line-container-height: 44px;
  --mat-list-list-item-two-line-container-height: 60px;
  --mat-list-list-item-three-line-container-height: 84px;
}
.vex-mat-dense-md .mdc-list-item__start,
.vex-mat-dense-md .mdc-list-item__end {
  --mat-radio-state-layer-size: 36px;
  --mat-radio-touch-target-display: block;
}
.vex-mat-dense-md .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,
.vex-mat-dense-md .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,
.vex-mat-dense-md .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 52px;
}
.vex-mat-dense-md .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
.vex-mat-dense-md .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,
.vex-mat-dense-md .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 68px;
}
.vex-mat-dense-md {
  --mat-paginator-container-size: 52px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
  --mat-paginator-touch-target-display: block;
  --mat-radio-state-layer-size: 36px;
  --mat-radio-touch-target-display: block;
  --mat-select-arrow-transform: translateY(-8px);
  --mat-slide-toggle-state-layer-size: 36px;
  --mat-slide-toggle-touch-target-display: block;
  --mat-stepper-header-height: 68px;
  --mat-table-header-container-height: 52px;
  --mat-table-footer-container-height: 48px;
  --mat-table-row-item-container-height: 48px;
}
.vex-mat-dense-md .mat-mdc-tab-header {
  --mat-tab-container-height: 44px;
}
.vex-mat-dense-md {
  --mat-toolbar-standard-height: 60px;
  --mat-toolbar-mobile-height: 52px;
  --mat-tree-node-min-height: 44px;
}
.vex-mat-dense-sm {
  --mat-button-filled-container-height: 28px;
  --mat-button-filled-touch-target-display: none;
  --mat-button-outlined-container-height: 28px;
  --mat-button-outlined-touch-target-display: none;
  --mat-button-protected-container-height: 28px;
  --mat-button-protected-touch-target-display: none;
  --mat-button-text-container-height: 28px;
  --mat-button-text-touch-target-display: none;
  --mat-button-tonal-container-height: 28px;
  --mat-button-tonal-touch-target-display: none;
  --mat-button-toggle-height: 40px;
  --mat-checkbox-touch-target-display: none;
  --mat-checkbox-state-layer-size: 32px;
}
.vex-mat-dense-sm .mat-mdc-chip.mat-mdc-standard-chip {
  --mat-chip-container-height: 24px;
}
.vex-mat-dense-sm {
  --mat-expansion-header-collapsed-state-height: 40px;
  --mat-expansion-header-expanded-state-height: 56px;
  --mat-fab-small-touch-target-display: none;
  --mat-fab-touch-target-display: none;
  --mat-form-field-container-height: 48px;
  --mat-form-field-filled-label-display: none;
  --mat-form-field-container-vertical-padding: 12px;
  --mat-form-field-filled-with-label-container-padding-top: 12px;
  --mat-form-field-filled-with-label-container-padding-bottom: 12px;
  --mat-icon-button-touch-target-display: none;
}
.vex-mat-dense-sm .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  --mat-icon-button-state-layer-size: 40px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 8px;
}
.vex-mat-dense-sm {
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
  --mat-list-list-item-one-line-container-height: 40px;
  --mat-list-list-item-two-line-container-height: 56px;
  --mat-list-list-item-three-line-container-height: 80px;
}
.vex-mat-dense-sm .mdc-list-item__start,
.vex-mat-dense-sm .mdc-list-item__end {
  --mat-radio-state-layer-size: 32px;
  --mat-radio-touch-target-display: none;
}
.vex-mat-dense-sm .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,
.vex-mat-dense-sm .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,
.vex-mat-dense-sm .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 48px;
}
.vex-mat-dense-sm .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
.vex-mat-dense-sm .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,
.vex-mat-dense-sm .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 64px;
}
.vex-mat-dense-sm {
  --mat-paginator-container-size: 48px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
  --mat-paginator-touch-target-display: block;
  --mat-radio-state-layer-size: 32px;
  --mat-radio-touch-target-display: none;
  --mat-select-arrow-transform: none;
  --mat-slide-toggle-state-layer-size: 32px;
  --mat-slide-toggle-touch-target-display: none;
  --mat-stepper-header-height: 64px;
  --mat-table-header-container-height: 48px;
  --mat-table-footer-container-height: 44px;
  --mat-table-row-item-container-height: 44px;
}
.vex-mat-dense-sm .mat-mdc-tab-header {
  --mat-tab-container-height: 40px;
}
.vex-mat-dense-sm {
  --mat-toolbar-standard-height: 56px;
  --mat-toolbar-mobile-height: 48px;
  --mat-tree-node-min-height: 40px;
}
.vex-mat-dense-xs {
  --mat-button-filled-container-height: 24px;
  --mat-button-filled-touch-target-display: none;
  --mat-button-outlined-container-height: 24px;
  --mat-button-outlined-touch-target-display: none;
  --mat-button-protected-container-height: 24px;
  --mat-button-protected-touch-target-display: none;
  --mat-button-text-container-height: 24px;
  --mat-button-text-touch-target-display: none;
  --mat-button-tonal-container-height: 24px;
  --mat-button-tonal-touch-target-display: none;
  --mat-button-toggle-height: 36px;
  --mat-checkbox-touch-target-display: none;
  --mat-checkbox-state-layer-size: 28px;
}
.vex-mat-dense-xs .mat-mdc-chip.mat-mdc-standard-chip {
  --mat-chip-container-height: 24px;
}
.vex-mat-dense-xs {
  --mat-expansion-header-collapsed-state-height: 36px;
  --mat-expansion-header-expanded-state-height: 48px;
  --mat-fab-small-touch-target-display: none;
  --mat-fab-touch-target-display: none;
  --mat-form-field-container-height: 44px;
  --mat-form-field-filled-label-display: none;
  --mat-form-field-container-vertical-padding: 10px;
  --mat-form-field-filled-with-label-container-padding-top: 10px;
  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
  --mat-icon-button-touch-target-display: none;
}
.vex-mat-dense-xs .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 36px;
  --mat-icon-button-state-layer-size: 36px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 6px;
}
.vex-mat-dense-xs {
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
  --mat-list-list-item-one-line-container-height: 36px;
  --mat-list-list-item-two-line-container-height: 52px;
  --mat-list-list-item-three-line-container-height: 76px;
}
.vex-mat-dense-xs .mdc-list-item__start,
.vex-mat-dense-xs .mdc-list-item__end {
  --mat-radio-state-layer-size: 28px;
  --mat-radio-touch-target-display: none;
}
.vex-mat-dense-xs .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,
.vex-mat-dense-xs .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,
.vex-mat-dense-xs .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 44px;
}
.vex-mat-dense-xs .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
.vex-mat-dense-xs .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,
.vex-mat-dense-xs .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 60px;
}
.vex-mat-dense-xs {
  --mat-paginator-container-size: 40px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
  --mat-paginator-touch-target-display: none;
  --mat-radio-state-layer-size: 28px;
  --mat-radio-touch-target-display: none;
  --mat-select-arrow-transform: none;
  --mat-slide-toggle-state-layer-size: 28px;
  --mat-slide-toggle-touch-target-display: none;
  --mat-stepper-header-height: 60px;
  --mat-table-header-container-height: 44px;
  --mat-table-footer-container-height: 40px;
  --mat-table-row-item-container-height: 40px;
}
.vex-mat-dense-xs .mat-mdc-tab-header {
  --mat-tab-container-height: 36px;
}
.vex-mat-dense-xs {
  --mat-toolbar-standard-height: 52px;
  --mat-toolbar-mobile-height: 44px;
  --mat-tree-node-min-height: 36px;
}
:root .mat-mdc-dialog-container .mdc-dialog__surface {
  border-radius: calc(var(--vex-border-radius) * 1.5);
}
:root .mat-mdc-dialog-title {
  padding-top: 0.75rem;
}
:root {
}
:root .mdc-dialog__title::before {
  content: none;
  height: auto;
}
:root .mat-drawer-container {
  color: inherit;
}
:root .mat-drawer-side {
  border-right-width: 0px;
}
:root .dark .mat-drawer-side {
  border-right-width: 1px;
}
:root .mat-expansion-panel:not([class*=mat-elevation-z]) {
  border-radius: var(--vex-border-radius);
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root .mat-expansion-indicator::after {
  color: rgb(var(--vex-foreground-text-rgb) / 1);
  border-width: 0 2.5px 2.5px 0 !important;
}
.mdc-notched-outline__notch {
  border-right: none;
}
:root .mdc-text-field--outlined {
  --mdc-outlined-text-field-container-shape: var(--vex-border-radius);
}
:root .dark .mat-mdc-menu-panel {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
:root .mat-mdc-menu-panel {
  border-radius: var(--vex-border-radius);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
:root .mat-mdc-menu-panel.mat-menu-below {
  margin-top: 0.25rem;
}
:root .mat-mdc-menu-panel.mat-menu-above {
  margin-bottom: 0.25rem;
}
:root .mat-mdc-menu-content {
  padding: 0.5rem;
}
:root .mat-mdc-menu-item {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  display: flex;
  min-height: 40px;
  align-items: center;
  border-radius: var(--vex-border-radius);
  padding-left: 0.5rem;
  padding-right: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  letter-spacing: -0.009em;
}
:root .mat-mdc-menu-item:first-child {
  margin-top: 0px;
}
:root .mat-mdc-menu-item:last-child {
  margin-bottom: 0px;
}
:root .mat-mdc-menu-item:hover:not([disabled]) {
  background-color: rgb(var(--vex-color-primary-600) / 0.1);
}
:root .mat-mdc-menu-item:hover:not([disabled]) .mat-icon {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-600) / var(--tw-text-opacity));
}
:root .mat-mdc-menu-item .mat-icon {
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
:root .mat-mdc-menu-item .mat-icon,
:root .mat-mdc-menu-item .mat-icon svg {
  font-size: 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
  line-height: 1.25rem;
}
:root .mat-mdc-menu-item-submenu-trigger {
  padding-right: 3rem;
}
.mat-mdc-menu-item .mat-icon-no-color {
  color: currentColor;
}
:root .dark .mat-mdc-select-panel {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
:root .mat-mdc-select-panel {
  border-radius: var(--vex-border-radius);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  padding: 0.5rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
  margin-top: 0.25rem;
  border-top-left-radius: var(--vex-border-radius);
  border-top-right-radius: var(--vex-border-radius);
}
:root .mat-mdc-option {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  height: 2.5rem;
  min-height: 2.5rem;
  border-radius: var(--vex-border-radius);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  letter-spacing: -0.009em;
}
:root .mat-mdc-option:first-child {
  margin-top: 0px;
}
:root .mat-mdc-option:last-child {
  margin-bottom: 0px;
}
:root .mat-mdc-option:hover,
:root .mat-mdc-option.mat-active {
  background-color: rgb(var(--vex-color-primary-600) / 0.1);
}
:root .mat-mdc-option:hover .mat-icon,
:root .mat-mdc-option.mat-active .mat-icon {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-600) / var(--tw-text-opacity));
}
:root .mat-mdc-option .mat-icon {
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
:root .mat-mdc-option .mat-icon,
:root .mat-mdc-option .mat-icon svg {
  font-size: 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
  line-height: 1.25rem;
}
:root .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
  background-color: rgb(var(--vex-color-primary-600) / 0.1);
}
:root .mat-mdc-menu-item-submenu-trigger {
  padding-right: 3rem;
}
.apexcharts-legend-text {
  margin-left: 4px;
  top: -1px;
}
body .apexcharts-tooltip.light {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-card-rgb) / var(--tw-bg-opacity));
}
.vex-layout-ares {
  --vex-sidenav-background: var(--vex-background-background);
  --vex-toolbar-background: var(--vex-background-background);
  --vex-sidenav-color: rgb(var(--vex-foreground-text-rgb) / 1);
  --vex-sidenav-section-divider-color: transparent;
  --vex-sidenav-item-background-hover: rgb(var(--vex-color-primary-600) / 0.1);
  --vex-sidenav-item-background-active: var(--vex-background-card);
  --vex-sidenav-item-color: rgb(var(--vex-foreground-text-rgb) / 1);
  --vex-sidenav-item-color-hover: rgb(var(--vex-foreground-text-rgb) / 1);
  --vex-sidenav-item-color-active: rgb(var(--vex-foreground-text-rgb) / 1);
  --vex-sidenav-item-dropdown-color-active: var( --vex-sidenav-item-color-active );
  --vex-sidenav-item-dropdown-background-active: var(--vex-background-hover);
  --vex-sidenav-item-dropdown-background: var(--vex-background-background);
  --vex-sidenav-item-dropdown-background-hover: var(--vex-background-hover);
  --vex-secondary-toolbar-background: var(--vex-background-background);
  --vex-sidenav-toolbar-background: var(--vex-background-background);
  --vex-secondary-toolbar-height: 64px;
}
.vex-layout-ares .vex-sidenav {
  border: none;
}
.vex-layout-ares .vex-sidenav vex-sidenav-item .vex-sidenav-item {
  width: unset;
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: 9999px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.vex-layout-ares .vex-sidenav vex-sidenav-item .vex-sidenav-item.vex-sidenav-item--active {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.vex-layout-ares .vex-sidenav vex-sidenav-item .item-level-0 > .vex-sidenav-item {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.vex-layout-ares .vex-sidenav vex-sidenav-item .item-level-1 .vex-sidenav-item.vex-sidenav-item--active {
  font-weight: 500;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.vex-layout-ares .vex-sidenav vex-sidenav-item .item-level-1 .vex-sidenav-item.vex-sidenav-item--active .vex-sidenav-item__label {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-text-rgb) / var(--tw-text-opacity));
}
.vex-layout-ares .vex-sidenav vex-sidenav-item .item-level-1 .vex-sidenav-item:hover .vex-sidenav-item__label {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-text-rgb) / var(--tw-text-opacity));
}
.vex-layout-ares .vex-layout-sidenav-collapsed .vex-sidenav vex-sidenav-item .vex-sidenav-item {
  margin-left: 0px;
  margin-right: 0px;
}
.vex-layout-ares vex-toolbar {
  border-bottom-width: 0px;
}
.vex-layout-ares vex-secondary-toolbar {
  border-bottom-right-radius: var(--vex-border-radius);
  border-bottom-left-radius: var(--vex-border-radius);
}
.vex-layout-ares vex-secondary-toolbar .secondary-toolbar {
  margin-bottom: -1.5rem;
  border-top-width: 0px;
  border-bottom-width: 0px;
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.vex-layout-ares vex-footer {
  overflow: hidden;
  border-top-left-radius: var(--vex-border-radius);
  border-top-right-radius: var(--vex-border-radius);
}
.vex-layout-ares .vex-page-layout-header {
  background: var(--vex-background-background);
  color: rgb(var(--vex-foreground-text-rgb) / 1);
}
.vex-layout-ares.vex-style-default {
  --vex-sidenav-item-background-active: rgb(var(--vex-color-primary-600) / 1);
  --vex-sidenav-item-color-active: rgb(var(--vex-color-on-primary-600) / 1);
  --vex-sidenav-item-dropdown-color-active: var(--vex-sidenav-item-color);
  --vex-sidenav-item-dropdown-color-hover: rgb(var(--vex-foreground-text-rgb) / 1);
  --vex-sidenav-item-icon-color-active: rgb(var(--vex-color-on-primary-600) / 1);
}
.vex-layout-hermes {
  --vex-toolbar-height: 100px;
  --vex-secondary-toolbar-background: var(--vex-background-background);
  --vex-secondary-toolbar-height: 64px;
}
.vex-layout-hermes.vex-style-light {
  --vex-toolbar-background: var(--vex-background-background);
}
.vex-layout-hermes.vex-style-dark {
  --vex-toolbar-background: var(--vex-background-background);
}
@media (min-width: 1280px) {
  .vex-layout-hermes .vex-sidenav {
    display: none;
  }
}
.vex-layout-hermes vex-secondary-toolbar .secondary-toolbar {
  margin-bottom: -1.5rem;
  border-top-width: 0px;
  border-bottom-width: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.vex-layout-ikaros {
  --vex-navigation-height: 0.00001px;
}
.vex-layout-ikaros.vex-style-default {
  --vex-navigation-color: white;
}
.vex-layout-poseidon {
  --vex-sidenav-item-min-height: 40px;
  --vex-sidenav-item-background-hover: rgb(var(--vex-color-primary-500) / 15%);
  --vex-sidenav-item-background-active: rgb(var(--vex-color-primary-500) / 20%);
  --vex-sidenav-item-dropdown-background: var(--vex-sidenav-background);
  --vex-sidenav-item-dropdown-background-hover: rgb( var(--vex-color-primary-600) / 10% );
  --vex-sidenav-item-dropdown-background-active: rgb( var(--vex-color-primary-600) / 20% );
  --vex-sidenav-item-padding-vertical: 0.5rem;
  --vex-sidenav-item-padding-horizontal: 0.75rem;
}
.vex-layout-poseidon .vex-sidenav-item {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: var(--vex-border-radius);
}
.vex-layout-poseidon .vex-sidenav-toolbar__divider {
  margin: 0 var(--vex-sidenav-item-padding-horizontal);
}
.vex-layout-poseidon.vex-style-light {
  --vex-sidenav-item-color: rgba(0, 0, 0, 1);
  --vex-sidenav-item-color-hover: rgba(0, 0, 0, 1);
  --vex-sidenav-item-dropdown-color-hover: rgba(0, 0, 0, 1);
  --vex-sidenav-item-dropdown-color-active: rgba(0, 0, 0, 1);
}
.vex-layout-poseidon.vex-style-default {
  --vex-sidenav-toolbar-background: var(--vex-sidenav-background);
  --vex-sidenav-item-color: rgba(255, 255, 255, 0.8);
  --vex-sidenav-item-color-hover: rgba(255, 255, 255, 1);
  --vex-sidenav-item-ripple-color: rgb(255, 255, 255, 0.06);
}
.vex-layout-poseidon.vex-style-dark {
  --vex-sidenav-item-color: rgba(255, 255, 255, 0.8);
  --vex-sidenav-item-color-hover: #ffffff;
  --vex-sidenav-item-ripple-color: rgb(255, 255, 255, 0.06);
}
.tan-icon-sm {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  background-color: rgb(6, 31, 39);
  min-width: 16px;
  min-height: 16px;
  width: 16px;
  height: 16px;
}
.tan-icon-d {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  background-color: rgb(6, 31, 39);
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
}
.tan-icon-av {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  background-color: rgb(6, 31, 39);
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
}
.tan-icon-md {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  background-color: rgb(6, 31, 39);
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
}
.tan-icon-im {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  background-color: rgb(6, 31, 39);
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
}
.tan-icon-lg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  background-color: rgb(6, 31, 39);
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
}
.tan-icon-ms {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  background-color: rgb(6, 31, 39);
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
}
.g-ic-activity-finance {
  mask-image: url(/assets/img/icons/new/activity-finance.svg);
  -webkit-mask-image: url(/assets/img/icons/new/activity-finance.svg);
}
.g-ic-activity-tasks {
  mask-image: url(/assets/img/icons/new/activity-tasks.svg);
  -webkit-mask-image: url(/assets/img/icons/new/activity-tasks.svg);
}
.g-ic-add {
  mask-image: url(/assets/img/icons/new/add.svg);
  -webkit-mask-image: url(/assets/img/icons/new/add.svg);
}
.g-ic-add-2 {
  mask-image: url(/assets/img/icons/add-2.svg);
  -webkit-mask-image: url(/assets/img/icons/add-2.svg);
}
.g-ic-add-circle {
  mask-image: url(/assets/img/icons/new/add-circle.svg);
  -webkit-mask-image: url(/assets/img/icons/new/add-circle.svg);
}
.g-ic-add-folder {
  mask-image: url(/assets/img/icons/new/add-folder.svg);
  -webkit-mask-image: url(/assets/img/icons/new/add-folder.svg);
}
.g-ic-add-user {
  mask-image: url(/assets/img/icons/new/add-user.svg);
  -webkit-mask-image: url(/assets/img/icons/new/add-user.svg);
}
.g-ic-add-user-2 {
  mask-image: url(/assets/img/icons/g-ic-add-user-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-add-user-2.svg);
}
.g-ic-admin-panel-settings {
  mask-image: url(/assets/img/icons/g-ic-admin-panel-settings.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-admin-panel-settings.svg);
}
.g-ic-aws-color {
  mask-image: url(/assets/img/icons/g-ic-aws-color.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-aws-color.svg);
}
.g-ic-add-user-3 {
  mask-image: url(/assets/img/icons/g-ic-add-user-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-add-user-3.svg);
}
.g-ic-arrow-bottom {
  mask-image: url(/assets/img/icons/new/arrow-bottom.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-bottom.svg);
}
.g-ic-arrow-circle {
  mask-image: url(/assets/img/icons/g-ic-arrow-circle.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-arrow-circle.svg);
}
.g-ic-arrow-circle-2 {
  mask-image: url(/assets/img/icons/g-ic-arrow-circle-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-arrow-circle-2.svg);
}
.g-ic-arrow-directions {
  mask-image: url(/assets/img/icons/g-ic-arrow-directions.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-arrow-directions.svg);
}
.g-ic-arrow-direction-left {
  mask-image: url(/assets/img/icons/new/arrow-direction-left.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-direction-left.svg);
}
.g-ic-arrow-direction-right {
  mask-image: url(/assets/img/icons/new/arrow-direction-right.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-direction-right.svg);
}
.g-ic-arrow-direction-down {
  mask-image: url(/assets/img/icons/new/arrow-direction-down.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-direction-down.svg);
}
.g-ic-arrow-direction-up {
  mask-image: url(/assets/img/icons/g-ic-arrow-direction-up.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-arrow-direction-up.svg);
}
.g-ic-arrow-direction-right-1 {
  mask-image: url(/assets/img/icons/g-ic-arrow-direction-right-1.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-arrow-direction-right-1.svg);
}
.g-ic-arrows-expand {
  mask-image: url(/assets/img/icons/new/arrows-expand.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrows-expand.svg);
}
.g-ic-arrow-left {
  mask-image: url(/assets/img/icons/new/arrow-left.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-left.svg);
}
.g-ic-arrow-right {
  mask-image: url(/assets/img/icons/new/arrow-right.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-right.svg);
}
.g-ic-assessment {
  mask-image: url(/assets/img/icons/assessment.svg);
  -webkit-mask-image: url(/assets/img/icons/assessment.svg);
}
.g-ic-attach-money {
  mask-image: url(/assets/img/icons/g-ic-attach-money.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-attach-money.svg);
}
.g-ic-audio {
  mask-image: url(/assets/img/icons/new/audio.svg);
  -webkit-mask-image: url(/assets/img/icons/new/audio.svg);
}
.g-ic-audio-mic {
  mask-image: url(/assets/img/icons/icon-audio.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-audio.svg);
}
.g-ic-audio-1 {
  mask-image: url(/assets/img/icons/g-ic-audio-1.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-audio-1.svg);
}
.g-ic-audio-interpreting {
  mask-image: url(/assets/img/icons/new/audio-interpreting.svg);
  -webkit-mask-image: url(/assets/img/icons/new/audio-interpreting.svg);
}
.g-ic-audio-speech {
  mask-image: url(/assets/img/icons/new/audio-speech.svg);
  -webkit-mask-image: url(/assets/img/icons/new/audio-speech.svg);
}
.g-ic-audio-to-audio {
  mask-image: url(/assets/img/icons/new/audio-to-audio.svg);
  -webkit-mask-image: url(/assets/img/icons/new/audio-to-audio.svg);
}
.g-ic-base-user {
  mask-image: url(/assets/img/icons/g-ic-base-user.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-base-user.svg);
}
.g-ic-block {
  mask-image: url(/assets/img/icons/g-ic-block.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-block.svg);
}
.g-ic-book {
  mask-image: url(/assets/img/icons/g-ic-book.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-book.svg);
}
.g-ic-bubble-chart {
  mask-image: url(/assets/img/icons/g-ic-bubble-chart.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-bubble-chart.svg);
}
.g-ic-business {
  mask-image: url(/assets/img/icons/g-ic-business.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-business.svg);
}
.g-ic-versions-history {
  mask-image: url(/assets/img/icons/new/versions-history.svg);
  -webkit-mask-image: url(/assets/img/icons/new/versions-history.svg);
}
.g-ic-versions-history-2 {
  mask-image: url(/assets/img/icons/g-ic-versions-history-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-versions-history-2.svg);
}
.g-ic-verified {
  mask-image: url(/assets/img/icons/new/verified.svg);
  -webkit-mask-image: url(/assets/img/icons/new/verified.svg);
}
.g-ic-volume-audio {
  mask-image: url(/assets/img/icons/new/volume-audio.svg);
  -webkit-mask-image: url(/assets/img/icons/new/volume-audio.svg);
}
.g-ic-volume-audio-off {
  mask-image: url(/assets/img/icons/g-ic-volume-audio-off.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-volume-audio-off.svg);
}
.g-ic-calendar {
  mask-image: url(/assets/img/icons/new/calendar.svg);
  -webkit-mask-image: url(/assets/img/icons/new/calendar.svg);
}
.g-ic-cancel {
  mask-image: url(/assets/img/icons/g-ic-cancel.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-cancel.svg);
}
.g-ic-chat {
  mask-image: url(/assets/img/icons/g-ic-chat.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-chat.svg);
}
.g-ic-check-ok {
  mask-image: url(/assets/img/icons/g-ic-check-ok.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-check-ok.svg);
}
.g-ic-clip {
  mask-image: url(/assets/img/icons/g-ic-clips.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-clips.svg);
}
.g-ic-clock {
  mask-image: url(/assets/img/icons/new/clock.svg);
  -webkit-mask-image: url(/assets/img/icons/new/clock.svg);
}
.g-ic-close {
  mask-image: url(/assets/img/icons/new/close.svg);
  -webkit-mask-image: url(/assets/img/icons/new/close.svg);
}
.g-ic-close-panel {
  mask-image: url(/assets/img/icons/g-ic-close-panel.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-close-panel.svg);
}
.g-ic-cloud {
  mask-image: url(/assets/img/icons/g-ic-cloud.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-cloud.svg);
}
.g-ic-cloud-download {
  mask-image: url(/assets/img/icons/g-ic-cloud-download.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-cloud-download.svg);
}
.g-ic-chrome-reader-mode {
  mask-image: url(/assets/img/icons/g-ic-chrome-reader-mode.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-chrome-reader-mode.svg);
}
.g-ic-contacts {
  mask-image: url(/assets/img/icons/g-ic-contacts.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-contacts.svg);
}
.g-ic-contract-support {
  mask-image: url(/assets/img/icons/g-ic-contract-support.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-contract-support.svg);
}
.g-ic-copy-editing {
  mask-image: url(/assets/img/icons/new/copy-editing.svg);
  -webkit-mask-image: url(/assets/img/icons/new/copy-editing.svg);
}
.g-ic-cup {
  mask-image: url(/assets/img/icons/new/cup.svg);
  -webkit-mask-image: url(/assets/img/icons/new/cup.svg);
}
.g-ic-dark-mode {
  mask-image: url(/assets/img/icons/g-ic-dark-mode.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-dark-mode.svg);
}
.g-ic-data-object {
  mask-image: url(/assets/img/icons/g-ic-data-object.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-data-object.svg);
}
.g-ic-data-range {
  mask-image: url(/assets/img/icons/g-ic-data-range.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-data-range.svg);
}
.g-ic-default {
  mask-image: url(/assets/img/icons/new/default.svg);
  -webkit-mask-image: url(/assets/img/icons/new/default.svg);
}
.g-ic-delete {
  mask-image: url(/assets/img/icons/new/delete.svg);
  -webkit-mask-image: url(/assets/img/icons/new/delete.svg);
}
.g-ic-dubbing {
  mask-image: url(/assets/img/icons/new/dubbing.svg);
  -webkit-mask-image: url(/assets/img/icons/new/dubbing.svg);
}
.g-ic-dubbing-2 {
  mask-image: url(/assets/img/icons/new/dubbing-2.svg);
  -webkit-mask-image: url(/assets/img/icons/new/dubbing-2.svg);
}
.g-ic-dubbing-3 {
  mask-image: url(/assets/img/icons/g-ic-dubbing-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-dubbing-3.svg);
}
.g-ic-dubbing-4 {
  mask-image: url(/assets/img/icons/g-ic-dubbing-4.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-dubbing-4.svg);
}
.g-ic-dubbing-5 {
  mask-image: url(/assets/img/icons/g-ic-dubbing-5.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-dubbing-5.svg);
}
.g-ic-dynamic-form {
  mask-image: url(/assets/img/icons/g-ic-dynamic-form.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-dynamic-form.svg);
}
.g-ic-edit {
  mask-image: url(/assets/img/icons/new/edit.svg);
  -webkit-mask-image: url(/assets/img/icons/new/edit.svg);
}
.g-ic-error {
  mask-image: url(/assets/img/icons/error.svg);
  -webkit-mask-image: url(/assets/img/icons/error.svg);
}
.g-ic-exclamation-mark {
  mask-image: url(/assets/img/icons/g-ic-exclamation-mark.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-exclamation-mark.svg);
}
.g-ic-fav-heart {
  mask-image: url(/assets/img/icons/new/fav-heart.svg);
  -webkit-mask-image: url(/assets/img/icons/new/fav-heart.svg);
}
.g-ic-fav-heart-selected {
  mask-image: url(/assets/img/icons/new/fav-heart-selected.svg);
  -webkit-mask-image: url(/assets/img/icons/new/fav-heart-selected.svg);
}
.g-ic-files-folder {
  mask-image: url(/assets/img/icons/new/files-folder.svg);
  -webkit-mask-image: url(/assets/img/icons/new/files-folder.svg);
}
.g-ic-filter {
  mask-image: url(/assets/img/icons/new/filter.svg);
  -webkit-mask-image: url(/assets/img/icons/new/filter.svg);
}
.g-ic-filter-2 {
  mask-image: url(/assets/img/icons/new/filter-2.svg);
  -webkit-mask-image: url(/assets/img/icons/new/filter-2.svg);
}
.g-ic-filter-3 {
  mask-image: url(/assets/img/icons/new/filter-3.svg);
  -webkit-mask-image: url(/assets/img/icons/new/filter-3.svg);
}
.g-ic-flag-report {
  mask-image: url(/assets/img/icons/new/flag-report.svg);
  -webkit-mask-image: url(/assets/img/icons/new/flag-report.svg);
}
.g-ic-flash-lamp {
  mask-image: url(/assets/img/icons/new/flash-lamp.svg);
  -webkit-mask-image: url(/assets/img/icons/new/flash-lamp.svg);
}
.g-ic-format-color-text {
  mask-image: url(/assets/img/icons/g-ic-format-color-text.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-format-color-text.svg);
}
.g-ic-gavel {
  mask-image: url(/assets/img/icons/g-ic-gavel.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-gavel.svg);
}
.g-ic-generate-audio {
  mask-image: url(/assets/img/icons/new/generate-audio.svg);
  -webkit-mask-image: url(/assets/img/icons/new/generate-audio.svg);
}
.g-ic-generate-audio-simple {
  mask-image: url(/assets/img/icons/g-ic-generate-audio-simple.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-generate-audio-simple.svg);
}
.g-ic-group-add {
  mask-image: url(/assets/img/icons/g-ic-group-add.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-group-add.svg);
}
.g-ic-group-work {
  mask-image: url(/assets/img/icons/g-ic-group-work.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-group-work.svg);
}
.g-ic-hand {
  mask-image: url(/assets/img/icons/new/hand.svg);
  -webkit-mask-image: url(/assets/img/icons/new/hand.svg);
}
.g-ic-help {
  mask-image: url(/assets/img/icons/new/help.svg);
  -webkit-mask-image: url(/assets/img/icons/new/help.svg);
}
.g-ic-help-2 {
  mask-image: url(/assets/img/icons/g-ic-help-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-help-2.svg);
}
.g-ic-history {
  mask-image: url(/assets/img/icons/g-ic-history.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-history.svg);
}
.g-ic-home {
  mask-image: url(/assets/img/icons/new/home.svg);
  -webkit-mask-image: url(/assets/img/icons/new/home.svg);
}
.g-ic-home-dashboard {
  mask-image: url(/assets/img/icons/g-ic-home-dashboard.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-home-dashboard.svg);
}
.g-ic-info {
  mask-image: url(/assets/img/icons/new/info.svg);
  -webkit-mask-image: url(/assets/img/icons/new/info.svg);
}
.g-ic-interpreting {
  mask-image: url(/assets/img/icons/new/interpreting.svg);
  -webkit-mask-image: url(/assets/img/icons/new/interpreting.svg);
}
.g-ic-mail {
  mask-image: url(/assets/img/icons/new/mail.svg);
  -webkit-mask-image: url(/assets/img/icons/new/mail.svg);
}
.g-ic-mail-2 {
  mask-image: url(/assets/img/icons/new/mail-2.svg);
  -webkit-mask-image: url(/assets/img/icons/new/mail-2.svg);
  mask-image: url(/assets/img/icons/g-ic-mail-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-mail-3.svg);
}
.g-ic-manage-search {
  mask-image: url(/assets/img/icons/g-ic-manage-search.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-manage-search.svg);
}
.g-ic-message-chat {
  mask-image: url(/assets/img/icons/new/message-chat-comment.svg);
  -webkit-mask-image: url(/assets/img/icons/new/message-chat-comment.svg);
}
.g-ic-message-chat-add {
  mask-image: url(/assets/img/icons/new/message-chat-comment-add.svg);
  -webkit-mask-image: url(/assets/img/icons/new/message-chat-comment-add.svg);
}
.g-ic-message-chat-ok {
  mask-image: url(/assets/img/icons/new/message-chat-comment-ok.svg);
  -webkit-mask-image: url(/assets/img/icons/new/message-chat-comment-ok.svg);
}
.g-ic-minus {
  mask-image: url(/assets/img/icons/new/minus.svg);
  -webkit-mask-image: url(/assets/img/icons/new/minus.svg);
}
.g-ic-more {
  mask-image: url(/assets/img/icons/new/more.svg);
  -webkit-mask-image: url(/assets/img/icons/new/more.svg);
}
.g-ic-next {
  mask-image: url(/assets/img/icons/new/next.svg);
  -webkit-mask-image: url(/assets/img/icons/new/next.svg);
}
.g-ic-next-kanban {
  mask-image: url(/assets/img/icons/new/next-kanban.svg);
  -webkit-mask-image: url(/assets/img/icons/new/next-kanban.svg);
}
.g-ic-new-tag {
  mask-image: url(/assets/img/icons/g-ic-new-tag.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-new-tag.svg);
}
.g-ic-dot {
  mask-image: url(/assets/img/icons/g-ic-dot.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-dot.svg);
}
.g-ic-note {
  mask-image: url(/assets/img/icons/g-ic-note.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-note.svg);
}
.g-ic-notifications {
  mask-image: url(/assets/img/icons/new/notifications.svg);
  -webkit-mask-image: url(/assets/img/icons/new/notifications.svg);
}
.g-ic-onedrive-color {
  mask-image: url(/assets/img/icons/g-ic-onedrive-color.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-onedrive-color.svg);
}
.g-ic-opportunities-game {
  mask-image: url(/assets/img/icons/g-ic-opportunities-game.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-opportunities-game.svg);
}
.g-ic-opportunities-services {
  mask-image: url(/assets/img/icons/g-ic-opportunities-services.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-opportunities-services.svg);
}
.g-ic-organizations {
  mask-image: url(/assets/img/icons/new/organizations.svg);
  -webkit-mask-image: url(/assets/img/icons/new/organizations.svg);
}
.g-ic-palette {
  mask-image: url(/assets/img/icons/palette.svg);
  -webkit-mask-image: url(/assets/img/icons/palette.svg);
}
.g-ic-pause {
  mask-image: url(/assets/img/icons/new/pause.svg);
  -webkit-mask-image: url(/assets/img/icons/new/pause.svg);
}
.g-ic-pc {
  mask-image: url(/assets/img/icons/g-ic-pc.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-pc.svg);
}
.g-ic-pause-circle {
  mask-image: url(/assets/img/icons/new/pause-circle.svg);
  -webkit-mask-image: url(/assets/img/icons/new/pause-circle.svg);
}
.g-ic-people {
  mask-image: url(/assets/img/icons/g-ic-people.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-people.svg);
}
.g-ic-person-outline {
  mask-image: url(/assets/img/icons/g-ic-person-outline.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-person-outline.svg);
}
.g-ic-picture-in-picture {
  mask-image: url(/assets/img/icons/g-ic-picture-in-picture.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-picture-in-picture.svg);
}
.g-ic-pin {
  mask-image: url(/assets/img/icons/new/pin.svg);
  -webkit-mask-image: url(/assets/img/icons/new/pin.svg);
}
.g-ic-play {
  mask-image: url(/assets/img/icons/new/play.svg);
  -webkit-mask-image: url(/assets/img/icons/new/play.svg);
}
.g-ic-play-2 {
  mask-image: url(/assets/img/icons/g-ic-play-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-play-2.svg);
}
.g-ic-play-circle {
  mask-image: url(/assets/img/icons/new/play-circle.svg);
  -webkit-mask-image: url(/assets/img/icons/new/play-circle.svg);
}
.g-ic-play-record {
  mask-image: url(/assets/img/icons/g-ic-play-record.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-play-record.svg);
}
.g-ic-play-record-new {
  mask-image: url(/assets/img/icons/g-ic-play-record-new.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-play-record-new.svg);
}
.g-ic-podcast {
  mask-image: url(/assets/img/icons/new/podcast.svg);
  -webkit-mask-image: url(/assets/img/icons/new/podcast.svg);
}
.g-ic-language {
  mask-image: url(/assets/img/icons/g-ic-language-.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-language.svg);
}
.g-ic-light-mode {
  mask-image: url(/assets/img/icons/g-ic-light-mode.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-light-mode.svg);
}
.g-ic-link-url {
  mask-image: url(/assets/img/icons/g-ic-link-url.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-link-url.svg);
}
.g-ic-library {
  mask-image: url(/assets/img/icons/new/library.svg);
  -webkit-mask-image: url(/assets/img/icons/new/library.svg);
}
.g-ic-list {
  mask-image: url(/assets/img/icons/g-ic-list.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-list.svg);
}
.g-ic-lumo {
  mask-image: url(/assets/img/icons/new/lumo-logo.svg);
  -webkit-mask-image: url(/assets/img/icons/new/lumo-logo.svg);
}
.g-ic-lock {
  mask-image: url(/assets/img/icons/g-ic-lock.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-lock.svg);
}
.g-ic-lock-2 {
  mask-image: url(/assets/img/icons/g-ic-lock-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-lock-2.svg);
}
.g-ic-prev {
  mask-image: url(/assets/img/icons/new/prev.svg);
  -webkit-mask-image: url(/assets/img/icons/new/prev.svg);
}
.g-ic-projects {
  mask-image: url(/assets/img/icons/g-ic-projects.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-projects.svg);
}
.g-ic-record-voice-over {
  mask-image: url(/assets/img/icons/g-ic-record-voice-over.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-record-voice-over.svg);
}
.g-ic-refresh-left {
  mask-image: url(/assets/img/icons/new/refresh-left.svg);
  -webkit-mask-image: url(/assets/img/icons/new/refresh-left.svg);
}
.g-ic-refresh-right {
  mask-image: url(/assets/img/icons/new/refresh-right.svg);
  -webkit-mask-image: url(/assets/img/icons/new/refresh-right.svg);
}
.g-ic-5s-left {
  mask-image: url(/assets/img/icons/new/5s-left.svg);
  -webkit-mask-image: url(/assets/img/icons/new/5s-left.svg);
}
.g-ic-5s-right {
  mask-image: url(/assets/img/icons/new/5s-right.svg);
  -webkit-mask-image: url(/assets/img/icons/new/5s-right.svg);
}
.g-ic-remove {
  mask-image: url(/assets/img/icons/new/remove.svg);
  -webkit-mask-image: url(/assets/img/icons/new/remove.svg);
}
.g-ic-rocket {
  mask-image: url(/assets/img/icons/new/rocket.svg);
  -webkit-mask-image: url(/assets/img/icons/new/rocket.svg);
}
.g-ic-search {
  mask-image: url(/assets/img/icons/new/search.svg);
  -webkit-mask-image: url(/assets/img/icons/new/search.svg);
}
.g-ic-search-replace {
  mask-image: url(/assets/img/icons/new/search-replace.svg);
  -webkit-mask-image: url(/assets/img/icons/new/search-replace.svg);
}
.g-ic-security {
  mask-image: url(/assets/img/icons/g-ic-security.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-security.svg);
}
.g-ic-send {
  mask-image: url(/assets/img/icons/g-ic-send.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-send.svg);
}
.g-ic-send-2 {
  mask-image: url(/assets/img/icons/g-ic-send-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-send-2.svg);
}
.g-ic-send-mail {
  mask-image: url(/assets/img/icons/new/send-mail.svg);
  -webkit-mask-image: url(/assets/img/icons/new/send-mail.svg);
}
.g-ic-send-signature {
  mask-image: url(/assets/img/icons/g-ic-send-signature.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-send-signature.svg);
}
.g-ic-services {
  mask-image: url(/assets/img/icons/g-ic-services.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-services.svg);
}
.g-ic-share {
  mask-image: url(/assets/img/icons/new/share.svg);
  -webkit-mask-image: url(/assets/img/icons/new/share.svg);
}
.g-ic-split {
  mask-image: url(/assets/img/icons/new/split.svg);
  -webkit-mask-image: url(/assets/img/icons/new/split.svg);
}
.g-ic-split-2 {
  mask-image: url(/assets/img/icons/g-ic-split-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-split-2.svg);
}
.g-ic-star {
  mask-image: url(/assets/img/icons/new/star.svg);
  -webkit-mask-image: url(/assets/img/icons/new/star.svg);
}
.g-ic-star-2 {
  mask-image: url(/assets/img/icons/star-2.svg);
  -webkit-mask-image: url(/assets/img/icons/star-2.svg);
}
.g-ic-stop {
  mask-image: url(/assets/img/icons/new/stop.svg);
  -webkit-mask-image: url(/assets/img/icons/new/stop.svg);
}
.g-ic-storage {
  mask-image: url(/assets/img/icons/g-ic-storage.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-storage.svg);
}
.g-ic-storage-2 {
  mask-image: url(/assets/img/icons/g-ic-storage-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-storage-2.svg);
}
.g-ic-storefront {
  mask-image: url(/assets/img/icons/g-ic-storefront.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-storefront.svg);
}
.g-ic-stop-solid {
  mask-image: url(/assets/img/icons/new/stop-solid.svg);
  -webkit-mask-image: url(/assets/img/icons/new/stop-solid.svg);
}
.g-ic-stop-square {
  mask-image: url(/assets/img/icons/new/stop-circle.svg);
  -webkit-mask-image: url(/assets/img/icons/new/stop-circle.svg);
}
.g-ic-settings {
  mask-image: url(/assets/img/icons/new/settings.svg);
  -webkit-mask-image: url(/assets/img/icons/new/settings.svg);
}
.g-ic-settings-2 {
  mask-image: url(/assets/img/icons/g-ic-settings-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-settings-2.svg);
}
.g-ic-settings-3 {
  mask-image: url(/assets/img/icons/g-ic-settings-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-settings-3.svg);
}
.g-ic-stat-activity {
  mask-image: url(/assets/img/icons/new/stat-activity.svg);
  -webkit-mask-image: url(/assets/img/icons/new/stat-activity.svg);
}
.g-ic-sync {
  mask-image: url(/assets/img/icons/new/sync.svg);
  -webkit-mask-image: url(/assets/img/icons/new/sync.svg);
}
.g-ic-system-mode {
  mask-image: url(/assets/img/icons/g-ic-system-mode.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-system-mode.svg);
}
.g-ic-text {
  mask-image: url(/assets/img/icons/new/text.svg);
  -webkit-mask-image: url(/assets/img/icons/new/text.svg);
}
.g-ic-text-character-words {
  mask-image: url(/assets/img/icons/g-ic-text-character-words.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-text-character-words.svg);
}
.g-ic-ticket {
  mask-image: url(/assets/img/icons/new/ticket.svg);
  -webkit-mask-image: url(/assets/img/icons/new/ticket.svg);
}
.g-ic-tik {
  mask-image: url(/assets/img/icons/new/tik.svg);
  -webkit-mask-image: url(/assets/img/icons/new/tik.svg);
}
.g-ic-tik-2 {
  mask-image: url(/assets/img/icons/new/tik-2.svg);
  -webkit-mask-image: url(/assets/img/icons/new/tik-2.svg);
}
.g-ic-tik-3 {
  mask-image: url(/assets/img/icons/g-ic-tik-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-tik-3.svg);
}
.g-ic-tik-remove {
  mask-image: url(/assets/img/icons/new/tik-remove.svg);
  -webkit-mask-image: url(/assets/img/icons/new/tik-remove.svg);
}
.g-ic-tik-remove-2 {
  mask-image: url(/assets/img/icons/g-ic-tik-remove-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-tik-remove-2.svg);
}
.g-ic-topic-theme {
  mask-image: url(/assets/img/icons/g-ic-topic-theme.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-topic-theme.svg);
}
.g-ic-transcript {
  mask-image: url(/assets/img/icons/g-ic-transcript.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-transcript.svg);
}
.g-ic-trascript-split-right {
  mask-image: url(/assets/img/icons/new/transcript-split-right.svg);
  -webkit-mask-image: url(/assets/img/icons/new/transcript-split-right.svg);
}
.g-ic-translate {
  mask-image: url(/assets/img/icons/new/translate.svg);
  -webkit-mask-image: url(/assets/img/icons/new/translate.svg);
}
.g-ic-union {
  mask-image: url(/assets/img/icons/new/union.svg);
  -webkit-mask-image: url(/assets/img/icons/new/union.svg);
}
.g-ic-union-2 {
  mask-image: url(/assets/img/icons/new/union-2.svg);
  -webkit-mask-image: url(/assets/img/icons/new/union-2.svg);
}
.g-ic-unlock {
  mask-image: url(/assets/img/icons/g-ic-unlock.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-unlock.svg);
}
.g-ic-unpublish {
  mask-image: url(/assets/img/icons/g-ic-unpublish.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-unpublish.svg);
}
.g-ic-update {
  mask-image: url(/assets/img/icons/update.svg);
  -webkit-mask-image: url(/assets/img/icons/update.svg);
}
.g-ic-upgrade {
  mask-image: url(/assets/img/icons/g-ic-upgrade.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-upgrade.svg);
}
.g-ic-upload {
  mask-image: url(/assets/img/icons/new/upload.svg);
  -webkit-mask-image: url(/assets/img/icons/new/upload.svg);
}
.g-ic-upload-2 {
  mask-image: url(/assets/img/icons/g-ic-upload-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-upload-2.svg);
}
.g-ic-upload-3 {
  mask-image: url(/assets/img/icons/g-ic-upload-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-upload-3.svg);
}
.g-ic-user {
  mask-image: url(/assets/img/icons/new/user.svg);
  -webkit-mask-image: url(/assets/img/icons/new/user.svg);
}
.g-ic-user-2 {
  mask-image: url(/assets/img/icons/g-ic-user-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-user-2.svg);
}
.g-ic-user-3 {
  mask-image: url(/assets/img/icons/g-ic-user-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-user-3.svg);
}
.g-ic-user-card {
  mask-image: url(/assets/img/icons/new/user-card.svg);
  -webkit-mask-image: url(/assets/img/icons/new/user-card.svg);
}
.g-ic-user-folder {
  mask-image: url(/assets/img/icons/new/user-folder.svg);
  -webkit-mask-image: url(/assets/img/icons/new/user-folder.svg);
}
.g-ic-users {
  mask-image: url(/assets/img/icons/new/users.svg);
  -webkit-mask-image: url(/assets/img/icons/new/users.svg);
}
.g-ic-user-search {
  mask-image: url(/assets/img/icons/new/user-search.svg);
  -webkit-mask-image: url(/assets/img/icons/new/user-search.svg);
}
.g-ic-video {
  mask-image: url(/assets/img/icons/new/video.svg);
  -webkit-mask-image: url(/assets/img/icons/new/video.svg);
}
.g-ic-video-2 {
  mask-image: url(/assets/img/icons/g-ic-video-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-video-2.svg);
}
.g-ic-video-library {
  mask-image: url(/assets/img/icons/g-ic-video-library.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-video-library.svg);
}
.g-ic-view-compact {
  mask-image: url(/assets/img/icons/g-ic-view-compact.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-view-compact.svg);
}
.g-ic-warning {
  mask-image: url(/assets/img/icons/g-ic-warning.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-warning.svg);
}
.g-ic-watch-later {
  mask-image: url(/assets/img/icons/g-ic-watch-later.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-watch-later.svg);
}
.g-ic-warning-triangle {
  mask-image: url(/assets/img/icons/g-ic-warning-triangle.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-warning-triangle.svg);
}
.g-ic-window-minimize {
  mask-image: url(/assets/img/icons/new/window-minimize.svg);
  -webkit-mask-image: url(/assets/img/icons/new/window-minimize.svg);
}
.g-ic-play-arrow {
  mask-image: url(/assets/img/icons/g-ic-play-arrow.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-play-arrow.svg);
}
.icon-download {
  mask-image: url(/assets/img/icons/icon-download.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-download.svg);
}
.icon-filter {
  mask-image: url(/assets/img/icons/icon-filter.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-filter.svg);
}
.icon-notify {
  mask-image: url(/assets/img/icons/icon-notify.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-notify.svg);
}
.icon-10s-left {
  mask-image: url(/assets/img/icons/new/10s-left.svg);
  -webkit-mask-image: url(/assets/img/icons/new/10s-left.svg);
}
.icon-10s-right {
  mask-image: url(/assets/img/icons/new/10s-right.svg);
  -webkit-mask-image: url(/assets/img/icons/new/10s-right.svg);
}
.icon-add-new-comment {
  mask-image: url(/assets/img/icons/new/add-new-comment.svg);
  -webkit-mask-image: url(/assets/img/icons/new/add-new-comment.svg);
}
.icon-arrow-directions {
  mask-image: url(/assets/img/icons/new/arrow-directions.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-directions.svg);
}
.icon-close-panel {
  mask-image: url(/assets/img/icons/new/close-panel.svg);
  -webkit-mask-image: url(/assets/img/icons/new/close-panel.svg);
}
.icon-delete-comment {
  mask-image: url(/assets/img/icons/new/delete-comment.svg);
  -webkit-mask-image: url(/assets/img/icons/new/delete-comment.svg);
}
.icon-emoji {
  mask-image: url(/assets/img/icons/new/emoji.svg);
  -webkit-mask-image: url(/assets/img/icons/new/emoji.svg);
}
.icon-expand-right {
  mask-image: url(/assets/img/icons/new/expand-maximize-open.svg);
  -webkit-mask-image: url(/assets/img/icons/new/expand-maximize-open.svg);
}
.icon-image-picture {
  mask-image: url(/assets/img/icons/new/image.svg);
  -webkit-mask-image: url(/assets/img/icons/new/image.svg);
}
.icon-group-collage {
  mask-image: url(/assets/img/icons/icon-group-collage.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-group-collage.svg);
}
.icon-film-video {
  mask-image: url(/assets/img/icons/icon-film-video.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-film-video.svg);
}
.icon-audio-2 {
  mask-image: url(/assets/img/icons/new/audio-2.svg);
  -webkit-mask-image: url(/assets/img/icons/new/audio-2.svg);
}
.icon-document {
  mask-image: url(/assets/img/icons/new/document.svg);
  -webkit-mask-image: url(/assets/img/icons/new/document.svg);
}
.icon-clip-video {
  mask-image: url(/assets/img/icons/new/clip-video.svg);
  -webkit-mask-image: url(/assets/img/icons/new/clip-video.svg);
}
.icon-all-group {
  mask-image: url(/assets/img/icons/new/all-group.svg);
  -webkit-mask-image: url(/assets/img/icons/new/all-group.svg);
}
.icon-segment-cut-scissors {
  mask-image: url(/assets/img/icons/new/segment-cut-scissors.svg);
  -webkit-mask-image: url(/assets/img/icons/new/segment-cut-scissors.svg);
}
.icon-uncollapse {
  mask-image: url(/assets/img/icons/new/uncollapse.svg);
  -webkit-mask-image: url(/assets/img/icons/new/uncollapse.svg);
}
.icon-book {
  mask-image: url(/assets/img/icons/new/book.svg);
  -webkit-mask-image: url(/assets/img/icons/new/book.svg);
}
.icon-open-panel {
  mask-image: url(/assets/img/icons/new/open-panel.svg);
  -webkit-mask-image: url(/assets/img/icons/new/open-panel.svg);
}
.icon-play {
  mask-image: url(/assets/img/icons/icon-play.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-play.svg);
}
.icon-play-2 {
  mask-image: url(/assets/img/icons/icon-play-2.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-play-2.svg);
}
.icon-repeat {
  mask-image: url(/assets/img/icons/new/repeat.svg);
  -webkit-mask-image: url(/assets/img/icons/new/repeat.svg);
}
.icon-save {
  mask-image: url(/assets/img/icons/new/save.svg);
  -webkit-mask-image: url(/assets/img/icons/new/save.svg);
}
.icon-save-2 {
  mask-image: url(/assets/img/icons/icon-save-2.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-save-2.svg);
}
.icon-search {
  mask-image: url(/assets/img/icons/new/search.svg);
  -webkit-mask-image: url(/assets/img/icons/new/search.svg);
}
.icon-sync {
  mask-image: url(/assets/img/icons/new/sync.svg);
  -webkit-mask-image: url(/assets/img/icons/new/sync.svg);
}
.icon-sync-3 {
  mask-image: url(/assets/img/icons/icon-sync-3.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-sync-3.svg);
}
.icon-regenerate-audio {
  background-image: url(/assets/img/icons/icon-regenerate-audio.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}
.icon-regenerate-audio-new {
  mask-image: url(/assets/img/icons/icon-regenerate-audio-20.png);
  -webkit-mask-image: url(/assets/img/icons/icon-regenerate-audio-20.png);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.g-ic-analytics {
  mask-image: url(/assets/img/icons/g-ic-analytics.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-analytics.svg);
}
.g-ic-arrow-up {
  mask-image: url(/assets/img/icons/new/arrow-up.svg);
  -webkit-mask-image: url(/assets/img/icons/new/arrow-up.svg);
}
.g-ic-arrow-up-2 {
  mask-image: url(/assets/img/icons/g-ic-arrow-up-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-arrow-up-2.svg);
}
.g-ic-archive {
  mask-image: url(/assets/img/icons/new/g-ic-archive.svg);
  -webkit-mask-image: url(/assets/img/icons/new/g-ic-archive.svg);
}
.icon-credits {
  mask-image: url(/assets/img/icons/icon-credits.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-credits.svg);
}
.icon-copy {
  mask-image: url(/assets/img/icons/new/copy.svg);
  -webkit-mask-image: url(/assets/img/icons/new/copy.svg);
}
.icon-tik-alt {
  mask-image: url(/assets/img/icons/icon-tik-alt.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-tik-alt.svg);
}
.icon-collapse-down {
  mask-image: url(/assets/img/icons/new/collapse-contract.svg);
  -webkit-mask-image: url(/assets/img/icons/new/collapse-contract.svg);
}
.icon-arrow-down {
  mask-image: url(/assets/img/icons/icon-arrow-down.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-arrow-down.svg);
}
.icon-arrow-down-2 {
  mask-image: url(/assets/img/icons/icon-arrow-down-2.svg);
  -webkit-mask-image: url(/assets/img/icons/icon-arrow-down-2.svg);
}
.g-ic-emoji {
  mask-image: url(/assets/img/icons/new/emoji.svg);
  -webkit-mask-image: url(/assets/img/icons/new/emoji.svg);
}
.g-ic-eye {
  mask-image: url(/assets/img/icons/new/eye.svg);
  -webkit-mask-image: url(/assets/img/icons/new/eye.svg);
}
.g-ic-eye-hide {
  mask-image: url(/assets/img/icons/g-ic-eye-hide.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-eye-hide.svg);
}
.g-ic-comment-dual-track {
  mask-image: url(/assets/img/icons/new/comment-dual-track.svg);
  -webkit-mask-image: url(/assets/img/icons/new/comment-dual-track.svg);
}
.g-ic-receipt {
  mask-image: url(/assets/img/icons/g-ic-receipt.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-receipt.svg);
}
.g-ic-rework {
  mask-image: url(/assets/img/icons/new/rework.svg);
  -webkit-mask-image: url(/assets/img/icons/new/rework.svg);
}
.g-ic-direction-left {
  mask-image: url(/assets/img/icons/g-ic-direction-left.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-direction-left.svg);
}
.g-ic-drive-color {
  mask-image: url(/assets/img/icons/g-ic-drive-color.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-drive-color.svg);
}
.g-ic-dropbox-color {
  mask-image: url(/assets/img/icons/g-ic-dropbox-color.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-dropbox-color.svg);
}
.g-ic-doc-add-new {
  mask-image: url(/assets/img/icons/g-ic-doc-add-new.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-doc-add-new.svg);
}
.g-ic-doc-file {
  mask-image: url(/assets/img/icons/new/doc-file.svg);
  -webkit-mask-image: url(/assets/img/icons/new/doc-file.svg);
}
.g-ic-doc-code-js {
  mask-image: url(/assets/img/icons/new/doc-code-js.svg);
  -webkit-mask-image: url(/assets/img/icons/new/doc-code-js.svg);
}
.g-ic-download {
  mask-image: url(/assets/img/icons/new/download.svg);
  -webkit-mask-image: url(/assets/img/icons/new/download.svg);
}
.g-ic-download-2 {
  mask-image: url(/assets/img/icons/g-ic-download-2.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-download-2.svg);
}
.g-ic-download-3 {
  mask-image: url(/assets/img/icons/g-ic-download-3.svg);
  -webkit-mask-image: url(/assets/img/icons/g-ic-download-3.svg);
}
.g-ic-doc-download {
  mask-image: url(/assets/img/icons/new/doc-download.svg);
  -webkit-mask-image: url(/assets/img/icons/new/doc-download.svg);
}
.volume-slider {
  mask-image: url(/assets/img/icons/volume-slider.svg);
  -webkit-mask-image: url(/assets/img/icons/volume-slider.svg);
}
i.bg-white {
  background-color: white;
}
.light i {
  background-color: rgb(6, 31, 39);
}
.dark i {
  background-color: white;
}
:root {
  --review-text-size: 16px;
  --review-text-size-sm: 14px;
  --review-text-size-xs: 12px;
}
.fragment-list {
  margin-top: 6rem;
  margin-bottom: 24rem;
}
.expression-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: var(--review-text-size-sm);
  font-weight: 500;
  line-height: 1.4;
  color: rgb(var(--vex-color-primary-600));
  background: rgb(var(--vex-color-primary-50));
  border: 1px solid rgb(var(--vex-color-primary-100));
  transition: background 0.15s ease;
}
.expression-trigger:hover {
  background: rgb(var(--vex-color-primary-100));
}
.expression-trigger__icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.dub_light-theme .translate-text {
  color: #061F27;
  border: 1px solid rgba(6, 31, 39, 0.16);
}
.dub_light-theme .editable-div {
  color: #061F27;
}
.dub_light-theme .target-text-textarea {
  color: #061F27;
}
.dub_light-theme .target-text-display {
  color: #061F27;
}
.dub_light-theme .cp-source-text {
  color: rgba(6, 31, 39, 0.6);
}
.dub_light-theme .source-text-next {
  color: #9BA5A9;
}
.dub_light-theme .separator_left,
.dub_light-theme .separator_right {
  background-color: rgba(6, 31, 39, 0.08);
}
.dub_light-theme .retranslate-btn {
  color: rgba(6, 31, 39, 0.7);
  background-color: rgba(6, 31, 39, 0.06);
}
.dub_light-theme .txt-ctrl-left,
.dub_light-theme .txt-ctrl-right {
  background-color: rgba(46, 39, 48, 0.06);
}
.dub_light-theme .text-dropdown {
  color: rgba(46, 39, 48, 0.7);
}
.dub_light-theme .play-btn {
  border: 1px solid rgba(6, 31, 39, 0.3);
}
.dub_light-theme .prev-btn,
.dub_light-theme .next-btn {
  color: rgba(6, 31, 39, 0.7);
}
.dub_light-theme .prev-btn .g-ic-prev,
.dub_light-theme .prev-btn .g-ic-next,
.dub_light-theme .next-btn .g-ic-prev,
.dub_light-theme .next-btn .g-ic-next {
  background-color: rgba(6, 31, 39, 0.7);
}
.dub_light-theme .g-ic-add,
.dub_light-theme .g-ic-minus {
  background-color: rgba(46, 39, 48, 0.7);
}
.dub_light-theme .g-ic-arrow-bottom {
  background-color: rgba(46, 39, 48, 0.5);
}
.dub_light-theme .g-ic-play {
  background-color: rgba(46, 39, 48, 0.7);
}
.dub_light-theme .g-ic-refresh-left,
.dub_light-theme .g-ic-refresh-right,
.dub_light-theme .g-ic-5s-left,
.dub_light-theme .g-ic-5s-right {
  background-color: rgba(6, 31, 39, 0.3);
}
.dub_light-theme .icon-arrow-down {
  background-color: #2E2730;
}
.dub_light-theme .g-ic-arrow-direction-left {
  background-color: rgba(255, 255, 255, 0.6);
}
.dub_light-theme .g-ic-tik {
  background-color: rgba(255, 255, 255, 0.6);
}
.dub_light-theme .g-ic-prev,
.dub_light-theme .g-ic-next {
  background-color: rgba(46, 39, 48, 0.7);
}
.dub_light-theme .last-text-box,
.dub_light-theme .next-text-box {
  background-color: #ecf0f1;
}
.dub_light-theme .next-success {
  background-color: rgba(72, 186, 191, 0.3);
}
.dub_light-theme .next-success .g-ic-tik {
  background-color: #2B7073;
}
.dub_light-theme .next-success .g-ic-tik-3 {
  background-color: #2B7073;
}
.dub_light-theme .next-success.reviewed {
  background-color: rgba(22, 160, 133, 0.4);
}
.dub_light-theme .next-success.reviewed .g-ic-tik-3 {
  background-color: #16a085;
}
.dub_light-theme .reviewed-indicator .g-ic-tik {
  background-color: #16a085;
}
.dub_light-theme .tan-disabled {
  background-color: rgba(6, 31, 39, 0.2);
}
.dub_dark-theme .translate-text {
  color: #fff;
  border: 1px solid #384C52;
}
.dub_dark-theme .editable-div {
  color: #fff;
}
.dub_dark-theme .target-text-textarea {
  color: #fff;
}
.dub_dark-theme .target-text-display {
  color: #fff;
}
.dub_dark-theme .cp-source-text {
  color: rgba(255, 255, 255, 0.3);
}
.dub_dark-theme .source-text.edited-source {
  color: rgba(255, 255, 255, 0.6);
}
.dub_dark-theme .source-text-next {
  color: rgba(255, 255, 255, 0.3);
}
.dub_dark-theme .separator_left,
.dub_dark-theme .separator_right {
  background-color: rgba(255, 255, 255, 0.08);
}
.dub_dark-theme .join-line-left .line-vertical,
.dub_dark-theme .join-line-left .line-horizontal,
.dub_dark-theme .join-line-right .line-vertical,
.dub_dark-theme .join-line-right .line-horizontal {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 4px,
      transparent 4px,
      transparent 8px);
}
.dub_dark-theme .join-line-left .line-horizontal,
.dub_dark-theme .join-line-right .line-horizontal {
  background:
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 4px,
      transparent 4px,
      transparent 8px);
}
.dub_dark-theme .retranslate-btn {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.dub_dark-theme .txt-ctrl-left,
.dub_dark-theme .txt-ctrl-right {
  background-color: rgba(255, 255, 255, 0.12);
}
.dub_dark-theme .text-dropdown {
  color: rgba(255, 255, 255, 0.7);
}
.dub_dark-theme .play-btn {
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.dub_dark-theme .g-ic-add,
.dub_dark-theme .g-ic-minus,
.dub_dark-theme .g-ic-play {
  background-color: rgba(255, 255, 255, 0.6);
}
.dub_dark-theme .g-ic-arrow-bottom {
  background-color: rgba(255, 255, 255, 0.5);
}
.dub_dark-theme .g-ic-refresh-left,
.dub_dark-theme .g-ic-refresh-right,
.dub_dark-theme .g-ic-5s-left,
.dub_dark-theme .g-ic-5s-right {
  background-color: rgba(255, 255, 255, 0.3);
}
.dub_dark-theme .voice-select {
  color: rgba(255, 255, 255, 0.3);
}
.dub_dark-theme .last-text-box,
.dub_dark-theme .next-text-box {
  background-color: rgba(255, 255, 255, 0.12);
}
.dub_dark-theme .last-text-box .prev-btn,
.dub_dark-theme .next-text-box .prev-btn {
  color: rgba(255, 255, 255, 0.7);
}
.dub_dark-theme .last-text-box .prev-btn .g-ic-prev,
.dub_dark-theme .next-text-box .prev-btn .g-ic-prev {
  background-color: rgba(255, 255, 255, 0.7);
}
.dub_dark-theme .last-text-box .next-btn,
.dub_dark-theme .next-text-box .next-btn {
  color: rgba(255, 255, 255, 0.7);
}
.dub_dark-theme .last-text-box .next-btn .g-ic-next,
.dub_dark-theme .next-text-box .next-btn .g-ic-next {
  background-color: rgba(255, 255, 255, 0.7);
}
.dub_dark-theme .next-success {
  background-color: rgba(94, 214, 120, 0.3);
}
.dub_dark-theme .next-success .g-ic-tik {
  background-color: #A0DBDE;
}
.dub_dark-theme .next-success .g-ic-tik-3 {
  background-color: #A0DBDE;
}
.dub_dark-theme .next-success.reviewed {
  background-color: rgba(94, 214, 120, 0.5);
}
.dub_dark-theme .next-success.reviewed .g-ic-tik-3 {
  background-color: #5ED678;
}
.dub_dark-theme .reviewed-indicator .g-ic-tik {
  background-color: #5ED678;
}
.dub_dark-theme .tan-disabled {
  background-color: rgba(255, 255, 255, 0.2);
}
.tan-native {
  --tan-primary: #3dcadc;
  --tan-primary-12: #3dcadc1f;
  --tan-link: #26828f;
  --tan-link-strong: #32a6b5;
  --tan-ink: #061f27;
  --tan-ink-70: #061f27b2;
  --tan-ink-60: #061f2799;
  --tan-ink-50: #061f2780;
  --tan-ink-40: #061f2766;
  --tan-ink-20: #061f2733;
  --tan-ink-12: #061f271f;
  --tan-ink-8: #061f2714;
  --tan-ink-6: #061f270f;
  --tan-ink-4: #061f270a;
  --tan-white: #ffffff;
  --tan-surface: #ffffff;
  --tan-surface-sunken: #f8f8f9;
  --tan-surface-white-70: #ffffffb2;
  --tan-border: var(--tan-ink-12);
  --tan-border-soft: var(--tan-ink-8);
  --tan-border-focus: #3dcadc;
  --tan-border-error: #ff9c45;
  --tan-success: #4cb065;
  --tan-success-track: #5ed678;
  --tan-warning: #ff9c45;
  --tan-danger: #eb5454;
  --tan-tag-bg: var(--tan-ink-6);
  --tan-tag-label: var(--tan-ink);
  --tan-tag-green-bg: #e8f9ec;
  --tan-tag-green-label: #286340;
  --tan-font:
    loew-variable,
    "Inter var",
    system-ui,
    sans-serif;
  --tan-text-xs: 10px;
  --tan-text-s: 12px;
  --tan-text-m: 14px;
  --tan-text-l: 16px;
  --tan-text-xl: 18px;
  --tan-leading: 1.5;
  --tan-weight-regular: 400;
  --tan-weight-medium: 500;
  --tan-weight-semibold: 600;
  --tan-label-size: 11px;
  --tan-label-tracking: 2px;
  --tan-radius-sm: 6px;
  --tan-radius: 7px;
  --tan-radius-lg: 12px;
  --tan-radius-pill: 999px;
  --tan-gap: 24px;
  --tan-field-gap: 6px;
  --tan-shadow-card: 0 1px 2px rgba(6, 31, 39, 0.06), 0 1px 3px rgba(6, 31, 39, 0.04);
  --tan-shadow-focus: 0 0 0 3px var(--tan-primary-12);
  font-family: var(--tan-font);
  color: var(--tan-ink);
  line-height: var(--tan-leading);
  font-size: var(--tan-text-m);
  -webkit-font-smoothing: antialiased;
}
.unavailable {
  opacity: 0.5;
}
.section {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.p-checkbox-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-datatable-table th div {
  align-items: center;
  font-weight: bold;
}
.p-component {
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.compact-select .mat-mdc-form-field-flex {
  height: 36px !important;
  min-height: 36px !important;
}
.compact-select .mat-mdc-text-field-wrapper {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 8px;
}
.compact-select .mat-mdc-select-trigger {
  height: 36px !important;
  line-height: 36px !important;
}
.compact-select .mat-mdc-form-field-infix {
  padding: 0 8px !important;
}
mat-form-field .mat-mdc-form-field-subscript-wrapper {
  display: none;
}
mat-form-field {
  background-color: white;
  border-radius: var(--vex-border-radius);
}
:is(.dark mat-form-field) {
  background-color: transparent;
}
mat-radio-button .mdc-radio__outer-circle {
  background-color: white;
}
:is(.dark mat-radio-button .mdc-radio__outer-circle) {
  background-color: transparent;
}
::ng-deep mat-expansion-header span.mat-expansion-indicator::before {
  border-color: rgba(0, 0, 0, 0.5) !important;
}
::ng-deep mat-expansion-header span.mat-expansion-indicator {
  border-color: rgba(0, 0, 0, 0.5) !important;
}
::ng-deep mat-expansion-header span.mat-expansion-indicator::after {
  border-color: rgba(0, 0, 0, 0.5) !important;
}
input::placeholder {
  opacity: 0.5 !important;
}
mat-horizontal-stepper.create-stepper {
  background-color: transparent;
}
.create-stepper .mat-horizontal-stepper-header-container {
  background: white;
  border-radius: 0 0 var(--vex-border-radius) var(--vex-border-radius);
}
@media (min-width: 640px) {
  .create-stepper .mat-horizontal-stepper-header-container {
    padding-left: 120px;
  }
}
.create-stepper .mat-horizontal-content-container {
  margin-top: 3rem;
  border-radius: var(--vex-border-radius);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-card-rgb) / var(--tw-bg-opacity));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
  padding: 24px;
}
.creat-stepper .mat-horizontal-stepper-header-container .mat-step-header {
  position: relative;
  z-index: 100;
}
.custom-header .mat-horizontal-stepper-header-container {
  background-color: rgb(var(--vex-background-app-bar-rgb)/var(--tw-bg-opacity));
  margin-bottom: 1.5rem;
}
.custom-align .mat-horizontal-stepper-header-container {
  align-self: flex-start;
  width: 100%;
}
.custom-align .mat-stepper-horizontal-line {
  max-width: 60px !important;
}
.custom-header .mat-step-header {
  margin: 10px;
  border-radius: 10px;
}
table.custom-header .mat-mdc-header-row {
  background-color: rgb(var(--vex-background-app-bar-rgb)/var(--tw-bg-opacity));
  height: 92px;
}
div.custom-header .bg-app-bar {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
:root {
  font-family: var(--font-family);
  font-feature-settings:
    "cv02",
    "cv03",
    "cv04",
    "cv11";
  font-variation-settings: normal;
  --font-family:
    loew-variable,
    "Inter var",
    sans-serif;
  --font-feature-settings:
    "cv02",
    "cv03",
    "cv04",
    "cv11";
  --text-color: #334155;
  --text-color-secondary: #64748b;
  --primary-color: #3B82F6;
  --primary-color-text: #ffffff;
  --surface-0: #ffffff;
  --surface-50: #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-400: #94a3b8;
  --surface-500: #64748b;
  --surface-600: #475569;
  --surface-700: #334155;
  --surface-800: #1e293b;
  --surface-900: #0f172a;
  --surface-950: #020617;
  --gray-0: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;
  --content-padding: 1.125rem;
  --inline-spacing: 0.5rem;
  --border-radius: 6px;
  --surface-ground: #f8fafc;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #e2e8f0;
  --surface-hover: #f1f5f9;
  --focus-ring: none;
  --maskbg: rgba(0, 0, 0, 0.4);
  --highlight-bg: #EFF6FF;
  --highlight-text-color: #1D4ED8;
  --p-anchor-gutter: 2px;
  color-scheme: light;
  --p-focus-ring-color: var(--primary-color);
  --blue-50: #f5f9ff;
  --blue-100: #d0e1fd;
  --blue-200: #abc9fb;
  --blue-300: #85b2f9;
  --blue-400: #609af8;
  --blue-500: #3b82f6;
  --blue-600: #326fd1;
  --blue-700: #295bac;
  --blue-800: #204887;
  --blue-900: #183462;
  --green-50: #e8f9ec;
  --green-100: #caf1d8;
  --green-200: #a0e6ba;
  --green-300: #76db9b;
  --green-400: #4cd07d;
  --green-500: #22c55e;
  --green-600: #1da750;
  --green-700: #188a42;
  --green-800: #136c34;
  --green-900: #0e4f26;
  --yellow-50: #fefbf3;
  --yellow-100: #faedc4;
  --yellow-200: #f6de95;
  --yellow-300: #f2d066;
  --yellow-400: #eec137;
  --yellow-500: #eab308;
  --yellow-600: #c79807;
  --yellow-700: #a47d06;
  --yellow-800: #816204;
  --yellow-900: #5e4803;
  --cyan-50: #f3fbfd;
  --cyan-100: #c3edf5;
  --cyan-200: #94e0ed;
  --cyan-300: #65d2e4;
  --cyan-400: #35c4dc;
  --cyan-500: #06b6d4;
  --cyan-600: #059bb4;
  --cyan-700: #047f94;
  --cyan-800: #036475;
  --cyan-900: #024955;
  --pink-50: #fef6fa;
  --pink-100: #fad3e7;
  --pink-200: #f7b0d3;
  --pink-300: #f38ec0;
  --pink-400: #f06bac;
  --pink-500: #ec4899;
  --pink-600: #c93d82;
  --pink-700: #a5326b;
  --pink-800: #822854;
  --pink-900: #5e1d3d;
  --indigo-50: #f7f7fe;
  --indigo-100: #dadafc;
  --indigo-200: #bcbdf9;
  --indigo-300: #9ea0f6;
  --indigo-400: #8183f4;
  --indigo-500: #6366f1;
  --indigo-600: #5457cd;
  --indigo-700: #4547a9;
  --indigo-800: #363885;
  --indigo-900: #282960;
  --teal-50: #f3fbfb;
  --teal-100: #c7eeea;
  --teal-200: #9ae0d9;
  --teal-300: #6dd3c8;
  --teal-400: #41c5b7;
  --teal-500: #14b8a6;
  --teal-600: #119c8d;
  --teal-700: #0e8174;
  --teal-800: #0b655b;
  --teal-900: #084a42;
  --orange-50: #fff8f3;
  --orange-100: #feddc7;
  --orange-200: #fcc39b;
  --orange-300: #fba86f;
  --orange-400: #fa8e42;
  --orange-500: #f97316;
  --orange-600: #d46213;
  --orange-700: #ae510f;
  --orange-800: #893f0c;
  --orange-900: #642e09;
  --bluegray-50: #f7f8f9;
  --bluegray-100: #dadee3;
  --bluegray-200: #bcc3cd;
  --bluegray-300: #9fa9b7;
  --bluegray-400: #818ea1;
  --bluegray-500: #64748b;
  --bluegray-600: #556376;
  --bluegray-700: #465161;
  --bluegray-800: #37404c;
  --bluegray-900: #282e38;
  --purple-50: #fbf7ff;
  --purple-100: #ead6fd;
  --purple-200: #dab6fc;
  --purple-300: #c996fa;
  --purple-400: #b975f9;
  --purple-500: #a855f7;
  --purple-600: #8f48d2;
  --purple-700: #763cad;
  --purple-800: #5c2f88;
  --purple-900: #432263;
  --red-50: #fff5f5;
  --red-100: #ffd0ce;
  --red-200: #ffaca7;
  --red-300: #ff8780;
  --red-400: #ff6259;
  --red-500: #ff3d32;
  --red-600: #d9342b;
  --red-700: #b32b23;
  --red-800: #8c221c;
  --red-900: #661814;
  --primary-50: #f5f9ff;
  --primary-100: #d0e1fd;
  --primary-200: #abc9fb;
  --primary-300: #85b2f9;
  --primary-400: #609af8;
  --primary-500: #3b82f6;
  --primary-600: #326fd1;
  --primary-700: #295bac;
  --primary-800: #204887;
  --primary-900: #183462;
  --tan-dark-800: rgba(1, 3, 4, 1);
  --tan-dark-700: rgba(2, 12, 16, 1);
  --tan-dark-600: rgba(4, 22, 27, 1);
  --tan-dark-500: rgba(6, 31, 39, 1);
  --tan-dark-450: rgba(26, 49, 56, 1);
  --tan-dark-400: rgba(56, 76, 82, 1);
  --tan-dark-300: rgba(106, 121, 125, 1);
  --tan-dark-200: rgba(155, 165, 169, 1);
  --tan-dark-100: rgba(205, 210, 212, 1);
  --tan-dark-70: rgba(225, 228, 229, 1);
  --tan-dark-50: rgba(240, 242, 242, 1);
  --tan-dark-20: rgba(248, 248, 249, 1);
  --tan-dark-trans-90: rgba(6, 31, 39, 0.9);
  --tan-dark-trans-80: rgba(6, 31, 39, 0.8);
  --tan-dark-trans-70: rgba(6, 31, 39, 0.7);
  --tan-dark-trans-60: rgba(6, 31, 39, 0.6);
  --tan-dark-trans-50: rgba(6, 31, 39, 0.5);
  --tan-dark-trans-40: rgba(6, 31, 39, 0.8);
  --tan-dark-trans-30: rgba(6, 31, 39, 0.3);
  --tan-dark-trans-20: rgba(6, 31, 39, 0.2);
  --tan-dark-trans-16: rgba(6, 31, 39, 0.16);
  --tan-dark-trans-12: rgba(6, 31, 39, 0.12);
  --tan-dark-trans-8: rgba(6, 31, 39, 0.08);
  --tan-dark-trans-6: rgba(6, 31, 39, 0.06);
  --tan-dark-trans-4: rgba(6, 31, 39, 0.04);
  --tan-dark-trans-2: rgba(6, 31, 39, 0.02);
  --tan-dark-trans-0: rgba(6, 31, 39, 0);
  --tan-primary-900: rgba(16, 53, 57, 1);
  --tan-primary-800: rgba(24, 81, 88, 1);
  --tan-primary-700: rgba(37, 121, 132, 1);
  --tan-primary-600: rgba(49, 162, 176, 1);
  --tan-primary-500: rgba(61, 202, 220, 1);
  --tan-primary-400: rgba(100, 213, 227, 1);
  --tan-primary-300: rgba(139, 223, 234, 1);
  --tan-primary-200: rgba(177, 234, 241, 1);
  --tan-primary-100: rgba(197, 239, 244, 1);
  --tan-primary-70: rgba(220, 245, 249, 1);
  --tan-primary-50: rgba(236, 250, 251, 1);
  --tan-primary-20: rgba(243, 252, 253, 1);
  --tan-primary-trans-90: rgba(61, 202, 220, 0.9);
  --tan-primary-trans-80: rgba(61, 202, 220, 0.8);
  --tan-primary-trans-70: rgba(61, 202, 220, 0.7);
  --tan-primary-trans-60: rgba(61, 202, 220, 0.6);
  --tan-primary-trans-50: rgba(61, 202, 220, 0.5);
  --tan-primary-trans-40: rgba(61, 202, 220, 0.4);
  --tan-primary-trans-30: rgba(61, 202, 220, 0.3);
  --tan-primary-trans-20: rgba(61, 202, 220, 0.2);
  --tan-primary-trans-16: rgba(61, 202, 220, 0.16);
  --tan-primary-trans-12: rgba(61, 202, 220, 0.12);
  --tan-primary-trans-8: rgba(61, 202, 220, 0.08);
  --tan-primary-trans-4: rgba(61, 202, 220, 0.04);
  --tan-primary-trans-0: rgba(61, 202, 220, 0);
  --tan-orange-900: rgba(71, 44, 19, 1);
  --tan-orange-800: rgba(122, 75, 33, 1);
  --tan-orange-700: rgba(173, 106, 47, 1);
  --tan-orange-600: rgba(214, 131, 58, 1);
  --tan-orange-500: rgba(255, 156, 69, 1);
  --tan-orange-400: rgba(255, 176, 106, 1);
  --tan-orange-300: rgba(255, 196, 143, 1);
  --tan-orange-200: rgba(255, 215, 181, 1);
  --tan-orange-100: rgba(255, 227, 203, 1);
  --tan-orange-50: rgba(255, 237, 222, 1);
  --tan-orange-20: rgba(255, 245, 236, 1);
  --tan-orange-trans-30: rgba(255, 156, 69, 0.3);
  --tan-orange-trans-20: rgba(255, 156, 69, 0.2);
  --tan-red-900: rgba(61, 22, 22, 1);
  --tan-red-800: rgba(106, 38, 38, 1);
  --tan-red-700: rgba(141, 50, 50, 1);
  --tan-red-600: rgba(188, 67, 67, 1);
  --tan-red-500: rgba(235, 84, 84, 1);
  --tan-red-400: rgba(239, 118, 118, 1);
  --tan-red-300: rgba(243, 152, 152, 1);
  --tan-red-200: rgba(247, 187, 187, 1);
  --tan-red-100: rgba(249, 204, 204, 1);
  --tan-red-50: rgba(251, 221, 221, 1);
  --tan-red-20: rgba(253, 238, 238, 1);
  --tan-red-trans-30: rgba(235, 84, 84, 0.3);
  --tan-red-trans-20: rgba(235, 84, 84, 0.2);
  --tan-green-900: rgba(24, 56, 31, 1);
  --tan-green-800: rgba(42, 96, 54, 1);
  --tan-green-700: rgba(56, 128, 72, 1);
  --tan-green-600: rgba(75, 171, 96, 1);
  --tan-green-500: rgba(94, 214, 120, 1);
  --tan-green-400: rgba(139, 225, 158, 1);
  --tan-green-300: rgba(171, 234, 185, 1);
  --tan-green-200: rgba(197, 240, 206, 1);
  --tan-green-100: rgba(216, 245, 223, 1);
  --tan-green-50: rgba(232, 249, 236, 1);
  --tan-green-20: rgba(242, 252, 244, 1);
  --tan-green-trans-40: rgba(94, 214, 120, 0.4);
  --tan-green-trans-30: rgba(94, 214, 120, 0.3);
  --tan-blue-900: rgba(10, 39, 51, 1);
  --tan-blue-800: rgba(19, 78, 102, 1);
  --tan-blue-700: rgba(29, 118, 153, 1);
  --tan-blue-600: rgba(38, 157, 204, 1);
  --tan-blue-500: rgba(48, 196, 255, 1);
  --tan-blue-400: rgba(89, 208, 255, 1);
  --tan-blue-300: rgba(131, 220, 255, 1);
  --tan-blue-200: rgba(172, 231, 255, 1);
  --tan-blue-100: rgba(193, 237, 255, 1);
  --tan-blue-50: rgba(234, 249, 255, 1);
  --tan-blue-20: rgba(243, 251, 255, 1);
  --tan-blue-trans-30: rgba(48, 196, 255, 0.3);
  --tan-lila-900: rgba(37, 27, 66, 1);
  --tan-lila-800: rgba(64, 47, 115, 1);
  --tan-lila-700: rgba(85, 62, 153, 1);
  --tan-lila-600: rgba(114, 83, 204, 1);
  --tan-lila-500: rgba(142, 104, 255, 1);
  --tan-lila-400: rgba(174, 146, 255, 1);
  --tan-lila-300: rgba(196, 176, 255, 1);
  --tan-lila-200: rgba(214, 201, 255, 1);
  --tan-lila-100: rgba(228, 219, 255, 1);
  --tan-lila-50: rgba(239, 234, 255, 1);
  --tan-lila-20: rgba(246, 243, 255, 1);
}
.p-editor-container .p-editor-toolbar {
  background: #ffffff;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-editor-container .p-editor-toolbar.ql-snow {
  border: 1px solid #e2e8f0;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
  stroke: #64748b;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
  fill: #64748b;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
  border: 0 none;
  color: #64748b;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
  color: #334155;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
  stroke: #334155;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
  fill: #334155;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #334155;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #334155;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #334155;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 0.25rem 0.25rem;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
  color: #334155;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
  color: #1e293b;
  background: #f1f5f9;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
  padding: 0.5rem 0.75rem;
}
.p-editor-container .p-editor-content {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-editor-container .p-editor-content.ql-snow {
  border: 1px solid #e2e8f0;
}
.p-editor-container .p-editor-content .ql-editor {
  background: #ffffff;
  color: #334155;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-editor-container .ql-snow.ql-toolbar button:hover,
.p-editor-container .ql-snow.ql-toolbar button:focus {
  color: #334155;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
  stroke: #334155;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
  fill: #334155;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
  color: #3B82F6;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
  stroke: #3B82F6;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
  fill: #3B82F6;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
  color: #3B82F6;
}
.p-component-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  transition-duration: 0.2s;
}
.p-disabled,
.p-component:disabled {
  opacity: 0.6;
}
.p-error {
  color: #f87171;
}
.p-text-secondary {
  color: #64748b;
}
.pi {
  font-size: 1rem;
}
.p-icon {
  width: 1rem;
  height: 1rem;
}
.p-link {
  font-family: var(--font-family);
  font-feature-settings: var(--font-feature-settings, normal);
  font-size: 1rem;
  border-radius: 6px;
}
.p-link:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-component-overlay-enter {
  animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
  animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--maskbg);
  }
}
@keyframes p-component-overlay-leave-animation {
  from {
    background-color: var(--maskbg);
  }
  to {
    background-color: transparent;
  }
}
.p-autocomplete .p-autocomplete-loader {
  right: 0.75rem;
}
.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
  right: 3.25rem;
}
.p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container {
  border-color: #94a3b8;
}
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-autocomplete .p-autocomplete-multiple-container {
  padding: 0.25rem 0.75rem;
  gap: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
  padding: 0.25rem 0;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
  font-family: var(--font-family);
  font-feature-settings: var(--font-feature-settings, normal);
  font-size: 1rem;
  color: #334155;
  padding: 0;
  margin: 0;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
  padding: 0.25rem 0.75rem;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 16px;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
  margin-left: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus {
  background: #e2e8f0;
  color: #0f172a;
}
.p-autocomplete.p-invalid.p-component > .p-inputtext {
  border-color: #f87171;
}
.p-autocomplete-panel {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-autocomplete-panel .p-autocomplete-items {
  padding: 0.25rem 0.25rem;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
  margin: 2px 0;
  padding: 0.5rem 0.75rem;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:first-child {
  margin-top: 0;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus {
  background: rgba(59, 130, 246, 0.24);
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
  color: #0f172a;
  background: #e2e8f0;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover {
  color: #1e293b;
  background: #f1f5f9;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #94a3b8;
  background: #ffffff;
  font-weight: 600;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-empty-message {
  padding: 0.5rem 0.75rem;
  color: #334155;
  background: transparent;
}
p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
  border-color: #f87171;
}
p-autocomplete.p-autocomplete-clearable .p-inputtext {
  padding-right: 2.5rem;
}
p-autocomplete.p-autocomplete-clearable .p-autocomplete-clear-icon {
  color: #94a3b8;
  right: 0.75rem;
}
p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon {
  color: #94a3b8;
  right: 3.25rem;
}
p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
  border-color: #f87171;
}
.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-datepicker {
  padding: 0.75rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.p-datepicker:not(.p-datepicker-inline) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
  background: #ffffff;
}
.p-datepicker .p-datepicker-header {
  padding: 0 0 0.5rem 0;
  color: #334155;
  background: #ffffff;
  font-weight: 500;
  margin: 0 0 0 0;
  border-bottom: 1px solid #e2e8f0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-datepicker .p-datepicker-header .p-datepicker-prev,
.p-datepicker .p-datepicker-header .p-datepicker-next {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-datepicker .p-datepicker-header .p-datepicker-title {
  line-height: 1.75rem;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  font-weight: 500;
  padding: 0.25rem;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
  color: #3B82F6;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
  margin-right: 0.5rem;
}
.p-datepicker table {
  font-size: 1rem;
  margin: 0.5rem 0 0 0;
}
.p-datepicker table th {
  padding: 0.25rem;
}
.p-datepicker table th > span {
  width: 2rem;
  height: 2rem;
}
.p-datepicker table td {
  padding: 0.25rem;
}
.p-datepicker table td > span {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border: 1px solid transparent;
}
.p-datepicker table td > span.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-datepicker table td > span:focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-datepicker table td.p-datepicker-today > span {
  background: #e2e8f0;
  color: #0f172a;
  border-color: transparent;
}
.p-datepicker table td.p-datepicker-today > span.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-datepicker .p-datepicker-buttonbar {
  padding: 0.5rem 0 0 0;
  border-top: 1px solid #e2e8f0;
}
.p-datepicker .p-datepicker-buttonbar .p-button {
  width: auto;
}
.p-datepicker .p-timepicker {
  border-top: 1px solid #e2e8f0;
  padding: 0;
}
.p-datepicker .p-timepicker button {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-datepicker .p-timepicker button:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-datepicker .p-timepicker button:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-datepicker .p-timepicker button:last-child {
  margin-top: 0.2em;
}
.p-datepicker .p-timepicker span {
  font-size: 1rem;
}
.p-datepicker .p-timepicker > div {
  padding: 0 0.5rem;
}
.p-datepicker.p-datepicker-timeonly .p-timepicker {
  border-top: 0 none;
}
.p-datepicker .p-monthpicker {
  margin: 0.5rem 0 0 0;
}
.p-datepicker .p-monthpicker .p-monthpicker-month {
  padding: 0.25rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-datepicker .p-yearpicker {
  margin: 0.5rem 0 0 0;
}
.p-datepicker .p-yearpicker .p-yearpicker-year {
  padding: 0.25rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
  border-left: 1px solid #e2e8f0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  padding-top: 0;
  padding-bottom: 0;
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
  padding-left: 0;
  border-left: 0 none;
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
  padding-right: 0;
}
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
  background: #f1f5f9;
}
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
  background: #f1f5f9;
}
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
  background: #f1f5f9;
}
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
p-calendar.p-calendar-clearable .p-inputtext {
  padding-right: 2.5rem;
}
p-calendar.p-calendar-clearable .p-calendar-clear-icon {
  color: #94a3b8;
  right: 0.75rem;
}
p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon {
  color: #94a3b8;
  right: 3.25rem;
}
@media screen and (max-width: 769px) {
  .p-datepicker table th,
  .p-datepicker table td {
    padding: 0.25rem;
  }
}
.p-cascadeselect {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-cascadeselect:not(.p-disabled):hover {
  border-color: #94a3b8;
}
.p-cascadeselect:not(.p-disabled).p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-cascadeselect .p-cascadeselect-label {
  background: transparent;
  border: 0 none;
  padding: 0.5rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
  color: #64748b;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
  outline: 0 none;
  box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
  background: transparent;
  color: #94a3b8;
  width: 2.5rem;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-cascadeselect.p-invalid.p-component {
  border-color: #f87171;
}
.p-cascadeselect.p-variant-filled {
  background-color: #f8fafc;
}
.p-cascadeselect.p-variant-filled:enabled:hover {
  background-color: #f8fafc;
}
.p-cascadeselect.p-variant-filled:enabled:focus {
  background-color: #ffffff;
}
.p-cascadeselect-panel {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-cascadeselect-panel .p-cascadeselect-items {
  padding: 0.25rem 0.25rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
  margin: 2px 0;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
  margin-top: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
  background: rgba(59, 130, 246, 0.24);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
  color: #0f172a;
  background: #e2e8f0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
  color: #1e293b;
  background: #f1f5f9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
  padding: 0.5rem 0.75rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
  font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
  background: #f8fafc;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
  background-color: #f8fafc;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
  background-color: #ffffff;
}
p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
  border-color: #f87171;
}
p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label {
  padding-right: 0.75rem;
}
p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-clear-icon {
  color: #94a3b8;
  right: 2.5rem;
}
.p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel {
  box-shadow: none;
  border-radius: 0;
  padding: 0.25rem 0 0.25rem 0.5rem;
}
.p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon {
  transform: rotate(90deg);
}
.p-checkbox {
  width: 1.25rem;
  height: 1.25rem;
}
.p-checkbox .p-checkbox-box {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  width: 1.25rem;
  height: 1.25rem;
  color: #334155;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  outline-color: transparent;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
  transition-duration: 0.2s;
  color: #ffffff;
  font-size: 0.875rem;
}
.p-checkbox .p-checkbox-box .p-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.p-checkbox .p-checkbox-box.p-highlight {
  border-color: #3B82F6;
  background: #3B82F6;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  border-color: #94a3b8;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}
.p-checkbox.p-variant-filled .p-checkbox-box {
  background-color: #f8fafc;
}
.p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
  background: #3B82F6;
}
.p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  background-color: #f8fafc;
}
.p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  background: #2563eb;
}
p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
  border-color: #f87171;
}
.p-input-filled .p-checkbox .p-checkbox-box {
  background-color: #f8fafc;
}
.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
  background: #3B82F6;
}
.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  background-color: #f8fafc;
}
.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  background: #2563eb;
}
.p-checkbox-label {
  margin-left: 0.5rem;
}
p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
  border-color: #f87171;
}
.p-chips:not(.p-disabled):hover .p-chips-multiple-container {
  border-color: #94a3b8;
}
.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-chips .p-chips-multiple-container {
  padding: 0.25rem 0.75rem;
  gap: 0.5rem;
}
.p-chips .p-chips-multiple-container .p-chips-token {
  padding: 0.25rem 0.75rem;
  margin-right: 0.5rem;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 16px;
}
.p-chips .p-chips-multiple-container .p-chips-token.p-focus {
  background: #e2e8f0;
  color: #0f172a;
}
.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
  margin-left: 0.5rem;
}
.p-chips .p-chips-multiple-container .p-chips-input-token {
  padding: 0.25rem 0;
}
.p-chips .p-chips-multiple-container .p-chips-input-token input {
  font-family: var(--font-family);
  font-feature-settings: var(--font-feature-settings, normal);
  font-size: 1rem;
  color: #334155;
  padding: 0;
  margin: 0;
}
p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
  border-color: #f87171;
}
p-chips.p-chips-clearable .p-inputtext {
  padding-right: 1.75rem;
}
p-chips.p-chips-clearable .p-chips-clear-icon {
  color: #94a3b8;
  right: 0.75rem;
}
.p-colorpicker-preview,
.p-fluid .p-colorpicker-preview.p-inputtext {
  width: 1.5rem;
  height: 1.5rem;
}
.p-colorpicker-panel {
  background: #323232;
  border: 1px solid #191919;
}
.p-colorpicker-panel .p-colorpicker-color-handle,
.p-colorpicker-panel .p-colorpicker-hue-handle {
  border-color: #ffffff;
}
.p-colorpicker-overlay-panel {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-dropdown {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-dropdown:not(.p-disabled):hover {
  border-color: #94a3b8;
}
.p-dropdown:not(.p-disabled).p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-dropdown.p-dropdown-clearable .p-dropdown-label {
  padding-right: 1.75rem;
}
.p-dropdown .p-dropdown-label {
  background: transparent;
  border: 0 none;
}
.p-dropdown .p-dropdown-label.p-placeholder {
  color: #64748b;
}
.p-dropdown .p-dropdown-label:focus,
.p-dropdown .p-dropdown-label:enabled:focus {
  outline: 0 none;
  box-shadow: none;
}
.p-dropdown .p-dropdown-trigger {
  background: transparent;
  color: #94a3b8;
  width: 2.5rem;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-dropdown .p-dropdown-clear-icon {
  color: #94a3b8;
  right: 2.5rem;
}
.p-dropdown.p-invalid.p-component {
  border-color: #f87171;
}
.p-dropdown.p-variant-filled {
  background-color: #f8fafc;
}
.p-dropdown.p-variant-filled:enabled:hover {
  background-color: #f8fafc;
}
.p-dropdown.p-variant-filled:enabled:focus {
  background-color: #ffffff;
}
.p-dropdown-panel {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-dropdown-panel .p-dropdown-header {
  padding: 0.5rem 0.5rem 0 0.5rem;
  border-bottom: 0 none;
  color: #334155;
  background: #ffffff;
  margin: 0 0 0 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
  padding-right: 1.75rem;
  margin-right: -1.75rem;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
  right: 0.75rem;
  color: #94a3b8;
}
.p-dropdown-panel .p-dropdown-items {
  padding: 0.25rem 0.25rem;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  margin: 2px 0;
  padding: 0.5rem 0.75rem;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
  margin-top: 0;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
  background: rgba(59, 130, 246, 0.24);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
  color: #0f172a;
  background: #e2e8f0;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
  color: #1e293b;
  background: #f1f5f9;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #94a3b8;
  background: #ffffff;
  font-weight: 600;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
  padding: 0.5rem 0.75rem;
  color: #334155;
  background: transparent;
}
.p-input-filled .p-dropdown {
  background: #f8fafc;
}
.p-input-filled .p-dropdown:not(.p-disabled):hover {
  background-color: #f8fafc;
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
  background-color: #ffffff;
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
  background-color: transparent;
}
p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
  border-color: #f87171;
}
.p-icon-field .p-input-icon {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
}
.p-inputgroup-addon {
  background: #ffffff;
  color: #64748b;
  border-top: 1px solid #cbd5e1;
  border-left: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  padding: 0.5rem 0.75rem;
  min-width: 2.5rem;
}
.p-inputgroup-addon:last-child {
  border-right: 1px solid #cbd5e1;
}
.p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-inputtext,
.p-inputgroup > .p-float-label > .p-component {
  border-radius: 0;
  margin: 0;
}
.p-inputgroup > .p-component + .p-inputgroup-addon,
.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
  border-left: 0 none;
}
.p-inputgroup > .p-component:focus,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
.p-inputgroup > .p-float-label > .p-component:focus {
  z-index: 1;
}
.p-inputgroup > .p-component:focus ~ label,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label,
.p-inputgroup > .p-float-label > .p-component:focus ~ label {
  z-index: 1;
}
.p-inputgroup-addon:first-child,
.p-inputgroup button:first-child,
.p-inputgroup input:first-child,
.p-inputgroup > .p-inputwrapper:first-child > .p-component,
.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-inputgroup .p-float-label:first-child input {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-inputgroup-addon:last-child,
.p-inputgroup button:last-child,
.p-inputgroup input:last-child,
.p-inputgroup > .p-inputwrapper:last-child > .p-component,
.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-inputgroup .p-float-label:last-child input {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-fluid .p-inputgroup .p-button {
  width: auto;
}
.p-fluid .p-inputgroup .p-button.p-button-icon-only {
  width: 2.5rem;
}
.p-icon-field-left .p-input-icon:first-of-type {
  left: 0.75rem;
  color: #94a3b8;
}
.p-icon-field-right .p-input-icon:last-of-type {
  right: 0.75rem;
  color: #94a3b8;
}
p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
  border-color: #f87171;
}
p-inputmask.p-inputmask-clearable .p-inputtext {
  padding-right: 2.5rem;
}
p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon {
  color: #94a3b8;
  right: 0.75rem;
}
.p-inputmask.p-variant-filled {
  background-color: #f8fafc;
}
.p-inputmask.p-variant-filled:enabled:hover {
  background-color: #f8fafc;
}
.p-inputmask.p-variant-filled:enabled:focus {
  background-color: #ffffff;
}
p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
  border-color: #f87171;
}
p-inputnumber.p-inputnumber-clearable .p-inputnumber-input {
  padding-right: 2.5rem;
}
p-inputnumber.p-inputnumber-clearable .p-inputnumber-clear-icon {
  color: #94a3b8;
  right: 0.75rem;
}
p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon {
  right: 3.25rem;
}
p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon {
  right: 3.25rem;
}
p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input {
  background-color: #f8fafc;
}
p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover {
  background-color: #f8fafc;
}
p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus {
  background-color: #ffffff;
}
.p-inputotp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.p-inputotp-input {
  text-align: center;
  width: 2.5rem;
}
.p-inputswitch {
  width: 2.5rem;
  height: 1.5rem;
}
.p-inputswitch .p-inputswitch-slider {
  background: #cbd5e1;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 30px;
}
.p-inputswitch .p-inputswitch-slider:before {
  background: #ffffff;
  width: 1rem;
  height: 1rem;
  left: 0.25rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  transition-duration: 0.2s;
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
  transform: translateX(1rem);
}
.p-inputswitch.p-focus .p-inputswitch-slider {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
  background: #94a3b8;
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
  background: #3B82F6;
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
  background: #ffffff;
}
.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
  background: #2563eb;
}
p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
  border-color: #f87171;
}
.p-inputtext {
  font-family: var(--font-family);
  font-feature-settings: var(--font-feature-settings, normal);
  font-size: 1rem;
  color: #334155;
  background: #ffffff;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  appearance: none;
  border-radius: 6px;
}
.p-inputtext:enabled:hover {
  border-color: #94a3b8;
}
.p-inputtext:enabled:focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-inputtext.ng-dirty.ng-invalid {
  border-color: #f87171;
}
.p-inputtext.p-variant-filled {
  background-color: #f8fafc;
}
.p-inputtext.p-variant-filled:enabled:hover {
  background-color: #f8fafc;
}
.p-inputtext.p-variant-filled:enabled:focus {
  background-color: #ffffff;
}
.p-inputtext.p-inputtext-sm {
  font-size: 0.875rem;
  padding: 0.4375rem 0.65625rem;
}
.p-inputtext.p-inputtext-lg {
  font-size: 1.25rem;
  padding: 0.625rem 0.9375rem;
}
.p-float-label > label {
  left: 0.75rem;
  color: #64748b;
  transition-duration: 0.2s;
}
.p-float-label > .ng-invalid.ng-dirty + label {
  color: #f87171;
}
.p-input-icon-left > .p-icon-wrapper.p-icon,
.p-input-icon-left > i:first-of-type {
  left: 0.75rem;
  color: #94a3b8;
}
.p-input-icon-left > .p-inputtext {
  padding-left: 2.5rem;
}
.p-input-icon-left.p-float-label > label {
  left: 2.5rem;
}
.p-input-icon-right > .p-icon-wrapper,
.p-input-icon-right > i:last-of-type {
  right: 0.75rem;
  color: #94a3b8;
}
.p-input-icon-right > .p-inputtext {
  padding-right: 2.5rem;
}
.p-icon-field-left > .p-inputtext {
  padding-left: 2.5rem;
}
.p-icon-field-left.p-float-label > label {
  left: 2.5rem;
}
.p-icon-field-right > .p-inputtext {
  padding-right: 2.5rem;
}
::-webkit-input-placeholder {
  color: #64748b;
}
:-moz-placeholder {
  color: #64748b;
}
::-moz-placeholder {
  color: #64748b;
}
:-ms-input-placeholder {
  color: #64748b;
}
.p-input-filled .p-inputtext {
  background-color: #f8fafc;
}
.p-input-filled .p-inputtext:enabled:hover {
  background-color: #f8fafc;
}
.p-input-filled .p-inputtext:enabled:focus {
  background-color: #ffffff;
}
.p-inputtext-sm .p-inputtext {
  font-size: 0.875rem;
  padding: 0.4375rem 0.65625rem;
}
.p-inputtext-lg .p-inputtext {
  font-size: 1.25rem;
  padding: 0.625rem 0.9375rem;
}
.p-listbox {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-listbox .p-listbox-header {
  padding: 0.5rem 0.5rem 0 0.5rem;
  border-bottom: 0 none;
  color: #334155;
  background: #ffffff;
  margin: 0 0 0 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-listbox .p-listbox-header .p-listbox-filter {
  padding-right: 1.75rem;
}
.p-listbox .p-listbox-header .p-listbox-filter-icon {
  right: 0.75rem;
  color: #94a3b8;
}
.p-listbox .p-listbox-header .p-checkbox {
  margin-right: 0.5rem;
}
.p-listbox .p-listbox-list {
  padding: 0.25rem 0.25rem;
  outline: 0 none;
}
.p-listbox .p-listbox-list .p-listbox-item {
  margin: 2px 0;
  padding: 0.5rem 0.75rem;
  border: 0 none;
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-listbox .p-listbox-list .p-listbox-item:first-child {
  margin-top: 0;
}
.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
  margin-right: 0.5rem;
}
.p-listbox .p-listbox-list .p-listbox-item-group {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #94a3b8;
  background: #ffffff;
  font-weight: 600;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
  padding: 0.5rem 0.75rem;
  color: #334155;
  background: transparent;
}
.p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
  background: rgba(59, 130, 246, 0.24);
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
  color: #1e293b;
  background: #f1f5f9;
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
  color: #1e293b;
  background: #f1f5f9;
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
  color: #1e293b;
  background: #f1f5f9;
}
.p-listbox.p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
p-listbox.ng-dirty.ng-invalid > .p-listbox {
  border-color: #f87171;
}
.p-multiselect {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-multiselect:not(.p-disabled):hover {
  border-color: #94a3b8;
}
.p-multiselect:not(.p-disabled).p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-multiselect .p-multiselect-label {
  padding: 0.5rem 0.75rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-multiselect .p-multiselect-label.p-placeholder {
  color: #64748b;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
  padding: 0.25rem 0.75rem;
  margin-right: 0.5rem;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 16px;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
  margin-left: 0.5rem;
}
.p-multiselect .p-multiselect-trigger {
  background: transparent;
  color: #94a3b8;
  width: 2.5rem;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-multiselect.p-variant-filled {
  background: #f8fafc;
}
.p-multiselect.p-variant-filled:not(.p-disabled):hover {
  background-color: #f8fafc;
}
.p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
  background-color: #ffffff;
}
.p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
  padding: 0.25rem 0.75rem;
}
.p-multiselect-clearable .p-multiselect-label-container {
  padding-right: 1.75rem;
}
.p-multiselect-clearable .p-multiselect-clear-icon {
  color: #94a3b8;
  right: 2.5rem;
}
.p-multiselect-panel {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-multiselect-panel .p-multiselect-header {
  padding: 0.5rem 0.5rem 0 0.5rem;
  border-bottom: 0 none;
  color: #334155;
  background: #ffffff;
  margin: 0 0 0 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
p-table button.p-button.p-button-rounded:focus {
  box-shadow: none;
}
.p-multiselect p-overlay div.p-overlay {
  width: 280px;
}
.p-multiselect {
  width: 100%;
}
.p-button.p-button-icon-only.p-button-rounded {
  border-radius: 50%;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
}
.p-multiselect {
  display: inline-flex !important;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.p-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-multiselect-label-container {
  overflow: hidden;
  flex: 1 1 auto;
  cursor: pointer;
  display: flex;
}
.p-multiselect-label {
  display: block;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-multiselect-label-empty {
  overflow: hidden;
  visibility: hidden;
}
.p-multiselect-token {
  cursor: default;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.p-multiselect-token-icon {
  cursor: pointer;
}
.p-multiselect-token-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}
.p-multiselect-items-wrapper {
  overflow: auto;
}
.p-multiselect-items {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.p-multiselect-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.p-multiselect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-multiselect-filter-container {
  position: relative;
  flex: 1 1 auto;
}
.p-multiselect-filter-icon {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
}
.p-multiselect-filter-container .p-inputtext {
  width: 100%;
}
.p-multiselect-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.p-fluid .p-multiselect {
  display: flex;
}
.p-multiselect-clear-icon {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
  cursor: pointer;
}
.p-multiselect-clearable {
  position: relative;
}
.p-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
  padding-right: 1.75rem;
}
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
  right: 0.75rem;
  color: #94a3b8;
}
.p-multiselect-panel .p-multiselect-header .p-checkbox {
  margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-header .p-multiselect-close {
  margin-left: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-multiselect-panel .p-multiselect-items {
  padding: 0.25rem 0.25rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
  margin: 2px 0;
  padding: 0.5rem 0.75rem;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
  margin-top: 0;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
  background: rgba(59, 130, 246, 0.24);
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
  color: #0f172a;
  background: #f1f5f9;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
  color: #1e293b;
  background: #f1f5f9;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
  margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #94a3b8;
  background: #ffffff;
  font-weight: 600;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
  padding: 0.5rem 0.75rem;
  color: #334155;
  background: transparent;
}
.p-input-filled .p-multiselect {
  background: #f8fafc;
}
.p-input-filled .p-multiselect:not(.p-disabled):hover {
  background-color: #f8fafc;
}
.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
  background-color: #ffffff;
}
p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
  border-color: #f87171;
}
p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
  border-color: #f87171;
}
.p-password-panel {
  padding: 0 1.125rem 1.125rem 1.125rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-password-panel .p-password-meter {
  margin-bottom: 0.5rem;
  background: #e2e8f0;
}
.p-password-panel .p-password-meter .p-password-strength.weak {
  background: #ef4444;
}
.p-password-panel .p-password-meter .p-password-strength.medium {
  background: #f59e0b;
}
.p-password-panel .p-password-meter .p-password-strength.strong {
  background: #22c55e;
}
p-password.p-password-clearable .p-password-input {
  padding-right: 2.5rem;
}
p-password.p-password-clearable .p-password-clear-icon {
  color: #94a3b8;
  right: 0.75rem;
}
p-password.p-password-clearable.p-password-mask .p-password-input {
  padding-right: 4.25rem;
}
p-password.p-password-clearable.p-password-mask .p-password-clear-icon {
  color: #94a3b8;
  right: 2.5rem;
}
.p-radiobutton {
  width: 1.25rem;
  height: 1.25rem;
}
.p-radiobutton .p-radiobutton-box {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  width: 1.25rem;
  height: 1.25rem;
  color: #334155;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  outline-color: transparent;
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
  border-color: #94a3b8;
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition-duration: 0.2s;
  background-color: #3B82F6;
}
.p-radiobutton .p-radiobutton-box.p-highlight {
  border-color: #3B82F6;
  background: #ffffff;
}
.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
  border-color: #2563eb;
  background: #ffffff;
  color: #2563eb;
}
.p-radiobutton.p-variant-filled .p-radiobutton-box {
  background-color: #f8fafc;
}
.p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover {
  background-color: #f8fafc;
}
.p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight {
  background: #ffffff;
}
.p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
  background: #ffffff;
}
p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
  border-color: #f87171;
}
.p-input-filled .p-radiobutton .p-radiobutton-box {
  background-color: #f8fafc;
}
.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
  background-color: #f8fafc;
}
.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
  background: #ffffff;
}
.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
  background: #ffffff;
}
.p-radiobutton-label {
  margin-left: 0.5rem;
}
.p-rating {
  gap: 0.5rem;
}
.p-rating .p-rating-item {
  border-radius: 50%;
  outline-color: transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.p-rating .p-rating-item .p-rating-icon {
  color: #64748b;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  font-size: 1rem;
}
.p-rating .p-rating-item .p-rating-icon.p-icon {
  width: 1rem;
  height: 1rem;
}
.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
  color: #f87171;
}
.p-rating .p-rating-item.p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
  color: #3B82F6;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
  color: #3B82F6;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
  color: #ef4444;
}
.p-selectbutton .p-button {
  background: #f1f5f9;
  border: 1px solid #f1f5f9;
  color: #64748b;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-selectbutton .p-button .p-button-icon-left,
.p-selectbutton .p-button .p-button-icon-right {
  color: #64748b;
}
.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
  background: #f1f5f9;
  border-color: #f1f5f9;
  color: #334155;
}
.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
  color: #334155;
}
.p-selectbutton .p-button.p-highlight {
  background: #f1f5f9;
  border-color: #f1f5f9;
  color: #0f172a;
}
.p-selectbutton .p-button.p-highlight .p-button-icon-left,
.p-selectbutton .p-button.p-highlight .p-button-icon-right {
  color: #0f172a;
}
.p-selectbutton .p-button.p-highlight:hover {
  background: #f1f5f9;
  border-color: #f1f5f9;
  color: #0f172a;
}
.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
  color: #0f172a;
}
p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
  border-color: #f87171;
}
.p-slider {
  background: #e2e8f0;
  border: 0 none;
  border-radius: 6px;
}
.p-slider.p-slider-horizontal {
  height: 3px;
}
.p-slider.p-slider-horizontal .p-slider-handle {
  margin-top: -10px;
  margin-left: -10px;
}
.p-slider.p-slider-vertical {
  height: 100%;
  width: 3px;
}
.p-slider.p-slider-vertical .p-slider-handle {
  height: 20px;
  width: 20px;
  margin-left: -10px;
  margin-bottom: -10px;
}
.p-slider .p-slider-handle {
  height: 20px;
  width: 20px;
  background: #e2e8f0;
  border: 0 none;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-slider .p-slider-handle:focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-slider .p-slider-range {
  background: #3B82F6;
}
.p-slider:not(.p-disabled) .p-slider-handle:hover {
  background: #e2e8f0;
  border-color: transparent;
}
.p-slider.p-slider-animate.p-slider-horizontal .p-slider-handle {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s,
    left 0.2s;
}
.p-slider.p-slider-animate.p-slider-horizontal .p-slider-range {
  transition: width 0.2s;
}
.p-slider.p-slider-animate.p-slider-vertical .p-slider-handle {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s,
    bottom 0.2s;
}
.p-slider.p-slider-animate.p-slider-vertical .p-slider-range {
  transition: height 0.2s;
}
.p-togglebutton.p-button {
  background: #f1f5f9;
  border: 1px solid #f1f5f9;
  color: #64748b;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-togglebutton.p-button .p-button-icon-left,
.p-togglebutton.p-button .p-button-icon-right {
  color: #64748b;
}
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
  background: #f1f5f9;
  border-color: #f1f5f9;
  color: #334155;
}
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
  color: #334155;
}
.p-togglebutton.p-button.p-highlight {
  background: #f1f5f9;
  border-color: #f1f5f9;
  color: #0f172a;
}
.p-togglebutton.p-button.p-highlight .p-button-icon-left,
.p-togglebutton.p-button.p-highlight .p-button-icon-right {
  color: #0f172a;
}
.p-togglebutton.p-button.p-highlight:hover {
  background: #f1f5f9;
  border-color: #f1f5f9;
  color: #0f172a;
}
.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
  color: #0f172a;
}
p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
  border-color: #f87171;
}
.p-treeselect {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-treeselect:not(.p-disabled):hover {
  border-color: #94a3b8;
}
.p-treeselect:not(.p-disabled).p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-treeselect .p-treeselect-label {
  padding: 0.5rem 0.75rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-treeselect .p-treeselect-label.p-placeholder {
  color: #64748b;
}
.p-treeselect.p-treeselect-chip .p-treeselect-token {
  padding: 0.25rem 0.75rem;
  margin-right: 0.5rem;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 16px;
}
.p-treeselect .p-treeselect-trigger {
  background: transparent;
  color: #94a3b8;
  width: 2.5rem;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-treeselect.p-variant-filled {
  background-color: #f8fafc;
}
.p-treeselect.p-variant-filled:enabled:hover {
  background-color: #f8fafc;
}
.p-treeselect.p-variant-filled:enabled:focus {
  background-color: #ffffff;
}
p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
  border-color: #f87171;
}
.p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label {
  padding: 0.25rem 0.75rem;
}
.p-treeselect-panel {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-treeselect-panel .p-treeselect-header {
  padding: 0.5rem 0.5rem 0 0.5rem;
  border-bottom: 0 none;
  color: #334155;
  background: #ffffff;
  margin: 0 0 0 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
  margin-right: 0.5rem;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
  padding-right: 1.75rem;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
  right: 0.75rem;
  color: #94a3b8;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
  padding-right: 3.5rem;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
  right: 2.5rem;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-close {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
  border: 0 none;
}
.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
  padding: 0.5rem 0.75rem;
  color: #334155;
  background: transparent;
}
.p-input-filled .p-treeselect {
  background: #f8fafc;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
  background-color: #f8fafc;
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
  background-color: #ffffff;
}
p-treeselect.p-treeselect-clearable .p-treeselect-label-container {
  padding-right: 1.75rem;
}
p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
  color: #94a3b8;
  right: 2.5rem;
}
button.p-button {
  color: #ffffff;
  background: #3B82F6;
  display: inline-flex;
  border: 1px solid #3B82F6;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
  outline-color: transparent;
}
.p-column-filter-buttonbar .p-button {
  width: auto !important;
}
.p-button:not(:disabled):hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.p-button:not(:disabled):active {
  background: #1D4ED8;
  color: #ffffff;
  border-color: #1D4ED8;
}
.p-button.p-button-outlined {
  background-color: transparent;
  color: #3B82F6;
  border: 1px solid;
}
.p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(59, 130, 246, 0.04);
  color: #3B82F6;
  border: 1px solid;
}
.p-button.p-button-outlined:not(:disabled):active {
  background: rgba(59, 130, 246, 0.16);
  color: #3B82F6;
  border: 1px solid;
}
.p-button.p-button-outlined.p-button-plain {
  color: #334155;
  border-color: #334155;
}
.p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
  background: #f1f5f9;
  color: #334155;
}
.p-button.p-button-outlined.p-button-plain:not(:disabled):active {
  background: #e2e8f0;
  color: #334155;
}
.p-button.p-button-text {
  background-color: transparent;
  color: #3B82F6;
  border-color: transparent;
}
.p-button.p-button-text:not(:disabled):hover {
  background: rgba(59, 130, 246, 0.04);
  color: #3B82F6;
  border-color: transparent;
}
.p-button.p-button-text:not(:disabled):active {
  background: rgba(59, 130, 246, 0.16);
  color: #3B82F6;
  border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
  color: #334155;
}
.p-button.p-button-text.p-button-plain:not(:disabled):hover {
  background: #f1f5f9;
  color: #334155;
}
.p-button.p-button-text.p-button-plain:not(:disabled):active {
  background: #e2e8f0;
  color: #334155;
}
.p-button:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-button .p-button-label {
  transition-duration: 0.2s;
}
.p-button .p-button-icon-left {
  margin-right: 0.5rem;
}
.p-button .p-button-icon-right {
  margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
  margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
  margin-bottom: 0.5rem;
}
.p-button .p-badge {
  margin-left: 0.5rem;
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  color: #3B82F6;
  background-color: #ffffff;
}
.p-button.p-button-raised {
  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.p-button.p-button-rounded {
  border-radius: 2rem;
}
.p-button.p-button-icon-only {
  width: 2.5rem;
  padding: 0.5rem 0;
}
.p-button.p-button-icon-only .p-button-icon-left,
.p-button.p-button-icon-only .p-button-icon-right {
  margin: 0;
}
.p-button.p-button-icon-only.p-button-rounded {
  border-radius: 50%;
  height: 2.5rem;
}
.p-button.p-button-sm {
  font-size: 0.875rem;
  padding: 0.4375rem 0.875rem;
}
.p-button.p-button-sm .p-button-icon {
  font-size: 0.875rem;
}
.p-button.p-button-lg {
  font-size: 1.25rem;
  padding: 0.625rem 1.25rem;
}
.p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
}
.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
}
.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
}
.p-fluid .p-button {
  width: 100%;
}
.p-fluid .p-button-icon-only {
  width: 2.5rem;
}
.p-fluid .p-button-group {
  display: flex;
}
.p-fluid .p-button-group .p-button {
  flex: 1;
}
.p-button.p-button-secondary,
.p-button-group.p-button-secondary > .p-button,
.p-splitbutton.p-button-secondary > .p-button {
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #f1f5f9;
}
.p-button.p-button-secondary:not(:disabled):hover,
.p-button-group.p-button-secondary > .p-button:not(:disabled):hover,
.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #e2e8f0;
}
.p-button.p-button-secondary:not(:disabled):focus,
.p-button-group.p-button-secondary > .p-button:not(:disabled):focus,
.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-button.p-button-secondary:not(:disabled):active,
.p-button-group.p-button-secondary > .p-button:not(:disabled):active,
.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active {
  background: #cbd5e1;
  color: #1e293b;
  border-color: #cbd5e1;
}
.p-button.p-button-secondary.p-button-outlined,
.p-button-group.p-button-secondary > .p-button.p-button-outlined,
.p-splitbutton.p-button-secondary > .p-button.p-button-outlined {
  background-color: transparent;
  color: #f1f5f9;
  border: 1px solid;
}
.p-button.p-button-secondary.p-button-outlined:not(:disabled):hover,
.p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover,
.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(241, 245, 249, 0.04);
  color: #f1f5f9;
  border: 1px solid;
}
.p-button.p-button-secondary.p-button-outlined:not(:disabled):active,
.p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active,
.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active {
  background: rgba(241, 245, 249, 0.16);
  color: #f1f5f9;
  border: 1px solid;
}
.p-button.p-button-secondary.p-button-text,
.p-button-group.p-button-secondary > .p-button.p-button-text,
.p-splitbutton.p-button-secondary > .p-button.p-button-text {
  background-color: transparent;
  color: #f1f5f9;
  border-color: transparent;
}
.p-button.p-button-secondary.p-button-text:not(:disabled):hover,
.p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover,
.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover {
  background: rgba(241, 245, 249, 0.04);
  border-color: transparent;
  color: #f1f5f9;
}
.p-button.p-button-secondary.p-button-text:not(:disabled):active,
.p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active,
.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active {
  background: rgba(241, 245, 249, 0.16);
  border-color: transparent;
  color: #f1f5f9;
}
.p-button.p-button-info,
.p-button-group.p-button-info > .p-button,
.p-splitbutton.p-button-info > .p-button {
  color: #ffffff;
  background: #0ea5e9;
  border: 1px solid #0ea5e9;
}
.p-button.p-button-info:not(:disabled):hover,
.p-button-group.p-button-info > .p-button:not(:disabled):hover,
.p-splitbutton.p-button-info > .p-button:not(:disabled):hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}
.p-button.p-button-info:not(:disabled):focus,
.p-button-group.p-button-info > .p-button:not(:disabled):focus,
.p-splitbutton.p-button-info > .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-button.p-button-info:not(:disabled):active,
.p-button-group.p-button-info > .p-button:not(:disabled):active,
.p-splitbutton.p-button-info > .p-button:not(:disabled):active {
  background: #0369a1;
  color: #ffffff;
  border-color: #0369a1;
}
.p-button.p-button-info.p-button-outlined,
.p-button-group.p-button-info > .p-button.p-button-outlined,
.p-splitbutton.p-button-info > .p-button.p-button-outlined {
  background-color: transparent;
  color: #0ea5e9;
  border: 1px solid;
}
.p-button.p-button-info.p-button-outlined:not(:disabled):hover,
.p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover,
.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(14, 165, 233, 0.04);
  color: #0ea5e9;
  border: 1px solid;
}
.p-button.p-button-info.p-button-outlined:not(:disabled):active,
.p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active,
.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active {
  background: rgba(14, 165, 233, 0.16);
  color: #0ea5e9;
  border: 1px solid;
}
.p-button.p-button-info.p-button-text,
.p-button-group.p-button-info > .p-button.p-button-text,
.p-splitbutton.p-button-info > .p-button.p-button-text {
  background-color: transparent;
  color: #0ea5e9;
  border-color: transparent;
}
.p-button.p-button-info.p-button-text:not(:disabled):hover,
.p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover,
.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover {
  background: rgba(14, 165, 233, 0.04);
  border-color: transparent;
  color: #0ea5e9;
}
.p-button.p-button-info.p-button-text:not(:disabled):active,
.p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active,
.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active {
  background: rgba(14, 165, 233, 0.16);
  border-color: transparent;
  color: #0ea5e9;
}
.p-button.p-button-success,
.p-button-group.p-button-success > .p-button,
.p-splitbutton.p-button-success > .p-button {
  color: #ffffff;
  background: #22c55e;
  border: 1px solid #22c55e;
}
.p-button.p-button-success:not(:disabled):hover,
.p-button-group.p-button-success > .p-button:not(:disabled):hover,
.p-splitbutton.p-button-success > .p-button:not(:disabled):hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.p-button.p-button-success:not(:disabled):focus,
.p-button-group.p-button-success > .p-button:not(:disabled):focus,
.p-splitbutton.p-button-success > .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-button.p-button-success:not(:disabled):active,
.p-button-group.p-button-success > .p-button:not(:disabled):active,
.p-splitbutton.p-button-success > .p-button:not(:disabled):active {
  background: #15803d;
  color: #ffffff;
  border-color: #15803d;
}
.p-button.p-button-success.p-button-outlined,
.p-button-group.p-button-success > .p-button.p-button-outlined,
.p-splitbutton.p-button-success > .p-button.p-button-outlined {
  background-color: transparent;
  color: #22c55e;
  border: 1px solid;
}
.p-button.p-button-success.p-button-outlined:not(:disabled):hover,
.p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover,
.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(34, 197, 94, 0.04);
  color: #22c55e;
  border: 1px solid;
}
.p-button.p-button-success.p-button-outlined:not(:disabled):active,
.p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active,
.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  border: 1px solid;
}
.p-button.p-button-success.p-button-text,
.p-button-group.p-button-success > .p-button.p-button-text,
.p-splitbutton.p-button-success > .p-button.p-button-text {
  background-color: transparent;
  color: #22c55e;
  border-color: transparent;
}
.p-button.p-button-success.p-button-text:not(:disabled):hover,
.p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover,
.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover {
  background: rgba(34, 197, 94, 0.04);
  border-color: transparent;
  color: #22c55e;
}
.p-button.p-button-success.p-button-text:not(:disabled):active,
.p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active,
.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active {
  background: rgba(34, 197, 94, 0.16);
  border-color: transparent;
  color: #22c55e;
}
.p-button.p-button-warning,
.p-button-group.p-button-warning > .p-button,
.p-splitbutton.p-button-warning > .p-button {
  color: #ffffff;
  background: #f97316;
  border: 1px solid #f97316;
}
.p-button.p-button-warning:not(:disabled):hover,
.p-button-group.p-button-warning > .p-button:not(:disabled):hover,
.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover {
  background: #ea580c;
  color: #ffffff;
  border-color: #ea580c;
}
.p-button.p-button-warning:not(:disabled):focus,
.p-button-group.p-button-warning > .p-button:not(:disabled):focus,
.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-button.p-button-warning:not(:disabled):active,
.p-button-group.p-button-warning > .p-button:not(:disabled):active,
.p-splitbutton.p-button-warning > .p-button:not(:disabled):active {
  background: #c2410c;
  color: #ffffff;
  border-color: #c2410c;
}
.p-button.p-button-warning.p-button-outlined,
.p-button-group.p-button-warning > .p-button.p-button-outlined,
.p-splitbutton.p-button-warning > .p-button.p-button-outlined {
  background-color: transparent;
  color: #f97316;
  border: 1px solid;
}
.p-button.p-button-warning.p-button-outlined:not(:disabled):hover,
.p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover,
.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(249, 115, 22, 0.04);
  color: #f97316;
  border: 1px solid;
}
.p-button.p-button-warning.p-button-outlined:not(:disabled):active,
.p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active,
.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active {
  background: rgba(249, 115, 22, 0.16);
  color: #f97316;
  border: 1px solid;
}
.p-button.p-button-warning.p-button-text,
.p-button-group.p-button-warning > .p-button.p-button-text,
.p-splitbutton.p-button-warning > .p-button.p-button-text {
  background-color: transparent;
  color: #f97316;
  border-color: transparent;
}
.p-button.p-button-warning.p-button-text:not(:disabled):hover,
.p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover,
.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover {
  background: rgba(249, 115, 22, 0.04);
  border-color: transparent;
  color: #f97316;
}
.p-button.p-button-warning.p-button-text:not(:disabled):active,
.p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active,
.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active {
  background: rgba(249, 115, 22, 0.16);
  border-color: transparent;
  color: #f97316;
}
.p-button.p-button-help,
.p-button-group.p-button-help > .p-button,
.p-splitbutton.p-button-help > .p-button {
  color: #ffffff;
  background: #a855f7;
  border: 1px solid #a855f7;
}
.p-button.p-button-help:not(:disabled):hover,
.p-button-group.p-button-help > .p-button:not(:disabled):hover,
.p-splitbutton.p-button-help > .p-button:not(:disabled):hover {
  background: #9333ea;
  color: #ffffff;
  border-color: #9333ea;
}
.p-button.p-button-help:not(:disabled):focus,
.p-button-group.p-button-help > .p-button:not(:disabled):focus,
.p-splitbutton.p-button-help > .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-button.p-button-help:not(:disabled):active,
.p-button-group.p-button-help > .p-button:not(:disabled):active,
.p-splitbutton.p-button-help > .p-button:not(:disabled):active {
  background: #7e22ce;
  color: #ffffff;
  border-color: #7e22ce;
}
.p-button.p-button-help.p-button-outlined,
.p-button-group.p-button-help > .p-button.p-button-outlined,
.p-splitbutton.p-button-help > .p-button.p-button-outlined {
  background-color: transparent;
  color: #a855f7;
  border: 1px solid;
}
.p-button.p-button-help.p-button-outlined:not(:disabled):hover,
.p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover,
.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(168, 85, 247, 0.04);
  color: #a855f7;
  border: 1px solid;
}
.p-button.p-button-help.p-button-outlined:not(:disabled):active,
.p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active,
.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active {
  background: rgba(168, 85, 247, 0.16);
  color: #a855f7;
  border: 1px solid;
}
.p-button.p-button-help.p-button-text,
.p-button-group.p-button-help > .p-button.p-button-text,
.p-splitbutton.p-button-help > .p-button.p-button-text {
  background-color: transparent;
  color: #a855f7;
  border-color: transparent;
}
.p-button.p-button-help.p-button-text:not(:disabled):hover,
.p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover,
.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover {
  background: rgba(168, 85, 247, 0.04);
  border-color: transparent;
  color: #a855f7;
}
.p-button.p-button-help.p-button-text:not(:disabled):active,
.p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active,
.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active {
  background: rgba(168, 85, 247, 0.16);
  border-color: transparent;
  color: #a855f7;
}
.p-button.p-button-danger,
.p-button-group.p-button-danger > .p-button,
.p-splitbutton.p-button-danger > .p-button {
  color: #ffffff;
  background: #ef4444;
  border: 1px solid #ef4444;
}
.p-button.p-button-danger:not(:disabled):hover,
.p-button-group.p-button-danger > .p-button:not(:disabled):hover,
.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}
.p-button.p-button-danger:not(:disabled):focus,
.p-button-group.p-button-danger > .p-button:not(:disabled):focus,
.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-button.p-button-danger:not(:disabled):active,
.p-button-group.p-button-danger > .p-button:not(:disabled):active,
.p-splitbutton.p-button-danger > .p-button:not(:disabled):active {
  background: #b91c1c;
  color: #ffffff;
  border-color: #b91c1c;
}
.p-button.p-button-danger.p-button-outlined,
.p-button-group.p-button-danger > .p-button.p-button-outlined,
.p-splitbutton.p-button-danger > .p-button.p-button-outlined {
  background-color: transparent;
  color: #ef4444;
  border: 1px solid;
}
.p-button.p-button-danger.p-button-outlined:not(:disabled):hover,
.p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover,
.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(239, 68, 68, 0.04);
  color: #ef4444;
  border: 1px solid;
}
.p-button.p-button-danger.p-button-outlined:not(:disabled):active,
.p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active,
.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active {
  background: rgba(239, 68, 68, 0.16);
  color: #ef4444;
  border: 1px solid;
}
.p-button.p-button-danger.p-button-text,
.p-button-group.p-button-danger > .p-button.p-button-text,
.p-splitbutton.p-button-danger > .p-button.p-button-text {
  background-color: transparent;
  color: #ef4444;
  border-color: transparent;
}
.p-button.p-button-danger.p-button-text:not(:disabled):hover,
.p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover,
.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover {
  background: rgba(239, 68, 68, 0.04);
  border-color: transparent;
  color: #ef4444;
}
.p-button.p-button-danger.p-button-text:not(:disabled):active,
.p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active,
.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active {
  background: rgba(239, 68, 68, 0.16);
  border-color: transparent;
  color: #ef4444;
}
.p-button.p-button-contrast,
.p-button-group.p-button-contrast > .p-button,
.p-splitbutton.p-button-contrast > .p-button {
  color: #ffffff;
  background: #020617;
  border: 1px solid #020617;
}
.p-button.p-button-contrast:not(:disabled):hover,
.p-button-group.p-button-contrast > .p-button:not(:disabled):hover,
.p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
  background: #1e293b;
  color: #ffffff;
  border-color: #1e293b;
}
.p-button.p-button-contrast:not(:disabled):focus,
.p-button-group.p-button-contrast > .p-button:not(:disabled):focus,
.p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-button.p-button-contrast:not(:disabled):active,
.p-button-group.p-button-contrast > .p-button:not(:disabled):active,
.p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
  background: #334155;
  color: #ffffff;
  border-color: #334155;
}
.p-button.p-button-contrast.p-button-outlined,
.p-button-group.p-button-contrast > .p-button.p-button-outlined,
.p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
  background-color: transparent;
  color: #020617;
  border: 1px solid;
}
.p-button.p-button-contrast.p-button-outlined:not(:disabled):hover,
.p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover,
.p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
  background: rgba(2, 6, 23, 0.04);
  color: #020617;
  border: 1px solid;
}
.p-button.p-button-contrast.p-button-outlined:not(:disabled):active,
.p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active,
.p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
  background: rgba(2, 6, 23, 0.16);
  color: #020617;
  border: 1px solid;
}
.p-button.p-button-contrast.p-button-text,
.p-button-group.p-button-contrast > .p-button.p-button-text,
.p-splitbutton.p-button-contrast > .p-button.p-button-text {
  background-color: transparent;
  color: #020617;
  border-color: transparent;
}
.p-button.p-button-contrast.p-button-text:not(:disabled):hover,
.p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover,
.p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
  background: rgba(2, 6, 23, 0.04);
  border-color: transparent;
  color: #020617;
}
.p-button.p-button-contrast.p-button-text:not(:disabled):active,
.p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active,
.p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
  background: rgba(2, 6, 23, 0.16);
  border-color: transparent;
  color: #020617;
}
.p-button.p-button-link {
  color: #2563eb;
  background: transparent;
  border: transparent;
}
.p-button.p-button-link:not(:disabled):hover {
  background: transparent;
  color: #2563eb;
  border-color: transparent;
}
.p-button.p-button-link:not(:disabled):hover .p-button-label {
  text-decoration: underline;
}
.p-button.p-button-link:not(:disabled):focus {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.p-button.p-button-link:not(:disabled):active {
  background: transparent;
  color: #2563eb;
  border-color: transparent;
}
.p-speeddial-button.p-button.p-button-icon-only {
  width: 2.5rem;
  height: 2.5rem;
}
.p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
  font-size: 1rem;
}
.p-speeddial-button.p-button.p-button-icon-only .p-icon {
  width: 1rem;
  height: 1rem;
}
.p-speeddial-list {
  outline: 0 none;
}
.p-speeddial-item.p-focus > .p-speeddial-action {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-speeddial-action {
  width: 2.5rem;
  height: 2.5rem;
  background: #f1f5f9;
  color: #475569;
}
.p-speeddial-action:hover {
  background: #e2e8f0;
  color: #334155;
}
.p-speeddial-direction-up .p-speeddial-item {
  margin: 0.25rem 0;
}
.p-speeddial-direction-up .p-speeddial-item:first-child {
  margin-bottom: 0.5rem;
}
.p-speeddial-direction-down .p-speeddial-item {
  margin: 0.25rem 0;
}
.p-speeddial-direction-down .p-speeddial-item:first-child {
  margin-top: 0.5rem;
}
.p-speeddial-direction-left .p-speeddial-item {
  margin: 0 0.25rem;
}
.p-speeddial-direction-left .p-speeddial-item:first-child {
  margin-right: 0.5rem;
}
.p-speeddial-direction-right .p-speeddial-item {
  margin: 0 0.25rem;
}
.p-speeddial-direction-right .p-speeddial-item:first-child {
  margin-left: 0.5rem;
}
.p-speeddial-circle .p-speeddial-item,
.p-speeddial-semi-circle .p-speeddial-item,
.p-speeddial-quarter-circle .p-speeddial-item {
  margin: 0;
}
.p-speeddial-circle .p-speeddial-item:first-child,
.p-speeddial-circle .p-speeddial-item:last-child,
.p-speeddial-semi-circle .p-speeddial-item:first-child,
.p-speeddial-semi-circle .p-speeddial-item:last-child,
.p-speeddial-quarter-circle .p-speeddial-item:first-child,
.p-speeddial-quarter-circle .p-speeddial-item:last-child {
  margin: 0;
}
.p-speeddial-mask {
  background-color: rgba(0, 0, 0, 0.4);
}
.p-splitbutton {
  border-radius: 6px;
}
.p-splitbutton.p-button-rounded {
  border-radius: 2rem;
}
.p-splitbutton.p-button-rounded > .p-button {
  border-radius: 2rem;
}
.p-splitbutton.p-button-raised {
  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.p-carousel .p-carousel-content .p-carousel-prev,
.p-carousel .p-carousel-content .p-carousel-next {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  margin: 0.5rem;
}
.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
.p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
.p-carousel .p-carousel-content .p-carousel-next:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-carousel .p-carousel-indicators {
  padding: 1rem;
}
.p-carousel .p-carousel-indicators .p-carousel-indicator {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.p-carousel .p-carousel-indicators .p-carousel-indicator button {
  background-color: #e2e8f0;
  width: 2rem;
  height: 0.5rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
  background: #cbd5e1;
}
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-datatable .p-paginator-top {
  border-width: 0 0 1px 0;
  border-radius: 0;
}
.p-datatable .p-paginator-bottom {
  border-width: 0 0 1px 0;
  border-radius: 0;
}
.p-datatable .p-datatable-header {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.p-datatable .p-datatable-footer {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.p-datatable .p-datatable-thead > tr > th {
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-datatable .p-datatable-tfoot > tr > td {
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
}
.p-datatable .p-sortable-column .p-sortable-column-icon {
  color: #64748b;
  margin-left: 0.5rem;
}
.p-datatable .p-sortable-column .p-sortable-column-badge {
  border-radius: 50%;
  height: 1rem;
  min-width: 1rem;
  line-height: 1rem;
  color: #1D4ED8;
  background: #EFF6FF;
  margin-left: 0.5rem;
}
.p-datatable .p-sortable-column:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
  color: #475569;
}
.p-datatable .p-sortable-column.p-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
  color: #1D4ED8;
}
.p-datatable .p-sortable-column.p-highlight:hover {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
  color: #1D4ED8;
}
.p-datatable .p-sortable-column:focus-visible {
  box-shadow: 0 none;
  outline: 0 none;
}
.p-datatable .p-datatable-tbody > tr {
  background: #ffffff;
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-datatable .p-datatable-tbody > tr > td {
  text-align: left;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
  margin-right: 0.5rem;
}
.p-datatable .p-datatable-tbody > tr:focus-visible {
  outline: 0.15rem solid var(--p-focus-ring-color);
  outline-offset: -0.15rem;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
  box-shadow: inset 0 2px 0 0 #EFF6FF;
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
  box-shadow: inset 0 -2px 0 0 #EFF6FF;
}
.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-datatable .p-column-resizer-helper {
  background: #3B82F6;
}
.p-datatable .p-datatable-scrollable-header,
.p-datatable .p-datatable-scrollable-footer {
  background: #ffffff;
}
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot,
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead,
.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot {
  background-color: #ffffff;
}
.dark .p-datatable .p-datatable-header {
  background: var(--vex-background-card);
  color: var(--vex-foreground-text);
  border-color: var(--vex-foreground-divider);
}
.dark .p-datatable .p-datatable-footer {
  background: var(--vex-background-card);
  color: var(--vex-foreground-text);
  border-color: var(--vex-foreground-divider);
}
.dark .p-datatable .p-datatable-thead > tr > th {
  background: var(--vex-background-card);
  color: var(--vex-foreground-text);
  border-color: var(--vex-foreground-divider);
}
.dark .p-datatable .p-datatable-tbody > tr {
  background: var(--vex-background-card);
  color: var(--vex-foreground-text);
}
.dark .p-datatable .p-datatable-tbody > tr > td {
  border-color: var(--vex-foreground-divider);
}
.dark .p-datatable .p-datatable-tfoot > tr > td {
  background: var(--vex-background-card);
  color: var(--vex-foreground-text);
  border-color: var(--vex-foreground-divider);
}
.dark .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
  background: var(--vex-background-hover);
  color: var(--vex-foreground-text);
}
.dark .p-datatable .p-datatable-tbody > tr.p-highlight {
  background: var(--vex-background-hover);
  color: var(--vex-foreground-text);
}
.dark .p-datatable .p-sortable-column:not(.p-highlight):hover {
  background: var(--vex-background-hover);
  color: var(--vex-foreground-text);
}
.dark .p-datatable .p-datatable-scrollable-header,
.dark .p-datatable .p-datatable-scrollable-footer {
  background: var(--vex-background-card);
}
.dark .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
.dark .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
  background-color: var(--vex-background-card);
}
.dark .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
  background: var(--vex-background-background);
}
.p-datatable .p-datatable-loading-icon {
  font-size: 2rem;
}
.p-datatable.p-datatable-gridlines .p-datatable-header {
  border-width: 1px 1px 0 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-footer {
  border-width: 0 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-paginator-top {
  border-width: 0 1px 0 1px;
}
.p-datatable.p-datatable-gridlines .p-paginator-bottom {
  border-width: 0 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
  border-width: 1px 0 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
  border-width: 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
  border-width: 1px 0 0 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
  border-width: 1px 1px 0 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
  border-width: 1px 0 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
  border-width: 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
  border-width: 1px 0 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
  border-width: 1px 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
  border-width: 0 0 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
  border-width: 0 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
  border-width: 0 0 1px 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
  border-width: 0 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
  border-width: 0 0 0 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
  border-width: 0 1px 0 1px;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
  background: #f8fafc;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
  color: #1D4ED8;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
  color: #1D4ED8;
}
.p-datatable.p-datatable-sm .p-datatable-header {
  padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
  padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
  padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
  padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-footer {
  padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-lg .p-datatable-header {
  padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
  padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
  padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
  padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-footer {
  padding: 0.9375rem 1.25rem;
}
.p-dataview .p-paginator-top {
  border-width: 0 0 1px 0;
  border-radius: 0;
}
.p-dataview .p-paginator-bottom {
  border-width: 0 0 1px 0;
  border-radius: 0;
}
.p-dataview .p-dataview-header {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.p-dataview .p-dataview-content {
  background: #ffffff;
  color: #334155;
  border: 0 none;
  padding: 0;
}
.p-dataview .p-dataview-footer {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-dataview .p-dataview-loading-icon {
  font-size: 2rem;
}
.p-dataview .p-dataview-emptymessage {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-column-filter-row .p-column-filter-menu-button,
.p-column-filter-row .p-column-filter-clear-button {
  margin-left: 0.5rem;
}
.p-column-filter-menu-button {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-column-filter-menu-button:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-column-filter-menu-button.p-column-filter-menu-button-open,
.p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
  background: #f1f5f9;
  color: #475569;
}
.p-column-filter-menu-button.p-column-filter-menu-button-active,
.p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-column-filter-menu-button:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-column-filter-clear-button {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-column-filter-clear-button:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-column-filter-clear-button:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-column-filter-overlay {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  min-width: 12.5rem;
}
.p-column-filter-overlay .p-column-filter-row-items {
  padding: 0.25rem 0.25rem;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
  margin: 2px 0;
  padding: 0.5rem 0.75rem;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:first-child {
  margin-top: 0;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
  color: #1e293b;
  background: #f1f5f9;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 none;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-column-filter-overlay-menu .p-column-filter-operator {
  padding: 0.5rem 0.5rem 0 0.5rem;
  border-bottom: 0 none;
  color: #334155;
  background: #ffffff;
  margin: 0 0 0 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-column-filter-overlay-menu .p-column-filter-constraint {
  padding: 0 1.125rem 1.125rem 1.125rem;
  border-bottom: 1px solid #e2e8f0;
}
.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
  margin-bottom: 0.5rem;
}
.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
  margin-top: 0.5rem;
}
.p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
  border-bottom: 0 none;
}
.p-column-filter-overlay-menu .p-column-filter-add-rule {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-column-filter-overlay-menu .p-column-filter-buttonbar {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-orderlist .p-orderlist-controls {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-orderlist .p-orderlist-controls .p-button {
  margin-bottom: 0.5rem;
}
.p-orderlist .p-orderlist-list-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  outline-color: transparent;
}
.p-orderlist .p-orderlist-list-container.p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-orderlist .p-orderlist-header {
  color: #334155;
  padding: 1.125rem;
  font-weight: 600;
}
.p-orderlist .p-orderlist-header .p-orderlist-title {
  font-weight: 600;
}
.p-orderlist .p-orderlist-filter-container {
  padding: 1.125rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom: 0 none;
}
.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
  padding-right: 1.75rem;
}
.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
  right: 0.75rem;
  color: #94a3b8;
}
.p-orderlist .p-orderlist-list {
  color: #334155;
  padding: 0.25rem 0.25rem;
  outline: 0 none;
}
.p-orderlist .p-orderlist-list:not(:first-child) {
  border-top: 1px solid #e2e8f0;
}
.p-orderlist .p-orderlist-list .p-orderlist-item {
  padding: 0.5rem 0.75rem;
  margin: 2px 0;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-orderlist .p-orderlist-list .p-orderlist-item:first-child {
  margin-top: 0;
}
.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
  color: #0f172a;
  background: #e2e8f0;
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
  background: rgba(59, 130, 246, 0.24);
}
.p-orderlist .p-orderlist-list .p-orderlist-empty-message {
  padding: 0.5rem 0.75rem;
  color: #334155;
}
.p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
  background: #f8fafc;
}
.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
  background: #f1f5f9;
}
.p-orderlist-item.cdk-drag-preview {
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border: 0 none;
  color: #334155;
  background: #ffffff;
  margin: 0;
}
.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-organizationchart .p-organizationchart-node-content.p-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
  color: #70aeff;
}
.p-organizationchart .p-organizationchart-line-down {
  background: #e2e8f0;
}
.p-organizationchart .p-organizationchart-line-left {
  border-right: 1px solid #e2e8f0;
  border-color: #e2e8f0;
}
.p-organizationchart .p-organizationchart-line-top {
  border-top: 1px solid #e2e8f0;
  border-color: #e2e8f0;
}
.p-organizationchart .p-organizationchart-node-content {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
  background: inherit;
  color: inherit;
  border-radius: 50%;
}
.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-paginator {
  background: #ffffff;
  color: #334155;
  border: solid #e2e8f0;
  border-width: 0;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last {
  background-color: transparent;
  border: 0 none;
  color: #64748b;
  min-width: 2.5rem;
  height: 2.5rem;
  margin: 0.143rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 50%;
}
.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
  background: #f1f5f9;
  border-color: transparent;
  color: #475569;
}
.p-paginator .p-paginator-first {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.p-paginator .p-paginator-last {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.p-paginator .p-dropdown {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  height: 2.5rem;
}
.p-paginator .p-dropdown .p-dropdown-label {
  padding-right: 0;
}
.p-paginator .p-paginator-page-input {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.p-paginator .p-paginator-page-input .p-inputtext {
  max-width: 2.5rem;
}
.p-paginator .p-paginator-current {
  background-color: transparent;
  border: 0 none;
  color: #64748b;
  min-width: 2.5rem;
  height: 2.5rem;
  margin: 0.143rem;
  padding: 0 0.5rem;
}
.p-paginator .p-paginator-pages .p-paginator-page {
  background-color: transparent;
  border: 0 none;
  color: #64748b;
  min-width: 2.5rem;
  height: 2.5rem;
  margin: 0.143rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 50%;
}
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  background: #EFF6FF;
  border-color: #EFF6FF;
  color: #1D4ED8;
}
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
  background: #f1f5f9;
  border-color: transparent;
  color: #475569;
}
.p-picklist .p-picklist-buttons {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-picklist .p-picklist-buttons .p-button {
  margin-bottom: 0.5rem;
}
.p-picklist .p-picklist-list-wrapper {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  outline-color: transparent;
}
.p-picklist .p-picklist-list-wrapper.p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-picklist .p-picklist-header {
  color: #334155;
  padding: 1.125rem;
  font-weight: 600;
}
.p-picklist .p-picklist-header .p-picklist-title {
  font-weight: 600;
}
.p-picklist .p-picklist-filter-container {
  padding: 1.125rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom: 0 none;
}
.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
  padding-right: 1.75rem;
}
.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
  right: 0.75rem;
  color: #94a3b8;
}
.p-picklist .p-picklist-list {
  color: #334155;
  padding: 0.25rem 0.25rem;
  outline: 0 none;
}
.p-picklist .p-picklist-list:not(:first-child) {
  border-top: 1px solid #e2e8f0;
}
.p-picklist .p-picklist-list .p-picklist-item {
  padding: 0.5rem 0.75rem;
  margin: 2px 0;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-picklist .p-picklist-list .p-picklist-item:first-child {
  margin-top: 0;
}
.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-picklist .p-picklist-list .p-picklist-item.p-focus {
  color: #0f172a;
  background: #e2e8f0;
}
.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
  background: rgba(59, 130, 246, 0.24);
}
.p-picklist .p-picklist-list .p-picklist-empty-message {
  padding: 0.5rem 0.75rem;
  color: #334155;
}
.p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) {
  background: #f8fafc;
}
.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover {
  background: #f1f5f9;
}
.p-picklist-item.cdk-drag-preview {
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border: 0 none;
  color: #334155;
  background: #ffffff;
  margin: 0;
}
.p-timeline .p-timeline-event-marker {
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  width: 1.125rem;
  height: 1.125rem;
  background-color: #ffffff;
}
.p-timeline .p-timeline-event-connector {
  background-color: #e2e8f0;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
  padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
  width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
  padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
  height: 2px;
}
.p-tree {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  padding: 0 1.125rem 1.125rem 1.125rem;
  border-radius: 6px;
}
.p-tree .p-tree-container .p-treenode {
  padding: 0 0;
  outline: 0 none;
}
.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 none;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content {
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  padding: 0.25rem 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
  margin-right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
  margin-right: 0.5rem;
  color: #475569;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
  margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
  color: #334155;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box {
  background-color: #f8fafc;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
  background: #3B82F6;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
  background-color: #f8fafc;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
  background: #2563eb;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
  color: #1D4ED8;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover,
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover {
  color: #1D4ED8;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-tree .p-tree-filter-container {
  margin-bottom: 0.5rem;
}
.p-tree .p-tree-filter-container .p-tree-filter {
  width: 100%;
  padding-right: 1.75rem;
}
.p-tree .p-tree-filter-container .p-tree-filter-icon {
  right: 0.75rem;
  color: #94a3b8;
}
.p-tree .p-treenode-children {
  padding: 0 0 0 1rem;
}
.p-tree .p-tree-loading-icon {
  font-size: 2rem;
}
.p-tree .p-tree-loading-icon.p-icon {
  width: 2rem;
  height: 2rem;
}
.p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
  background-color: #8cbeff;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #334155;
  padding: 0.25rem 0.5rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
  background-color: #EFF6FF;
  color: #1D4ED8;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
  color: #1D4ED8;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-tree-toggler {
  margin-right: 0.5rem;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-icon {
  color: #475569;
  margin-right: 0.5rem;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox {
  margin-right: 0.5rem;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):hover {
  background-color: inherit;
  color: inherit;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-treetable .p-paginator-top {
  border-width: 0 0 1px 0;
  border-radius: 0;
}
.p-treetable .p-paginator-bottom {
  border-width: 0 0 1px 0;
  border-radius: 0;
}
.p-treetable .p-treetable-header {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.p-treetable .p-treetable-footer {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.p-treetable .p-treetable-thead > tr > th {
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-treetable .p-treetable-tfoot > tr > td {
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
}
.p-treetable .p-sortable-column {
  outline-color: var(--p-focus-ring-color);
}
.p-treetable .p-sortable-column .p-sortable-column-icon {
  color: #64748b;
  margin-left: 0.5rem;
}
.p-treetable .p-sortable-column .p-sortable-column-badge {
  border-radius: 50%;
  height: 1rem;
  min-width: 1rem;
  line-height: 1rem;
  color: #1D4ED8;
  background: #EFF6FF;
  margin-left: 0.5rem;
}
.p-treetable .p-sortable-column:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
  color: #475569;
}
.p-treetable .p-sortable-column.p-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
  color: #1D4ED8;
}
.p-treetable .p-treetable-tbody > tr {
  background: #ffffff;
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-treetable .p-treetable-tbody > tr > td {
  text-align: left;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler.p-icon {
  width: 2rem;
  height: 2rem;
}
.p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox {
  margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon {
  color: #334155;
}
.p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box {
  background-color: #f8fafc;
}
.p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
  background: #3B82F6;
}
.p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
  background-color: #f8fafc;
}
.p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
  background: #2563eb;
}
.p-treetable .p-treetable-tbody > tr:focus-visible {
  outline: 0.15rem solid var(--p-focus-ring-color);
  outline-offset: -0.15rem;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
  color: #1D4ED8;
}
.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
  color: #1D4ED8;
}
.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
  color: #1e293b;
}
.p-treetable .p-column-resizer-helper {
  background: #3B82F6;
}
.p-treetable .p-treetable-scrollable-header,
.p-treetable .p-treetable-scrollable-footer {
  background: #ffffff;
}
.p-treetable .p-treetable-loading-icon {
  font-size: 2rem;
}
.p-treetable .p-treetable-loading-icon.p-icon {
  width: 2rem;
  height: 2rem;
}
.p-treetable.p-treetable-gridlines .p-datatable-header {
  border-width: 1px 1px 0 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-footer {
  border-width: 0 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-top {
  border-width: 0 1px 0 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-bottom {
  border-width: 0 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
  border-width: 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
  border-width: 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
  border-width: 1px;
}
.p-treetable.p-treetable-sm .p-treetable-header {
  padding: 0.65625rem 0.875rem;
}
.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
  padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
  padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
  padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-footer {
  padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-lg .p-treetable-header {
  padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
  padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
  padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
  padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-footer {
  padding: 0.9375rem 1.25rem;
}
.p-virtualscroller .p-virtualscroller-header {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.p-virtualscroller .p-virtualscroller-content {
  background: #ffffff;
  color: #334155;
  border: 0 none;
  padding: 0;
}
.p-virtualscroller .p-virtualscroller-footer {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-accordion .p-accordion-header .p-accordion-header-link {
  padding: 1.125rem 1.125rem 1.125rem 1.125rem;
  border: 0 none;
  color: #64748b;
  background: #ffffff;
  font-weight: 600;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon {
  margin-right: 0.5rem;
}
.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: inset none;
}
.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
}
.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #334155;
}
.p-accordion .p-accordion-content {
  padding: 0 1.125rem 1.125rem 1.125rem;
  border: 0 none;
  background: #ffffff;
  color: #334155;
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-accordion p-accordiontab .p-accordion-tab {
  margin-bottom: 0;
}
.p-accordion p-accordiontab .p-accordion-header .p-accordion-header-link {
  border-radius: 0;
}
.p-accordion p-accordiontab .p-accordion-content {
  border-radius: 0;
}
.p-accordion p-accordiontab:not(:first-child) .p-accordion-header .p-accordion-header-link {
  border-top: 0 none;
}
.p-accordion p-accordiontab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link,
.p-accordion p-accordiontab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
  border-top: 0 none;
}
.p-accordion p-accordiontab:first-child .p-accordion-header .p-accordion-header-link {
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-accordion p-accordiontab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-accordion p-accordiontab:last-child .p-accordion-content {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-card {
  background: #ffffff;
  color: #334155;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-card .p-card-body {
  padding: 1.5rem;
}
.p-card .p-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.p-card .p-card-subtitle {
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: #64748b;
}
.p-card .p-card-content {
  padding: 0 0 0 0;
}
.p-card .p-card-footer {
  padding: 0 0 0 0;
}
.p-divider .p-divider-content {
  background-color: #ffffff;
}
.p-divider.p-divider-horizontal {
  margin: 1rem 0;
  padding: 0 1rem;
}
.p-divider.p-divider-horizontal:before {
  border-top: 1px #e2e8f0;
}
.p-divider.p-divider-horizontal .p-divider-content {
  padding: 0 0.5rem;
}
.p-divider.p-divider-vertical {
  margin: 0 1rem;
  padding: 1rem 0;
}
.p-divider.p-divider-vertical:before {
  border-left: 1px #e2e8f0;
}
.p-divider.p-divider-vertical .p-divider-content {
  padding: 0.5rem 0;
}
.p-fieldset {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  border-radius: 6px;
}
.p-fieldset .p-fieldset-legend {
  padding: 1.125rem;
  border: 1px solid #e2e8f0;
  color: #334155;
  background: #ffffff;
  font-weight: 600;
  border-radius: 6px;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
  padding: 0;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
  padding: 1.125rem;
  color: #334155;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
  margin-right: 0.5rem;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #1e293b;
}
.p-fieldset .p-fieldset-content {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-panel .p-panel-header {
  border: 1px solid #e2e8f0;
  padding: 1.125rem;
  background: #ffffff;
  color: #334155;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-panel .p-panel-header .p-panel-title {
  font-weight: 600;
}
.p-panel .p-panel-header .p-panel-header-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-panel .p-panel-header .p-panel-header-icon:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-panel.p-panel-toggleable .p-panel-header {
  padding: 0.75rem 1.125rem;
}
.p-panel .p-panel-content {
  padding: 0 1.125rem 1.125rem 1.125rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  border-top: 0 none;
}
.p-panel .p-panel-content:last-child {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-panel .p-panel-footer {
  padding: 0 1.125rem 1.125rem 1.125rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top: 0 none;
}
.p-panel .p-panel-icons-end {
  order: 2;
  margin-left: auto;
}
.p-panel .p-panel-icons-start {
  order: 0;
  margin-right: 0.5rem;
}
.p-panel .p-panel-icons-center {
  order: 2;
  width: 100%;
  text-align: center;
}
.p-scrollpanel .p-scrollpanel-bar {
  background: #f1f5f9;
  border: 0 none;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-scrollpanel .p-scrollpanel-bar:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-splitter {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 6px;
  color: #334155;
}
.p-splitter .p-splitter-gutter {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  background: #e2e8f0;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
  background: #e2e8f0;
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-splitter .p-splitter-gutter-resizing {
  background: #e2e8f0;
}
.p-tabview .p-tabview-nav-content {
  scroll-padding-inline: 2.5rem;
}
.p-tabview .p-tabview-nav {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
}
.p-tabview .p-tabview-nav li {
  margin-right: 0;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
  border: solid #e2e8f0;
  border-width: 0 0 1px 0;
  border-color: transparent transparent #e2e8f0 transparent;
  background: #ffffff;
  color: #64748b;
  padding: 1rem 1.125rem;
  font-weight: 600;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  margin: 0 0 -1px 0;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #3B82F6;
}
.p-tabview .p-tabview-left-icon {
  margin-right: 0.5rem;
}
.p-tabview .p-tabview-right-icon {
  margin-left: 0.5rem;
}
.p-tabview .p-tabview-close {
  margin-left: 0.5rem;
}
.p-tabview .p-tabview-nav-btn.p-link {
  background: #ffffff;
  color: #3B82F6;
  width: 2.5rem;
  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-radius: 0;
}
.p-tabview .p-tabview-nav-btn.p-link:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
  background: #ffffff;
  padding: 0.875rem 1.125rem 1.125rem 1.125rem;
  border: 0 none;
  color: #334155;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-toolbar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 1.125rem;
  border-radius: 6px;
  gap: 0.5rem;
}
.p-toolbar .p-toolbar-separator {
  margin: 0 0.5rem;
}
.p-stepper .p-stepper-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow-x: auto;
}
.p-stepper-vertical .p-stepper-nav {
  flex-direction: column;
}
.p-stepper-header {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}
.p-stepper-header:last-of-type {
  flex: initial;
}
.p-stepper-header .p-stepper-action {
  border: 0 none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.p-stepper-header .p-stepper-action:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-stepper.p-stepper-readonly .p-stepper-header {
  cursor: auto;
}
.p-stepper-header.p-highlight .p-stepper-action {
  cursor: default;
}
.p-stepper-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.p-stepper-number {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-stepper-separator {
  flex: 1 1 0;
}
.p-stepper .p-stepper-nav {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.p-stepper .p-stepper-header {
  padding: 0.5rem;
}
.p-stepper .p-stepper-header .p-stepper-action {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
  background: #ffffff;
  outline-color: transparent;
}
.p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-width: 2px;
  background: #ffffff;
  min-width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.143rem;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
  margin-left: 0.5rem;
  color: #334155;
  font-weight: 500;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-title {
  color: #334155;
}
.p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
  background-color: #3B82F6;
}
.p-stepper .p-stepper-panels {
  background: #ffffff;
  padding: 0.875rem 1.125rem 1.125rem 1.125rem;
  color: #334155;
}
.p-stepper .p-stepper-separator {
  background-color: #e2e8f0;
  width: 100%;
  height: 2px;
  margin-inline-start: 1rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-stepper.p-stepper-vertical {
  display: flex;
  flex-direction: column;
}
.p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
  display: flex;
  flex: 1 1 auto;
  background: #ffffff;
  color: #334155;
}
.p-stepper.p-stepper-vertical .p-stepper-panel {
  display: flex;
  flex-direction: column;
  flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
  flex: 1 1 auto;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
  flex: initial;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
  width: 100%;
  padding-left: 1rem;
}
.p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
  flex: 0 0 auto;
  width: 2px;
  height: auto;
  margin-inline-start: calc(1.75rem + 2px);
}
.p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
  background-color: #3B82F6;
}
.p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
  padding-left: 3rem;
}
.p-confirm-popup {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.p-confirm-popup .p-confirm-popup-content {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-confirm-popup .p-confirm-popup-footer {
  text-align: right;
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-confirm-popup .p-confirm-popup-footer button {
  margin: 0 0.5rem 0 0;
  width: auto;
}
.p-confirm-popup .p-confirm-popup-footer button:last-child {
  margin: 0;
}
.p-confirm-popup:after {
  border: solid transparent;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
}
.p-confirm-popup:before {
  border: solid transparent;
  border-color: rgba(226, 232, 240, 0);
  border-bottom-color: #e2e8f0;
}
.p-confirm-popup.p-confirm-popup-flipped:after {
  border-top-color: #ffffff;
}
.p-confirm-popup.p-confirm-popup-flipped:before {
  border-top-color: #e2e8f0;
}
.p-confirm-popup .p-confirm-popup-icon {
  font-size: 1.5rem;
}
.p-confirm-popup .p-confirm-popup-icon.p-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.p-confirm-popup .p-confirm-popup-message {
  margin-left: 1rem;
}
.p-dialog {
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}
.p-dialog .p-dialog-header {
  border-bottom: 0 none;
  background: #ffffff;
  color: #334155;
  padding: 1.5rem;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-dialog .p-dialog-header .p-dialog-title {
  font-weight: 600;
  font-size: 1.25rem;
}
.p-dialog .p-dialog-header .p-dialog-header-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  margin-right: 0.5rem;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
  margin-right: 0;
}
.p-dialog .p-dialog-content {
  background: #ffffff;
  color: #334155;
  padding: 0 1.5rem 1.5rem 1.5rem;
}
.p-dialog .p-dialog-content:last-of-type {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-dialog .p-dialog-footer {
  border-top: 0 none;
  background: #ffffff;
  color: #334155;
  padding: 0 1.5rem 1.5rem 1.5rem;
  text-align: right;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-dialog .p-dialog-footer button {
  margin: 0 0.5rem 0 0;
  width: auto;
}
.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
  font-size: 2rem;
}
.p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
  width: 2rem;
  height: 2rem;
}
.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
  margin-left: 1rem;
}
.p-overlaypanel {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.p-overlaypanel .p-overlaypanel-content {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-overlaypanel .p-overlaypanel-close {
  background: #3B82F6;
  color: #ffffff;
  width: 1.75rem;
  height: 1.75rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 50%;
  position: absolute;
  top: -0.875rem;
  right: -0.875rem;
}
.p-overlaypanel .p-overlaypanel-close:enabled:hover {
  background: #2563eb;
  color: #ffffff;
}
.p-overlaypanel:after {
  border: solid transparent;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
}
.p-overlaypanel:before {
  border: solid transparent;
  border-color: rgba(226, 232, 240, 0);
  border-bottom-color: #d3dce8;
}
.p-overlaypanel.p-overlaypanel-flipped:after {
  border-top-color: #ffffff;
}
.p-overlaypanel.p-overlaypanel-flipped:before {
  border-top-color: #e2e8f0;
}
.p-sidebar {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.p-sidebar .p-sidebar-header {
  padding: 1.125rem;
}
.p-sidebar .p-sidebar-header .p-sidebar-close,
.p-sidebar .p-sidebar-header .p-sidebar-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-sidebar .p-sidebar-header + .p-sidebar-content {
  padding-top: 0;
}
.p-sidebar .p-sidebar-content {
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-sidebar .p-sidebar-footer {
  padding: 1.125rem;
}
.p-tooltip .p-tooltip-text {
  background: #334155;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
  border-right-color: #334155;
}
.p-tooltip.p-tooltip-left .p-tooltip-arrow {
  border-left-color: #334155;
}
.p-tooltip.p-tooltip-top .p-tooltip-arrow {
  border-top-color: #334155;
}
.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
  border-bottom-color: #334155;
}
.p-fileupload .p-fileupload-buttonbar {
  background: #ffffff;
  padding: 1.125rem;
  border: 1px solid #e2e8f0;
  color: #334155;
  border-bottom: 0 none;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-fileupload .p-fileupload-buttonbar .p-button {
  margin-right: 0.5rem;
}
.p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-fileupload .p-fileupload-content {
  background: #ffffff;
  padding: 0 1.125rem 1.125rem 1.125rem;
  border: 1px solid #e2e8f0;
  color: #334155;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-fileupload .p-fileupload-content.p-fileupload-highlight {
  border-color: 1px dashed #3B82F6;
  border-style: dashed;
  background-color: #EFF6FF;
}
.p-fileupload .p-progressbar {
  height: 0.25rem;
}
.p-fileupload .p-fileupload-row > div {
  padding: 0.75rem 1rem;
}
.p-fileupload.p-fileupload-advanced .p-message {
  margin-top: 0;
}
.p-fileupload-choose:not(.p-disabled):hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.p-fileupload-choose:not(.p-disabled):active {
  background: #1D4ED8;
  color: #ffffff;
  border-color: #1D4ED8;
}
.p-breadcrumb {
  background: #ffffff;
  border: 0 none;
  border-radius: 6px;
  padding: 1rem;
}
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
}
.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
  margin: 0 0.5rem 0 0.5rem;
  color: #94a3b8;
}
.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
  color: #334155;
}
.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
  color: #94a3b8;
}
.p-contextmenu {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  width: 12.5rem;
}
.p-contextmenu .p-contextmenu-root-list {
  outline: 0 none;
}
.p-contextmenu .p-submenu-list {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-contextmenu .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
  color: #334155;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
}
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #1D4ED8;
}
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #1D4ED8;
}
.p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
  background: rgba(59, 130, 246, 0.24);
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
  color: #334155;
  background: #e2e8f0;
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-contextmenu .p-menuitem-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-contextmenu .p-submenu-icon {
  font-size: 0.875rem;
}
.p-contextmenu .p-submenu-icon.p-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.p-dock .p-dock-list-container {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
}
.p-dock .p-dock-list-container .p-dock-list {
  outline: 0 none;
}
.p-dock .p-dock-item {
  padding: 0.5rem;
  border-radius: 6px;
}
.p-dock .p-dock-item.p-focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 none;
}
.p-dock .p-dock-link {
  width: 3rem;
  height: 3rem;
}
.p-dock.p-dock-top .p-dock-item-second-prev,
.p-dock.p-dock-top .p-dock-item-second-next,
.p-dock.p-dock-bottom .p-dock-item-second-prev,
.p-dock.p-dock-bottom .p-dock-item-second-next {
  margin: 0 0.9rem;
}
.p-dock.p-dock-top .p-dock-item-prev,
.p-dock.p-dock-top .p-dock-item-next,
.p-dock.p-dock-bottom .p-dock-item-prev,
.p-dock.p-dock-bottom .p-dock-item-next {
  margin: 0 1.3rem;
}
.p-dock.p-dock-top .p-dock-item-current,
.p-dock.p-dock-bottom .p-dock-item-current {
  margin: 0 1.5rem;
}
.p-dock.p-dock-left .p-dock-item-second-prev,
.p-dock.p-dock-left .p-dock-item-second-next,
.p-dock.p-dock-right .p-dock-item-second-prev,
.p-dock.p-dock-right .p-dock-item-second-next {
  margin: 0.9rem 0;
}
.p-dock.p-dock-left .p-dock-item-prev,
.p-dock.p-dock-left .p-dock-item-next,
.p-dock.p-dock-right .p-dock-item-prev,
.p-dock.p-dock-right .p-dock-item-next {
  margin: 1.3rem 0;
}
.p-dock.p-dock-left .p-dock-item-current,
.p-dock.p-dock-right .p-dock-item-current {
  margin: 1.5rem 0;
}
@media screen and (max-width: 960px) {
  .p-dock.p-dock-top .p-dock-list-container,
  .p-dock.p-dock-bottom .p-dock-list-container {
    overflow-x: auto;
    width: 100%;
  }
  .p-dock.p-dock-top .p-dock-list-container .p-dock-list,
  .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list {
    margin: 0 auto;
  }
  .p-dock.p-dock-left .p-dock-list-container,
  .p-dock.p-dock-right .p-dock-list-container {
    overflow-y: auto;
    height: 100%;
  }
  .p-dock.p-dock-left .p-dock-list-container .p-dock-list,
  .p-dock.p-dock-right .p-dock-list-container .p-dock-list {
    margin: auto 0;
  }
  .p-dock .p-dock-list .p-dock-item {
    transform: none;
    margin: 0;
  }
}
.p-megamenu {
  padding: 0.5rem 0.5rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.p-megamenu .p-megamenu-root-list {
  outline: 0 none;
}
.p-megamenu .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
  color: #334155;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
}
.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #1D4ED8;
}
.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #1D4ED8;
}
.p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
  background: rgba(59, 130, 246, 0.24);
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
  color: #334155;
  background: #e2e8f0;
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-megamenu .p-megamenu-panel {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-megamenu .p-submenu-header {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #94a3b8;
  background: #ffffff;
  font-weight: 600;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-megamenu .p-submenu-list {
  padding: 0.25rem 0.25rem;
  width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-megamenu.p-megamenu-vertical {
  width: 12.5rem;
  padding: 0.25rem 0.25rem;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
  margin-left: 0.5rem;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-menu {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 12.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
  color: #334155;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
}
.p-menu .p-menuitem.p-highlight > .p-menuitem-content {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #1D4ED8;
}
.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #1D4ED8;
}
.p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
  background: rgba(59, 130, 246, 0.24);
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
  color: #334155;
  background: #e2e8f0;
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-menu.p-menu-overlay {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-menu .p-submenu-header {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: #94a3b8;
  background: #ffffff;
  font-weight: 600;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.p-menu .p-menuitem-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-menu .p-menuitem-badge {
  background: #3B82F6;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-radius: 6px;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.p-menubar {
  padding: 0.5rem 0.5rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.p-menubar .p-menubar-root-list {
  outline: 0 none;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
  margin-left: 0.5rem;
}
.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-menubar .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
  color: #334155;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
}
.p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #1D4ED8;
}
.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #1D4ED8;
}
.p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
  background: rgba(59, 130, 246, 0.24);
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
  color: #334155;
  background: #e2e8f0;
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-menubar .p-submenu-list {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  width: 12.5rem;
  border-radius: 6px;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-menubar .p-submenu-list .p-submenu-icon {
  font-size: 0.875rem;
}
@media screen and (max-width: 960px) {
  .p-menubar {
    position: relative;
  }
  .p-menubar .p-menubar-button {
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    color: #94a3b8;
    border-radius: 50%;
    transition:
      background-color 0.2s,
      color 0.2s,
      border-color 0.2s,
      box-shadow 0.2s,
      outline-color 0.2s;
  }
  .p-menubar .p-menubar-button:hover {
    color: #334155;
    background: #f1f5f9;
  }
  .p-menubar .p-menubar-button:focus {
    outline: 1px solid var(--p-focus-ring-color);
    outline-offset: 2px;
    box-shadow: none;
  }
  .p-menubar .p-menubar-root-list {
    position: absolute;
    display: none;
    padding: 0.25rem 0.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  .p-menubar .p-menubar-root-list .p-menuitem-separator {
    border-top: 1px solid #e2e8f0;
    margin: 2px 0;
  }
  .p-menubar .p-menubar-root-list .p-submenu-icon {
    font-size: 0.875rem;
  }
  .p-menubar .p-menubar-root-list .p-menuitem {
    width: 100%;
    position: static;
  }
  .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
    margin-left: auto;
    transition: transform 0.2s;
  }
  .p-menubar .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
    transform: rotate(-180deg);
  }
  .p-menubar .p-menubar-root-list .p-submenu-list {
    width: 100%;
    position: static;
    box-shadow: none;
    border: 0 none;
  }
  .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon {
    transition: transform 0.2s;
    transform: rotate(90deg);
  }
  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
    transform: rotate(-90deg);
  }
  .p-menubar .p-menubar-root-list .p-menuitem {
    width: 100%;
    position: static;
  }
  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
    padding-left: 1.5rem;
  }
  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
    padding-left: 2.5rem;
  }
  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
    padding-left: 3.5rem;
  }
  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
    padding-left: 4.5rem;
  }
  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
    padding-left: 5.5rem;
  }
  .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
    display: flex;
    flex-direction: column;
    top: 100%;
    left: 0;
    z-index: 1;
  }
}
.p-panelmenu .p-panelmenu-header {
  outline: 0 none;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
  border: 0 none;
  color: #64748b;
  background: #ffffff;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action {
  color: #64748b;
  padding: 1.125rem 1.125rem 1.125rem 1.125rem;
  font-weight: 600;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
  margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
  margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: inset none;
}
.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 0;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #334155;
}
.p-panelmenu .p-panelmenu-content {
  padding: 0.25rem 0.25rem;
  border: 0 none;
  background: #ffffff;
  color: #334155;
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
  outline: 0 none;
}
.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
  color: #334155;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
}
.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #1D4ED8;
}
.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #1D4ED8;
}
.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
  background: rgba(59, 130, 246, 0.24);
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
  color: #334155;
  background: #e2e8f0;
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-menuitem-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
  padding: 0 0 0 1rem;
}
.p-panelmenu .p-panelmenu-panel {
  margin-bottom: 0;
}
.p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
  border-radius: 0;
}
.p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
  border-radius: 0;
}
.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
  border-top: 0 none;
}
.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content,
.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
  border-top: 0 none;
}
.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-slidemenu {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 12.5rem;
}
.p-slidemenu .p-slidemenu-root-list {
  outline: 0 none;
}
.p-slidemenu .p-submenu-list {
  outline: 0 none;
}
.p-slidemenu .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
  color: #334155;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-slidemenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
}
.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #1D4ED8;
}
.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #1D4ED8;
}
.p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
  background: rgba(59, 130, 246, 0.24);
}
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
  color: #334155;
  background: #e2e8f0;
}
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-slidemenu.p-slidemenu-overlay {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-slidemenu .p-slidemenu-list {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-slidemenu .p-menuitem-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-slidemenu .p-slidemenu-icon {
  font-size: 0.875rem;
}
.p-slidemenu .p-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.p-slidemenu .p-slidemenu-backward {
  padding: 0.5rem 0.75rem;
  color: #334155;
}
.p-slidemenu .p-slidemenu-backward:not(.p-disabled):focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: inset none;
}
.p-slidemenu .p-menuitem-badge {
  background: #3B82F6;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-radius: 6px;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.p-steps .p-steps-item .p-menuitem-link {
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
  background: #ffffff;
}
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
  color: #64748b;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  min-width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.143rem;
  z-index: 1;
  border-radius: 50%;
}
.p-steps .p-steps-item .p-menuitem-link .p-steps-title {
  margin-top: 0.5rem;
  color: #334155;
}
.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-steps .p-steps-item.p-highlight .p-steps-number {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-steps .p-steps-item.p-highlight .p-steps-title {
  font-weight: 500;
  color: #334155;
}
.p-steps .p-steps-item:before {
  content: " ";
  border-top: 1px solid #e2e8f0;
  width: 100%;
  top: 50%;
  left: 0;
  display: block;
  position: absolute;
  margin-top: -1rem;
}
.p-tabmenu .p-tabmenu-nav {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-width: 0 0 1px 0;
}
.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
  background: #3B82F6;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-radius: 6px;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
  margin-right: 0;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
  border: solid #e2e8f0;
  border-width: 0 0 1px 0;
  border-color: transparent transparent #e2e8f0 transparent;
  background: #ffffff;
  color: #64748b;
  padding: 1rem 1.125rem;
  font-weight: 600;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  margin: 0 0 -1px 0;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
  margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #334155;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #3B82F6;
}
.p-tabmenu .p-tabmenu-left-icon {
  margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
  margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
  background: #ffffff;
  color: #3B82F6;
  width: 2.5rem;
  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: inset none;
}
.p-tieredmenu {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-tieredmenu .p-tieredmenu-root-list {
  outline: 0 none;
}
.p-tieredmenu .p-submenu-list {
  padding: 0.25rem 0.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-tieredmenu .p-menuitem > .p-menuitem-content {
  color: #334155;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 4px;
}
.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
  color: #334155;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  user-select: none;
}
.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
  color: #94a3b8;
  margin-right: 0.5rem;
}
.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #94a3b8;
}
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
  color: #1D4ED8;
  background: #EFF6FF;
}
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #1D4ED8;
}
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #1D4ED8;
}
.p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
  background: rgba(59, 130, 246, 0.24);
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
  color: #334155;
  background: #e2e8f0;
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
  color: #334155;
  background: #f1f5f9;
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: #334155;
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
  color: #334155;
}
.p-tieredmenu .p-menuitem-separator {
  border-top: 1px solid #e2e8f0;
  margin: 2px 0;
}
.p-tieredmenu .p-submenu-icon {
  font-size: 0.875rem;
}
.p-tieredmenu .p-submenu-icon.p-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.p-inline-message {
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-radius: 6px;
}
.p-inline-message.p-inline-message-info {
  background: rgba(239, 246, 255, 0.95);
  border: solid #bfdbfe;
  border-width: 1px;
  color: #2563eb;
}
.p-inline-message.p-inline-message-info .p-inline-message-icon {
  color: #2563eb;
}
.p-inline-message.p-inline-message-success {
  background: rgba(240, 253, 244, 0.95);
  border: solid #bbf7d0;
  border-width: 1px;
  color: #16a34a;
}
.p-inline-message.p-inline-message-success .p-inline-message-icon {
  color: #16a34a;
}
.p-inline-message.p-inline-message-warn {
  background: rgba(254, 252, 232, 0.95);
  border: solid #fde68a;
  border-width: 1px;
  color: #ca8a04;
}
.p-inline-message.p-inline-message-warn .p-inline-message-icon {
  color: #ca8a04;
}
.p-inline-message.p-inline-message-error {
  background: rgba(254, 242, 242, 0.95);
  border: solid #fecaca;
  border-width: 1px;
  color: #dc2626;
}
.p-inline-message.p-inline-message-error .p-inline-message-icon {
  color: #dc2626;
}
.p-inline-message .p-inline-message-icon {
  font-size: 1rem;
  margin-right: 0.5rem;
}
.p-inline-message .p-icon {
  width: 1rem;
  height: 1rem;
}
.p-inline-message .p-inline-message-text {
  font-size: 1rem;
}
.p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
  margin-right: 0;
}
.p-message {
  margin: 1rem 0;
  border-radius: 6px;
}
.p-message .p-message-wrapper {
  padding: 0.5rem 0.75rem;
}
.p-message .p-message-close {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-message .p-message-close:hover {
  background: rgba(255, 255, 255, 0.5);
}
.p-message .p-message-close:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-message.p-message-info {
  background: rgba(239, 246, 255, 0.95);
  border: solid #bfdbfe;
  border-width: 1px;
  color: #2563eb;
}
.p-message.p-message-info .p-message-icon {
  color: #2563eb;
}
.p-message.p-message-info .p-message-close {
  color: #2563eb;
}
.p-message.p-message-success {
  background: rgba(240, 253, 244, 0.95);
  border: solid #bbf7d0;
  border-width: 1px;
  color: #16a34a;
}
.p-message.p-message-success .p-message-icon {
  color: #16a34a;
}
.p-message.p-message-success .p-message-close {
  color: #16a34a;
}
.p-message.p-message-warn {
  background: rgba(254, 252, 232, 0.95);
  border: solid #fde68a;
  border-width: 1px;
  color: #ca8a04;
}
.p-message.p-message-warn .p-message-icon {
  color: #ca8a04;
}
.p-message.p-message-warn .p-message-close {
  color: #ca8a04;
}
.p-message.p-message-error {
  background: rgba(254, 242, 242, 0.95);
  border: solid #fecaca;
  border-width: 1px;
  color: #dc2626;
}
.p-message.p-message-error .p-message-icon {
  color: #dc2626;
}
.p-message.p-message-error .p-message-close {
  color: #dc2626;
}
.p-message .p-message-text {
  font-size: 1rem;
  font-weight: 500;
}
.p-message .p-message-icon {
  font-size: 1rem;
  margin-right: 0.5rem;
}
.p-message .p-icon {
  width: 1rem;
  height: 1rem;
}
.p-message .p-message-summary {
  font-weight: 700;
}
.p-message .p-message-detail {
  margin-left: 0.5rem;
}
.p-message.p-message-secondary {
  background: #f1f5f9;
  border: solid #e2e8f0;
  border-width: 1px;
  color: #475569;
}
.p-message.p-message-secondary .p-message-icon {
  color: #475569;
}
.p-message.p-message-secondary .p-message-close {
  color: #475569;
}
.p-message.p-message-contrast {
  background: #020617;
  border: solid #64748b;
  border-width: 1px;
  color: #f8fafc;
}
.p-message.p-message-contrast .p-message-icon {
  color: #f8fafc;
}
.p-message.p-message-contrast .p-message-close {
  color: #f8fafc;
}
.p-toast {
  opacity: 1;
}
.p-toast .p-toast-message {
  margin: 0 0 1rem 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-toast .p-toast-message .p-toast-message-content {
  padding: 0.75rem;
  border-width: 1px;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
  margin: 0 0 0 0.5rem;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
  font-size: 1.125rem;
}
.p-toast .p-toast-message .p-toast-message-content .p-icon:not(.p-toast-icon-close-icon) {
  width: 1.125rem;
  height: 1.125rem;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
  font-weight: 500;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
  margin: 0.5rem 0 0 0;
}
.p-toast .p-toast-message .p-toast-icon-close {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-toast .p-toast-message .p-toast-icon-close:hover {
  background: rgba(255, 255, 255, 0.5);
}
.p-toast .p-toast-message .p-toast-icon-close:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-toast .p-toast-message.p-toast-message-info {
  background: rgba(239, 246, 255, 0.95);
  border: solid #bfdbfe;
  border-width: 1px;
  color: #2563eb;
}
.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
  color: #2563eb;
}
.p-toast .p-toast-message.p-toast-message-success {
  background: rgba(240, 253, 244, 0.95);
  border: solid #bbf7d0;
  border-width: 1px;
  color: #16a34a;
}
.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
  color: #16a34a;
}
.p-toast .p-toast-message.p-toast-message-warn {
  background: rgba(254, 252, 232, 0.95);
  border: solid #fde68a;
  border-width: 1px;
  color: #ca8a04;
}
.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
  color: #ca8a04;
}
.p-toast .p-toast-message.p-toast-message-error {
  background: rgba(254, 242, 242, 0.95);
  border: solid #fecaca;
  border-width: 1px;
  color: #dc2626;
}
.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
  color: #dc2626;
}
.p-toast .p-toast-message.p-toast-message-secondary {
  background: #f1f5f9;
  border: solid #e2e8f0;
  border-width: 1px;
  color: #475569;
}
.p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
  color: #475569;
}
.p-toast .p-toast-message.p-toast-message-contrast {
  background: #020617;
  border: solid #64748b;
  border-width: 1px;
  color: #f8fafc;
}
.p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
  color: #f8fafc;
}
.p-galleria .p-galleria-close {
  margin: 0.5rem;
  background: transparent;
  color: #f1f5f9;
  width: 4rem;
  height: 4rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 50%;
}
.p-galleria .p-galleria-close .p-galleria-close-icon {
  font-size: 2rem;
}
.p-galleria .p-galleria-close .p-icon-wrapper .p-icon {
  width: 2rem;
  height: 2rem;
}
.p-galleria .p-galleria-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
.p-galleria .p-galleria-item-nav {
  background: transparent;
  color: #f1f5f9;
  width: 4rem;
  height: 4rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 6px;
  margin: 0 0.5rem;
}
.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon,
.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
  font-size: 2rem;
}
.p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon {
  width: 2rem;
  height: 2rem;
}
.p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
.p-galleria .p-galleria-caption {
  background: rgba(0, 0, 0, 0.5);
  color: #f1f5f9;
  padding: 1rem;
}
.p-galleria .p-galleria-indicators {
  padding: 1rem;
}
.p-galleria .p-galleria-indicators .p-galleria-indicator button {
  background-color: #e2e8f0;
  width: 1rem;
  height: 1rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 50%;
}
.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
  background: #cbd5e1;
}
.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator,
.p-galleria.p-galleria-indicators-top .p-galleria-indicator {
  margin-right: 0.5rem;
}
.p-galleria.p-galleria-indicators-left .p-galleria-indicator,
.p-galleria.p-galleria-indicators-right .p-galleria-indicator {
  margin-bottom: 0.5rem;
}
.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
  background: rgba(0, 0, 0, 0.5);
}
.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button {
  background: rgba(255, 255, 255, 0.4);
}
.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover {
  background: rgba(255, 255, 255, 0.6);
}
.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
  background: #EFF6FF;
  color: #1D4ED8;
}
.p-galleria .p-galleria-thumbnail-container {
  background: rgba(0, 0, 0, 0.9);
  padding: 1rem 0.25rem;
}
.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
  margin: 0.5rem;
  background-color: transparent;
  color: #f1f5f9;
  width: 2rem;
  height: 2rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border-radius: 50%;
}
.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover,
.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-galleria-mask {
  --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-mask {
  --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
  background-color: transparent;
  color: #f8fafc;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
  background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
  padding: 1rem;
}
.p-image-action.p-link {
  color: #f8fafc;
  background-color: transparent;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
  margin-right: 0;
}
.p-image-action.p-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
  font-size: 1.5rem;
}
.p-image-action.p-link .p-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.p-avatar {
  background-color: #e2e8f0;
  border-radius: 6px;
}
.p-avatar.p-avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
}
.p-avatar.p-avatar-lg .p-avatar-icon {
  font-size: 1.5rem;
}
.p-avatar.p-avatar-xl {
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
}
.p-avatar.p-avatar-xl .p-avatar-icon {
  font-size: 2rem;
}
.p-avatar-group .p-avatar {
  border: 2px solid #ffffff;
}
.p-badge {
  background: #3B82F6;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
  background-color: #f1f5f9;
  color: #475569;
}
.p-badge.p-badge-contrast {
  background-color: #020617;
  color: #ffffff;
}
.p-badge.p-badge-success {
  background-color: #22c55e;
  color: #ffffff;
}
.p-badge.p-badge-info {
  background-color: #0ea5e9;
  color: #ffffff;
}
.p-badge.p-badge-warning {
  background-color: #f97316;
  color: #ffffff;
}
.p-badge.p-badge-danger {
  background-color: #ef4444;
  color: #ffffff;
}
.p-badge.p-badge-lg {
  font-size: 1.125rem;
  min-width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
}
.p-badge.p-badge-xl {
  font-size: 1.5rem;
  min-width: 3rem;
  height: 3rem;
  line-height: 3rem;
}
.p-chip {
  background-color: #f1f5f9;
  color: #1e293b;
  border-radius: 16px;
  padding: 0 0.75rem;
}
.p-chip .p-chip-text {
  line-height: 1.5;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.p-chip .p-chip-icon {
  margin-right: 0.5rem;
}
.p-chip .pi-chip-remove-icon {
  margin-left: 0.5rem;
}
.p-chip img {
  width: 2rem;
  height: 2rem;
  margin-left: -0.75rem;
  margin-right: 0.5rem;
}
.p-chip .pi-chip-remove-icon {
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-chip .pi-chip-remove-icon:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-chip .pi-chip-remove-icon:focus {
  outline: 0 none;
}
.p-inplace .p-inplace-display {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-inplace .p-inplace-display:not(.p-disabled):hover {
  background: #f1f5f9;
  color: #1e293b;
}
.p-inplace .p-inplace-display:focus {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-metergroup {
  display: flex;
}
.p-metergroup-meters {
  display: flex;
}
.p-metergroup-vertical .p-metergroup-meters {
  flex-direction: column;
}
.p-metergroup-labels {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.p-metergroup-vertical .p-metergroup-labels {
  align-items: start;
}
.p-metergroup-labels-vertical {
  flex-direction: column;
}
.p-metergroup-label {
  display: inline-flex;
  align-items: center;
}
.p-metergroup-label-marker {
  display: inline-flex;
}
.p-metergroup {
  gap: 1rem;
}
.p-metergroup .p-metergroup-meters {
  background: #e2e8f0;
  border-radius: 6px;
}
.p-metergroup .p-metergroup-meter {
  border: 0 none;
  background: #3B82F6;
}
.p-metergroup .p-metergroup-labels .p-metergroup-label {
  gap: 0.5rem;
}
.p-metergroup .p-metergroup-labels .p-metergroup-label-marker {
  background: #3B82F6;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
}
.p-metergroup .p-metergroup-labels .p-metergroup-label-icon {
  width: 1rem;
  height: 1rem;
}
.p-metergroup .p-metergroup-labels.p-metergroup-labels-vertical {
  gap: 0.5rem;
}
.p-metergroup .p-metergroup-labels.p-metergroup-labels-horizontal {
  gap: 1rem;
}
.p-metergroup.p-metergroup-horizontal {
  flex-direction: column;
}
.p-metergroup.p-metergroup-horizontal .p-metergroup-meters {
  height: 0.5rem;
}
.p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-metergroup.p-metergroup-vertical {
  flex-direction: row;
}
.p-metergroup.p-metergroup-vertical .p-metergroup-meters {
  width: 0.5rem;
  height: 100%;
}
.p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-progressbar {
  border: 0 none;
  height: 1.25rem;
  background: #e2e8f0;
  border-radius: 6px;
}
.p-progressbar .p-progressbar-value {
  border: 0 none;
  margin: 0;
  background: #3B82F6;
}
.p-progressbar .p-progressbar-label {
  color: #ffffff;
  line-height: 1.25rem;
}
.p-scrolltop {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-scrolltop.p-link {
  background: rgba(0, 0, 0, 0.7);
}
.p-scrolltop.p-link:hover {
  background: rgba(0, 0, 0, 0.8);
}
.p-scrolltop .p-scrolltop-icon {
  font-size: 1.5rem;
  color: #f8fafc;
}
.p-scrolltop .p-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.p-skeleton {
  background-color: #e2e8f0;
  border-radius: 6px;
}
.p-skeleton:after {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0));
}
.p-tag {
  background: #3B82F6;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
}
.p-tag.p-tag-success {
  background-color: #22c55e;
  color: #ffffff;
}
.p-tag.p-tag-info {
  background-color: #0ea5e9;
  color: #ffffff;
}
.p-tag.p-tag-warning {
  background-color: #f97316;
  color: #ffffff;
}
.p-tag.p-tag-danger {
  background-color: #ef4444;
  color: #ffffff;
}
.p-tag .p-tag-icon {
  margin-right: 0.25rem;
  font-size: 0.75rem;
}
.p-tag .p-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.p-tag.p-tag-secondary {
  background-color: #f1f5f9;
  color: #475569;
}
.p-tag.p-tag-contrast {
  background-color: #020617;
  color: #ffffff;
}
.p-terminal {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-terminal .p-terminal-input {
  font-family: var(--font-family);
  font-feature-settings: var(--font-feature-settings, normal);
  font-size: 1rem;
}
.p-accordion .p-accordion-header .p-accordion-header-link {
  border-radius: 6px !important;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.p-accordion .p-accordion-header .p-accordion-header-link:hover {
  border-bottom-color: #e2e8f0;
}
.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon {
  transform: rotate(90deg);
}
.p-accordion .p-accordion-header.p-highlight .p-accordion-toggle-icon {
  transform: rotate(-180deg);
}
.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
  outline-offset: -2px;
}
.p-accordion p-accordiontab .p-accordion-tab {
  border-bottom: 1px solid #e2e8f0;
}
.p-accordion p-accordiontab:last-of-type .p-accordion-tab {
  border-bottom: 0 none;
}
.p-autocomplete .p-autocomplete-multiple-container {
  padding: 0.25rem 0.25rem;
  gap: 0.25rem;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
  border-radius: 4px;
  margin: 0;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
  margin-left: 0.375rem;
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
  margin-left: 0.5rem;
}
.p-autocomplete .p-autocomplete-multiple-container:has(.p-autocomplete-token) .p-autocomplete-input-token {
  margin-left: 0.5rem;
}
.p-autocomplete.p-disabled {
  opacity: 1;
}
.p-button-label {
  font-weight: 500;
}
.p-button.p-button-success:enabled:focus-visible {
  outline-color: #22c55e;
}
.p-button.p-button-info:enabled:focus-visible {
  outline-color: #0ea5e9;
}
.p-button.p-button-warning:enabled:focus-visible {
  outline-color: #f97316;
}
.p-button.p-button-help:enabled:focus-visible {
  outline-color: #a855f7;
}
.p-button.p-button-danger:enabled:focus-visible {
  outline-color: #ef4444;
}
.p-button.p-button-contrast:enabled:focus-visible {
  outline-color: #020617;
}
.p-button.p-button-outlined {
  border-color: var(--primary-200);
}
.p-button.p-button-outlined:not(:disabled):hover,
.p-button.p-button-outlined:not(:disabled):active {
  border-color: var(--primary-200);
}
.p-button.p-button-outlined.p-button-secondary {
  border-color: var(--surface-200);
  color: #64748b;
}
.p-button.p-button-outlined.p-button-secondary:not(:disabled):hover {
  color: #64748b;
  background-color: #f1f5f9;
  border-color: var(--surface-200);
}
.p-button.p-button-outlined.p-button-secondary:not(:disabled):active {
  color: #64748b;
  background-color: #e2e8f0;
  border-color: var(--surface-200);
}
.p-button.p-button-outlined.p-button-success {
  border-color: #bbf7d0;
}
.p-button.p-button-outlined.p-button-success:not(:disabled):hover,
.p-button.p-button-outlined.p-button-success:not(:disabled):active {
  border-color: #bbf7d0;
}
.p-button.p-button-outlined.p-button-info {
  border-color: #bae6fd;
}
.p-button.p-button-outlined.p-button-info:not(:disabled):hover,
.p-button.p-button-outlined.p-button-info:not(:disabled):active {
  border-color: #bae6fd;
}
.p-button.p-button-outlined.p-button-warning {
  border-color: #fed7aa;
}
.p-button.p-button-outlined.p-button-warning:not(:disabled):hover,
.p-button.p-button-outlined.p-button-warning:not(:disabled):active {
  border-color: #fed7aa;
}
.p-button.p-button-outlined.p-button-help {
  border-color: #e9d5ff;
}
.p-button.p-button-outlined.p-button-help:not(:disabled):hover,
.p-button.p-button-outlined.p-button-help:not(:disabled):active {
  border-color: #e9d5ff;
}
.p-button.p-button-outlined.p-button-danger {
  border-color: #fecaca;
}
.p-button.p-button-outlined.p-button-danger:not(:disabled):hover,
.p-button.p-button-outlined.p-button-danger:not(:disabled):active {
  border-color: #fecaca;
}
.p-button.p-button-outlined.p-button-contrast {
  border-color: #334155;
}
.p-button.p-button-outlined.p-button-contrast:not(:disabled):hover,
.p-button.p-button-outlined.p-button-contrast:not(:disabled):active {
  border-color: #334155;
}
.p-button.p-button-secondary.p-button-text {
  color: #64748b;
}
.p-button.p-button-secondary.p-button-text:not(:disabled):hover {
  background: #f1f5f9;
  color: #64748b;
}
.p-button.p-button-secondary.p-button-text:not(:disabled):active {
  background: #e2e8f0;
  color: #64748b;
}
.p-datepicker-buttonbar .p-button {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}
.p-datepicker .p-datepicker-group-container + .p-timepicker {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.p-datepicker table th {
  font-weight: 500;
}
.p-card {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.p-card .p-card-caption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.p-card .p-card-caption .p-card-title,
.p-card .p-card-caption .p-card-subtitle {
  margin-bottom: 0;
}
.p-card .p-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #3B82F6;
}
.p-cascadeselect {
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-cascadeselect .p-cascadeselect-label {
  box-shadow: none;
}
.p-cascadeselect.p-disabled {
  opacity: 1;
  background-color: #e2e8f0;
}
.p-cascadeselect.p-disabled .p-cascadeselect-label {
  color: #64748b;
}
div.p-cascadeselect-panel {
  border: 0 none;
  box-shadow: none;
}
.p-checkbox .p-checkbox-box {
  border-radius: 4px;
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-checkbox .p-checkbox-box.p-focus {
  outline-offset: 2px;
}
.p-checkbox .p-checkbox-box.p-focus.p-highlight {
  border-color: #3B82F6;
}
.p-checkbox.p-checkbox-disabled {
  opacity: 1;
}
.p-checkbox.p-checkbox-disabled .p-checkbox-box {
  background-color: #e2e8f0;
  border: 1px solid #cbd5e1;
}
.p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon {
  color: #64748b;
}
.p-chips .p-chips-multiple-container {
  padding: 0.25rem 0.25rem;
  gap: 0.25rem;
}
.p-chips .p-chips-multiple-container .p-chips-token {
  border-radius: 4px;
  margin: 0;
}
.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
  margin-left: 0.375rem;
}
.p-chips .p-chips-multiple-container .p-chips-input-token {
  margin-left: 0.5rem;
}
.p-chips .p-chips-multiple-container:has(.p-chips-token) .p-chips-input-token {
  margin-left: 0.5rem;
}
.p-chips.p-disabled .p-chips-multiple-container {
  opacity: 1;
  background-color: #e2e8f0;
}
.p-chip {
  border-radius: 16px;
  padding: 0.25rem 0.75rem;
}
.p-chip .p-chip-text {
  margin-top: 0;
  margin-bottom: 0;
}
.p-chip .p-chip-remove-icon {
  margin-left: 0.375rem;
}
.p-chip:has(.p-chip-remove-icon) {
  padding-right: 0.5rem;
}
.p-chip img {
  margin-left: -0.5rem;
}
.p-colorpicker-preview {
  padding: 0;
}
.p-colorpicker-preview:enabled:focus {
  outline-offset: 2px;
}
.p-colorpicker-preview.p-inputtext.p-disabled {
  opacity: 0.6;
}
.p-confirm-popup {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
  box-shadow: inset 0 2px 0 0 #3B82F6;
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
  box-shadow: inset 0 -2px 0 0 #3B82F6;
}
.p-datatable .p-datatable-tbody > tr:has(+ .p-highlight) > td {
  border-bottom-color: #bedaff;
}
.p-datatable .p-datatable-tbody > tr.p-highlight > td {
  border-bottom-color: #bedaff;
}
.p-dataview-layout-options.p-selectbutton .p-button svg {
  position: relative;
}
.p-dialog {
  border-radius: 12px;
  background-color: #ffffff;
}
.p-dialog.p-dialog-maximized {
  border-radius: 0;
}
.p-dialog .p-dialog-header {
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}
.p-dialog .p-dialog-content:last-of-type {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}
.p-dialog .p-dialog-footer {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}
.p-dropdown {
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-dropdown .p-dropdown-label {
  box-shadow: none;
}
.p-dropdown.p-disabled {
  opacity: 1;
  background-color: #e2e8f0;
}
.p-dropdown.p-disabled .p-dropdown-label {
  color: #64748b;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
  margin-left: -0.375rem;
  margin-right: 0.375rem;
}
.p-treetable .p-treetable-tbody > tr:has(+ .p-highlight) > td {
  border-bottom-color: #bedaff;
}
.p-treetable .p-treetable-tbody > tr.p-highlight > td {
  border-bottom-color: #bedaff;
}
.p-treetable .p-treetable-tbody > tr.p-highlight > td .p-treetable-toggler:hover {
  background-color: #EFF6FF;
  color: #1D4ED8;
}
.p-fieldset {
  padding: 0 1.125rem 1.125rem 1.125rem;
  margin: 0;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
  padding: 0.5rem 0.75rem;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-legend-text {
  padding: 0;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
  color: #64748b;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
  background-color: #f1f5f9;
}
.p-fieldset .p-fieldset-legend {
  border: 0 none;
  padding: 0;
  margin-bottom: 0.375rem;
}
.p-fieldset .p-fieldset-legend span {
  padding: 0.5rem 0.75rem;
}
.p-fieldset .p-fieldset-content {
  padding: 0;
}
.p-column-filter-overlay-menu {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.p-column-filter-overlay-menu .p-column-filter-operator {
  padding: 0;
}
.p-column-filter-overlay-menu .p-column-filter-constraints {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.p-column-filter-overlay-menu .p-column-filter-constraint {
  padding: 0 0 0 0;
}
.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
  margin-bottom: 0.5rem;
}
.p-column-filter-overlay-menu .p-column-filter-constraint:last-child .p-column-filter-remove-button {
  margin-bottom: 0;
}
.p-column-filter-overlay-menu .p-column-filter-add-rule {
  padding: 0;
}
.p-column-filter-overlay-menu .p-column-filter-buttonbar {
  padding: 0;
}
.p-fileupload .p-fileupload-content {
  border-top: 0 none;
  padding-top: 1.125rem;
}
.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
  background-color: #3B82F6;
}
.p-inline-message-text {
  font-weight: 500;
}
.p-inline-message {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.p-inline-message.p-inline-message-info {
  box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04);
}
.p-inline-message.p-inline-message-success {
  box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04);
}
.p-inline-message.p-inline-message-warn {
  box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04);
}
.p-inline-message.p-inline-message-error {
  box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04);
}
.p-inline-message.p-inline-message-secondary {
  box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04);
}
.p-inline-message.p-inline-message-contrast {
  box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04);
}
.p-inputgroup-addon {
  padding: 0.5rem;
}
.p-inputnumber.p-inputnumber-buttons-stacked {
  position: relative;
}
.p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-input {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
  position: absolute;
  top: 1px;
  right: 1px;
  height: calc(100% - 2px);
}
.p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: transparent;
  border: 0 none;
  color: #64748b;
}
.p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:hover {
  background-color: #f1f5f9;
  color: #475569;
}
.p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button:active {
  background-color: #e2e8f0;
  color: #334155;
}
.p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button {
  background-color: transparent;
  border: 1px solid #cbd5e1;
  color: #64748b;
}
.p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover {
  background-color: #f1f5f9;
  color: #475569;
}
.p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button:active {
  background-color: #e2e8f0;
  color: #334155;
}
.p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-up {
  border-left: 0 none;
}
.p-inputnumber.p-inputnumber-buttons-horizontal .p-inputnumber-button.p-inputnumber-button-down {
  border-right: 0 none;
}
.p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button {
  background-color: transparent;
  border: 1px solid #cbd5e1;
  color: #64748b;
}
.p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:hover {
  background-color: #f1f5f9;
  color: #475569;
}
.p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button:active {
  background-color: #e2e8f0;
  color: #334155;
}
.p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-up {
  border-bottom: 0 none;
}
.p-inputnumber.p-inputnumber-buttons-vertical .p-inputnumber-button.p-inputnumber-button-down {
  border-top: 0 none;
}
.p-inputswitch .p-inputswitch-slider {
  border: 0 none;
}
.p-inputswitch.p-highlight p-inputswitch-slider:before {
  left: 1.25rem;
  transform: none;
}
.p-inputswitch.p-invalid > .p-inputswitch-slider {
  background: #f87171;
}
.p-inputswitch.p-invalid > .p-inputswitch-slider:before {
  background: #ffffff;
}
.p-inputtext {
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-inputtext:disabled {
  opacity: 1;
  background-color: #e2e8f0;
  color: #64748b;
}
.p-knob svg {
  border-radius: 6px;
  outline-color: transparent;
  transition: outline-color 0.2s;
}
.p-knob svg:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-listbox {
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-listbox.p-disabled {
  opacity: 1;
  background-color: #e2e8f0;
}
.p-listbox.p-disabled .p-listbox-list .p-listbox-item {
  color: #64748b;
}
.p-listbox .p-listbox-header:has(.p-checkbox) {
  padding: 0.5rem 1rem 0 1rem;
}
.p-message {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.p-message.p-message-info {
  box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04);
}
.p-message.p-message-info .p-message-close:focus-visible {
  outline-color: #2563eb;
}
.p-message.p-message-info .p-message-close:hover {
  background: #dbeafe;
}
.p-message.p-message-success {
  box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04);
}
.p-message.p-message-success .p-message-close:focus-visible {
  outline-color: #16a34a;
}
.p-message.p-message-success .p-message-close:hover {
  background: #dcfce7;
}
.p-message.p-message-warn {
  box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04);
}
.p-message.p-message-warn .p-message-close:focus-visible {
  outline-color: #ca8a04;
}
.p-message.p-message-warn .p-message-close:hover {
  background: #fef9c3;
}
.p-message.p-message-error {
  box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04);
}
.p-message.p-message-error .p-message-close:focus-visible {
  outline-color: #dc2626;
}
.p-message.p-message-error .p-message-close:hover {
  background: #fee2e2;
}
.p-message.p-message-secondary {
  box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04);
}
.p-message.p-message-secondary .p-message-close:focus-visible {
  outline-color: #475569;
}
.p-message.p-message-secondary .p-message-close:hover {
  background: #e2e8f0;
}
.p-message.p-message-contrast {
  box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04);
}
.p-message.p-message-contrast .p-message-close:focus-visible {
  outline-color: #f8fafc;
}
.p-message.p-message-contrast .p-message-close:hover {
  background: #1e293b;
}
.p-multiselect-panel .p-multiselect-header {
  padding-left: 1rem;
  padding-right: 1rem;
}
.p-multiselect {
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-multiselect.p-disabled {
  opacity: 1;
  background-color: #e2e8f0;
}
.p-multiselect.p-disabled .p-multiselect-label {
  color: #64748b;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
  border-radius: 4px;
  margin-right: 0.25rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
  margin-left: 0.375rem;
}
.p-inputwrapper-filled .p-multiselect-chip .p-multiselect-label {
  padding: 0.25rem 0.25rem;
}
.p-panelmenu .p-panelmenu-header {
  border-radius: 4px;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
  outline: 0 none;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action {
  background: #e2e8f0;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text {
  color: #334155;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
  color: #334155;
}
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
  color: #334155;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
  border-radius: 4px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action {
  color: #334155;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text {
  color: #334155;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
  color: #94a3b8;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
  color: #94a3b8;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover {
  background: #f1f5f9;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-text {
  color: #334155;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-submenu-icon {
  color: #334155;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action:hover .p-menuitem-icon {
  color: #334155;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
  margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
  margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content {
  border-radius: 6px;
  padding: 0 0 0 1rem;
}
.p-panelmenu .p-panelmenu-content .p-menuitem:first-child {
  margin-top: 2px;
}
.p-panelmenu .p-panelmenu-content .p-menuitem:last-child {
  margin-top: 2px;
}
.p-panelmenu .p-panelmenu-panel {
  padding: 0.25rem 0.25rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.p-password-panel {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.p-password-panel .p-password-meter {
  margin-bottom: 0.75rem;
  background: #e2e8f0;
  border-radius: 6px;
}
.p-password-panel .p-password-meter .p-password-strength {
  border-radius: 6px;
}
.p-password-panel .p-password-meter .p-password-strength.weak {
  background: #ef4444;
}
.p-password-panel .p-password-meter .p-password-strength.medium {
  background: #f59e0b;
}
.p-password-panel .p-password-meter .p-password-strength.strong {
  background: #22c55e;
}
.p-orderlist-controls .p-button {
  transition:
    opacity 0.2s,
    outline-color 0.2s,
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #f1f5f9;
}
.p-orderlist-controls .p-button:not(:disabled):hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #e2e8f0;
}
.p-orderlist-controls .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-orderlist-controls .p-button:not(:disabled):active {
  background: #cbd5e1;
  color: #1e293b;
  border-color: #cbd5e1;
}
.p-orderlist .p-orderlist-header {
  background: #ffffff;
  color: #334155;
  border: 0 none;
  border-bottom: 0 none;
  padding: 0.75rem 1rem 0.5rem 1rem;
  font-weight: 600;
  color: #64748b;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-orderlist .p-orderlist-list {
  border: 1px solid #cbd5e1;
  border: 0 none;
  background: #ffffff;
  color: #334155;
  padding: 0.25rem 0.25rem;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-orderlist .p-orderlist-list .p-orderlist-item {
  border-radius: 6px;
}
.p-orderlist .p-orderlist-list:not(:first-child) {
  border: 0 none;
}
.p-orderlist .p-orderlist-filter-container {
  border: 0 none;
}
.p-organizationchart .p-organizationchart-node-content {
  padding: 0.75rem 1rem;
  border-radius: 6px;
}
.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
  position: static;
}
.p-organizationchart .p-organizationchart-node-content:has(.p-node-toggler) {
  padding: 0.75rem 1rem 1.25rem 1rem;
}
.p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) {
  border-right: 0 none;
}
.p-organizationchart .p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) {
  border-top-right-radius: 6px;
}
.p-organizationchart .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) {
  border-left: 1px solid #e2e8f0;
  border-top-left-radius: 6px;
}
.p-overlaypanel {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-overlaypanel .p-overlaypanel-content {
  padding: 0.75rem;
}
.p-overlaypanel .p-overlaypanel-close {
  width: 1.75rem;
  height: 1.75rem;
  color: #64748b;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}
.p-overlaypanel .p-overlaypanel-close:enabled:hover {
  color: #475569;
  border-color: transparent;
  background: #f1f5f9;
}
.p-overlaypanel .p-overlaypanel-close:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}
.p-panel {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background-color: #ffffff;
}
.p-panel .p-panel-header,
.p-panel .p-panel-content,
.p-panel .p-panel-footer {
  background: transparent;
  border: 0 none;
}
.p-panel:has(.p-panel-footer) .p-panel-content {
  padding-bottom: 0.875rem;
}
.p-picklist-buttons .p-button {
  transition:
    opacity 0.2s,
    outline-color 0.2s,
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #f1f5f9;
}
.p-picklist-buttons .p-button:not(:disabled):hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #e2e8f0;
}
.p-picklist-buttons .p-button:not(:disabled):focus {
  box-shadow: none;
}
.p-picklist-buttons .p-button:not(:disabled):active {
  background: #cbd5e1;
  color: #1e293b;
  border-color: #cbd5e1;
}
.p-picklist .p-picklist-header {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border: 0 none;
  padding: 0.75rem 1rem 0.5rem 1rem;
  font-weight: 600;
  color: #64748b;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.p-picklist .p-picklist-filter-container {
  border: 0;
}
.p-picklist .p-picklist-list {
  border: 1px solid #cbd5e1;
  border: 0 none;
  background: #ffffff;
  color: #334155;
  padding: 0.25rem 0.25rem;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.p-picklist .p-picklist-list .p-picklist-item {
  border-radius: 6px;
}
.p-picklist .p-picklist-list:not(:first-child) {
  border: 0 none;
}
.p-progressbar-label {
  font-size: 0.75rem;
  font-weight: 600;
}
.p-radiobutton .p-radiobutton-box {
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-radiobutton .p-radiobutton-box.p-focus {
  outline-offset: 2px;
}
.p-radiobutton .p-radiobutton-box.p-focus.p-highlight {
  border-color: #3B82F6;
}
.p-radiobutton.p-radiobutton-disabled {
  opacity: 1;
}
.p-radiobutton.p-radiobutton-disabled .p-radiobutton-box {
  border: 1px solid #cbd5e1;
  background-color: #e2e8f0;
}
.p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon {
  background-color: #64748b;
}
.p-rating {
  gap: 0.25rem;
}
.p-selectbutton .p-button .pi,
.p-selectbutton .p-button .p-button-label {
  position: relative;
  transition: none;
}
.p-selectbutton .p-button::before {
  content: "";
  background-color: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  width: calc(100% - 0.5rem);
  height: calc(100% - 0.5rem);
  border-radius: 4px;
}
.p-selectbutton .p-button.p-highlight::before {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
}
.p-selectbutton .p-button:focus-visible {
  outline: 1px solid var(--p-focus-ring-color);
  outline-offset: -1px;
  box-shadow: none;
  border-color: #94a3b8;
}
.p-selectbutton .p-button.p-disabled {
  opacity: 1;
  color: #94a3b8;
}
.p-selectbutton.p-invalid {
  box-shadow: 0 0 0 1px #f87171;
  border-radius: 6px;
}
.p-selectbutton.p-invalid > .p-button {
  border: 1px solid #f1f5f9;
}
.p-selectbutton.p-disabled {
  opacity: 1;
}
.p-selectbutton.p-disabled .p-button {
  color: #94a3b8;
}
.p-slider .p-slider-handle {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.p-slider .p-slider-handle::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14);
}
.p-slider .p-slider-handle:focus-visible {
  outline: 0 none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px var(--p-focus-ring-color),
    0 1px 2px 0 black;
}
.p-speeddial-item.p-focus > .p-speeddial-action {
  outline-color: #9dc1fb;
}
.p-speeddial-button.p-speeddial-rotate {
  transition:
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-splitter-gutter-handle {
  border-radius: 6px;
}
.p-stepper .p-stepper-header .p-stepper-number::after {
  content: " ";
  position: absolute;
  height: 100%;
  box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-number {
  background: #ffffff;
  color: #3B82F6;
}
.p-stepper .p-stepper-header.p-highlight .p-stepper-title {
  color: #3B82F6;
}
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
  border-width: 2px;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-steps .p-steps-item .p-menuitem-link .p-steps-title {
  font-weight: 500;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-steps .p-steps-item .p-steps-number {
  position: relative;
  font-weight: 500;
}
.p-steps .p-steps-item .p-steps-number::after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-steps .p-steps-item.p-highlight .p-steps-number {
  background: #ffffff;
  color: #3B82F6;
}
.p-steps .p-steps-item.p-highlight .p-steps-title {
  color: #3B82F6;
}
.p-steps .p-steps-item.p-disabled {
  opacity: 1;
}
.p-steps .p-steps-item:before {
  border-top-width: 2px;
  margin-top: calc(-1rem + 1px);
}
.p-steps .p-steps-item:first-child::before {
  width: calc(50% + 1rem);
  transform: translateX(100%);
}
.p-steps .p-steps-item:last-child::before {
  width: 50%;
}
.p-tabmenu .p-tabmenu-ink-bar {
  z-index: 1;
  display: block;
  position: absolute;
  bottom: -1px;
  height: 1px;
  background-color: #3B82F6;
  transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
.p-tabmenu .p-tabmenu-nav {
  position: relative;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-tabmenu .p-tabmenu-nav-container .p-tabmenu-nav-btn {
  outline: 0 none;
}
.p-tabview .p-tabview-ink-bar {
  z-index: 1;
  display: block;
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #3B82F6;
  transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
.p-tabview .p-tabview-nav {
  position: relative;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
}
.p-tabview .p-tabview-nav-btn.p-link {
  color: #64748b;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 10px 50px rgba(255, 255, 255, 0.6);
}
.p-tabview .p-tabview-nav-btn.p-link:hover {
  color: #475569;
}
.p-tag {
  background: var(--primary-100);
  color: var(--primary-700);
}
.p-tag.p-tag-success {
  background: var(--green-100);
  color: var(--green-700);
}
.p-tag.p-tag-info {
  background: var(--blue-100);
  color: var(--blue-700);
}
.p-tag.p-tag-warning {
  background: var(--orange-100);
  color: var(--orange-700);
}
.p-tag.p-tag-danger {
  background: var(--red-100);
  color: var(--red-700);
}
.p-terminal {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}
.p-terminal .p-terminal-prompt {
  margin-right: 0.25rem;
}
.p-terminal .p-terminal-response {
  margin: 2px 0;
}
.p-timeline .p-timeline-event-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.p-timeline .p-timeline-event-marker::before {
  content: " ";
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  background-color: #3B82F6;
}
.p-timeline .p-timeline-event-marker::after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-toast .p-toast-message {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
  font-size: 0.875rem;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-icon-close {
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
}
.p-toast .p-toast-message.p-toast-message-info {
  box-shadow: 0px 4px 8px 0px rgba(59, 130, 246, 0.04);
}
.p-toast .p-toast-message.p-toast-message-info .p-toast-detail {
  color: #334155;
}
.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
  outline-color: #2563eb;
}
.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close:hover {
  background: #dbeafe;
}
.p-toast .p-toast-message.p-toast-message-success {
  box-shadow: 0px 4px 8px 0px rgba(34, 197, 94, 0.04);
}
.p-toast .p-toast-message.p-toast-message-success .p-toast-detail {
  color: #334155;
}
.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
  outline-color: #16a34a;
}
.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close:hover {
  background: #dcfce7;
}
.p-toast .p-toast-message.p-toast-message-warn {
  box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04);
}
.p-toast .p-toast-message.p-toast-message-warn .p-toast-detail {
  color: #334155;
}
.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
  outline-color: #ca8a04;
}
.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close:hover {
  background: #fef9c3;
}
.p-toast .p-toast-message.p-toast-message-error {
  box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04);
}
.p-toast .p-toast-message.p-toast-message-error .p-toast-detail {
  color: #334155;
}
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
  outline-color: #dc2626;
}
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close:hover {
  background: #fee2e2;
}
.p-toast .p-toast-message.p-toast-message-secondary {
  box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04);
}
.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
  outline-color: #dc2626;
}
.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close:hover {
  background: #e2e8f0;
}
.p-toast .p-toast-message.p-toast-message-contrast {
  box-shadow: 0px 4px 8px 0px rgba(2, 6, 23, 0.04);
}
.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
  outline-color: #dc2626;
}
.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close:hover {
  background: #1e293b;
}
.p-togglebutton.p-button {
  padding: 0.25rem;
}
.p-togglebutton.p-button .p-button-label {
  padding: 0.25rem 0.5rem;
}
.p-togglebutton.p-button .p-button-icon {
  padding: 0.35rem 0.25rem;
}
.p-togglebutton.p-button .p-button-label,
.p-togglebutton.p-button .p-button-icon {
  position: relative;
  transition: none;
}
.p-togglebutton.p-button::before {
  content: "";
  background-color: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    outline-color 0.2s;
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  width: calc(100% - 0.5rem);
  height: calc(100% - 0.5rem);
  border-radius: 4px;
}
.p-togglebutton.p-highlight .p-button::before {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
}
.p-togglebutton.p-highlight .p-button-label {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}
.p-togglebutton.p-highlight:has(.p-button-icon) .p-button-icon {
  margin-right: 0;
  background: #ffffff;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.02), -2px 2px 2px 0px rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 4px 0px 0px 4px;
}
.p-togglebutton.p-highlight:has(.p-button-icon) .p-button-label {
  background: #ffffff;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.02), 2px 2px 2px 0px rgba(0, 0, 0, 0.04);
  border-radius: 0px 4px 4px 0px;
}
.p-togglebutton:has(:not(.p-highlight)):has(.p-button-icon) .p-button-icon {
  margin-right: 0;
  border: none;
  border-radius: 4px 0px 0px 4px;
}
.p-togglebutton:has(:not(.p-highlight)):has(.p-button-icon) .p-button-label {
  border-radius: 0px 4px 4px 0px;
}
.p-togglebutton.p-disabled {
  opacity: 1;
  color: #94a3b8;
}
.p-togglebutton.p-disabled .p-button-icon {
  color: #94a3b8;
}
.p-toolbar {
  padding: 0.75rem;
}
.p-tree {
  border: 0 none;
  padding: 1rem;
}
.p-tree .p-tree-container .p-treenode {
  margin: 2px 0;
}
.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
  outline-offset: -2px;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
  background: none;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover {
  background-color: #EFF6FF;
}
.p-tree .p-tree-container > .p-treenode:first-child {
  margin-top: 0;
}
.p-tree .p-tree-container > .p-treenode:last-child {
  margin-bottom: 0;
}
.p-treeselect-panel .p-tree {
  padding: 0.25rem 0.25rem;
}
.p-treeselect {
  box-shadow:
    0 0 rgba(0, 0, 0, 0),
    0 0 rgba(0, 0, 0, 0),
    0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-treeselect.p-disabled {
  opacity: 1;
  background-color: #e2e8f0;
}
.p-treeselect.p-disabled .p-treeselect-label {
  color: #64748b;
}
.p-treeselect.p-treeselect-chip .p-treeselect-label-container .p-treeselect-token {
  border-radius: 4px;
}
.p-multiselect {
  display: inline-flex;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.p-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-multiselect-label-container {
  overflow: hidden;
  flex: 1 1 auto;
  cursor: pointer;
  display: flex;
}
.p-multiselect-label {
  display: block;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-multiselect-label-empty {
  overflow: hidden;
  visibility: hidden;
}
.p-multiselect-token {
  cursor: default;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.p-multiselect-token-icon {
  cursor: pointer;
}
.p-multiselect-token-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}
.p-multiselect-items-wrapper {
  overflow: auto;
}
.p-multiselect-items {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.p-multiselect-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.p-multiselect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-multiselect-filter-container {
  position: relative;
  flex: 1 1 auto;
}
.p-multiselect-filter-icon {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
}
.p-multiselect-filter-container .p-inputtext {
  width: 100%;
}
.p-multiselect-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.p-fluid .p-multiselect {
  display: flex;
}
.p-multiselect-clear-icon {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
  cursor: pointer;
}
.p-multiselect-clearable {
  position: relative;
}
.no-padding-dialog .mat-mdc-dialog-container .mdc-dialog__surface {
  padding: 0;
}
.tid-dialog-panel .mat-mdc-dialog-container .mdc-dialog__surface {
  padding: 0;
  border-radius: 16px !important;
  overflow: hidden;
}
.inbox-compose-dialog-panel .mat-mdc-dialog-container .mdc-dialog__surface {
  padding: 0;
  border-radius: 20px !important;
  overflow: hidden;
}
.tid-role-menu .mat-mdc-menu-panel {
  border-radius: 12px !important;
  min-width: 260px !important;
}
.tid-role-menu-item.mat-mdc-menu-item {
  height: auto !important;
  line-height: 1.2 !important;
}
.tid-tooltip .mdc-tooltip__surface {
  background: #1f2937 !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  max-width: 260px !important;
}
.cp-dialog-positioning {
  visibility: hidden !important;
}
.mos-table .cdk-column-select {
  flex: none !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
}
.mos-table .cdk-column-sourcetarget {
  flex: 1 1 0% !important;
  min-width: 300px !important;
}
.mos-table .cdk-column-min {
  flex: none !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}
.mos-table .cdk-column-rate {
  flex: none !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}
.mos-table .cdk-column-daily {
  flex: none !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}
.mos-table .cdk-column-experience {
  flex: none !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}
.mos-table .cdk-column-proficiency {
  flex: none !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 80px !important;
}
.mos-table .cdk-column-public {
  flex: none !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}
.mos-table .cdk-column-actions {
  flex: none !important;
  width: 65px !important;
  min-width: 40px !important;
  max-width: 65px !important;
}
.mos-context-menu.mat-mdc-menu-panel {
  min-width: 160px;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden;
}
.mos-context-menu.mat-mdc-menu-panel .mat-mdc-menu-item {
  height: 44px;
  font-size: 14px;
}
.mos-context-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon {
  color: #64748b;
  margin-right: 10px;
}
.mos-context-menu.mat-mdc-menu-panel .mos-menu-delete {
  color: #ef4444 !important;
}
.mos-context-menu.mat-mdc-menu-panel .mos-menu-delete .mat-icon {
  color: #ef4444 !important;
}
.msm-select-panel {
  min-width: 220px !important;
}
.animate-spin-reverse {
  animation: spin-reverse 1s linear infinite;
}
@keyframes spin-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
vex-status-toggle {
  height: 24px;
  max-height: 24px;
}
.vex-textarea-outer {
  position: relative;
  display: block;
}
.vex-resize-handle {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  min-height: 3px;
  max-height: 3px;
  background: rgba(6, 31, 39, 0.2);
  border-radius: 2px;
  cursor: row-resize;
  z-index: 1;
}
.tan-reviewer-picker-panel .mat-mdc-dialog-container .mdc-dialog__surface {
  border-radius: 16px;
  overflow: hidden;
}
.tan-reviewer-picker-panel .mat-mdc-dialog-container .mat-mdc-dialog-surface,
.tan-reviewer-picker-panel .mat-mdc-dialog-container {
  --mat-dialog-container-padding: 0;
  --mdc-dialog-container-shape: 16px;
}
.tan-reviewer-picker-panel .mat-mdc-dialog-content,
.tan-reviewer-picker-panel .mdc-dialog__content {
  padding: 0;
}
.tan-project-team-panel .mat-mdc-dialog-container .mdc-dialog__surface {
  border-radius: 16px;
  overflow: hidden;
}
.tan-project-team-panel .mat-mdc-dialog-container .mat-mdc-dialog-surface,
.tan-project-team-panel .mat-mdc-dialog-container {
  --mat-dialog-container-padding: 0;
  --mdc-dialog-container-shape: 16px;
}
.tan-project-team-panel .mat-mdc-dialog-content,
.tan-project-team-panel .mdc-dialog__content {
  padding: 0;
}
.dstr-field .dstr-datepicker .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 34px;
  --mat-icon-button-state-layer-size: 34px;
  padding: 8px;
}
.dstr-field .dstr-datepicker-icon {
  font-size: 18px !important;
  height: 18px !important;
  width: 18px !important;
}
.dstr-field.mat-mdc-form-field textarea {
  padding: 6px 0px;
}
.dstr-field.mat-mdc-form-field input {
  margin-top: 4px;
}
.dstr-field.mat-mdc-form-field input.no-mt {
  margin-top: 0px;
}
.dstr-field.mat-mdc-form-field mat-select {
  margin-top: 2px;
}
.dstr-field.mat-mdc-form-field {
  --mat-form-field-container-height: 34px;
  --mat-form-field-container-vertical-padding: 4px;
  --mat-form-field-outlined-container-shape: 8px;
  --mat-form-field-label-text-color: #061f2799;
  --mat-form-field-focus-label-text-color: #061f274d;
  --mat-form-field-outlined-hover-outline-color: #061f274d;
  --mat-form-field-outlined-focus-outline-color: #3DCADC;
}
.dstr-field .mat-mdc-select-arrow svg {
  display: none;
}
.dstr-field .mat-mdc-select-arrow {
  background-image: url(/assets/img/icons/mat-form-field-arrow-down.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 10px !important;
  height: 7px !important;
  margin-bottom: -2px;
}
.dstr-field .mat-mdc-option {
  border-radius: 0px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.dstr-field .mat-mdc-option:hover {
  background-color: #e0f6f9 !important;
}
.dstr-field .mat-mdc-option-active {
  background-color: #e0f6f9 !important;
}
.dstr-field .mat-mdc-select-panel {
  padding: 0px !important;
}
.dstr-field mat-label {
  color: #384C52;
}
.dstr-field .mat-mdc-input-element::placeholder {
  font-size: 14px;
  color: rgba(6, 31, 39, 0.5019607843);
}
.dstr-field input.mat-mdc-input-element::placeholder,
.dstr-field textarea.mat-mdc-input-element::placeholder {
  font-size: 14px;
  color: rgba(6, 31, 39, 0.5019607843);
}
.dstr-field-label {
  font-size: 14px;
  color: #384C52;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.dstr-field-label.required::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "";
  background-color: #f44336;
}
.auth-brand-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto;
}

/* src/@vex/styles/tailwind.scss */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--vex-foreground-divider);
}
::before,
::after {
  --tw-content: "";
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family:
    loew-variable,
    "Inter var",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}
body {
  margin: 0;
  line-height: inherit;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family:
    Menlo,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}
textarea {
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
button,
[role=button] {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden] {
  display: none;
}
*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
html {
  box-sizing: border-box;
  font-size: 16px;
  height: 100%;
  overflow: hidden;
  font-feature-settings:
    "cv02",
    "cv03",
    "cv04",
    "cv11",
    "salt",
    "calt",
    "case";
  font-family:
    loew-variable,
    "Inter var",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  height: 100%;
  letter-spacing: -0.006em;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-text-rgb) / var(--tw-text-opacity));
}
div {
  box-sizing: border-box;
}
input,
textarea {
  line-height: 1.5;
}
button:focus {
  outline: unset !important;
}
code {
  border-radius: var(--vex-border-radius);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-app-bar-rgb) / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family:
    Menlo,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-text-rgb) / var(--tw-text-opacity));
}
blockquote {
  background: rgb(var(--vex-color-primary-600)/0.1);
  border-left: 3px solid rgb(var(--vex-color-primary-600) / 1);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
blockquote > * {
  margin: 0;
}
.vex-theme-default {
  --vex-color-primary-50: 243 248 250;
  --vex-color-primary-100: 230 241 244;
  --vex-color-primary-200: 201 224 235;
  --vex-color-primary-300: 162 197 210;
  --vex-color-primary-400: 119 163 184;
  --vex-color-primary-500: 77 127 139;
  --vex-color-primary-600: 7 84 115;
  --vex-color-primary-700: 5 66 90;
  --vex-color-primary-800: 3 48 71;
  --vex-color-primary-900: 2 31 50;
  --vex-color-primary-950: 1 18 32;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-default.light,
.vex-theme-default .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-default.dark,
.vex-theme-default .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-red.light,
.vex-theme-red .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-red.dark,
.vex-theme-red .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-orange.light,
.vex-theme-orange .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-orange.dark,
.vex-theme-orange .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-amber {
  --vex-color-primary-50: 255 251 235;
  --vex-color-primary-100: 254 243 199;
  --vex-color-primary-200: 253 230 138;
  --vex-color-primary-300: 252 211 77;
  --vex-color-primary-400: 251 191 36;
  --vex-color-primary-500: 245 158 11;
  --vex-color-primary-600: 217 119 6;
  --vex-color-primary-700: 180 83 9;
  --vex-color-primary-800: 146 64 14;
  --vex-color-primary-900: 120 53 15;
  --vex-color-primary-950: 69 26 3;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-amber.light,
.vex-theme-amber .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-amber.dark,
.vex-theme-amber .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-yellow.light,
.vex-theme-yellow .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-yellow.dark,
.vex-theme-yellow .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-lime {
  --vex-color-primary-50: 247 254 231;
  --vex-color-primary-100: 236 252 203;
  --vex-color-primary-200: 217 249 157;
  --vex-color-primary-300: 190 242 100;
  --vex-color-primary-400: 163 230 53;
  --vex-color-primary-500: 132 204 22;
  --vex-color-primary-600: 101 163 13;
  --vex-color-primary-700: 77 124 15;
  --vex-color-primary-800: 63 98 18;
  --vex-color-primary-900: 54 83 20;
  --vex-color-primary-950: 26 46 5;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-lime.light,
.vex-theme-lime .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-lime.dark,
.vex-theme-lime .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-green.light,
.vex-theme-green .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-green.dark,
.vex-theme-green .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-emerald.light,
.vex-theme-emerald .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-emerald.dark,
.vex-theme-emerald .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-teal {
  --vex-color-primary-50: 240 253 250;
  --vex-color-primary-100: 204 251 241;
  --vex-color-primary-200: 153 246 228;
  --vex-color-primary-300: 94 234 212;
  --vex-color-primary-400: 45 212 191;
  --vex-color-primary-500: 20 184 166;
  --vex-color-primary-600: 13 148 136;
  --vex-color-primary-700: 15 118 110;
  --vex-color-primary-800: 17 94 89;
  --vex-color-primary-900: 19 78 74;
  --vex-color-primary-950: 4 47 46;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-teal.light,
.vex-theme-teal .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-teal.dark,
.vex-theme-teal .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-cyan.light,
.vex-theme-cyan .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-cyan.dark,
.vex-theme-cyan .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-sky {
  --vex-color-primary-50: 240 249 255;
  --vex-color-primary-100: 224 242 254;
  --vex-color-primary-200: 186 230 253;
  --vex-color-primary-300: 125 211 252;
  --vex-color-primary-400: 56 189 248;
  --vex-color-primary-500: 14 165 233;
  --vex-color-primary-600: 2 132 199;
  --vex-color-primary-700: 3 105 161;
  --vex-color-primary-800: 7 89 133;
  --vex-color-primary-900: 12 74 110;
  --vex-color-primary-950: 8 47 73;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-sky.light,
.vex-theme-sky .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-sky.dark,
.vex-theme-sky .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-azul-cielo {
  --vex-color-primary-50: 245 246 251;
  --vex-color-primary-100: 232 236 247;
  --vex-color-primary-200: 207 216 237;
  --vex-color-primary-300: 181 196 228;
  --vex-color-primary-400: 155 177 219;
  --vex-color-primary-500: 128 158 209;
  --vex-color-primary-600: 99 139 200;
  --vex-color-primary-700: 72 105 163;
  --vex-color-primary-800: 45 73 127;
  --vex-color-primary-900: 17 44 93;
  --vex-color-primary-950: 0 30 77;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 0 0 0;
  --vex-color-on-primary-600: 0 0 0;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-azul-cielo.light,
.vex-theme-azul-cielo .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-azul-cielo.dark,
.vex-theme-azul-cielo .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-blue {
  --vex-color-primary-50: 239 246 255;
  --vex-color-primary-100: 219 234 254;
  --vex-color-primary-200: 191 219 254;
  --vex-color-primary-300: 147 197 253;
  --vex-color-primary-400: 96 165 250;
  --vex-color-primary-500: 59 130 246;
  --vex-color-primary-600: 37 99 235;
  --vex-color-primary-700: 29 78 216;
  --vex-color-primary-800: 30 64 175;
  --vex-color-primary-900: 30 58 138;
  --vex-color-primary-950: 23 37 84;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-blue.light,
.vex-theme-blue .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-blue.dark,
.vex-theme-blue .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-indigo {
  --vex-color-primary-50: 238 242 255;
  --vex-color-primary-100: 224 231 255;
  --vex-color-primary-200: 199 210 254;
  --vex-color-primary-300: 165 180 252;
  --vex-color-primary-400: 129 140 248;
  --vex-color-primary-500: 99 102 241;
  --vex-color-primary-600: 79 70 229;
  --vex-color-primary-700: 67 56 202;
  --vex-color-primary-800: 55 48 163;
  --vex-color-primary-900: 49 46 129;
  --vex-color-primary-950: 30 27 75;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-indigo.light,
.vex-theme-indigo .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-indigo.dark,
.vex-theme-indigo .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-violet.light,
.vex-theme-violet .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-violet.dark,
.vex-theme-violet .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-purple.light,
.vex-theme-purple .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-purple.dark,
.vex-theme-purple .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-fuchsia.light,
.vex-theme-fuchsia .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-fuchsia.dark,
.vex-theme-fuchsia .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-pink.light,
.vex-theme-pink .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-pink.dark,
.vex-theme-pink .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-rose.light,
.vex-theme-rose .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-rose.dark,
.vex-theme-rose .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-slate {
  --vex-color-primary-50: 248 250 252;
  --vex-color-primary-100: 241 245 249;
  --vex-color-primary-200: 226 232 240;
  --vex-color-primary-300: 203 213 225;
  --vex-color-primary-400: 148 163 184;
  --vex-color-primary-500: 100 116 139;
  --vex-color-primary-600: 71 85 105;
  --vex-color-primary-700: 51 65 85;
  --vex-color-primary-800: 30 41 59;
  --vex-color-primary-900: 15 23 42;
  --vex-color-primary-950: 2 6 23;
  --vex-color-on-primary-50: 0 0 0;
  --vex-color-on-primary-100: 0 0 0;
  --vex-color-on-primary-200: 0 0 0;
  --vex-color-on-primary-300: 0 0 0;
  --vex-color-on-primary-400: 0 0 0;
  --vex-color-on-primary-500: 255 255 255;
  --vex-color-on-primary-600: 255 255 255;
  --vex-color-on-primary-700: 255 255 255;
  --vex-color-on-primary-800: 255 255 255;
  --vex-color-on-primary-900: 255 255 255;
  --vex-color-accent-50: 255 251 235;
  --vex-color-accent-100: 254 243 199;
  --vex-color-accent-200: 253 230 138;
  --vex-color-accent-300: 252 211 77;
  --vex-color-accent-400: 251 191 36;
  --vex-color-accent-500: 245 158 11;
  --vex-color-accent-600: 217 119 6;
  --vex-color-accent-700: 180 83 9;
  --vex-color-accent-800: 146 64 14;
  --vex-color-accent-900: 120 53 15;
  --vex-color-accent-950: 69 26 3;
  --vex-color-on-accent-50: 0 0 0;
  --vex-color-on-accent-100: 0 0 0;
  --vex-color-on-accent-200: 0 0 0;
  --vex-color-on-accent-300: 0 0 0;
  --vex-color-on-accent-400: 0 0 0;
  --vex-color-on-accent-500: 255 255 255;
  --vex-color-on-accent-600: 255 255 255;
  --vex-color-on-accent-700: 255 255 255;
  --vex-color-on-accent-800: 255 255 255;
  --vex-color-on-accent-900: 255 255 255;
  --vex-color-warn-50: 254 242 242;
  --vex-color-warn-100: 254 226 226;
  --vex-color-warn-200: 254 202 202;
  --vex-color-warn-300: 252 165 165;
  --vex-color-warn-400: 248 113 113;
  --vex-color-warn-500: 239 68 68;
  --vex-color-warn-600: 220 38 38;
  --vex-color-warn-700: 185 28 28;
  --vex-color-warn-800: 153 27 27;
  --vex-color-warn-900: 127 29 29;
  --vex-color-warn-950: 69 10 10;
  --vex-color-on-warn-50: 0 0 0;
  --vex-color-on-warn-100: 0 0 0;
  --vex-color-on-warn-200: 0 0 0;
  --vex-color-on-warn-300: 0 0 0;
  --vex-color-on-warn-400: 0 0 0;
  --vex-color-on-warn-500: 255 255 255;
  --vex-color-on-warn-600: 255 255 255;
  --vex-color-on-warn-700: 255 255 255;
  --vex-color-on-warn-800: 255 255 255;
  --vex-color-on-warn-900: 255 255 255;
}
.vex-theme-slate.light,
.vex-theme-slate .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-slate.dark,
.vex-theme-slate .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-gray.light,
.vex-theme-gray .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-gray.dark,
.vex-theme-gray .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-zinc.light,
.vex-theme-zinc .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-zinc.dark,
.vex-theme-zinc .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-neutral.light,
.vex-theme-neutral .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-neutral.dark,
.vex-theme-neutral .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
.vex-theme-stone.light,
.vex-theme-stone .light {
  --vex-foreground-base: #000;
  --vex-foreground-base-rgb: 0 0 0;
  --vex-foreground-divider: rgba(0,0,0,0.06);
  --vex-foreground-divider-rgb: 0 0 0;
  --vex-foreground-dividers: rgba(0,0,0,0.06);
  --vex-foreground-dividers-rgb: 0 0 0;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #9ca3af;
  --vex-foreground-disabled-button-rgb: 156 163 175;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #4b5563;
  --vex-foreground-secondary-text-rgb: 75 85 99;
  --vex-foreground-icon: #1f2937;
  --vex-foreground-icon-rgb: 31 41 55;
  --vex-foreground-icons: #1f2937;
  --vex-foreground-icons-rgb: 31 41 55;
  --vex-foreground-text: #030712;
  --vex-foreground-text-rgb: 3 7 18;
  --vex-foreground-slider-min: #1f2937;
  --vex-foreground-slider-min-rgb: 31 41 55;
  --vex-foreground-slider-off: #9ca3af;
  --vex-foreground-slider-off-rgb: 156 163 175;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #d1d5db;
  --vex-background-status-bar-rgb: 209 213 219;
  --vex-background-app-bar: #e5e7eb;
  --vex-background-app-bar-rgb: 229 231 235;
  --vex-background-background: #f3f4f6;
  --vex-background-background-rgb: 243 244 246;
  --vex-background-hover: rgba(17,24,39,0.04);
  --vex-background-hover-rgb: 17 24 39;
  --vex-background-card: #fff;
  --vex-background-card-rgb: 255 255 255;
  --vex-background-dialog: #fff;
  --vex-background-dialog-rgb: 255 255 255;
  --vex-background-disabled-button: #e5e7eb;
  --vex-background-disabled-button-rgb: 229 231 235;
  --vex-background-raised-button: #fff;
  --vex-background-raised-button-rgb: 255 255 255;
  --vex-background-focused-button: #e5e7eb;
  --vex-background-focused-button-rgb: 229 231 235;
  --vex-background-selected-button: #d1d5db;
  --vex-background-selected-button-rgb: 209 213 219;
  --vex-background-selected-disabled-button: #9ca3af;
  --vex-background-selected-disabled-button-rgb: 156 163 175;
  --vex-background-disabled-button-toggle: #e5e7eb;
  --vex-background-disabled-button-toggle-rgb: 229 231 235;
  --vex-background-unselected-chip: #d1d5db;
  --vex-background-unselected-chip-rgb: 209 213 219;
  --vex-background-disabled-list-option: #e5e7eb;
  --vex-background-disabled-list-option-rgb: 229 231 235;
  --vex-background-tooltip: #1f2937;
  --vex-background-tooltip-rgb: 31 41 55;
}
.vex-theme-stone.dark,
.vex-theme-stone .dark {
  --vex-foreground-base: #fff;
  --vex-foreground-base-rgb: 255 255 255;
  --vex-foreground-divider: rgba(255,255,255,0.12);
  --vex-foreground-divider-rgb: 255 255 255;
  --vex-foreground-dividers: rgba(255,255,255,0.12);
  --vex-foreground-dividers-rgb: 255 255 255;
  --vex-foreground-disabled: #6b7280;
  --vex-foreground-disabled-rgb: 107 114 128;
  --vex-foreground-disabled-button: #4b5563;
  --vex-foreground-disabled-button-rgb: 75 85 99;
  --vex-foreground-disabled-text: #6b7280;
  --vex-foreground-disabled-text-rgb: 107 114 128;
  --vex-foreground-elevation: #000;
  --vex-foreground-elevation-rgb: 0 0 0;
  --vex-foreground-hint-text: #6b7280;
  --vex-foreground-hint-text-rgb: 107 114 128;
  --vex-foreground-secondary-text: #9ca3af;
  --vex-foreground-secondary-text-rgb: 156 163 175;
  --vex-foreground-icon: #fff;
  --vex-foreground-icon-rgb: 255 255 255;
  --vex-foreground-icons: #fff;
  --vex-foreground-icons-rgb: 255 255 255;
  --vex-foreground-text: #fff;
  --vex-foreground-text-rgb: 255 255 255;
  --vex-foreground-slider-min: #fff;
  --vex-foreground-slider-min-rgb: 255 255 255;
  --vex-foreground-slider-off: #4b5563;
  --vex-foreground-slider-off-rgb: 75 85 99;
  --vex-foreground-slider-off-active: #6b7280;
  --vex-foreground-slider-off-active-rgb: 107 114 128;
  --vex-background-status-bar: #030712;
  --vex-background-status-bar-rgb: 3 7 18;
  --vex-background-app-bar: #1f2937;
  --vex-background-app-bar-rgb: 31 41 55;
  --vex-background-background: #111827;
  --vex-background-background-rgb: 17 24 39;
  --vex-background-hover: rgba(255,255,255,0.04);
  --vex-background-hover-rgb: 255 255 255;
  --vex-background-card: #1f2937;
  --vex-background-card-rgb: 31 41 55;
  --vex-background-dialog: #1f2937;
  --vex-background-dialog-rgb: 31 41 55;
  --vex-background-disabled-button: rgba(255,255,255,0.12);
  --vex-background-disabled-button-rgb: 255 255 255;
  --vex-background-raised-button: #1f2937;
  --vex-background-raised-button-rgb: 31 41 55;
  --vex-background-focused-button: rgba(255,255,255,0.12);
  --vex-background-focused-button-rgb: 255 255 255;
  --vex-background-selected-button: #111827;
  --vex-background-selected-button-rgb: 17 24 39;
  --vex-background-selected-disabled-button: #1f2937;
  --vex-background-selected-disabled-button-rgb: 31 41 55;
  --vex-background-disabled-button-toggle: #000;
  --vex-background-disabled-button-toggle-rgb: 0 0 0;
  --vex-background-unselected-chip: #374151;
  --vex-background-unselected-chip-rgb: 55 65 81;
  --vex-background-disabled-list-option: rgba(255,255,255,0.12);
  --vex-background-disabled-list-option-rgb: 255 255 255;
  --vex-background-tooltip: #374151;
  --vex-background-tooltip-rgb: 55 65 81;
}
:root :is(.pointer-events-none) {
  pointer-events: none;
}
:root :is(.\!visible) {
  visibility: visible !important;
}
:root :is(.visible) {
  visibility: visible;
}
:root :is(.invisible) {
  visibility: hidden;
}
:root :is(.collapse) {
  visibility: collapse;
}
:root :is(.static) {
  position: static;
}
:root :is(.fixed) {
  position: fixed;
}
:root :is(.absolute) {
  position: absolute;
}
:root :is(.relative) {
  position: relative;
}
:root :is(.sticky) {
  position: sticky;
}
:root :is(.inset-0) {
  inset: 0px;
}
:root :is(.inset-y-0) {
  top: 0px;
  bottom: 0px;
}
:root :is(.bottom-0) {
  bottom: 0px;
}
:root :is(.bottom-0\.5) {
  bottom: 0.125rem;
}
:root :is(.bottom-4) {
  bottom: 1rem;
}
:root :is(.bottom-6) {
  bottom: 1.5rem;
}
:root :is(.bottom-\[-24px\]) {
  bottom: -24px;
}
:root :is(.bottom-\[0px\]) {
  bottom: 0px;
}
:root :is(.bottom-\[20px\]) {
  bottom: 20px;
}
:root :is(.left-0) {
  left: 0px;
}
:root :is(.left-0\.5) {
  left: 0.125rem;
}
:root :is(.left-1\/2) {
  left: 50%;
}
:root :is(.left-3) {
  left: 0.75rem;
}
:root :is(.left-5) {
  left: 1.25rem;
}
:root :is(.left-6) {
  left: 1.5rem;
}
:root :is(.left-\[102px\]) {
  left: 102px;
}
:root :is(.left-\[16px\]) {
  left: 16px;
}
:root :is(.right-0) {
  right: 0px;
}
:root :is(.right-0\.5) {
  right: 0.125rem;
}
:root :is(.right-1) {
  right: 0.25rem;
}
:root :is(.right-2) {
  right: 0.5rem;
}
:root :is(.right-2\.5) {
  right: 0.625rem;
}
:root :is(.right-3) {
  right: 0.75rem;
}
:root :is(.right-4) {
  right: 1rem;
}
:root :is(.right-6) {
  right: 1.5rem;
}
:root :is(.right-\[-2px\]) {
  right: -2px;
}
:root :is(.right-\[-4px\]) {
  right: -4px;
}
:root :is(.right-\[0px\]) {
  right: 0px;
}
:root :is(.right-\[12px\]) {
  right: 12px;
}
:root :is(.right-\[20px\]) {
  right: 20px;
}
:root :is(.right-\[8px\]) {
  right: 8px;
}
:root :is(.top-0) {
  top: 0px;
}
:root :is(.top-0\.5) {
  top: 0.125rem;
}
:root :is(.top-1) {
  top: 0.25rem;
}
:root :is(.top-1\/2) {
  top: 50%;
}
:root :is(.top-12) {
  top: 3rem;
}
:root :is(.top-14) {
  top: 3.5rem;
}
:root :is(.top-2) {
  top: 0.5rem;
}
:root :is(.top-3) {
  top: 0.75rem;
}
:root :is(.top-4) {
  top: 1rem;
}
:root :is(.top-5) {
  top: 1.25rem;
}
:root :is(.top-6) {
  top: 1.5rem;
}
:root :is(.top-\[0px\]) {
  top: 0px;
}
:root :is(.top-\[10px\]) {
  top: 10px;
}
:root :is(.top-\[110px\]) {
  top: 110px;
}
:root :is(.top-\[12px\]) {
  top: 12px;
}
:root :is(.top-\[15px\]) {
  top: 15px;
}
:root :is(.top-\[8px\]) {
  top: 8px;
}
:root :is(.top-\[9px\]) {
  top: 9px;
}
:root :is(.z-0) {
  z-index: 0;
}
:root :is(.z-10) {
  z-index: 10;
}
:root :is(.z-20) {
  z-index: 20;
}
:root :is(.z-30) {
  z-index: 30;
}
:root :is(.z-40) {
  z-index: 40;
}
:root :is(.z-\[-1\]) {
  z-index: -1;
}
:root :is(.z-\[1000\]) {
  z-index: 1000;
}
:root :is(.z-\[100\]) {
  z-index: 100;
}
:root :is(.z-\[200\]) {
  z-index: 200;
}
:root :is(.z-\[300\]) {
  z-index: 300;
}
:root :is(.z-\[55\]) {
  z-index: 55;
}
:root :is(.z-\[60\]) {
  z-index: 60;
}
:root :is(.z-\[65\]) {
  z-index: 65;
}
:root :is(.z-\[9999\]) {
  z-index: 9999;
}
:root :is(.col-auto) {
  grid-column: auto;
}
:root :is(.col-span-2) {
  grid-column: span 2 / span 2;
}
:root :is(.float-right) {
  float: right;
}
:root :is(.m-0) {
  margin: 0px;
}
:root :is(.m-12) {
  margin: 3rem;
}
:root :is(.m-2) {
  margin: 0.5rem;
}
:root :is(.m-3) {
  margin: 0.75rem;
}
:root :is(.m-6) {
  margin: 1.5rem;
}
:root :is(.m-auto) {
  margin: auto;
}
:root :is(.-mx-1) {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
:root :is(.-mx-3) {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
:root :is(.-mx-6) {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
:root :is(.mx-0) {
  margin-left: 0px;
  margin-right: 0px;
}
:root :is(.mx-0\.5) {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
:root :is(.mx-1) {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
:root :is(.mx-10) {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}
:root :is(.mx-2) {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
:root :is(.mx-3) {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
:root :is(.mx-4) {
  margin-left: 1rem;
  margin-right: 1rem;
}
:root :is(.mx-5) {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
:root :is(.mx-6) {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
:root :is(.mx-\[16px\]) {
  margin-left: 16px;
  margin-right: 16px;
}
:root :is(.mx-\[2px\]) {
  margin-left: 2px;
  margin-right: 2px;
}
:root :is(.mx-auto) {
  margin-left: auto;
  margin-right: auto;
}
:root :is(.my-0) {
  margin-top: 0px;
  margin-bottom: 0px;
}
:root :is(.my-1) {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
:root :is(.my-12) {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
:root :is(.my-2) {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
:root :is(.my-3) {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
:root :is(.my-4) {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
:root :is(.my-5) {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
:root :is(.my-6) {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
:root :is(.my-7) {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}
:root :is(.my-\[16px\]) {
  margin-top: 16px;
  margin-bottom: 16px;
}
:root :is(.my-auto) {
  margin-top: auto;
  margin-bottom: auto;
}
:root :is(.-mb-3) {
  margin-bottom: -0.75rem;
}
:root :is(.-ml-3) {
  margin-left: -0.75rem;
}
:root :is(.-mr-4) {
  margin-right: -1rem;
}
:root :is(.-mt-1) {
  margin-top: -0.25rem;
}
:root :is(.-mt-16) {
  margin-top: -4rem;
}
:root :is(.-mt-20) {
  margin-top: -5rem;
}
:root :is(.-mt-4) {
  margin-top: -1rem;
}
:root :is(.-mt-9) {
  margin-top: -2.25rem;
}
:root :is(.mb-0) {
  margin-bottom: 0px;
}
:root :is(.mb-0\.5) {
  margin-bottom: 0.125rem;
}
:root :is(.mb-1) {
  margin-bottom: 0.25rem;
}
:root :is(.mb-1\.5) {
  margin-bottom: 0.375rem;
}
:root :is(.mb-10) {
  margin-bottom: 2.5rem;
}
:root :is(.mb-12) {
  margin-bottom: 3rem;
}
:root :is(.mb-2) {
  margin-bottom: 0.5rem;
}
:root :is(.mb-2\.5) {
  margin-bottom: 0.625rem;
}
:root :is(.mb-24) {
  margin-bottom: 6rem;
}
:root :is(.mb-3) {
  margin-bottom: 0.75rem;
}
:root :is(.mb-4) {
  margin-bottom: 1rem;
}
:root :is(.mb-5) {
  margin-bottom: 1.25rem;
}
:root :is(.mb-6) {
  margin-bottom: 1.5rem;
}
:root :is(.mb-64) {
  margin-bottom: 16rem;
}
:root :is(.mb-7) {
  margin-bottom: 1.75rem;
}
:root :is(.mb-8) {
  margin-bottom: 2rem;
}
:root :is(.mb-\[20px\]) {
  margin-bottom: 20px;
}
:root :is(.mb-\[4px\]) {
  margin-bottom: 4px;
}
:root :is(.mb-\[8px\]) {
  margin-bottom: 8px;
}
:root :is(.ml-0) {
  margin-left: 0px;
}
:root :is(.ml-0\.5) {
  margin-left: 0.125rem;
}
:root :is(.ml-1) {
  margin-left: 0.25rem;
}
:root :is(.ml-10) {
  margin-left: 2.5rem;
}
:root :is(.ml-14) {
  margin-left: 3.5rem;
}
:root :is(.ml-2) {
  margin-left: 0.5rem;
}
:root :is(.ml-3) {
  margin-left: 0.75rem;
}
:root :is(.ml-4) {
  margin-left: 1rem;
}
:root :is(.ml-6) {
  margin-left: 1.5rem;
}
:root :is(.ml-8) {
  margin-left: 2rem;
}
:root :is(.ml-\[-4px\]) {
  margin-left: -4px;
}
:root :is(.ml-\[-6px\]) {
  margin-left: -6px;
}
:root :is(.ml-\[-8px\]) {
  margin-left: -8px;
}
:root :is(.ml-\[12px\]) {
  margin-left: 12px;
}
:root :is(.ml-\[20px\]) {
  margin-left: 20px;
}
:root :is(.ml-\[24px\]) {
  margin-left: 24px;
}
:root :is(.ml-\[26px\]) {
  margin-left: 26px;
}
:root :is(.ml-\[4px\]) {
  margin-left: 4px;
}
:root :is(.ml-\[6px\]) {
  margin-left: 6px;
}
:root :is(.ml-\[8px\]) {
  margin-left: 8px;
}
:root :is(.ml-auto) {
  margin-left: auto;
}
:root :is(.mr-1) {
  margin-right: 0.25rem;
}
:root :is(.mr-2) {
  margin-right: 0.5rem;
}
:root :is(.mr-3) {
  margin-right: 0.75rem;
}
:root :is(.mr-4) {
  margin-right: 1rem;
}
:root :is(.mr-5) {
  margin-right: 1.25rem;
}
:root :is(.mr-8) {
  margin-right: 2rem;
}
:root :is(.mr-\[12px\]) {
  margin-right: 12px;
}
:root :is(.mr-\[16px\]) {
  margin-right: 16px;
}
:root :is(.mr-\[24px\]) {
  margin-right: 24px;
}
:root :is(.mr-\[4px\]) {
  margin-right: 4px;
}
:root :is(.mr-\[8px\]) {
  margin-right: 8px;
}
:root :is(.mt-0) {
  margin-top: 0px;
}
:root :is(.mt-0\.5) {
  margin-top: 0.125rem;
}
:root :is(.mt-1) {
  margin-top: 0.25rem;
}
:root :is(.mt-1\.5) {
  margin-top: 0.375rem;
}
:root :is(.mt-10) {
  margin-top: 2.5rem;
}
:root :is(.mt-12) {
  margin-top: 3rem;
}
:root :is(.mt-16) {
  margin-top: 4rem;
}
:root :is(.mt-2) {
  margin-top: 0.5rem;
}
:root :is(.mt-24) {
  margin-top: 6rem;
}
:root :is(.mt-3) {
  margin-top: 0.75rem;
}
:root :is(.mt-4) {
  margin-top: 1rem;
}
:root :is(.mt-5) {
  margin-top: 1.25rem;
}
:root :is(.mt-6) {
  margin-top: 1.5rem;
}
:root :is(.mt-8) {
  margin-top: 2rem;
}
:root :is(.mt-\[-6px\]) {
  margin-top: -6px;
}
:root :is(.mt-\[64vh\]) {
  margin-top: 64vh;
}
:root :is(.mt-\[8px\]) {
  margin-top: 8px;
}
:root :is(.mt-auto) {
  margin-top: auto;
}
:root :is(.box-border) {
  box-sizing: border-box;
}
:root :is(.line-clamp-1) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
:root :is(.line-clamp-3) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
:root :is(.\!block) {
  display: block !important;
}
:root :is(.block) {
  display: block;
}
:root :is(.\!inline-block) {
  display: inline-block !important;
}
:root :is(.inline-block) {
  display: inline-block;
}
:root :is(.inline) {
  display: inline;
}
:root :is(.flex) {
  display: flex;
}
:root :is(.inline-flex) {
  display: inline-flex;
}
:root :is(.table) {
  display: table;
}
:root :is(.table-row) {
  display: table-row;
}
:root :is(.grid) {
  display: grid;
}
:root :is(.contents) {
  display: contents;
}
:root :is(.hidden) {
  display: none;
}
:root :is(.aspect-\[4\/3\]) {
  aspect-ratio: 4/3;
}
:root :is(.aspect-square) {
  aspect-ratio: 1 / 1;
}
:root :is(.\!h-4) {
  height: 1rem !important;
}
:root :is(.\!h-5) {
  height: 1.25rem !important;
}
:root :is(.\!h-7) {
  height: 1.75rem !important;
}
:root :is(.\!h-8) {
  height: 2rem !important;
}
:root :is(.\!h-\[14px\]) {
  height: 14px !important;
}
:root :is(.\!h-\[16px\]) {
  height: 16px !important;
}
:root :is(.\!h-\[20px\]) {
  height: 20px !important;
}
:root :is(.h-0) {
  height: 0px;
}
:root :is(.h-0\.5) {
  height: 0.125rem;
}
:root :is(.h-1) {
  height: 0.25rem;
}
:root :is(.h-1\.5) {
  height: 0.375rem;
}
:root :is(.h-10) {
  height: 2.5rem;
}
:root :is(.h-11) {
  height: 2.75rem;
}
:root :is(.h-12) {
  height: 3rem;
}
:root :is(.h-14) {
  height: 3.5rem;
}
:root :is(.h-16) {
  height: 4rem;
}
:root :is(.h-2) {
  height: 0.5rem;
}
:root :is(.h-2\.5) {
  height: 0.625rem;
}
:root :is(.h-20) {
  height: 5rem;
}
:root :is(.h-24) {
  height: 6rem;
}
:root :is(.h-28) {
  height: 7rem;
}
:root :is(.h-3) {
  height: 0.75rem;
}
:root :is(.h-3\.5) {
  height: 0.875rem;
}
:root :is(.h-4) {
  height: 1rem;
}
:root :is(.h-44) {
  height: 11rem;
}
:root :is(.h-5) {
  height: 1.25rem;
}
:root :is(.h-6) {
  height: 1.5rem;
}
:root :is(.h-64) {
  height: 16rem;
}
:root :is(.h-7) {
  height: 1.75rem;
}
:root :is(.h-8) {
  height: 2rem;
}
:root :is(.h-9) {
  height: 2.25rem;
}
:root :is(.h-\[100vh\]) {
  height: 100vh;
}
:root :is(.h-\[114px\]) {
  height: 114px;
}
:root :is(.h-\[168px\]) {
  height: 168px;
}
:root :is(.h-\[1px\]) {
  height: 1px;
}
:root :is(.h-\[20px\]) {
  height: 20px;
}
:root :is(.h-\[28px\]) {
  height: 28px;
}
:root :is(.h-\[2px\]) {
  height: 2px;
}
:root :is(.h-\[30px\]) {
  height: 30px;
}
:root :is(.h-\[32px\]) {
  height: 32px;
}
:root :is(.h-\[34px\]) {
  height: 34px;
}
:root :is(.h-\[36px\]) {
  height: 36px;
}
:root :is(.h-\[40px\]) {
  height: 40px;
}
:root :is(.h-\[44px\]) {
  height: 44px;
}
:root :is(.h-\[4px\]) {
  height: 4px;
}
:root :is(.h-\[56px\]) {
  height: 56px;
}
:root :is(.h-\[60px\]) {
  height: 60px;
}
:root :is(.h-\[64px\]) {
  height: 64px;
}
:root :is(.h-auto) {
  height: auto;
}
:root :is(.h-fit) {
  height: fit-content;
}
:root :is(.h-full) {
  height: 100%;
}
:root :is(.h-px) {
  height: 1px;
}
:root :is(.h-screen) {
  height: 100vh;
}
:root :is(.max-h-10) {
  max-height: 2.5rem;
}
:root :is(.max-h-3) {
  max-height: 0.75rem;
}
:root :is(.max-h-32) {
  max-height: 8rem;
}
:root :is(.max-h-48) {
  max-height: 12rem;
}
:root :is(.max-h-5) {
  max-height: 1.25rem;
}
:root :is(.max-h-6) {
  max-height: 1.5rem;
}
:root :is(.max-h-7) {
  max-height: 1.75rem;
}
:root :is(.max-h-72) {
  max-height: 18rem;
}
:root :is(.max-h-\[200px\]) {
  max-height: 200px;
}
:root :is(.max-h-\[34px\]) {
  max-height: 34px;
}
:root :is(.max-h-\[350px\]) {
  max-height: 350px;
}
:root :is(.max-h-\[400px\]) {
  max-height: 400px;
}
:root :is(.max-h-\[420px\]) {
  max-height: 420px;
}
:root :is(.max-h-\[45px\]) {
  max-height: 45px;
}
:root :is(.max-h-\[56px\]) {
  max-height: 56px;
}
:root :is(.max-h-\[70vh\]) {
  max-height: 70vh;
}
:root :is(.max-h-\[90vh\]) {
  max-height: 90vh;
}
:root :is(.\!min-h-\[28px\]) {
  min-height: 28px !important;
}
:root :is(.min-h-0) {
  min-height: 0px;
}
:root :is(.min-h-10) {
  min-height: 2.5rem;
}
:root :is(.min-h-5) {
  min-height: 1.25rem;
}
:root :is(.min-h-7) {
  min-height: 1.75rem;
}
:root :is(.min-h-\[1\.5em\]) {
  min-height: 1.5em;
}
:root :is(.min-h-\[112px\]) {
  min-height: 112px;
}
:root :is(.min-h-\[140px\]) {
  min-height: 140px;
}
:root :is(.min-h-\[175px\]) {
  min-height: 175px;
}
:root :is(.min-h-\[20px\]) {
  min-height: 20px;
}
:root :is(.min-h-\[30px\]) {
  min-height: 30px;
}
:root :is(.min-h-\[34px\]) {
  min-height: 34px;
}
:root :is(.min-h-\[36px\]) {
  min-height: 36px;
}
:root :is(.min-h-\[38px\]) {
  min-height: 38px;
}
:root :is(.min-h-\[45px\]) {
  min-height: 45px;
}
:root :is(.min-h-\[460px\]) {
  min-height: 460px;
}
:root :is(.min-h-\[56px\]) {
  min-height: 56px;
}
:root :is(.min-h-full) {
  min-height: 100%;
}
:root :is(.min-h-screen) {
  min-height: 100vh;
}
:root :is(.\!w-4) {
  width: 1rem !important;
}
:root :is(.\!w-5) {
  width: 1.25rem !important;
}
:root :is(.\!w-\[14px\]) {
  width: 14px !important;
}
:root :is(.\!w-\[16px\]) {
  width: 16px !important;
}
:root :is(.\!w-\[20px\]) {
  width: 20px !important;
}
:root :is(.w-0) {
  width: 0px;
}
:root :is(.w-0\.5) {
  width: 0.125rem;
}
:root :is(.w-1) {
  width: 0.25rem;
}
:root :is(.w-1\.5) {
  width: 0.375rem;
}
:root :is(.w-1\/4) {
  width: 25%;
}
:root :is(.w-10) {
  width: 2.5rem;
}
:root :is(.w-11) {
  width: 2.75rem;
}
:root :is(.w-12) {
  width: 3rem;
}
:root :is(.w-14) {
  width: 3.5rem;
}
:root :is(.w-16) {
  width: 4rem;
}
:root :is(.w-2) {
  width: 0.5rem;
}
:root :is(.w-2\.5) {
  width: 0.625rem;
}
:root :is(.w-2\/3) {
  width: 66.666667%;
}
:root :is(.w-2\/5) {
  width: 40%;
}
:root :is(.w-20) {
  width: 5rem;
}
:root :is(.w-24) {
  width: 6rem;
}
:root :is(.w-28) {
  width: 7rem;
}
:root :is(.w-3) {
  width: 0.75rem;
}
:root :is(.w-3\.5) {
  width: 0.875rem;
}
:root :is(.w-3\/5) {
  width: 60%;
}
:root :is(.w-32) {
  width: 8rem;
}
:root :is(.w-36) {
  width: 9rem;
}
:root :is(.w-4) {
  width: 1rem;
}
:root :is(.w-44) {
  width: 11rem;
}
:root :is(.w-48) {
  width: 12rem;
}
:root :is(.w-5) {
  width: 1.25rem;
}
:root :is(.w-56) {
  width: 14rem;
}
:root :is(.w-6) {
  width: 1.5rem;
}
:root :is(.w-64) {
  width: 16rem;
}
:root :is(.w-7) {
  width: 1.75rem;
}
:root :is(.w-8) {
  width: 2rem;
}
:root :is(.w-80) {
  width: 20rem;
}
:root :is(.w-9) {
  width: 2.25rem;
}
:root :is(.w-\[102px\]) {
  width: 102px;
}
:root :is(.w-\[106px\]) {
  width: 106px;
}
:root :is(.w-\[110px\]) {
  width: 110px;
}
:root :is(.w-\[114px\]) {
  width: 114px;
}
:root :is(.w-\[125px\]) {
  width: 125px;
}
:root :is(.w-\[140px\]) {
  width: 140px;
}
:root :is(.w-\[150px\]) {
  width: 150px;
}
:root :is(.w-\[160px\]) {
  width: 160px;
}
:root :is(.w-\[16px\]) {
  width: 16px;
}
:root :is(.w-\[1px\]) {
  width: 1px;
}
:root :is(.w-\[20px\]) {
  width: 20px;
}
:root :is(.w-\[220px\]) {
  width: 220px;
}
:root :is(.w-\[260px\]) {
  width: 260px;
}
:root :is(.w-\[280px\]) {
  width: 280px;
}
:root :is(.w-\[28px\]) {
  width: 28px;
}
:root :is(.w-\[32px\]) {
  width: 32px;
}
:root :is(.w-\[34px\]) {
  width: 34px;
}
:root :is(.w-\[360px\]) {
  width: 360px;
}
:root :is(.w-\[36px\]) {
  width: 36px;
}
:root :is(.w-\[44\%\]) {
  width: 44%;
}
:root :is(.w-\[44px\]) {
  width: 44px;
}
:root :is(.w-\[460px\]) {
  width: 460px;
}
:root :is(.w-\[480px\]) {
  width: 480px;
}
:root :is(.w-\[50px\]) {
  width: 50px;
}
:root :is(.w-\[560px\]) {
  width: 560px;
}
:root :is(.w-\[56px\]) {
  width: 56px;
}
:root :is(.w-\[60px\]) {
  width: 60px;
}
:root :is(.w-\[64px\]) {
  width: 64px;
}
:root :is(.w-\[720px\]) {
  width: 720px;
}
:root :is(.w-\[78px\]) {
  width: 78px;
}
:root :is(.w-\[800px\]) {
  width: 800px;
}
:root :is(.w-\[80px\]) {
  width: 80px;
}
:root :is(.w-\[84px\]) {
  width: 84px;
}
:root :is(.w-fit) {
  width: fit-content;
}
:root :is(.w-full) {
  width: 100%;
}
:root :is(.w-px) {
  width: 1px;
}
:root :is(.\!min-w-0) {
  min-width: 0px !important;
}
:root :is(.\!min-w-\[70px\]) {
  min-width: 70px !important;
}
:root :is(.min-w-0) {
  min-width: 0px;
}
:root :is(.min-w-5) {
  min-width: 1.25rem;
}
:root :is(.min-w-7) {
  min-width: 1.75rem;
}
:root :is(.min-w-8) {
  min-width: 2rem;
}
:root :is(.min-w-\[100px\]) {
  min-width: 100px;
}
:root :is(.min-w-\[102px\]) {
  min-width: 102px;
}
:root :is(.min-w-\[106px\]) {
  min-width: 106px;
}
:root :is(.min-w-\[140px\]) {
  min-width: 140px;
}
:root :is(.min-w-\[150px\]) {
  min-width: 150px;
}
:root :is(.min-w-\[16px\]) {
  min-width: 16px;
}
:root :is(.min-w-\[200px\]) {
  min-width: 200px;
}
:root :is(.min-w-\[20px\]) {
  min-width: 20px;
}
:root :is(.min-w-\[210px\]) {
  min-width: 210px;
}
:root :is(.min-w-\[220px\]) {
  min-width: 220px;
}
:root :is(.min-w-\[260px\]) {
  min-width: 260px;
}
:root :is(.min-w-\[280px\]) {
  min-width: 280px;
}
:root :is(.min-w-\[34px\]) {
  min-width: 34px;
}
:root :is(.min-w-\[55px\]) {
  min-width: 55px;
}
:root :is(.min-w-\[56px\]) {
  min-width: 56px;
}
:root :is(.min-w-\[80px\]) {
  min-width: 80px;
}
:root :is(.min-w-\[84px\]) {
  min-width: 84px;
}
:root :is(.min-w-\[96px\]) {
  min-width: 96px;
}
:root :is(.max-w-3) {
  max-width: 0.75rem;
}
:root :is(.max-w-3xs) {
  max-width: 16rem;
}
:root :is(.max-w-5) {
  max-width: 1.25rem;
}
:root :is(.max-w-5xl) {
  max-width: 64rem;
}
:root :is(.max-w-6xl) {
  max-width: 72rem;
}
:root :is(.max-w-7) {
  max-width: 1.75rem;
}
:root :is(.max-w-\[100\%\]) {
  max-width: 100%;
}
:root :is(.max-w-\[125px\]) {
  max-width: 125px;
}
:root :is(.max-w-\[160px\]) {
  max-width: 160px;
}
:root :is(.max-w-\[250px\]) {
  max-width: 250px;
}
:root :is(.max-w-\[290px\]) {
  max-width: 290px;
}
:root :is(.max-w-\[300px\]) {
  max-width: 300px;
}
:root :is(.max-w-\[320px\]) {
  max-width: 320px;
}
:root :is(.max-w-\[34px\]) {
  max-width: 34px;
}
:root :is(.max-w-\[350px\]) {
  max-width: 350px;
}
:root :is(.max-w-\[400px\]) {
  max-width: 400px;
}
:root :is(.max-w-\[480px\]) {
  max-width: 480px;
}
:root :is(.max-w-\[600px\]) {
  max-width: 600px;
}
:root :is(.max-w-\[84px\]) {
  max-width: 84px;
}
:root :is(.max-w-\[900px\]) {
  max-width: 900px;
}
:root :is(.max-w-full) {
  max-width: 100%;
}
:root :is(.max-w-lg) {
  max-width: 32rem;
}
:root :is(.max-w-md) {
  max-width: 28rem;
}
:root :is(.max-w-xl) {
  max-width: 36rem;
}
:root :is(.max-w-xs) {
  max-width: 20rem;
}
:root :is(.flex-1) {
  flex: 1 1 0%;
}
:root :is(.flex-auto) {
  flex: 1 1 auto;
}
:root :is(.flex-none) {
  flex: none;
}
:root :is(.flex-shrink) {
  flex-shrink: 1;
}
:root :is(.flex-shrink-0) {
  flex-shrink: 0;
}
:root :is(.shrink) {
  flex-shrink: 1;
}
:root :is(.shrink-0) {
  flex-shrink: 0;
}
:root :is(.flex-grow) {
  flex-grow: 1;
}
:root :is(.grow) {
  flex-grow: 1;
}
:root :is(.basis-\[12\%\]) {
  flex-basis: 12%;
}
:root :is(.basis-\[20\%\]) {
  flex-basis: 20%;
}
:root :is(.basis-\[22\%\]) {
  flex-basis: 22%;
}
:root :is(.basis-\[25\%\]) {
  flex-basis: 25%;
}
:root :is(.basis-\[50\%\]) {
  flex-basis: 50%;
}
:root :is(.basis-\[56\%\]) {
  flex-basis: 56%;
}
:root :is(.basis-\[75\%\]) {
  flex-basis: 75%;
}
:root :is(.basis-\[8\%\]) {
  flex-basis: 8%;
}
:root :is(.basis-\[80\%\]) {
  flex-basis: 80%;
}
:root :is(.border-collapse) {
  border-collapse: collapse;
}
:root :is(.border-separate) {
  border-collapse: separate;
}
:root :is(.-translate-x-1\/2) {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.-translate-y-1\/2) {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.-rotate-90) {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.rotate-180) {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.rotate-90) {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.scale-\[0\.67\]) {
  --tw-scale-x: 0.67;
  --tw-scale-y: 0.67;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.scale-y-\[0\.2\]) {
  --tw-scale-y: 0.2;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.transform) {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:root :is(.transform-none) {
  transform: none;
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
:root :is(.animate-pulse) {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
:root :is(.animate-spin) {
  animation: spin 1s linear infinite;
}
:root :is(.cursor-default) {
  cursor: default;
}
:root :is(.cursor-move) {
  cursor: move;
}
:root :is(.cursor-not-allowed) {
  cursor: not-allowed;
}
:root :is(.cursor-pointer) {
  cursor: pointer;
}
:root :is(.cursor-text) {
  cursor: text;
}
:root :is(.select-none) {
  -webkit-user-select: none;
  user-select: none;
}
:root :is(.select-all) {
  -webkit-user-select: all;
  user-select: all;
}
:root :is(.resize-none) {
  resize: none;
}
:root :is(.resize) {
  resize: both;
}
:root :is(.list-disc) {
  list-style-type: disc;
}
:root :is(.list-none) {
  list-style-type: none;
}
:root :is(.grid-cols-1) {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
:root :is(.grid-cols-2) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root :is(.grid-cols-3) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
:root :is(.grid-cols-4) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
:root :is(.grid-cols-5) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
:root :is(.grid-cols-7) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
:root :is(.grid-cols-\[1fr_auto_1fr_auto\]) {
  grid-template-columns: 1fr auto 1fr auto;
}
:root :is(.flex-row) {
  flex-direction: row;
}
:root :is(.flex-col) {
  flex-direction: column;
}
:root :is(.flex-col-reverse) {
  flex-direction: column-reverse;
}
:root :is(.flex-wrap) {
  flex-wrap: wrap;
}
:root :is(.items-start) {
  align-items: flex-start;
}
:root :is(.items-end) {
  align-items: flex-end;
}
:root :is(.items-center) {
  align-items: center;
}
:root :is(.items-baseline) {
  align-items: baseline;
}
:root :is(.items-stretch) {
  align-items: stretch;
}
:root :is(.justify-end) {
  justify-content: flex-end;
}
:root :is(.justify-center) {
  justify-content: center;
}
:root :is(.justify-between) {
  justify-content: space-between;
}
:root :is(.justify-around) {
  justify-content: space-around;
}
:root :is(.justify-evenly) {
  justify-content: space-evenly;
}
:root :is(.gap-0) {
  gap: 0px;
}
:root :is(.gap-0\.5) {
  gap: 0.125rem;
}
:root :is(.gap-1) {
  gap: 0.25rem;
}
:root :is(.gap-1\.5) {
  gap: 0.375rem;
}
:root :is(.gap-10) {
  gap: 2.5rem;
}
:root :is(.gap-12) {
  gap: 3rem;
}
:root :is(.gap-16) {
  gap: 4rem;
}
:root :is(.gap-2) {
  gap: 0.5rem;
}
:root :is(.gap-2\.5) {
  gap: 0.625rem;
}
:root :is(.gap-3) {
  gap: 0.75rem;
}
:root :is(.gap-4) {
  gap: 1rem;
}
:root :is(.gap-5) {
  gap: 1.25rem;
}
:root :is(.gap-6) {
  gap: 1.5rem;
}
:root :is(.gap-7) {
  gap: 1.75rem;
}
:root :is(.gap-8) {
  gap: 2rem;
}
:root :is(.gap-\[12px\]) {
  gap: 12px;
}
:root :is(.gap-\[16px\]) {
  gap: 16px;
}
:root :is(.gap-\[1px\]) {
  gap: 1px;
}
:root :is(.gap-\[20px\]) {
  gap: 20px;
}
:root :is(.gap-\[24px\]) {
  gap: 24px;
}
:root :is(.gap-\[2px\]) {
  gap: 2px;
}
:root :is(.gap-\[4px\]) {
  gap: 4px;
}
:root :is(.gap-\[6px\]) {
  gap: 6px;
}
:root :is(.gap-\[8px\]) {
  gap: 8px;
}
:root :is(.gap-x-1) {
  column-gap: 0.25rem;
}
:root :is(.gap-x-12) {
  column-gap: 3rem;
}
:root :is(.gap-x-4) {
  column-gap: 1rem;
}
:root :is(.gap-x-6) {
  column-gap: 1.5rem;
}
:root :is(.gap-x-\[1px\]) {
  column-gap: 1px;
}
:root :is(.gap-y-1) {
  row-gap: 0.25rem;
}
:root :is(.gap-y-12) {
  row-gap: 3rem;
}
:root :is(.gap-y-4) {
  row-gap: 1rem;
}
:root :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
:root :is(.space-y-5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
:root :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
:root :is(.self-start) {
  align-self: flex-start;
}
:root :is(.self-center) {
  align-self: center;
}
:root :is(.overflow-auto) {
  overflow: auto;
}
:root :is(.overflow-hidden) {
  overflow: hidden;
}
:root :is(.overflow-scroll) {
  overflow: scroll;
}
:root :is(.overflow-y-auto) {
  overflow-y: auto;
}
:root :is(.overflow-x-hidden) {
  overflow-x: hidden;
}
:root :is(.truncate) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root :is(.text-ellipsis) {
  text-overflow: ellipsis;
}
:root :is(.whitespace-nowrap) {
  white-space: nowrap;
}
:root :is(.whitespace-pre-wrap) {
  white-space: pre-wrap;
}
:root :is(.break-all) {
  word-break: break-all;
}
:root :is(.rounded) {
  border-radius: var(--vex-border-radius);
}
:root :is(.rounded-2xl) {
  border-radius: calc(var(--vex-border-radius) * 2);
}
:root :is(.rounded-\[10px\]) {
  border-radius: 10px;
}
:root :is(.rounded-\[12px\]) {
  border-radius: 12px;
}
:root :is(.rounded-\[5\.3px\]) {
  border-radius: 5.3px;
}
:root :is(.rounded-\[6px\]) {
  border-radius: 6px;
}
:root :is(.rounded-\[7px\]) {
  border-radius: 7px;
}
:root :is(.rounded-\[8px\]) {
  border-radius: 8px;
}
:root :is(.rounded-full) {
  border-radius: 9999px;
}
:root :is(.rounded-lg) {
  border-radius: calc(var(--vex-border-radius) * 1.5);
}
:root :is(.rounded-md) {
  border-radius: calc(var(--vex-border-radius) * 1.25);
}
:root :is(.rounded-none) {
  border-radius: 0px;
}
:root :is(.rounded-sm) {
  border-radius: calc(var(--vex-border-radius) * 0.5);
}
:root :is(.rounded-xl) {
  border-radius: calc(var(--vex-border-radius) * 1.75);
}
:root :is(.rounded-r-xl) {
  border-top-right-radius: calc(var(--vex-border-radius) * 1.75);
  border-bottom-right-radius: calc(var(--vex-border-radius) * 1.75);
}
:root :is(.rounded-t) {
  border-top-left-radius: var(--vex-border-radius);
  border-top-right-radius: var(--vex-border-radius);
}
:root :is(.rounded-t-\[16px\]) {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
:root :is(.rounded-t-full) {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}
:root :is(.rounded-bl) {
  border-bottom-left-radius: var(--vex-border-radius);
}
:root :is(.rounded-ee-\[6px\]) {
  border-end-end-radius: 6px;
}
:root :is(.rounded-es-\[6px\]) {
  border-end-start-radius: 6px;
}
:root :is(.rounded-se-\[6px\]) {
  border-start-end-radius: 6px;
}
:root :is(.rounded-ss-\[6px\]) {
  border-start-start-radius: 6px;
}
:root :is(.rounded-tl) {
  border-top-left-radius: var(--vex-border-radius);
}
:root :is(.rounded-tr) {
  border-top-right-radius: var(--vex-border-radius);
}
:root :is(.border) {
  border-width: 1px;
}
:root :is(.border-0) {
  border-width: 0px;
}
:root :is(.border-2) {
  border-width: 2px;
}
:root :is(.border-\[1\.5px\]) {
  border-width: 1.5px;
}
:root :is(.border-\[1px\]) {
  border-width: 1px;
}
:root :is(.border-b) {
  border-bottom-width: 1px;
}
:root :is(.border-b-0) {
  border-bottom-width: 0px;
}
:root :is(.border-b-2) {
  border-bottom-width: 2px;
}
:root :is(.border-l) {
  border-left-width: 1px;
}
:root :is(.border-l-0) {
  border-left-width: 0px;
}
:root :is(.border-l-4) {
  border-left-width: 4px;
}
:root :is(.border-r) {
  border-right-width: 1px;
}
:root :is(.border-r-0) {
  border-right-width: 0px;
}
:root :is(.border-t) {
  border-top-width: 1px;
}
:root :is(.border-t-0) {
  border-top-width: 0px;
}
:root :is(.\!border-solid) {
  border-style: solid !important;
}
:root :is(.border-solid) {
  border-style: solid;
}
:root :is(.border-dashed) {
  border-style: dashed;
}
:root :is(.border-none) {
  border-style: none;
}
:root :is(.\!border-primary-600) {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--vex-color-primary-600) / var(--tw-border-opacity)) !important;
}
:root :is(.\!border-transparent) {
  border-color: transparent !important;
}
:root :is(.border-\[\#061f2714\]) {
  border-color: #061f2714;
}
:root :is(.border-\[\#061f271f\]) {
  border-color: #061f271f;
}
:root :is(.border-\[\#061f2720\]) {
  border-color: #061f2720;
}
:root :is(.border-\[\#061f2729\]) {
  border-color: #061f2729;
}
:root :is(.border-\[\#061f2733\]) {
  border-color: #061f2733;
}
:root :is(.border-\[\#061f274d\]) {
  border-color: #061f274d;
}
:root :is(.border-\[\#3DCADC\]) {
  --tw-border-opacity: 1;
  border-color: rgb(61 202 220 / var(--tw-border-opacity));
}
:root :is(.border-\[\#ffffff1f\]) {
  border-color: #ffffff1f;
}
:root :is(.border-\[\#ffffff4d\]) {
  border-color: #ffffff4d;
}
:root :is(.border-\[var\(--vex-background-card\)\]) {
  border-color: var(--vex-background-card);
}
:root :is(.border-amber-200) {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity));
}
:root :is(.border-black) {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
:root :is(.border-blue-200) {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}
:root :is(.border-blue-300) {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
:root :is(.border-blue-500) {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
:root :is(.border-divider) {
  border-color: var(--vex-foreground-divider);
}
:root :is(.border-gray-100) {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
:root :is(.border-gray-200) {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
:root :is(.border-gray-300) {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
:root :is(.border-gray-500) {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
:root :is(.border-gray-600) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
:root :is(.border-primary-200) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--vex-color-primary-200) / var(--tw-border-opacity));
}
:root :is(.border-primary-300) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--vex-color-primary-300) / var(--tw-border-opacity));
}
:root :is(.border-primary-500) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--vex-color-primary-500) / var(--tw-border-opacity));
}
:root :is(.border-primary-600) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--vex-color-primary-600) / var(--tw-border-opacity));
}
:root :is(.border-red-200) {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
:root :is(.border-teal-400) {
  --tw-border-opacity: 1;
  border-color: rgb(45 212 191 / var(--tw-border-opacity));
}
:root :is(.border-teal-500) {
  --tw-border-opacity: 1;
  border-color: rgb(20 184 166 / var(--tw-border-opacity));
}
:root :is(.border-transparent) {
  border-color: transparent;
}
:root :is(.border-warn-500\/30) {
  border-color: rgb(var(--vex-color-warn-500) / 0.3);
}
:root :is(.border-white) {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
:root :is(.border-white\/40) {
  border-color: rgb(255 255 255 / 0.4);
}
:root :is(.border-b-\[\#061f271f\]) {
  border-bottom-color: #061f271f;
}
:root :is(.border-l-primary-600) {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--vex-color-primary-600) / var(--tw-border-opacity));
}
:root :is(.border-t-white) {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
}
:root :is(.\!bg-black) {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
}
:root :is(.\!bg-current) {
  background-color: currentColor !important;
}
:root :is(.\!bg-transparent) {
  background-color: transparent !important;
}
:root :is(.\!bg-white) {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}
:root :is(.bg-\[\#00000014\]) {
  background-color: #00000014;
}
:root :is(.bg-\[\#00000029\]) {
  background-color: #00000029;
}
:root :is(.bg-\[\#007ee5\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 126 229 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#061F27\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(6 31 39 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#061f270a\]) {
  background-color: #061f270a;
}
:root :is(.bg-\[\#061f2729\]) {
  background-color: #061f2729;
}
:root :is(.bg-\[\#061f2733\]) {
  background-color: #061f2733;
}
:root :is(.bg-\[\#061f2766\]) {
  background-color: #061f2766;
}
:root :is(.bg-\[\#061f2799\]) {
  background-color: #061f2799;
}
:root :is(.bg-\[\#061f27b3\]) {
  background-color: #061f27b3;
}
:root :is(.bg-\[\#165C76\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(22 92 118 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#1B5E68\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(27 94 104 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#26828F\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 130 143 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#27A1D1\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(39 161 209 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#286340\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(40 99 64 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#2F9E64\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(47 158 100 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#32A6B5\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(50 166 181 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#374151\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#384C52\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(56 76 82 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#384c52\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(56 76 82 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#3DCADC\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(61 202 220 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#3dcadc14\]) {
  background-color: #3dcadc14;
}
:root :is(.bg-\[\#4CB065\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(76 176 101 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#4caf50\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(76 175 80 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#4f6166\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(79 97 102 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#6A797D\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(106 121 125 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#70502D\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(112 80 45 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#8E68FF\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(142 104 255 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#B3261E\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(179 38 30 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#B7791F\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(183 121 31 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#C5EFF4\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(197 239 244 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#C62828\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(198 40 40 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#CD813D\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(205 129 61 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#EAF9FF\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(234 249 255 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#F8F8F9\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 249 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#c62828\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(198 40 40 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#c8eef3\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(200 238 243 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#e9ebec\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(233 235 236 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#eb5454\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(235 84 84 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#f0fdfe\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 254 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#f44336\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(244 67 54 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#fff\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
:root :is(.bg-\[\#ffffff99\]) {
  background-color: #ffffff99;
}
:root :is(.bg-\[\#ffffffb3\]) {
  background-color: #ffffffb3;
}
:root :is(.bg-\[061F27\]) {
  background-color: 061F27;
}
:root :is(.bg-accent-500) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-accent-500) / var(--tw-bg-opacity));
}
:root :is(.bg-amber-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}
:root :is(.bg-amber-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}
:root :is(.bg-amber-500) {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}
:root :is(.bg-app-bar) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-app-bar-rgb) / var(--tw-bg-opacity));
}
:root :is(.bg-base) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-background-rgb) / var(--tw-bg-opacity));
}
:root :is(.bg-black) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
:root :is(.bg-black\/30) {
  background-color: rgb(0 0 0 / 0.3);
}
:root :is(.bg-black\/40) {
  background-color: rgb(0 0 0 / 0.4);
}
:root :is(.bg-black\/50) {
  background-color: rgb(0 0 0 / 0.5);
}
:root :is(.bg-black\/60) {
  background-color: rgb(0 0 0 / 0.6);
}
:root :is(.bg-blue-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
:root :is(.bg-blue-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
:root :is(.bg-blue-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
:root :is(.bg-cyan-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
}
:root :is(.bg-cyan-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity));
}
:root :is(.bg-cyan-600\/10) {
  background-color: rgb(8 145 178 / 0.1);
}
:root :is(.bg-foreground) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-card-rgb) / var(--tw-bg-opacity));
}
:root :is(.bg-foreground\/20) {
  background-color: rgb(var(--vex-background-card-rgb) / 0.2);
}
:root :is(.bg-foreground\/60) {
  background-color: rgb(var(--vex-background-card-rgb) / 0.6);
}
:root :is(.bg-foreground\/80) {
  background-color: rgb(var(--vex-background-card-rgb) / 0.8);
}
:root :is(.bg-gray-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
:root :is(.bg-gray-200) {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
:root :is(.bg-gray-300) {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
:root :is(.bg-gray-400) {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}
:root :is(.bg-gray-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
:root :is(.bg-gray-500) {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
:root :is(.bg-gray-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
:root :is(.bg-gray-600\/10) {
  background-color: rgb(75 85 99 / 0.1);
}
:root :is(.bg-gray-700) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
:root :is(.bg-green-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
:root :is(.bg-green-500) {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
:root :is(.bg-green-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}
:root :is(.bg-green-600\/10) {
  background-color: rgb(22 163 74 / 0.1);
}
:root :is(.bg-hover) {
  background-color: var(--vex-background-hover);
}
:root :is(.bg-orange-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
}
:root :is(.bg-orange-400) {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}
:root :is(.bg-orange-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
}
:root :is(.bg-primary-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-100) / var(--tw-bg-opacity));
}
:root :is(.bg-primary-200) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-200) / var(--tw-bg-opacity));
}
:root :is(.bg-primary-300) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-300) / var(--tw-bg-opacity));
}
:root :is(.bg-primary-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-50) / var(--tw-bg-opacity));
}
:root :is(.bg-primary-500\/20) {
  background-color: rgb(var(--vex-color-primary-500) / 0.2);
}
:root :is(.bg-primary-500\/30) {
  background-color: rgb(var(--vex-color-primary-500) / 0.3);
}
:root :is(.bg-primary-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-600) / var(--tw-bg-opacity));
}
:root :is(.bg-primary-600\/10) {
  background-color: rgb(var(--vex-color-primary-600) / 0.1);
}
:root :is(.bg-primary-600\/50) {
  background-color: rgb(var(--vex-color-primary-600) / 0.5);
}
:root :is(.bg-primary-600\/60) {
  background-color: rgb(var(--vex-color-primary-600) / 0.6);
}
:root :is(.bg-primary-600\/70) {
  background-color: rgb(var(--vex-color-primary-600) / 0.7);
}
:root :is(.bg-purple-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
}
:root :is(.bg-purple-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}
:root :is(.bg-purple-600\/10) {
  background-color: rgb(147 51 234 / 0.1);
}
:root :is(.bg-red-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
:root :is(.bg-red-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
:root :is(.bg-red-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
:root :is(.bg-teal-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
}
:root :is(.bg-teal-400) {
  --tw-bg-opacity: 1;
  background-color: rgb(45 212 191 / var(--tw-bg-opacity));
}
:root :is(.bg-teal-500) {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
}
:root :is(.bg-teal-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
}
:root :is(.bg-teal-600\/10) {
  background-color: rgb(13 148 136 / 0.1);
}
:root :is(.bg-transparent) {
  background-color: transparent;
}
:root :is(.bg-warn-500\/10) {
  background-color: rgb(var(--vex-color-warn-500) / 0.1);
}
:root :is(.bg-white) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
:root :is(.bg-white\/80) {
  background-color: rgb(255 255 255 / 0.8);
}
:root :is(.bg-gradient-to-br) {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
:root :is(.from-primary-700) {
  --tw-gradient-from: rgb(var(--vex-color-primary-700) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--vex-color-primary-700) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:root :is(.to-primary-900) {
  --tw-gradient-to: rgb(var(--vex-color-primary-900) / 1) var(--tw-gradient-to-position);
}
:root :is(.fill-current) {
  fill: currentColor;
}
:root :is(.object-cover) {
  object-fit: cover;
}
:root :is(.\!p-0) {
  padding: 0px !important;
}
:root :is(.\!p-6) {
  padding: 1.5rem !important;
}
:root :is(.p-0) {
  padding: 0px;
}
:root :is(.p-0\.5) {
  padding: 0.125rem;
}
:root :is(.p-1) {
  padding: 0.25rem;
}
:root :is(.p-1\.5) {
  padding: 0.375rem;
}
:root :is(.p-10) {
  padding: 2.5rem;
}
:root :is(.p-12) {
  padding: 3rem;
}
:root :is(.p-2) {
  padding: 0.5rem;
}
:root :is(.p-2\.5) {
  padding: 0.625rem;
}
:root :is(.p-3) {
  padding: 0.75rem;
}
:root :is(.p-4) {
  padding: 1rem;
}
:root :is(.p-5) {
  padding: 1.25rem;
}
:root :is(.p-6) {
  padding: 1.5rem;
}
:root :is(.p-8) {
  padding: 2rem;
}
:root :is(.p-9) {
  padding: 2.25rem;
}
:root :is(.\!px-2) {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
:root :is(.\!px-3) {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
:root :is(.\!py-0) {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
:root :is(.\!py-1) {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
:root :is(.px-0) {
  padding-left: 0px;
  padding-right: 0px;
}
:root :is(.px-1) {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
:root :is(.px-1\.5) {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
:root :is(.px-10) {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
:root :is(.px-12) {
  padding-left: 3rem;
  padding-right: 3rem;
}
:root :is(.px-2) {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
:root :is(.px-2\.5) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
:root :is(.px-3) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
:root :is(.px-3\.5) {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
:root :is(.px-4) {
  padding-left: 1rem;
  padding-right: 1rem;
}
:root :is(.px-5) {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
:root :is(.px-6) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
:root :is(.px-8) {
  padding-left: 2rem;
  padding-right: 2rem;
}
:root :is(.px-\[10px\]) {
  padding-left: 10px;
  padding-right: 10px;
}
:root :is(.px-\[24px\]) {
  padding-left: 24px;
  padding-right: 24px;
}
:root :is(.px-\[8px\]) {
  padding-left: 8px;
  padding-right: 8px;
}
:root :is(.py-0) {
  padding-top: 0px;
  padding-bottom: 0px;
}
:root :is(.py-0\.5) {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
:root :is(.py-1) {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
:root :is(.py-1\.5) {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
:root :is(.py-10) {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
:root :is(.py-12) {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
:root :is(.py-16) {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
:root :is(.py-2) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
:root :is(.py-2\.5) {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
:root :is(.py-20) {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
:root :is(.py-24) {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
:root :is(.py-3) {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
:root :is(.py-3\.5) {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
:root :is(.py-4) {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
:root :is(.py-5) {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
:root :is(.py-6) {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
:root :is(.py-8) {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
:root :is(.py-9) {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
:root :is(.py-\[11px\]) {
  padding-top: 11px;
  padding-bottom: 11px;
}
:root :is(.py-\[12px\]) {
  padding-top: 12px;
  padding-bottom: 12px;
}
:root :is(.py-\[24px\]) {
  padding-top: 24px;
  padding-bottom: 24px;
}
:root :is(.py-\[2px\]) {
  padding-top: 2px;
  padding-bottom: 2px;
}
:root :is(.py-\[4px\]) {
  padding-top: 4px;
  padding-bottom: 4px;
}
:root :is(.py-\[6px\]) {
  padding-top: 6px;
  padding-bottom: 6px;
}
:root :is(.py-\[8px\]) {
  padding-top: 8px;
  padding-bottom: 8px;
}
:root :is(.py-\[9px\]) {
  padding-top: 9px;
  padding-bottom: 9px;
}
:root :is(.py-px) {
  padding-top: 1px;
  padding-bottom: 1px;
}
:root :is(.\!pt-0) {
  padding-top: 0px !important;
}
:root :is(.pb-0) {
  padding-bottom: 0px;
}
:root :is(.pb-1) {
  padding-bottom: 0.25rem;
}
:root :is(.pb-12) {
  padding-bottom: 3rem;
}
:root :is(.pb-2) {
  padding-bottom: 0.5rem;
}
:root :is(.pb-3) {
  padding-bottom: 0.75rem;
}
:root :is(.pb-4) {
  padding-bottom: 1rem;
}
:root :is(.pb-5) {
  padding-bottom: 1.25rem;
}
:root :is(.pb-6) {
  padding-bottom: 1.5rem;
}
:root :is(.pb-8) {
  padding-bottom: 2rem;
}
:root :is(.pb-9) {
  padding-bottom: 2.25rem;
}
:root :is(.pb-\[24px\]) {
  padding-bottom: 24px;
}
:root :is(.pb-\[4px\]) {
  padding-bottom: 4px;
}
:root :is(.pb-\[60px\]) {
  padding-bottom: 60px;
}
:root :is(.pb-\[8px\]) {
  padding-bottom: 8px;
}
:root :is(.pl-10) {
  padding-left: 2.5rem;
}
:root :is(.pl-12) {
  padding-left: 3rem;
}
:root :is(.pl-3) {
  padding-left: 0.75rem;
}
:root :is(.pl-4) {
  padding-left: 1rem;
}
:root :is(.pl-\[24px\]) {
  padding-left: 24px;
}
:root :is(.pr-1) {
  padding-right: 0.25rem;
}
:root :is(.pr-14) {
  padding-right: 3.5rem;
}
:root :is(.pr-2) {
  padding-right: 0.5rem;
}
:root :is(.pr-4) {
  padding-right: 1rem;
}
:root :is(.pr-6) {
  padding-right: 1.5rem;
}
:root :is(.pr-\[20px\]) {
  padding-right: 20px;
}
:root :is(.pt-0) {
  padding-top: 0px;
}
:root :is(.pt-0\.5) {
  padding-top: 0.125rem;
}
:root :is(.pt-1) {
  padding-top: 0.25rem;
}
:root :is(.pt-12) {
  padding-top: 3rem;
}
:root :is(.pt-2) {
  padding-top: 0.5rem;
}
:root :is(.pt-3) {
  padding-top: 0.75rem;
}
:root :is(.pt-4) {
  padding-top: 1rem;
}
:root :is(.pt-5) {
  padding-top: 1.25rem;
}
:root :is(.pt-6) {
  padding-top: 1.5rem;
}
:root :is(.pt-8) {
  padding-top: 2rem;
}
:root :is(.pt-\[26px\]) {
  padding-top: 26px;
}
:root :is(.pt-\[3px\]) {
  padding-top: 3px;
}
:root :is(.pt-\[6px\]) {
  padding-top: 6px;
}
:root :is(.pt-\[8px\]) {
  padding-top: 8px;
}
:root :is(.text-left) {
  text-align: left;
}
:root :is(.text-center) {
  text-align: center;
}
:root :is(.text-right) {
  text-align: right;
}
:root :is(.align-top) {
  vertical-align: top;
}
:root :is(.align-middle) {
  vertical-align: middle;
}
:root :is(.font-mono) {
  font-family:
    Menlo,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}
:root :is(.font-serif) {
  font-family:
    Georgia,
    ui-serif,
    Georgia,
    Cambria,
    "Times New Roman",
    Times,
    serif;
}
:root :is(.\!text-\[20px\]) {
  font-size: 20px !important;
}
:root :is(.\!text-sm) {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
:root :is(.\!text-xs) {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
:root :is(.text-2xl) {
  font-size: 1.5rem;
  line-height: 2rem;
}
:root :is(.text-3xl) {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
:root :is(.text-4xl) {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
:root :is(.text-5xl) {
  font-size: 3rem;
  line-height: 1;
}
:root :is(.text-\[10px\]) {
  font-size: 10px;
}
:root :is(.text-\[11px\]) {
  font-size: 11px;
}
:root :is(.text-\[12px\]) {
  font-size: 12px;
}
:root :is(.text-\[13px\]) {
  font-size: 13px;
}
:root :is(.text-\[14px\]) {
  font-size: 14px;
}
:root :is(.text-\[15px\]) {
  font-size: 15px;
}
:root :is(.text-\[16px\]) {
  font-size: 16px;
}
:root :is(.text-\[18px\]) {
  font-size: 18px;
}
:root :is(.text-\[20px\]) {
  font-size: 20px;
}
:root :is(.text-\[22px\]) {
  font-size: 22px;
}
:root :is(.text-\[24px\]) {
  font-size: 24px;
}
:root :is(.text-\[28px\]) {
  font-size: 28px;
}
:root :is(.text-\[32px\]) {
  font-size: 32px;
}
:root :is(.text-\[40vh\]) {
  font-size: 40vh;
}
:root :is(.text-\[8\.5px\]) {
  font-size: 8.5px;
}
:root :is(.text-\[8px\]) {
  font-size: 8px;
}
:root :is(.text-\[9\.3px\]) {
  font-size: 9.3px;
}
:root :is(.text-\[9px\]) {
  font-size: 9px;
}
:root :is(.text-base) {
  font-size: 1rem;
  line-height: 1.5rem;
}
:root :is(.text-lg) {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
:root :is(.text-sm) {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
:root :is(.text-xl) {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
:root :is(.text-xs) {
  font-size: 0.75rem;
  line-height: 1rem;
}
:root :is(.font-bold) {
  font-weight: 700;
}
:root :is(.font-light) {
  font-weight: 300;
}
:root :is(.font-medium) {
  font-weight: 500;
}
:root :is(.font-normal) {
  font-weight: 400;
}
:root :is(.font-semibold) {
  font-weight: 600;
}
:root :is(.uppercase) {
  text-transform: uppercase;
}
:root :is(.lowercase) {
  text-transform: lowercase;
}
:root :is(.capitalize) {
  text-transform: capitalize;
}
:root :is(.italic) {
  font-style: italic;
}
:root :is(.not-italic) {
  font-style: normal;
}
:root :is(.ordinal) {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
:root :is(.tabular-nums) {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
:root :is(.leading-\[1\.65\]) {
  line-height: 1.65;
}
:root :is(.leading-\[150\%\]) {
  line-height: 150%;
}
:root :is(.leading-none) {
  line-height: 1;
}
:root :is(.leading-normal) {
  line-height: 1.5;
}
:root :is(.leading-relaxed) {
  line-height: 1.625;
}
:root :is(.leading-snug) {
  line-height: 1.375;
}
:root :is(.leading-tight) {
  line-height: 1.25;
}
:root :is(.tracking-\[0\.2em\]) {
  letter-spacing: 0.2em;
}
:root :is(.tracking-\[2px\]) {
  letter-spacing: 2px;
}
:root :is(.tracking-wide) {
  letter-spacing: 0.025em;
}
:root :is(.tracking-wider) {
  letter-spacing: 0.05em;
}
:root :is(.tracking-widest) {
  letter-spacing: 0.1em;
}
:root :is(.\!text-primary-600) {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--vex-color-primary-600) / var(--tw-text-opacity)) !important;
}
:root :is(.\!text-white) {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
:root :is(.text-\[\#061F2766\]) {
  color: #061F2766;
}
:root :is(.text-\[\#061F2799\]) {
  color: #061F2799;
}
:root :is(.text-\[\#061F27\]) {
  --tw-text-opacity: 1;
  color: rgb(6 31 39 / var(--tw-text-opacity));
}
:root :is(.text-\[\#061f2799\]) {
  color: #061f2799;
}
:root :is(.text-\[\#061f27\]) {
  --tw-text-opacity: 1;
  color: rgb(6 31 39 / var(--tw-text-opacity));
}
:root :is(.text-\[\#061f27b3\]) {
  color: #061f27b3;
}
:root :is(.text-\[\#26828F\]) {
  --tw-text-opacity: 1;
  color: rgb(38 130 143 / var(--tw-text-opacity));
}
:root :is(.text-\[\#384C52\]) {
  --tw-text-opacity: 1;
  color: rgb(56 76 82 / var(--tw-text-opacity));
}
:root :is(.text-\[\#4CB065\]) {
  --tw-text-opacity: 1;
  color: rgb(76 176 101 / var(--tw-text-opacity));
}
:root :is(.text-\[\#4f6166\]) {
  --tw-text-opacity: 1;
  color: rgb(79 97 102 / var(--tw-text-opacity));
}
:root :is(.text-\[\#707070\]) {
  --tw-text-opacity: 1;
  color: rgb(112 112 112 / var(--tw-text-opacity));
}
:root :is(.text-\[\#B3261E\]) {
  --tw-text-opacity: 1;
  color: rgb(179 38 30 / var(--tw-text-opacity));
}
:root :is(.text-\[\#C62828\]) {
  --tw-text-opacity: 1;
  color: rgb(198 40 40 / var(--tw-text-opacity));
}
:root :is(.text-\[\#ffffff66\]) {
  color: #ffffff66;
}
:root :is(.text-\[\#ffffffb3\]) {
  color: #ffffffb3;
}
:root :is(.text-accent-500) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-accent-500) / var(--tw-text-opacity));
}
:root :is(.text-amber-500) {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
:root :is(.text-amber-600) {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}
:root :is(.text-amber-700) {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}
:root :is(.text-amber-800) {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
}
:root :is(.text-black) {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
:root :is(.text-blue-500) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}
:root :is(.text-blue-600) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
:root :is(.text-blue-800) {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}
:root :is(.text-current) {
  color: currentColor;
}
:root :is(.text-cyan-600) {
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity));
}
:root :is(.text-cyan-800) {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity));
}
:root :is(.text-default) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-text-rgb) / var(--tw-text-opacity));
}
:root :is(.text-gray-300) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}
:root :is(.text-gray-400) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
:root :is(.text-gray-500) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}
:root :is(.text-gray-600) {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
:root :is(.text-gray-700) {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}
:root :is(.text-gray-800) {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}
:root :is(.text-gray-900) {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}
:root :is(.text-green-500) {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
:root :is(.text-green-600) {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}
:root :is(.text-green-700) {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}
:root :is(.text-green-800) {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}
:root :is(.text-hint) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-hint-text-rgb) / var(--tw-text-opacity));
}
:root :is(.text-on-primary-600) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-on-primary-600) / var(--tw-text-opacity));
}
:root :is(.text-orange-500) {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity));
}
:root :is(.text-orange-600) {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity));
}
:root :is(.text-orange-700) {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity));
}
:root :is(.text-orange-800) {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity));
}
:root :is(.text-primary-500) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-500) / var(--tw-text-opacity));
}
:root :is(.text-primary-600) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-600) / var(--tw-text-opacity));
}
:root :is(.text-primary-700) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-700) / var(--tw-text-opacity));
}
:root :is(.text-purple-600) {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity));
}
:root :is(.text-red-500) {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
:root :is(.text-red-600) {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}
:root :is(.text-red-700) {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}
:root :is(.text-red-800) {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}
:root :is(.text-secondary) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-secondary-text-rgb) / var(--tw-text-opacity));
}
:root :is(.text-teal-400) {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity));
}
:root :is(.text-teal-500) {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity));
}
:root :is(.text-teal-600) {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity));
}
:root :is(.text-transparent) {
  color: transparent;
}
:root :is(.text-warn-500) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-warn-500) / var(--tw-text-opacity));
}
:root :is(.text-white) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
:root :is(.text-yellow-600) {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity));
}
:root :is(.underline) {
  text-decoration-line: underline;
}
:root :is(.no-underline) {
  text-decoration-line: none;
}
:root :is(.underline-offset-2) {
  text-underline-offset: 2px;
}
:root :is(.accent-\[var\(--color-primary\)\]) {
  accent-color: var(--color-primary);
}
:root :is(.opacity-0) {
  opacity: 0;
}
:root :is(.opacity-100) {
  opacity: 1;
}
:root :is(.opacity-20) {
  opacity: 0.2;
}
:root :is(.opacity-25) {
  opacity: 0.25;
}
:root :is(.opacity-30) {
  opacity: 0.3;
}
:root :is(.opacity-40) {
  opacity: 0.4;
}
:root :is(.opacity-50) {
  opacity: 0.5;
}
:root :is(.opacity-60) {
  opacity: 0.6;
}
:root :is(.opacity-70) {
  opacity: 0.7;
}
:root :is(.opacity-80) {
  opacity: 0.8;
}
:root :is(.\!shadow-none) {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow) !important;
}
:root :is(.shadow) {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.shadow-\[inset_0_0_1px_1p_\#0000000f\]) {
  --tw-shadow: inset 0 0 1px 1p #0000000f;
  --tw-shadow-colored: inset 0 0 1px 1p var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.shadow-\[inset_0_1px_1px_0_\#171a1c0a\]) {
  --tw-shadow: inset 0 1px 1px 0 #171a1c0a;
  --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.shadow-b) {
  --tw-shadow: 0 10px 30px 0 rgba(82,63,104,.06);
  --tw-shadow-colored: 0 10px 30px 0 var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.shadow-lg) {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.shadow-md) {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.shadow-sm) {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.shadow-xl) {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.outline-none) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
:root :is(.outline) {
  outline-style: solid;
}
:root :is(.ring) {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow),
    var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}
:root :is(.ring-2) {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow),
    var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}
:root :is(.ring-red-500) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
}
:root :is(.blur) {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:root :is(.drop-shadow-md) {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:root :is(.filter) {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:root :is(.backdrop-blur-sm) {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
:root :is(.transition) {
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:root :is(.transition-all) {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:root :is(.transition-colors) {
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:root :is(.transition-opacity) {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:root :is(.transition-shadow) {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:root :is(.duration-200) {
  transition-duration: 200ms;
}
:root :is(.duration-300) {
  transition-duration: 300ms;
}
:root :is(.duration-400) {
  transition-duration: 400ms;
}
:root :is(.ease-in) {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
:root :is(.ease-in-out) {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
:root :is(.ease-out) {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
:root :is(.ease-out-swift) {
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}
:root :is(.icon-xs),
:root :is(.icon-xs svg) {
  font-size: 1rem;
  height: 1rem;
  width: 1rem;
  line-height: 1rem;
}
:root :is(.icon-sm),
:root :is(.icon-sm svg) {
  font-size: 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
  line-height: 1.25rem;
}
:root :is(.icon-base),
:root :is(.icon-base svg) {
  font-size: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  line-height: 1.5rem;
}
:root :is(.icon-lg),
:root :is(.icon-lg svg) {
  font-size: 1.75rem;
  height: 1.75rem;
  width: 1.75rem;
  line-height: 1.75rem;
}
:root :is(.icon-xl),
:root :is(.icon-xl svg) {
  font-size: 2rem;
  height: 2rem;
  width: 2rem;
  line-height: 2rem;
}
:root :is(.icon-2xl),
:root :is(.icon-2xl svg) {
  font-size: 2.25rem;
  height: 2.25rem;
  width: 2.25rem;
  line-height: 2.25rem;
}
:root :is(.icon-3xl),
:root :is(.icon-3xl svg) {
  font-size: 2.5rem;
  height: 2.5rem;
  width: 2.5rem;
  line-height: 2.5rem;
}
:root :is(.icon-4xl),
:root :is(.icon-4xl svg) {
  font-size: 2.75rem;
  height: 2.75rem;
  width: 2.75rem;
  line-height: 2.75rem;
}
:root :is(.icon-5xl),
:root :is(.icon-5xl svg) {
  font-size: 3rem;
  height: 3rem;
  width: 3rem;
  line-height: 3rem;
}
:root :is(.placeholder\:text-\[var\(--color-body-extra-light\)\])::placeholder {
  color: var(--color-body-extra-light);
}
:root :is(.placeholder\:text-hint)::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-hint-text-rgb) / var(--tw-text-opacity));
}
:root :is(.placeholder\:text-secondary)::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-secondary-text-rgb) / var(--tw-text-opacity));
}
:root :is(.last\:mb-0:last-child) {
  margin-bottom: 0px;
}
:root :is(.last\:border-0:last-child) {
  border-width: 0px;
}
:root :is(.last\:border-b-0:last-child) {
  border-bottom-width: 0px;
}
:root :is(.hover\:cursor-pointer:hover) {
  cursor: pointer;
}
:root :is(.hover\:border-\[\#061f2733\]:hover) {
  border-color: #061f2733;
}
:root :is(.hover\:border-\[\#061f2740\]:hover) {
  border-color: #061f2740;
}
:root :is(.hover\:border-\[\#3DCADC\]:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(61 202 220 / var(--tw-border-opacity));
}
:root :is(.hover\:border-\[\#b0b7bb\]:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(176 183 187 / var(--tw-border-opacity));
}
:root :is(.hover\:border-\[var\(--color-primary\)\]:hover) {
  border-color: var(--color-primary);
}
:root :is(.hover\:border-gray-200:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
:root :is(.hover\:border-gray-700:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
:root :is(.hover\:border-primary-100:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--vex-color-primary-100) / var(--tw-border-opacity));
}
:root :is(.hover\:bg-\[\#061f270a\]:hover) {
  background-color: #061f270a;
}
:root :is(.hover\:bg-\[\#64d5e3\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(100 213 227 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#cef1f9\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(206 241 249 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#d9ebed\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(217 235 237 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#daece0\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(218 236 224 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#e9ebec\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(233 235 236 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#eee2e2\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(238 226 226 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#f0e9e0\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(240 233 224 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#f0f2f2\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(240 242 242 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[\#f0fdfe\]:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 254 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-\[var\(--color-bg-section\)\]:hover) {
  background-color: var(--color-bg-section);
}
:root :is(.hover\:bg-\[var\(--color-primary-8\)\]:hover) {
  background-color: var(--color-primary-8);
}
:root :is(.hover\:bg-app-bar:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-app-bar-rgb) / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-base:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-background-rgb) / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-black:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-black\/\[0\.02\]:hover) {
  background-color: rgb(0 0 0 / 0.02);
}
:root :is(.hover\:bg-blue-700:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-cyan-600\/10:hover) {
  background-color: rgb(8 145 178 / 0.1);
}
:root :is(.hover\:bg-gray-200:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-gray-50:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-green-600\/10:hover) {
  background-color: rgb(22 163 74 / 0.1);
}
:root :is(.hover\:bg-hover:hover) {
  background-color: var(--vex-background-hover);
}
:root :is(.hover\:bg-primary-100:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-100) / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-primary-50:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-50) / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-primary-600:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-600) / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-primary-600\/10:hover) {
  background-color: rgb(var(--vex-color-primary-600) / 0.1);
}
:root :is(.hover\:bg-primary-600\/30:hover) {
  background-color: rgb(var(--vex-color-primary-600) / 0.3);
}
:root :is(.hover\:bg-red-700:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}
:root :is(.hover\:bg-teal-100:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
}
:root :is(.hover\:text-\[\#061F27\]:hover) {
  --tw-text-opacity: 1;
  color: rgb(6 31 39 / var(--tw-text-opacity));
}
:root :is(.hover\:text-\[\#061f27\]:hover) {
  --tw-text-opacity: 1;
  color: rgb(6 31 39 / var(--tw-text-opacity));
}
:root :is(.hover\:text-\[\#16a085\]:hover) {
  --tw-text-opacity: 1;
  color: rgb(22 160 133 / var(--tw-text-opacity));
}
:root :is(.hover\:text-\[\#3DCADC\]:hover) {
  --tw-text-opacity: 1;
  color: rgb(61 202 220 / var(--tw-text-opacity));
}
:root :is(.hover\:text-\[var\(--color-link\)\]:hover) {
  color: var(--color-link);
}
:root :is(.hover\:text-default:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-foreground-text-rgb) / var(--tw-text-opacity));
}
:root :is(.hover\:text-gray-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}
:root :is(.hover\:text-gray-700:hover) {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}
:root :is(.hover\:text-on-primary-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-on-primary-600) / var(--tw-text-opacity));
}
:root :is(.hover\:text-primary-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-600) / var(--tw-text-opacity));
}
:root :is(.hover\:text-primary-700:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-700) / var(--tw-text-opacity));
}
:root :is(.hover\:text-primary-800:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-800) / var(--tw-text-opacity));
}
:root :is(.hover\:text-warn-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-warn-600) / var(--tw-text-opacity));
}
:root :is(.hover\:text-warn-700:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-warn-700) / var(--tw-text-opacity));
}
:root :is(.hover\:underline:hover) {
  text-decoration-line: underline;
}
:root :is(.hover\:opacity-100:hover) {
  opacity: 1;
}
:root :is(.hover\:opacity-75:hover) {
  opacity: 0.75;
}
:root :is(.hover\:opacity-90:hover) {
  opacity: 0.9;
}
:root :is(.hover\:shadow-lg:hover) {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.hover\:shadow-md:hover) {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
:root :is(.hover\:brightness-75:hover) {
  --tw-brightness: brightness(.75);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:root :is(.focus\:border-\[\#3DCADC\]:focus) {
  --tw-border-opacity: 1;
  border-color: rgb(61 202 220 / var(--tw-border-opacity));
}
:root :is(.focus\:border-\[var\(--color-primary\)\]:focus) {
  border-color: var(--color-primary);
}
:root :is(.focus\:border-blue-500:focus) {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
:root :is(.focus\:border-primary-600:focus) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--vex-color-primary-600) / var(--tw-border-opacity));
}
:root :is(.focus\:border-teal-500:focus) {
  --tw-border-opacity: 1;
  border-color: rgb(20 184 166 / var(--tw-border-opacity));
}
:root :is(.focus\:outline-none:focus) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
:root :is(.focus\:ring-blue-500:focus) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
:root :is(.disabled\:cursor-default:disabled) {
  cursor: default;
}
:root :is(.disabled\:cursor-not-allowed:disabled) {
  cursor: not-allowed;
}
:root :is(.disabled\:opacity-40:disabled) {
  opacity: 0.4;
}
:root :is(.disabled\:opacity-50:disabled) {
  opacity: 0.5;
}
:root :is(.group:hover .group-hover\:bg-\[\#000\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
:root :is(.group:hover .group-hover\:bg-app-bar) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-background-app-bar-rgb) / var(--tw-bg-opacity));
}
:root :is(.group:hover .group-hover\:text-\[var\(--color-link\)\]) {
  color: var(--color-link);
}
:root :is(.group:hover .group-hover\:opacity-100) {
  opacity: 1;
}
:root :is(.group:hover .group-hover\:opacity-50) {
  opacity: 0.5;
}
:root :is(.group:hover .group-hover\:opacity-60) {
  opacity: 0.6;
}
:root :is([dir=ltr] .ltr\:left-4) {
  left: 1rem;
}
:root :is([dir=ltr] .ltr\:right-12) {
  right: 3rem;
}
:root :is([dir=ltr] .ltr\:-ml-1) {
  margin-left: -0.25rem;
}
:root :is([dir=ltr] .ltr\:-mr-2) {
  margin-right: -0.5rem;
}
:root :is([dir=ltr] .ltr\:ml-1) {
  margin-left: 0.25rem;
}
:root :is([dir=ltr] .ltr\:ml-10) {
  margin-left: 2.5rem;
}
:root :is([dir=ltr] .ltr\:ml-2) {
  margin-left: 0.5rem;
}
:root :is([dir=ltr] .ltr\:ml-4) {
  margin-left: 1rem;
}
:root :is([dir=ltr] .ltr\:mr-1) {
  margin-right: 0.25rem;
}
:root :is([dir=ltr] .ltr\:mr-10) {
  margin-right: 2.5rem;
}
:root :is([dir=ltr] .ltr\:mr-2) {
  margin-right: 0.5rem;
}
:root :is([dir=ltr] .ltr\:mr-3) {
  margin-right: 0.75rem;
}
:root :is([dir=ltr] .ltr\:mr-4) {
  margin-right: 1rem;
}
:root :is([dir=ltr] .ltr\:mr-5) {
  margin-right: 1.25rem;
}
:root :is([dir=ltr] .ltr\:mr-6) {
  margin-right: 1.5rem;
}
:root :is([dir=ltr] .ltr\:rounded-r-full) {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
:root :is([dir=ltr] .ltr\:rounded-bl) {
  border-bottom-left-radius: var(--vex-border-radius);
}
:root :is([dir=ltr] .ltr\:rounded-br) {
  border-bottom-right-radius: var(--vex-border-radius);
}
:root :is([dir=ltr] .ltr\:border-r) {
  border-right-width: 1px;
}
:root :is([dir=ltr] .ltr\:pl-2) {
  padding-left: 0.5rem;
}
:root :is([dir=ltr] .ltr\:pl-4) {
  padding-left: 1rem;
}
:root :is([dir=ltr] .ltr\:pl-5) {
  padding-left: 1.25rem;
}
:root :is([dir=ltr] .ltr\:pl-7) {
  padding-left: 1.75rem;
}
:root :is([dir=ltr] .ltr\:pr-3) {
  padding-right: 0.75rem;
}
:root :is([dir=ltr] .ltr\:pr-4) {
  padding-right: 1rem;
}
:root :is([dir=rtl] .rtl\:left-12) {
  left: 3rem;
}
:root :is([dir=rtl] .rtl\:right-4) {
  right: 1rem;
}
:root :is([dir=rtl] .rtl\:-ml-2) {
  margin-left: -0.5rem;
}
:root :is([dir=rtl] .rtl\:-mr-1) {
  margin-right: -0.25rem;
}
:root :is([dir=rtl] .rtl\:ml-1) {
  margin-left: 0.25rem;
}
:root :is([dir=rtl] .rtl\:ml-2) {
  margin-left: 0.5rem;
}
:root :is([dir=rtl] .rtl\:ml-3) {
  margin-left: 0.75rem;
}
:root :is([dir=rtl] .rtl\:ml-4) {
  margin-left: 1rem;
}
:root :is([dir=rtl] .rtl\:ml-5) {
  margin-left: 1.25rem;
}
:root :is([dir=rtl] .rtl\:ml-6) {
  margin-left: 1.5rem;
}
:root :is([dir=rtl] .rtl\:mr-1) {
  margin-right: 0.25rem;
}
:root :is([dir=rtl] .rtl\:mr-10) {
  margin-right: 2.5rem;
}
:root :is([dir=rtl] .rtl\:mr-2) {
  margin-right: 0.5rem;
}
:root :is([dir=rtl] .rtl\:mr-4) {
  margin-right: 1rem;
}
:root :is([dir=rtl] .rtl\:rounded-l-full) {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
:root :is([dir=rtl] .rtl\:rounded-bl) {
  border-bottom-left-radius: var(--vex-border-radius);
}
:root :is([dir=rtl] .rtl\:rounded-br) {
  border-bottom-right-radius: var(--vex-border-radius);
}
:root :is([dir=rtl] .rtl\:border-l) {
  border-left-width: 1px;
}
:root :is([dir=rtl] .rtl\:pl-3) {
  padding-left: 0.75rem;
}
:root :is([dir=rtl] .rtl\:pl-4) {
  padding-left: 1rem;
}
:root :is([dir=rtl] .rtl\:pr-4) {
  padding-right: 1rem;
}
:root :is([dir=rtl] .rtl\:pr-5) {
  padding-right: 1.25rem;
}
:root :is([dir=rtl] .rtl\:pr-6) {
  padding-right: 1.5rem;
}
:root :is(.dark .dark\:border-blue-700) {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity));
}
:root :is(.dark .dark\:border-gray-700) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
:root :is(.dark .dark\:bg-black) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
:root :is(.dark .dark\:bg-blue-900\/30) {
  background-color: rgb(30 58 138 / 0.3);
}
:root :is(.dark .dark\:bg-gray-900) {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
:root :is(.dark .dark\:bg-primary-500\/20) {
  background-color: rgb(var(--vex-color-primary-500) / 0.2);
}
:root :is(.dark .dark\:text-blue-200) {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity));
}
:root :is(.dark .dark\:text-primary-500) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-primary-500) / var(--tw-text-opacity));
}
:root :is(.dark .dark\:hover\:bg-gray-700:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
:root :is(.dark .dark\:hover\:bg-primary-600:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--vex-color-primary-600) / var(--tw-bg-opacity));
}
:root :is(.dark .dark\:hover\:bg-transparent:hover) {
  background-color: transparent;
}
:root :is(.dark .dark\:hover\:text-on-primary-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(var(--vex-color-on-primary-600) / var(--tw-text-opacity));
}
@media (min-width: 600px) {
  :root :is(.sm\:ml-auto) {
    margin-left: auto;
  }
  :root :is(.sm\:mr-6) {
    margin-right: 1.5rem;
  }
  :root :is(.sm\:block) {
    display: block;
  }
  :root :is(.sm\:inline-block) {
    display: inline-block;
  }
  :root :is(.sm\:flex) {
    display: flex;
  }
  :root :is(.sm\:hidden) {
    display: none;
  }
  :root :is(.sm\:w-\[150px\]) {
    width: 150px;
  }
  :root :is(.sm\:min-w-0) {
    min-width: 0px;
  }
  :root :is(.sm\:flex-1) {
    flex: 1 1 0%;
  }
  :root :is(.sm\:shrink-0) {
    flex-shrink: 0;
  }
  :root :is(.sm\:grid-cols-2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root :is(.sm\:grid-cols-3) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root :is(.sm\:grid-cols-4) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root :is(.sm\:flex-row) {
    flex-direction: row;
  }
  :root :is(.sm\:items-start) {
    align-items: flex-start;
  }
  :root :is(.sm\:items-center) {
    align-items: center;
  }
  :root :is(.sm\:justify-between) {
    justify-content: space-between;
  }
  :root :is(.sm\:gap-6) {
    gap: 1.5rem;
  }
  :root :is([dir=ltr] .sm\:ltr\:ml-4) {
    margin-left: 1rem;
  }
  :root :is([dir=ltr] .sm\:ltr\:ml-6) {
    margin-left: 1.5rem;
  }
  :root :is([dir=rtl] .sm\:rtl\:mr-4) {
    margin-right: 1rem;
  }
  :root :is([dir=rtl] .sm\:rtl\:mr-6) {
    margin-right: 1.5rem;
  }
}
@media (min-width: 960px) {
  :root :is(.md\:mt-0) {
    margin-top: 0px;
  }
  :root :is(.md\:w-1\/2) {
    width: 50%;
  }
  :root :is(.md\:max-w-xs) {
    max-width: 20rem;
  }
  :root :is(.md\:grid-cols-2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root :is(.md\:grid-cols-3) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root :is(.md\:grid-cols-4) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root :is(.md\:flex-row) {
    flex-direction: row;
  }
  :root :is(.md\:items-start) {
    align-items: flex-start;
  }
  :root :is([dir=ltr] .md\:ltr\:ml-6) {
    margin-left: 1.5rem;
  }
  :root :is([dir=rtl] .md\:rtl\:mr-6) {
    margin-right: 1.5rem;
  }
}
@media (min-width: 1280px) {
  :root :is(.lg\:block) {
    display: block;
  }
  :root :is(.lg\:inline-block) {
    display: inline-block;
  }
  :root :is(.lg\:hidden) {
    display: none;
  }
  :root :is(.lg\:w-\[192px\]) {
    width: 192px;
  }
  :root :is(.lg\:w-\[500px\]) {
    width: 500px;
  }
  :root :is(.lg\:basis-\[30\%\]) {
    flex-basis: 30%;
  }
  :root :is(.lg\:basis-\[70\%\]) {
    flex-basis: 70%;
  }
  :root :is(.lg\:grid-cols-2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root :is(.lg\:grid-cols-3) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root :is(.lg\:grid-cols-4) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root :is(.lg\:flex-row) {
    flex-direction: row;
  }
  :root :is(.lg\:px-6) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* node_modules/leaflet/dist/leaflet.css */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}
.leaflet-container {
  overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.leaflet-tile::selection {
  background: transparent;
}
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}
.leaflet-safari .leaflet-tile-container {
  width: 1600px;
  height: 1600px;
  -webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
  display: block;
}
.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  width: auto;
  padding: 0;
}
.leaflet-container img.leaflet-tile {
  mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  touch-action: none;
  touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}
.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
  -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}
.leaflet-tile-loaded {
  visibility: inherit;
}
.leaflet-zoom-box {
  width: 0;
  height: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
}
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}
.leaflet-pane {
  z-index: 400;
}
.leaflet-tile-pane {
  z-index: 200;
}
.leaflet-overlay-pane {
  z-index: 400;
}
.leaflet-shadow-pane {
  z-index: 500;
}
.leaflet-marker-pane {
  z-index: 600;
}
.leaflet-tooltip-pane {
  z-index: 650;
}
.leaflet-popup-pane {
  z-index: 700;
}
.leaflet-map-pane canvas {
  z-index: 100;
}
.leaflet-map-pane svg {
  z-index: 200;
}
.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}
.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}
.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: visiblePainted;
  pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
.leaflet-top {
  top: 0;
}
.leaflet-right {
  right: 0;
}
.leaflet-bottom {
  bottom: 0;
}
.leaflet-left {
  left: 0;
}
.leaflet-control {
  float: left;
  clear: both;
}
.leaflet-right .leaflet-control {
  float: right;
}
.leaflet-top .leaflet-control {
  margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
  margin-left: 10px;
}
.leaflet-right .leaflet-control {
  margin-right: 10px;
}
.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}
.leaflet-zoom-animated {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
  will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}
.leaflet-interactive {
  cursor: pointer;
}
.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
  cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
  pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted;
  pointer-events: auto;
}
.leaflet-container {
  background: #ddd;
  outline-offset: 1px;
}
.leaflet-container a {
  color: #0078A8;
}
.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255, 255, 255, 0.5);
}
.leaflet-container {
  font-family:
    "Helvetica Neue",
    Arial,
    Helvetica,
    sans-serif;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
}
.leaflet-bar a {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}
.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font:
    bold 18px "Lucida Console",
    Monaco,
    monospace;
  text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
  font-size: 22px;
}
.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: #fff;
  border-radius: 5px;
}
.leaflet-control-layers-toggle {
  background-image: url("./media/layers.png");
  width: 36px;
  height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url("./media/layers-2x.png");
  background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}
.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #333;
  background: #fff;
}
.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 5px;
}
.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}
.leaflet-control-layers label {
  display: block;
  font-size: 13px;
  font-size: 1.08333em;
}
.leaflet-control-layers-separator {
  height: 0;
  border-top: 1px solid #ddd;
  margin: 5px -10px 5px -6px;
}
.leaflet-default-icon-path {
  background-image: url("./media/marker-icon.png");
}
.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
  line-height: 1.4;
}
.leaflet-control-attribution a {
  text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
  text-decoration: underline;
}
.leaflet-attribution-flag {
  display: inline !important;
  vertical-align: baseline !important;
  width: 1em;
  height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}
.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}
.leaflet-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
}
.leaflet-popup-content {
  margin: 13px 24px 13px 20px;
  line-height: 1.3;
  font-size: 13px;
  font-size: 1.08333em;
  min-height: 1px;
}
.leaflet-popup-content p {
  margin: 17px 0;
  margin: 1.3em 0;
}
.leaflet-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-top: -1px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}
.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  pointer-events: auto;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  text-align: center;
  width: 24px;
  height: 24px;
  font:
    16px/24px Tahoma,
    Verdana,
    sans-serif;
  color: #757575;
  text-decoration: none;
  background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
  color: #585858;
}
.leaflet-popup-scrolled {
  overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
  -ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
  width: 24px;
  margin: 0 auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}
.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}
.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip.leaflet-interactive {
  cursor: pointer;
  pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}
.leaflet-tooltip-bottom {
  margin-top: 6px;
}
.leaflet-tooltip-top {
  margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
  left: 50%;
  margin-left: -6px;
}
.leaflet-tooltip-top:before {
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
  top: 0;
  margin-top: -12px;
  margin-left: -6px;
  border-bottom-color: #fff;
}
.leaflet-tooltip-left {
  margin-left: -6px;
}
.leaflet-tooltip-right {
  margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  top: 50%;
  margin-top: -6px;
}
.leaflet-tooltip-left:before {
  right: 0;
  margin-right: -12px;
  border-left-color: #fff;
}
.leaflet-tooltip-right:before {
  left: 0;
  margin-left: -12px;
  border-right-color: #fff;
}
@media print {
  .leaflet-control {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* node_modules/simplebar/dist/simplebar.css */
[data-simplebar] {
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit;
}
.simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0;
}
.simplebar-offset {
  direction: inherit !important;
  box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
.simplebar-content-wrapper {
  direction: inherit;
  box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.simplebar-content:before,
.simplebar-content:after {
  content: " ";
  display: table;
}
.simplebar-placeholder {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
  box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0;
}
.simplebar-height-auto-observer {
  box-sizing: inherit;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1000%;
  width: 1000%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}
[data-simplebar].simplebar-dragging {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}
.simplebar-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 10px;
}
.simplebar-scrollbar:before {
  position: absolute;
  content: "";
  background: black;
  border-radius: 7px;
  left: 2px;
  right: 2px;
  opacity: 0;
  transition: opacity 0.2s 0.5s linear;
}
.simplebar-scrollbar.simplebar-visible:before {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0s;
}
.simplebar-track.simplebar-vertical {
  top: 0;
  width: 11px;
}
.simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
}
.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 11px;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 0;
  bottom: 0;
  min-height: 0;
  min-width: 10px;
  width: auto;
}
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0;
}
.simplebar-dummy-scrollbar-size {
  direction: rtl;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  height: 500px;
  width: 500px;
  overflow-y: hidden;
  overflow-x: scroll;
  -ms-overflow-style: scrollbar !important;
}
.simplebar-dummy-scrollbar-size > div {
  width: 200%;
  height: 200%;
  margin: 10px 0;
}
.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */