/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/* @import url("https://unpkg.com/slim-select@latest/dist/slimselect.css"); */

@plugin "flowbite/plugin";

@font-face {
  font-family: "FuturaStd";
  src: url("/assets/futura-std-light-2ed53ffb.otf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FuturaStd";
  src: url("/assets/futura-std-heavy-79e587da.otf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/** regular */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-regular-web-74fa53de.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/** regular italic */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-regular-italic-web-8fc9ba46.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/** light */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-light-web-08d54835.ttf") format("truetype");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

/** light italic */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-light-italic-web-0f85d3b9.ttf") format("truetype");
  font-style: italic;
  font-weight: 100;
  font-display: swap;
}

/** bold */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-bold-web-7daeb099.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/** bold italic */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-bold-italic-web-15f9f430.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

/** black */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-black-web-9f038f49.ttf") format("truetype");
  font-style: normal;
  font-weight: 950;
  font-display: swap;
}

/** black italic */
@font-face {
  font-family: "essentielle";
  src: url("/assets/essentielle-black-italic-web-bf7f8d63.ttf") format("truetype");
  font-style: italic;
  font-weight: 950;
  font-display: swap;
}

/** regular */
@font-face {
  font-family: "royale";
  src: url("/assets/royale-regular-web-4259231e.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/** bold */
@font-face {
  font-family: "royale";
  src: url("/assets/royale-bold-web-a1b6f121.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body {
  font-family: "essentielle", sans-serif;
  /* font-family: "royale", sans-serif; */
  /* font-family: "Ubuntu", sans-serif; */
  /* font-family: "FuturaStd", sans-serif; */
}

.futura-std-heavy {
  font-family: "FuturaStd-Heavy";
}

.flash-message {
  animation: flashMessage 6s forwards;
}
@keyframes flashMessage {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
  }
  8% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  92% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
  }
}

.ss-main {
  border-radius: 10px !important;
  text-align: start !important;
}

.ss-main .ss-values {
  padding: 5px !important;
  border-radius: 5px !important;
}

.ss-main .ss-values .ss-value {
  padding: 10px !important;
}
.ss-main .ss-values .ss-value .ss-value-text,
.ss-main .ss-values .ss-value .ss-value-delete {
  font-size: 16px !important;
}

.bg-lightpurple {
  background-color: rgba(228, 214, 255, 1);
}

.bg-yellow {
  background-color: rgba(255, 249, 214, 1);
}

.bg-blue {
  background-color: rgba(214, 241, 255, 1);
}

.bg-green {
  background-color: rgba(214, 255, 228, 1);
}

.bg-general-information {
  background-color: rgba(18, 137, 18, 0.1);
}

.bg-energy {
  background-color: rgba(173, 171, 161, 0.3);
}

.bg-water {
  background-color: rgba(112, 173, 179, 0.3);
}

.bg-waste {
  background-color: rgba(18, 137, 18, 0.2);
}

.bg-results {
  background-color: rgba(12, 80, 90, 0.2);
}