@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

@import "shadcn.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "tom-select.min.css";
@import "toastify.min.css";

@layer base {
  body {
    @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
  }
}


@layer components {
  .btn-primary {
    @apply rounded bg-primary px-4.5 py-2 font-medium text-white hover:bg-opacity-80 cursor-pointer;
  }
}

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .chat-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }
  .inbox-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }
}

/* third-party libraries CSS */

.tableCheckbox:checked ~ div span {
  @apply opacity-100;
}
.tableCheckbox:checked ~ div {
  @apply border-primary bg-primary;
}

.apexcharts-legend-text {
  @apply !text-body dark:!text-bodydark;
}
.apexcharts-text {
  @apply !fill-body dark:!fill-bodydark;
}
.apexcharts-xcrosshairs {
  @apply !fill-stroke dark:!fill-strokedark;
}
.apexcharts-gridline {
  @apply !stroke-stroke dark:!stroke-strokedark;
}
.apexcharts-series.apexcharts-pie-series path {
  @apply dark:!stroke-transparent;
}
.apexcharts-legend-series {
  @apply !inline-flex gap-1.5;
}
.apexcharts-tooltip.apexcharts-theme-light {
  @apply dark:!border-strokedark dark:!bg-boxdark;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  @apply dark:!border-strokedark dark:!bg-meta-4;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
}
.apexcharts-xaxistooltip-bottom:after {
  @apply !border-b-gray dark:!border-b-meta-4;
}
.apexcharts-xaxistooltip-bottom:before {
  @apply !border-b-gray dark:!border-b-meta-4;
}
.apexcharts-xaxistooltip-bottom {
  @apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
}
.apexcharts-tooltip-series-group {
  @apply !pl-1.5;
}

.flatpickr-wrapper {
  @apply w-full;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  @apply fill-primary;
}
.flatpickr-calendar.arrowTop:before {
  @apply dark:!border-b-boxdark;
}
.flatpickr-calendar.arrowTop:after {
  @apply dark:!border-b-boxdark;
}
.flatpickr-calendar {
  @apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
}
.flatpickr-day {
  @apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  @apply !top-7 dark:!fill-white dark:!text-white;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  @apply !left-7;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  @apply !right-7;
}
span.flatpickr-weekday,
.flatpickr-months .flatpickr-month {
  @apply dark:!fill-white dark:!text-white;
}
.flatpickr-day.inRange {
  @apply dark:!shadow-7;
  box-shadow: -5px 0 0 #eff4fb, 5px 0 0 #eff4fb;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  @apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange {
  @apply dark:!text-white;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #3c50e0;
  @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 #3c50e0;
}

.map-btn .jvm-zoom-btn {
  @apply flex h-7.5 w-7.5 items-center justify-center rounded border border-stroke bg-white px-0 pt-0 pb-0.5 text-2xl leading-none text-body hover:border-primary hover:bg-primary hover:text-white dark:border-strokedark dark:text-bodydark dark:hover:border-primary dark:hover:text-white;
}
.mapOne .jvm-zoom-btn {
  @apply left-auto top-auto bottom-0;
}
.mapOne .jvm-zoom-btn.jvm-zoomin {
  @apply right-10;
}
.mapOne .jvm-zoom-btn.jvm-zoomout {
  @apply right-0;
}
.mapTwo .jvm-zoom-btn {
  @apply top-auto bottom-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomin {
  @apply left-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomout {
  @apply left-10;
}

.taskCheckbox:checked ~ .box span {
  @apply opacity-100;
}
.taskCheckbox:checked ~ p {
  @apply line-through;
}
.taskCheckbox:checked ~ .box {
  @apply border-primary bg-primary dark:border-primary;
}

.custom-input-date::-webkit-calendar-picker-indicator {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}
.custom-input-date-1::-webkit-calendar-picker-indicator {
  background-image: url(/../images/icon/icon-calendar.svg);
}
.custom-input-date-2::-webkit-calendar-picker-indicator {
  background-image: url(/../images/icon/icon-arrow-down.svg);
}

[x-cloak] {
  display: none !important;
}

/* ── Tom Select — aligned to TailAdmin tokens ────────────────────────────── *
 * primary: #3C50E0  stroke: #E2E8F0  black: #1C2434  body: #64748B
 * gray: #EFF4FB  boxdark: #24303F  strokedark: #2E3A47  bodydark1: #DEE4EE
 * -------------------------------------------------------------------------- */

.ts-wrapper { position: relative; }

/* Control box — matches TailAdmin input style */
.ts-wrapper.multi .ts-control,
.ts-wrapper.single .ts-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #E2E8F0;   /* stroke */
  border-radius: 4px;           /* rounded */
  font-size: 1rem;
  line-height: 1.5;
  cursor: text;
  transition: border-color 0.15s;
}

.ts-wrapper.focus .ts-control {
  border-color: #3C50E0;        /* primary */
  outline: none;
}

.ts-control input {
  flex: 1 1 100px;
  min-width: 80px;
  border: none !important;
  outline: none !important;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  color: #1C2434;               /* black */
  padding: 0;
  margin: 0;
}

.ts-control input::placeholder { color: #64748B; } /* body */

/* Selected pills */
.ts-wrapper.multi .ts-control .item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  background: #EFF4FB;          /* gray */
  color: #3C50E0;               /* primary */
  border: 1px solid #E2E8F0;    /* stroke */
  border-radius: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ts-wrapper.multi .ts-control .item .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.1s;
}

.ts-wrapper.multi .ts-control .item .remove:hover { opacity: 1; }

/* Dropdown */
.ts-dropdown {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  box-shadow: 0px 8px 13px -3px rgba(0,0,0,0.07); /* shadow-default */
  overflow: hidden;
}

.ts-dropdown-content {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ts-dropdown .option {
  padding: 10px 16px;
  font-size: 0.9rem;
  color: #64748B;               /* body */
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: #EFF4FB;          /* gray */
  color: #1C2434;               /* black */
}

.ts-dropdown .option.selected {
  color: #3C50E0;               /* primary */
  font-weight: 600;
}

.ts-dropdown .no-results {
  padding: 12px 16px;
  color: #64748B;
  font-size: 0.875rem;
  text-align: center;
}

/* ── Dark mode (TailAdmin internal views) ── */
.dark .ts-wrapper.multi .ts-control,
.dark .ts-wrapper.single .ts-control {
  background: #24303F;          /* boxdark */
  border-color: #2E3A47;        /* strokedark */
  color: #DEE4EE;               /* bodydark1 */
}

.dark .ts-control input      { color: #DEE4EE; }
.dark .ts-control input::placeholder { color: #8A99AF; } /* bodydark2 */

.dark .ts-wrapper.focus .ts-control { border-color: #3C50E0; }

.dark .ts-wrapper.multi .ts-control .item {
  background: #313D4A;          /* meta-4 */
  border-color: #2E3A47;
  color: #DEE4EE;
}

.dark .ts-dropdown {
  background: #24303F;
  border-color: #2E3A47;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.dark .ts-dropdown .option             { color: #AEB7C0; } /* bodydark */
.dark .ts-dropdown .option:hover,
.dark .ts-dropdown .option.active      { background: #313D4A; color: #DEE4EE; }
.dark .ts-dropdown .option.selected    { color: #3C50E0; }
@charset "UTF-8";
/**
 * @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2023 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/
@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-Light-1531b489b061eb2b0cffbadab30288313097f9ec147f375779cb47f47ed9725a.woff2) format("woff2"), url(/assets/Satoshi-Light-832219fba39223c4c477f0fc4dfb174d17cb7e9b99a63e5958050f0f4e934a2d.woff) format("woff"), url(/assets/Satoshi-Light-f0c167f449ffcaf043459076fe0b8a315f94e33855bdf84a94fa4bf854322a4a.ttf) format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-LightItalic-cfe2f5aa1b9b402aa8b052a31d774f857f7f9560dad7518055175d28406e5aa7.woff2) format("woff2"), url(/assets/Satoshi-LightItalic-011dc9340ca1f166ce4229c66be0cbf9a28e044e1fd50d8bb70670dcd4d9185d.woff) format("woff"), url(/assets/Satoshi-LightItalic-9a67e51d86d1e42ac73b6939971bca7958378e5e956b4afdde7a44a453c25ebd.ttf) format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-Regular-c4b4eab9e5d20e779ea6e1b812ccea5f3718db753d2104c98c81b40a22c975fc.woff2) format("woff2"), url(/assets/Satoshi-Regular-25d1c12049deda0ef87d814e44c8cb0166ac9ebed95fbb778b54eb2e2ba0d4e5.woff) format("woff"), url(/assets/Satoshi-Regular-2172c43582bbad36fd9a2c5d82213543b18919ee31780e9dc001756101bad655.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-Italic-e7270aa4dc7a85d97f66dfaa08236819672b0989e1e4663fd2a6327172404c22.woff2) format("woff2"), url(/assets/Satoshi-Italic-fe2eba1f0f270ca231481ff8abf395b9205df29ce747707aaf8bd1acbb9477d1.woff) format("woff"), url(/assets/Satoshi-Italic-75a00d8ed39677bbf0c5cfd5343da7e4cdbf4179cd1db5ebf30144b4e6a25e6a.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-Medium-11dfada90e0097dfa2cdd5ea169288e0ea443eb719bbcf3252606288ce483bd7.woff2) format("woff2"), url(/assets/Satoshi-Medium-01a1fcdd307c555320ae2ff0000f6c4aa5b8603fdb73cc957c5876e10384f7b6.woff) format("woff"), url(/assets/Satoshi-Medium-6237aff9474d827fcf78c1d1e8bae4f4739c847596ef1b918031b2fcde68be19.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-MediumItalic-e2dc737e6d65c9c828d48c43957fa488380aadcae88634b4500ffba719f8fdda.woff2) format("woff2"), url(/assets/Satoshi-MediumItalic-a214c820ddb29d07bf475f5629ec6181eedf04786b501c27eea8d23e2bab9432.woff) format("woff"), url(/assets/Satoshi-MediumItalic-4edd08aea96227ee9cb5c8c70522c1629a752858804bfa946e601be4748a7559.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-Bold-8e291ef2197007f7713ddefafadd937837921da07d76304b324a3a82cc95fdc1.woff2) format("woff2"), url(/assets/Satoshi-Bold-943bb721fae14c7b658328344088714fd32ba172ef85db0ae8f7b81641c69a77.woff) format("woff"), url(/assets/Satoshi-Bold-c397e18e14b3cbbca18a8edabe483e36790d6a4c8026d15a7cc2d66c3a23c5bd.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-BoldItalic-fb53a92472ebc4533e1877287b4d8c0ea5c8278de8134f97cf16bdb398cc119e.woff2) format("woff2"), url(/assets/Satoshi-BoldItalic-22fc2a07304c54b85c7796df97c0063fcf14580e06fa56b3905ba000abbb2b34.woff) format("woff"), url(/assets/Satoshi-BoldItalic-dcedc2aea205a395140ad34d0e6b994a04b56adc631fa4c504c495501273466c.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-Black-791367bb44bb67541403052ac8c0ce7035fb27e8b039374f02749f4d4a5af779.woff2) format("woff2"), url(/assets/Satoshi-Black-197b189b522445c338c620aebd6adef860d915a84de583db8e816804aa65f5d8.woff) format("woff"), url(/assets/Satoshi-Black-62220c835e9bccb57661f408a0ac3d5f3855d2ad5181e53bdeb1b510149481da.ttf) format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url(/assets/Satoshi-BlackItalic-a53f879f3f0322408939b6d8c429c8592ca9de86465aeb3910e4b44d0717ba96.woff2) format("woff2"), url(/assets/Satoshi-BlackItalic-ef8ce80b965721464da73cb0016f821930bb9a9ef6c2426de676ecac3846a4ce.woff) format("woff"), url(/assets/Satoshi-BlackItalic-8a64d9c608869b118cb54ec3eb7b8caecd974f4a152f457762906e854085aba9.ttf) format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}
:root {
  --font-sans: "Inter var";

  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5% 64.9%;
  --radius: 0.5rem;

  --success: 132, 95.3%, 33.3%, 0.74;
  --success-foreground: 109 55% 28%;

  --info: 223 78% 42%;
  --info-foreground: 225 100% 50%;

  --attention: 45 90% 45%;
  --attention-foreground: 60 98.4% 48.8% 0.82;
}
@layer base {
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --radius: 0.5rem;

    --success: 109 55% 28%;
    --success-foreground: 109 55% 28%;

    --attention: 45, 90%, 45%, 0.8;
    --attention-foreground: 60 98.4% 48.8% 0.82;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }

  .code-sample {
    @apply max-h-[650px] min-h-[350px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900;
  }

  .code-sample pre {
    @apply min-h-[350px];
  }

  .code-sample span {
    @apply bg-zinc-950;
  }
  input.error {
    @apply border-red-400;
  }

  label.error {
    @apply text-destructive;
  }

  input.error:focus-visible {
    @apply ring-destructive;
  }
}

input[type="range"] {
  display: inline-block;
  vertical-align: middle;
  font-size: 1em;
  font-family: Arial, sans-serif;
}

/* input[type="range"]:focus,
input[type="number"]:focus {
  box-shadow: 0 0 3px 1px #4b81dd;
  outline: none;
} */

input[type="range"] {
  -webkit-appearance: none;
  margin-right: 15px;
  min-width: 200px;
  height: 7px;
  background: #f4f4f5;
  border-radius: 5px;
  background-image: linear-gradient(#000, #000);
  background-repeat: no-repeat;
}

/* Input Thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #000;
  transition: background 0.3s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #000;
  transition: background 0.3s ease-in-out;
}

input[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #000;
  transition: background 0.3s ease-in-out;
}

/* input[type="range"]::-webkit-slider-thumb:hover {
  background: #a1a1aa;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #a1a1aa;
}

input[type="range"]::-ms-thumb:hover {
  background: #a1a1aa;
} */

input[type="range"]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type="range"]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.st-accordion .st-accordion__icon:before {
  content: "▼";
  display: inline-block;
  margin-right: 5px;
  font-size: 80%;
  text-decoration: none;
  transform: rotate(-90deg);
}
.st-accordion .st-accordion__icon--opened:before {
  transform: rotate(0deg);
}

.st-accordion .st-accordion__content:not(.st-accordion__content--visible) {
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.2s;
}
.st-accordion .st-accordion__content.st-accordion__content--visible {
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  transition: all 0.2s;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */