@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); /* =~= Theme Properties =~= */
/* =~= Theme On-X Colors =~= */
/* =~= Theme Colors  =~= */
/* primary | #068920 */
/* ⬅ #daedde */
/* ⬅ #daedde */
/* ⬅ #cde7d2 */
/* ⬅ #c1e2c7 */
/* ⬅ #9bd0a6 */
/* ⬅ #51ac63 */
/* ⬅ #068920 */
/* ⬅ #057b1d */
/* ⬅ #056718 */
/* ⬅ #045213 */
/* ⬅ #034310 */
/* secondary | #728974 */
/* ⬅ #eaedea */
/* ⬅ #e3e7e3 */
/* ⬅ #dce2dc */
/* ⬅ #c7d0c7 */
/* ⬅ #9cac9e */
/* ⬅ #728974 */
/* ⬅ #677b68 */
/* ⬅ #566757 */
/* ⬅ #445246 */
/* ⬅ #384339 */
/* tertiary | #834DF4 */
/* ⬅ #ece4fd */
/* ⬅ #e6dbfd */
/* ⬅ #e0d3fc */
/* ⬅ #cdb8fb */
/* ⬅ #a882f7 */
/* ⬅ #834DF4 */
/* ⬅ #7645dc */
/* ⬅ #623ab7 */
/* ⬅ #4f2e92 */
/* ⬅ #402678 */
/* success | #20cf12 */
/* ⬅ #def8db */
/* ⬅ #d2f5d0 */
/* ⬅ #c7f3c4 */
/* ⬅ #a6eca0 */
/* ⬅ #63dd59 */
/* ⬅ #20cf12 */
/* ⬅ #1dba10 */
/* ⬅ #189b0e */
/* ⬅ #137c0b */
/* ⬅ #106509 */
/* warning | #fdbe00 */
/* ⬅ #fff5d9 */
/* ⬅ #fff2cc */
/* ⬅ #ffefbf */
/* ⬅ #fee599 */
/* ⬅ #fed24d */
/* ⬅ #fdbe00 */
/* ⬅ #e4ab00 */
/* ⬅ #be8f00 */
/* ⬅ #987200 */
/* ⬅ #7c5d00 */
/* error | #ef4152 */
/* ⬅ #fde3e5 */
/* ⬅ #fcd9dc */
/* ⬅ #fbd0d4 */
/* ⬅ #f9b3ba */
/* ⬅ #f47a86 */
/* ⬅ #ef4152 */
/* ⬅ #d73b4a */
/* ⬅ #b3313e */
/* ⬅ #8f2731 */
/* ⬅ #752028 */
/* surface | #79767D */
/* ⬅ #ebeaec */
/* ⬅ #ebeaec */
/* ⬅ #e4e4e5 */
/* ⬅ #dedddf */
/* ⬅ #c9c8cb */
/* ⬅ #a19fa4 */
/* ⬅ #79767D */
/* ⬅ #6d6a71 */
/* ⬅ #5b595e */
/* ⬅ #49474b */
/* ⬅ #3b3a3d */

// ------------------------------------------------------------------------------------------------------
// Alert info
.alertAnimation {
  -webkit-animation: alertAnimation 8s linear;
  -ms-animation: alertAnimation 8s linear;
  animation: alertAnimation 8s linear;
}

@-webkit-keyframes alertAnimation {
  0% {
    opacity: 1;
    top: 0;
    left: 0;
  }
  90% {
    opacity: 1;
    top: 0;
    left: 0;
  }
  99% {
    opacity: 0;
    top: 0;
    left: 0;
  }
  100% {
    opacity: 0;
    top: -999999px;
    left: -999999px;
  }
}
@keyframes alertAnimation {
  0% {
    opacity: 1;
    top: 0;
    left: 0;
  }
  90% {
    opacity: 1;
    top: 0;
    left: 0;
  }
  99% {
    opacity: 0;
    top: 0;
    left: 0;
  }
  100% {
    opacity: 0;
    top: -999999px;
    left: -999999px;
  }
}

#alert {
  width: 100%;
  height: 0px;
  text-align: center;
  position: fixed;
  top: 0px;
  z-index: 999999;
  cursor: pointer;
}

#blue_alert,
#green_alert,
#orange_alert,
#red_alert {
  display: inline-block;
  padding: 30px;
  margin: 20px 0px 0px 0px;
  border-radius: 6px;
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);
  font-size: 20px;
  opacity: 0;
  position: relative;
  left: -999999px;
  top: -999999px;
  .alertAnimation;
}

#blue_alert {
  color: white;
  background-color: rgba(50, 50, 50, 1);
}

#green_alert {
  color: white;
  background-color: rgba(50, 50, 50, 1);
}

#orange_alert {
  color: white;
  background-color: rgba(50, 50, 50, 1);
}

#red_alert {
  color: white;
  background-color: rgba(50, 50, 50, 1);
}

input,
select {
  border: 1px solid lightgrey;
  border-radius: 6px;
  height: 36px;
  padding-left: 8px;
  transition: 0.15s ease-in-out;
}
input:hover,
select:hover {
  border: 1px solid rgb(6, 137, 32);
}
input:focus-within,
select:focus-within {
  border: 1px solid rgb(6, 137, 32);
  box-shadow: 0 0 0 2px rgba(0, 69, 3, 0.29);
}
input:focus,
select:focus {
  outline: 0px solid rgb(6, 137, 32);
}

* {
  font-family: Calibri, arial, sans-serif;
}

.no-input {
  background: rgb(235, 234, 236);
  border: 1px solid rgb(228, 228, 229);
  cursor: not-allowed;
  user-select: none !important;
  -moz-user-select: none !important;
  -khtml-user-select: none !important;
  -webkit-user-select: none !important;
  -o-user-select: none !important;
}
.no-input:hover {
  box-shadow: none;
  border: 1px solid rgb(222, 221, 223);
}
.no-input:focus-within {
  box-shadow: 0 0 0 0px rgba(0, 69, 3, 0.29);
  border: 1px solid rgb(222, 221, 223);
}
.no-input:focus {
  outline: 0px solid rgb(6, 137, 32);
}

.badge {
  width: fit-content;
  background-color: rgb(224, 211, 252);
  padding: 2.3px 7px;
  border-radius: 99px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 400;
}
.badge[data-color="SIM"] {
  background: #f8b5b5;
  color: #772020;
}
.badge[data-color="BOM"] {
  background: #b5d0f8;
  color: #204679;
}
.badge[data-color="PEP"] {
  background: #f8e9b5;
  color: #824b0c;
}

.badge-w40 {
  width: 40px;
}

@keyframes clickButton {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 69, 3, 0.29);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(0, 69, 3, 0);
  }
}
@keyframes clickButtonSurface {
  0% {
    box-shadow: 0 0 0 0px rgba(63, 63, 63, 0.29);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(59, 59, 59, 0);
  }
}
@keyframes clickButtonError {
  0% {
    box-shadow: 0 0 0 0px rgba(188, 6, 39, 0.611);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(96, 0, 16, 0);
  }
}
button > svg {
  pointer-events: none;
}

.btn-primary {
  background-color: rgb(6, 137, 32);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: rgb(5, 123, 29);
}
.btn-primary:focus {
  animation: clickButton 0.3s cubic-bezier(0.34, 0.49, 0.59, 0.79);
}
.btn-primary:active {
  background-color: rgb(5, 103, 24);
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.25);
  -webkit-animation: none;
  animation: none;
}

.btn-error {
  background-color: #ef4152;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.btn-error:hover {
  background-color: #d92f40;
}
.btn-error:focus {
  animation: clickButtonError 0.3s cubic-bezier(0.34, 0.49, 0.59, 0.79);
}
.btn-error:active {
  background-color: #c72636;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.25);
  -webkit-animation: none;
  animation: none;
}

.btn-primary-lock {
  background-color: rgb(222, 221, 223);
  color: rgb(201, 200, 203);
  border: none;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  user-select: none !important;
  -moz-user-select: none !important;
  -khtml-user-select: none !important;
  -webkit-user-select: none !important;
  -o-user-select: none !important;
}
.btn-secondary {
  background: white;
  border: 1px solid rgb(201, 200, 203);
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.btn-secondary:hover {
  background-color: rgb(235, 250, 238);
  border: 1px solid rgb(6, 137, 32);
}
.btn-secondary:focus {
  animation: clickButton 0.3s cubic-bezier(0.34, 0.49, 0.59, 0.79);
}
.btn-secondary:active {
  background-color: rgb(218, 237, 222);
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.25);
  -webkit-animation: none;
  animation: none;
}

.btn-surface {
  background-color: rgb(235, 234, 236);
  color: black;
  border: none;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.btn-surface:hover {
  background-color: rgb(222, 221, 223);
}
.btn-surface:focus {
  animation: clickButtonSurface 0.3s cubic-bezier(0.34, 0.49, 0.59, 0.79);
}
.btn-surface:active {
  background-color: rgb(201, 200, 203);
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.25);
  -webkit-animation: none;
  animation: none;
}

.btn-add {
  transition: 0.15s ease-out;
  cursor: pointer;
  border: 0;
  font-size: 20px;
  border-radius: 4px;
  display: flex;
  place-content: center;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 5px;
  background: white;
  color: rgb(53, 53, 53);
  border: 1px solid rgb(228, 228, 229);
}

.btn-add:hover {
  background: rgb(243, 240, 244);
  border: 1px solid rgb(155, 208, 166);
  color: rgb(6, 137, 32);
}

.btn-add:active {
  background: rgb(222, 221, 223);
  color: rgb(5, 103, 24);
  border: 1px solid rgb(81, 172, 99);
}

.btn-picto {
  background-color: rgb(246, 246, 246);
  color: rgba(0, 0, 0, 0.88);
  border: none;
  border-radius: 4px;
  display: grid;
  padding: 8px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.btn-picto:hover {
  background: rgb(228, 228, 228);
}
.btn-picto:active {
  background-color: rgb(198, 198, 198);
  -webkit-animation: none;
  animation: none;
}

.btn-upload-pep {
  margin-left: 20px;
}

hr {
  border: 0.8px solid rgb(240, 240, 240);
}

.pp {
  width: 35px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  line-height: 0;
  color: white;
  font-size: 28px;
  border-radius: 4px;
  text-transform: uppercase;
}

.loader {
  width: 60px;
  height: 60px;
  border-radius: 100px;
  border: 6px solid rgb(193, 226, 199);
  border-top: 6px solid rgb(5, 123, 29);
  animation: rotation 1s infinite linear;
}

@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.mr-20 {
  margin-right: 20px;
}
.container {
  padding-inline: 3vw;
  overflow: hidden;
  flex: 1;
  position: relative;
}
.btn-open-version {
  background: rgb(235, 234, 236);
  color: #494949;
  margin-left: 10px;

  &:hover {
    background: rgb(222, 221, 223);
    cursor: pointer;
  }
}
.version-container {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none !important;
}
.version-container.open {
  display: flex !important;
}
.versions {
  position: absolute;
  width: 500px;
  background: rgb(255, 255, 255);
  left: 0;
  z-index: 5;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.308);
  transform: translate(-100%);
}
.versions.open {
  transform: translate(0%);
}
.versions-tittle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #3b3a3d;
  border-bottom: 1px solid #ebeaec;
}
.versions-content {
  padding-inline: 20px;
}
.version-sub {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ebeaec;
  color: #6d6a71;
  font-size: 12px;
  font-weight: 400;
  margin-top: 30px;
}
.version-project {
  text-decoration: none;
  display: flex;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-top: 10px;

  &:hover {
    background: #ebeaec;
  }
}
.badge-container {
  width: 50px;
  border-right: 1px solid #e4e4e5;
  margin-right: 10px;
}
.version-project-tittle {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
}

.box-container {
  display: flex;
  gap: 1.6vw;
  margin-top: 30px;
}

.box-info {
  border: 1px solid #f3f3f3;
  border-radius: 8px;
  flex: 1;
  padding: 10px;
  position: relative;
  background: white;
  background: #f8f9fa;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}
.box-info .box-info-1 {
  position: relative;
  z-index: 2;
}
.box-info .box-info-1 h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
}
.box-info .box-info-1 p {
  font-size: 12px;
  font-weight: 400;
  color: rgb(109, 106, 113);
}
.box-info .box-info-2 {
  display: flex;
  justify-content: space-around;
  padding: 0.7vw 0 0.7vw 0;
}
.box-info .box-info-2 p,
.box-info .box-info-2 .box-info-2-first {
  font-size: 28px;
  font-weight: 600;
  position: relative;
}
.box-info .box-info-2 .box-info-2-first {
  display: flex;
  flex-direction: column;
}
.box-info .box-info-2 p,
.box-info .box-info-2 .box-info-2-first .val1 {
  font-size: 16px;
}
.box-info .box-info-2 p svg,
.box-info .box-info-2 .box-info-2-first svg {
  position: absolute;
  fill: rgb(201, 200, 203);
}
.box-info .box-info-2 p .lock1,
.box-info .box-info-2 .box-info-2-first .lock1 {
  position: absolute;
  left: -6%;
  top: 0;
  transform: translate(-100%, 20%);
  fill: rgb(201, 200, 203);
}
.box-info .box-info-2 p .lock2,
.box-info .box-info-2 .box-info-2-first .lock2 {
  position: absolute;
  left: 108%;
  top: 0;
  transform: translate(0%, 20%);
  display: none;
}
.box-info .box-info-3 {
  display: flex;
  justify-content: flex-end;
}
.box-info .box-info-3 .chips {
  width: fit-content;
  display: flex;
  justify-content: space-between;
  gap: 2px;
  align-items: center;
  padding: 2px 10px 2px 6px;
  border-radius: 4px;
  background: rgb(210, 245, 208);
  color: rgb(24, 155, 14);
}
.box-info .chart {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 10px;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: end;
  width: 26px;
  transform: translateX(-50%);
}
.box-info .chart .chart-1 {
  background: rgba(130, 77, 244, 0.5294117647);
  flex: 1;
  transition: 0.15s ease-in-out;
}
.box-info .chart .chart-2 {
  background: rgba(60, 219, 166, 0.5098039216);
  flex: 1;
  transition: 0.15s ease-in-out;
}
.box-info:hover {
  border: 1px solid #e8e8e8;
}
.box-info:hover .chart-1 {
  background: #834df4;
}
.box-info:hover .chart-2 {
  background: #3cdba5;
}
@media screen and (max-width: 1550px) {
  .box-info .box-info-2 p,
  .box-info .box-info-2-first p {
    font-size: 12px;
    font-weight: 600;
  }
  .box-info .chart {
    width: 17px;
  }
}
@media screen and (max-width: 1250px) {
  .box-info {
    padding: 5px;
  }
  .box-info .chart {
    width: 10px;
  }
  .box-info .box-info-1 h5 {
    font-size: 12px;
    font-weight: 600;
  }
  .box-info .box-info-1 p {
    font-size: 6px;
    font-weight: 400;
    color: rgb(109, 106, 113);
  }
  .box-info .box-info-3 .chips {
    padding: 1px 4px 1px 2px;
    font-size: 14px;
    font-weight: 400;
  }
  .box-info .box-info-2 {
    padding: 0.7vw 0 0.7vw 0;
  }
  .box-info .box-info-2 p,
  .box-info .box-info-2 .box-info-2-first {
    font-size: 16px;
    font-weight: 600;
  }
}

.nav-block {
  height: fit-content;
  width: 100%;
}

.project-nav {
  padding: 14px 20px 7px 20px;
  background: white;
}
.project-nav img {
  width: 120px;
}

.project-nav2 {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 13px 0;
  box-shadow: 0 5px 8px 0 rgba(59, 59, 59, 0.03);
}
.project-nav2 .project-nav-left {
  display: flex;
  align-items: center;
}
.define-bom-baseline-button-container {
  padding-inline: 20px;
  border-right: 1px solid #e4e4e5;
}
.project-nav2 .project-nav-left #define-bom-baseline-button,
.project-nav2 .project-nav-left #manage-bom-baseline-button {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.project-nav2 .project-nav-left #define-bom-baseline-button > svg,
.project-nav2 .project-nav-left #manage-bom-baseline-button > svg {
  font-size: 16px;
}
.project-nav2 .project-nav-left #manage-bom-baseline-button {
  background-color: #b99df6;
  color: white;
}
.project-nav2 .project-nav-left #manage-bom-baseline-button:hover {
  background-color: #cab5f6;
}
.project-nav2 .project-nav-left > form > button {
  margin-inline: 10px;
  padding: 8px 10px;
  color: black;
}
.project-nav2 .project-nav-left .nav-name-project {
  padding-inline: 20px;
  height: 80%;
  border-left: 1px solid rgb(228, 228, 229);
  border-right: 1px solid rgb(228, 228, 229);
}
.project-nav2 .project-nav-left div {
  display: flex;
  align-items: center;
}
.project-nav2 .project-nav-left div h3 {
  font-size: 20px;
  font-weight: 600;
}
.project-nav2 .project-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-nav2 .project-nav-right .barre-h {
  height: 80%;
  width: 1px;
  background: rgb(228, 228, 229);
  margin-inline: 10px;
}
.project-nav2 .project-nav-right .btn-primary {
  margin-right: 20px;
}

.container > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div .container-rest {
  flex: 1;
  margin: 30px 0;
  overflow: hidden;
}
.container > div .container-rest h2 {
  font-size: 20px;
  font-weight: 600;
}
.container > div .container-rest > div {
  display: flex;
  height: 100%;
  gap: 20px;
}
.container > div .container-rest > div .prop {
  flex: 2;
  height: 100%;
  display: flex;
  gap: 20px;
}
.container > div .container-rest > div .prop .prop-1 {
  overflow-y: auto;
  max-width: 465px;
  width: 465px;
  min-width: 465px;
}
.prop-1-bg-gray {
  background: #f8f9fa;
  border-radius: 8px;

  > .ref-PEP {
    border: 1px #e7e7e7 solid;
  }
}
.container > div .container-rest > div .prop .ref-PEP {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container > div .container-rest > div .prop .ref-PEP > div {
  display: flex;
}
.container > div .container-rest > div .prop .ref-PEP > div input {
  width: 25%;
  border-radius: 0 4px 4px 0;
  color: rgb(121, 118, 125);
  font-size: 14px;
  text-overflow: ellipsis;
}
.container > div .container-rest > div .prop .ref-PEP > div input:nth-child(1) {
  flex: 1;
  border-radius: 4px 0 0 4px;
}
.container > div .container-rest > div .prop .ref-PEP > div input:nth-child(2) {
  border-radius: 0;
  border-inline: 0;
}
.container > div .container-rest > div .prop .stat-PEP {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.container > div .container-rest > div .prop .stat-PEP > div {
  display: flex;
  gap: 10px;
  padding-inline: 15px;
}
.container > div .container-rest > div .prop .stat-PEP > div > .form-item {
  flex: 1;
}
.container
  > div
  .container-rest
  > div
  .prop
  .stat-PEP
  > div
  > .form-item
  .label-input-more {
  display: flex;
  margin-bottom: 8px;
  gap: 4px;
  align-items: flex-end;
  word-break: keep-all;
  white-space: nowrap;
  word-wrap: nowrap;
}
.container
  > div
  .container-rest
  > div
  .prop
  .stat-PEP
  > div
  > .form-item
  .label-input-more
  > span {
  font-size: 14px;
  font-weight: 400;
  color: rgb(121, 118, 125);
}
.container
  > div
  .container-rest
  > div
  .prop
  .stat-PEP
  > div
  > .form-item
  .label-input-more
  > span
  abbr {
  display: grid;
  margin-bottom: 2px;
}
.container
  > div
  .container-rest
  > div
  .prop
  .stat-PEP
  > div
  > .form-item
  input {
  width: 100%;
}
.container > div .container-rest > div .prop .stat-PEP .barre {
  margin-inline: 15px;
  height: 2px;
  background: rgb(235, 234, 236);
}
.container
  > div
  .container-rest
  > div
  .prop
  .stat-PEP
  .add-manual-extrapolation-div {
  display: flex;
  justify-content: flex-end;
}
.container > div .container-rest > div .stat-pep-add-pre {
  flex: 1 0 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: 0.2s cubic-bezier(0.32, 0.43, 0.01, 1);
  background: #f8f9fa;
  border-radius: 8px;
}
.container > div .container-rest > div .stat-pep-add-pre .ref-PEP {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  > .form-item {
  // padding-inline: 15px;
  margin-top: 15px;
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  > .form-item
  .form-item-align {
  align-items: center;
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  > .form-item
  > div {
  display: flex;
  padding-bottom: 8px;
  gap: 4px;
  align-items: flex-end;
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  > .form-item
  > div
  span {
  font-size: 14px;
  font-weight: 400;
  color: rgb(121, 118, 125);
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  > .form-item
  > div
  span
  abbr {
  display: grid;
  margin-bottom: 2px;
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  > .form-item
  input {
  width: 100%;
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  .form-item {
  flex: 0;
}
.container
  > div
  .container-rest
  > div
  .stat-pep-add-pre
  .stat-pep-add
  .form-item-align {
  gap: 5px !important;
  align-items: center !important;
}
.container .container-rest .graph {
  background: #f8f9fa;
  border-radius: 8px;
  flex: 2;
  height: 100%;
  padding: 35px;
}
@media screen and (max-width: 1550px) {
  .container > div .container-rest h2 {
    font-size: 16px;
    font-weight: 600;
  }
}
.button-delete-option {
  padding: 5px !important;
  font-size: 15px !important;
}
.button-delete-option:active {
  color: rgb(215, 59, 74) !important;
}

#shine-contain {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 12;
}

.suffix {
  position: relative;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
}
.suffix > input {
  padding-right: 15px;
}

.suffix::after {
  content: attr(title);
  color: rgb(121, 118, 125);
  padding-right: 8px;
  height: 100%;
  position: absolute;
  display: grid;
  place-content: center left;
  right: 0;
  top: 0;
  user-select: none;
}

.anim-pop {
  animation: fade-in 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.fade-out {
  animation: fade-out 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
}

@keyframes fade-out {
  0% {
    margin-top: 15px;
    max-height: 72px;
    height: 72px;
    min-height: 72px;
    opacity: 1;
    transform: translateX(0%);
  }
  50% {
    margin-top: 15px;
    max-height: 72px;
    height: 72px;
    min-height: 72px;
    opacity: 0;
    transform: translateX(-30%);
  }
  100% {
    margin-top: 0;
    opacity: 0;
    max-height: 0px;
    height: 0px;
    min-height: 0px;
    transform: translateX(-30%);
    display: none;
  }
}
.box-info.scale-up {
  animation: scale-up 0.2s cubic-bezier(0.32, 0.43, 0.01, 1) forwards;
  transition: 0.1s ease-in-out;
}

.box-info.scale-up:active {
  box-shadow: inset 0 0 0 3px rgb(81, 172, 99);
  transform: scale(1.02) !important;
}

@keyframes scale-up {
  from {
    opacity: 0;
    transform: scale(1);
    z-index: 1;
  }
  to {
    opacity: 1;
    transform: scale(1.05);
    z-index: 13;
  }
}
.box-info.scale-up:nth-child(1) {
  animation: none;
  z-index: 1;
}

#shine-contain {
  opacity: 0;
}

#shine-contain.opacity-up {
  animation: opacity-up 0.4s cubic-bezier(0.32, 0.43, 0.01, 1) forwards;
}

@keyframes opacity-up {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.box-info[data-selected="true"] {
  animation: none;
  z-index: 1;
}

@media screen and (max-width: 1250px) {
  .line {
    flex-direction: column;
    gap: 0px !important;
  }
  input {
    height: 28px;
  }
}
.power-usage-form-item {
  flex: 1;
}
.power-usage-form-item input {
  width: 100%;
  height: 40px;
}

.label-input-more {
  margin-bottom: 8px;
  font-size: 13px;
}
.label-input-more > span {
  font-size: 13px;
  font-weight: 400;
  color: rgb(121, 118, 125);
}

#container-scope4 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#container-scope4 > div:first-child {
  margin-top: 15px;
}
#container-scope4 .form-item {
  flex: 1;
  padding-inline: 10px;
}
#container-scope4 .form-item .form-item-align {
  display: flex;
  align-items: center;
  gap: 5px;
}
#container-scope4 .form-item .form-item-align > .button-delete-option {
  background: transparent;
}
#container-scope4 .form-item .form-item-align > .button-delete-option:hover {
  background: rgb(228, 228, 229);
}
#container-scope4 .form-item .form-item-align > .button-delete-option:active {
  background: rgb(201, 200, 203);
  color: rgb(215, 59, 74);
}
#container-scope4 .form-item input {
  width: 100%;
}

.container .container-rest h2 {
  font-size: 20px;
  font-weight: 600;
}
.container .container-rest > div {
  display: flex;
  height: 100%;
  gap: 20px;
}
.container .container-rest > div .pre-prop {
  display: flex;
  flex: 3;
  flex-direction: column;
  gap: 20px;
}
.container .container-rest > div .pre-prop .ref-PEP {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container .container-rest > div .pre-prop .ref-PEP > div {
  display: flex;
  align-items: flex-end;
}
.container .container-rest > div .pre-prop .prop {
  height: 100%;
  display: flex;
  gap: 20px;
  flex: 1;
}
.container .container-rest > div .pre-prop .prop .prop-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container .container-rest > div .pre-prop .prop .ref-PEP {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container .container-rest > div .pre-prop .prop .ref-PEP > div {
  display: flex;
}
.container .container-rest > div .pre-prop .prop .ref-PEP > div input {
  width: 25%;
  border-radius: 0 4px 4px 0;
  color: rgb(121, 118, 125);
  font-size: 14px;
  text-overflow: ellipsis;
}
.container
  .container-rest
  > div
  .pre-prop
  .prop
  .ref-PEP
  > div
  input:nth-child(1) {
  flex: 1;
  border-radius: 4px 0 0 4px;
}
.container
  .container-rest
  > div
  .pre-prop
  .prop
  .ref-PEP
  > div
  input:nth-child(2) {
  border-radius: 0;
  border-inline: 0;
}
.container .container-rest > div .pre-prop .prop .stat-PEP {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.container .container-rest > div .pre-prop .prop .stat-PEP > div {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  padding-inline: 15px;
}
.container .container-rest > div .pre-prop .prop .stat-PEP .barre {
  margin-inline: 15px;
  height: 2px;
  background: rgb(235, 234, 236);
}
.container
  .container-rest
  > div
  .pre-prop
  .prop
  .stat-PEP
  .add-manual-extrapolation-div {
  display: flex;
  justify-content: flex-end;
}
.container .container-rest > div .pre-prop .stat-pep-add-pre {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: 0.2s cubic-bezier(0.32, 0.43, 0.01, 1);
}
.container .container-rest > div .pre-prop .stat-pep-add-pre .ref-PEP {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container .container-rest > div .graph {
  position: relative;
}
.container .container-rest > div .graph .loading {
  top: 50%;
  left: 50%;
  height: 120px;
  width: 160px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes loading {
  0% {
    background-color: #3cdba5;
  }
  30% {
    background-color: #20a187;
  }
  50% {
    height: 100px;
    margin-top: 0px;
  }
  80% {
    background-color: #7944ea;
  }
  100% {
    background-color: #3cdba5;
  }
}
.container .container-rest > div .graph .loading .loading-1 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.container .container-rest > div .graph .loading .loading-2 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.container .container-rest > div .graph .loading .loading-3 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.container .container-rest > div .graph .loading .loading-4 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.container .container-rest > div .graph .loading .loading-5 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s;
}
.container .container-rest > div .graph .loading .loading-6 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.container .container-rest > div .graph .loading .loading-7 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 1.75s;
  animation-delay: 1.75s;
}
.container .container-rest > div .graph .loading .loading-8 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .container-rest > div .graph .loading .loading-9 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 2.25s;
  animation-delay: 2.25s;
}
.container .container-rest > div .graph .loading .loading-10 {
  height: 10px;
  width: 30px;
  background-color: #fff;
  display: inline-block;
  margin-top: 90px;
  -webkit-animation: loading 2.5s infinite;
  -moz-animation: loading 2.5s infinite;
  -o-animation: loading 2.5s infinite;
  animation: loading 2.5s infinite;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.gap10 {
  gap: 5px;
}

.ref-BOM {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.ref-BOM .ref-BOM-title {
  display: flex;
  justify-content: space-between;
}
.ref-BOM .choice-pep-in-bom {
  display: flex;
}
.ref-BOM .choice-pep-in-bom > input {
  flex: 1;
  width: 25%;
  color: rgb(121, 118, 125);
  font-size: 14px;
  text-overflow: ellipsis;
}

#container-existing-product,
#container-material-services {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.added-product {
  background: white;
  border: 1px solid #f3f3f3;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.added-product:first-child {
  margin-top: 15px;
}
.added-product .added-product-tittle h3 {
  font-size: 16px;
  font-weight: 600;
}
.added-product .added-product-tittle h4 {
  font-size: 14px;
  font-weight: 400;
}
.added-product .added-product-end {
  display: flex;
  gap: 5px;
  align-items: center;
}
.added-product .added-product-end .double-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.added-product .added-product-end .double-button > .button-delete-option {
  padding: 5px;
  font-size: 15px;
}
.added-product
  .added-product-end
  .double-button
  > .button-delete-option:active {
  color: rgb(215, 59, 74);
}
.added-product .added-product-end select {
  width: 55px;
  border: 1px solid lightgrey;
  border-radius: 4px;
  height: 36px;
  padding-left: 8px;
  background: transparent;
  transition: 0.15s ease-in-out;
}
.added-product .added-product-end select:hover,
#energy-select:hover {
  border: 1px solid rgb(6, 137, 32);
}
.added-product .added-product-end select:focus-within,
#energy-select:focus-within {
  border: 1px solid rgb(6, 137, 32);
  box-shadow: 0 0 0 2px rgba(0, 69, 3, 0.29);
}
.added-product .added-product-end select:focus,
#energy-select:focus {
  outline: 0px solid rgb(6, 137, 32);
}
.added-product .added-product-end select option {
  margin: 5px;
  padding: 2px;
  border-radius: 4px;
}
.added-product .added-product-end select option:hover {
  /* Styles au survol */
  background-color: rgb(235, 234, 236);
}

.Input-filter {
  padding: 8px;
  border-radius: 99px;
  border: 0;
}

.search-contain {
  position: relative;
  margin-top: 10px;
}
.search-contain .search-left {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  color: rgb(161, 159, 164);
}
.search-contain input[type="search"] {
  width: 100%;
  padding-inline: 32px;
}
.search-contain .search-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
}

.search-show {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: scroll;
}

.search-items-bom {
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 2px solid transparent;
  justify-content: space-between;
}
.search-items-bom:hover {
  cursor: pointer;
  background: #eaecee;
}
.search-items-bom[data-active="true"] {
  border: 2px solid rgb(6, 137, 32);
  background: rgb(235, 250, 238);
}

.search-items-bom-tittle {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: 100%;
}
.search-items-bom-tittle h3 {
  font-size: 14px;
  font-weight: 600;
  width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline: 8px;
  height: 20px;
  border-left: 1px solid rgb(201, 200, 203);
  border-right: 1px solid rgb(201, 200, 203);
}
.search-items-bom-tittle h4 {
  font-size: 14px;
  font-weight: 400;
}

.search-items-bom-stat P {
  font-size: 14px;
  font-weight: 600;
}
.search-items-bom-stat P span {
  font-size: 10px;
  font-weight: 400;
  color: rgb(161, 159, 164);
}

#drawer-contain,
#modal-contain {
  z-index: 49;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  transform: translateX(-100%);
}

#drawer-contain.open,
#modal-contain.open {
  transform: translateX(0%);
}

#drawer {
  z-index: 50;
  background: white;
  position: fixed;
  width: 500px;
  height: 100vh;
  transform: translateX(0%);
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.308);
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  left: 100%;
}

#drawer.open {
  transform: translateX(-100%);
}

.modal {
  z-index: 50;
  background: white;
  position: fixed;
  display: flex;
  flex-direction: column;
  left: 50%;
  top: 50%;
  width: min(723px, 100% - 2rem);
  height: 600px;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.308);
  transform: translate(-50%, 110%);
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  border-radius: 12px;
}
.modal #loader-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.modal-top {
  flex: 0 1 auto;
}

.modal-bottom {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

#modal-content-spawner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  overflow-y: hidden;
}

.modal-content-product {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  overflow-y: hidden;
  padding-inline: 2rem;
}

.modal.open {
  transform: translate(-50%, -50%);
}

.modal-nav {
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 0 20px;
}
.modal-nav.sb {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(235, 234, 236);
  padding: 20px;
}
.modal-nav.sb h4 {
  font-size: 16px;
  font-weight: 600;
  color: rgb(59, 58, 61);
}

.modal-header {
  padding-inline: 2rem;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.modal-header p {
  color: rgb(121, 118, 125);
}

.historique-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  padding-inline: 20px;
}
.historique-box .historique-date {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(235, 234, 236);
  color: rgb(109, 106, 113);
  font-size: 12px;
  font-weight: 400;
}
.historique-box .historique-mini-box {
  margin-left: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}
.historique-box .historique-mini-box > div {
  padding: 10px;
}
.historique-box .historique-mini-box div:nth-child(1) {
  color: rgb(121, 118, 125);
  font-weight: 600;
}
.historique-box .historique-mini-box div:nth-child(2) {
  background: rgb(243, 240, 244);
}

.modal-content-user {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  overflow-y: hidden;
  padding-inline: 2rem;
}
.modal-content-user .modal-content-user-search-contain {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  align-items: center;
  margin-top: 10px;
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search {
  display: flex;
  width: 100%;
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain {
  margin-top: 0;
  width: 100%;
  position: relative;
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain
  > input {
  height: 36px;
  border-radius: 4px 0 0 4px;
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain
  > .who-selected {
  position: absolute;
  display: flex;
  max-width: 70%;
  gap: 6px;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  margin-left: 30px;
  overflow: hidden;
  justify-content: end;
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain
  > .user-list-in-search {
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 220px;
  transform: translateY(100%);
  width: 100%;
  flex-direction: column;
  padding: 4px;
  list-style-type: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 0 0 8px 8px;
  outline: none;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  gap: 2px;
  overflow-y: scroll;
  display: none;
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain
  > .user-list-in-search
  > .user-search-result {
  margin: 0;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.88);
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain
  > .user-list-in-search
  > .user-search-result:hover {
  background: rgb(235, 234, 236);
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain
  > .user-list-in-search
  > .user-search-result[data-active="true"] {
  background: rgb(218, 237, 222);
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > .search-contain
  .user-list-in-search.active {
  display: flex !important;
}
.modal-content-user
  .modal-content-user-search-contain
  .modal-content-user-search
  > select {
  border-radius: 0 4px 4px 0;
  border: 1px solid lightgrey;
  padding-inline: 6px;
  border-left: 0;
  height: 36px;
}
.modal-content-user .modal-content-user-search-contain > button {
  display: grid;
  place-content: center;
  font-size: 18px;
  aspect-ratio: 1/1;
  height: 36px;
}
.modal-content-user .affichage-users {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: scroll;
}
.modal-content-user .affichage-users .affichage-user {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f3f3f3;
  padding: 10px 5px;
}
.modal-content-user .affichage-users .affichage-user:first-child {
  border-top: 1px solid #f3f3f3;
}
.modal-content-user .affichage-users .affichage-user .affichage-user-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-content-user
  .affichage-users
  .affichage-user
  .affichage-user-left
  > .pp {
  font-size: 35px;
}
.modal-content-user .affichage-users .affichage-user .affichage-user-left > h4 {
  font-size: 16px;
  font-weight: 600;
  color: rgb(73, 71, 75);
}
.modal-content-user .affichage-users .affichage-user .affichage-user-right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.modal-content-user
  .affichage-users
  .affichage-user
  .affichage-user-right
  > select {
  border-radius: 4px;
  border: 0;
  background: transparent;
  padding-inline: 3px;
  border-left: 0;
}

.modal-content-utility {
  flex: 1 1 0;
  display: flex;
  overflow: hidden;
}

.who-selected {
  display: flex;
  gap: 6px;
}
.who-selected .user-selected-badge {
  border-radius: 20px;
  background: rgb(235, 234, 236);
  width: fit-content;
  display: flex;
  align-items: center;
  padding: 1px 4px 1px 6px;
  font-size: 12px;
  font-weight: 400;
  color: rgb(73, 71, 75);
  flex-shrink: 0;
}
.who-selected .user-selected-badge > button {
  background: rgb(235, 234, 236);
  font-size: 16px;
}
.who-selected .user-selected-badge:hover {
  background: rgb(228, 228, 229);
  cursor: pointer;
}

.dropdown {
  display: none;
  position: fixed;
  max-width: 250px;
  flex-direction: column;
  padding: 4px;
  list-style-type: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 8px;
  outline: none;
  z-index: 10;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
.dropdown li {
  clear: both;
  margin: 0;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.88);
}
.dropdown li p {
  color: rgba(0, 0, 0, 0.88);
  text-decoration: none;
  font-size: 14px;
}
.dropdown li:hover {
  background: rgb(235, 234, 236);
}
.dropdown li.deletable {
  color: rgb(239, 65, 82);
  border-top: 1px solid rgb(235, 234, 236);
}
.dropdown li.deletable p {
  color: rgb(239, 65, 82);
  font-size: 14px;
}
.dropdown li.deletable:hover {
  background: rgb(239, 65, 82);
  color: white;
}
.dropdown li.deletable:hover p {
  color: white;
}
.dropdown.show {
  display: flex;
}
.help {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  max-width: 220px;
  padding: 12px;
  border-radius: 6px;
  top: 50px;
  left: 120px;
  z-index: 100;
  transform-origin: top left;
}
.help-text {
  color: rgba(255, 255, 255, 0.915);
  font-size: 14px;
}
.help.help-active {
  display: block;
  animation: 0.35s popinHelp forwards cubic-bezier(0.32, 0.43, 0.01, 1);
  // transform: translate(-50%, calc(-100% - 10px));
}
@keyframes popinHelp {
  0% {
    transform: scale(0.6) translate(-50%, calc(-100% + 5px));
  }
  100% {
    transform: scale(1) translate(-50%, calc(-100% - 8px));
  }
}

.grid-accueil {
  display: grid;
  grid-template-columns: 80px 1fr clamp(200px, 30%, 400px);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100vh;
}
.grid-accueil .grid-accueil-left {
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 100vh;
}
.grid-accueil .grid-accueil-left .home-left-top {
  padding-top: 40px;
  display: grid;
  place-items: center;
}
.grid-accueil .grid-accueil-left .home-left-top .profil-user {
  display: grid;
  place-items: center;
}
.grid-accueil .grid-accueil-left .home-left-top .profil-user .pp {
  font-size: 35px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  line-height: 0;
  color: rgb(153, 153, 153);
}
.grid-accueil .grid-accueil-left .home-left-top .profil-user p {
  font-size: 10px;
  font-weight: 400;
  color: rgb(73, 71, 75);
  overflow: hidden;
  width: 80%;
  text-align: center;
  margin-top: 5px;
}
.grid-accueil .grid-accueil-left .home-left-top .settings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.grid-accueil .grid-accueil-left .accueil-left-bottom {
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #e8e8e8;
}
.grid-accueil .grid-accueil-left .accueil-left-bottom .logo-bottom-left {
  display: flex;
  align-items: center;
  display: grid;
  place-content: center;
}
.grid-accueil .grid-accueil-left .accueil-left-bottom .logo-bottom-left > img {
  width: 30px;
  height: 30px;
  color: rgb(6, 137, 32);
}
.grid-accueil .grid-accueil-left .accueil-left-bottom .bottom-left-version {
  font-size: 12px;
  font-weight: 400;
  color: rgb(201, 200, 203);
}
.grid-accueil .grid-accueil-center {
  padding: 40px;
  display: flex;
  flex-direction: column;
  transition: 0.1s cubic-bezier(0.32, 0.43, 0.01, 1);
  max-height: 100vh;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.grid-accueil .grid-accueil-center::-webkit-scrollbar {
  display: none;
}
.grid-accueil .grid-accueil-center .accueil-center-top-tuto {
  padding: 20px;
  background: rgb(205, 231, 210);
  border-radius: 8px;
  display: flex;
  align-items: stretch;
  gap: 50px;
  position: relative;
}
.grid-accueil .grid-accueil-center .accueil-center-top-tuto .close-tuto-btn {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 3;
  background: transparent;
}
.grid-accueil .grid-accueil-center .accueil-center-top-tuto .tuto-title-group {
  display: flex;
  gap: 30px;
  flex-direction: column;
  justify-content: space-between;
  max-height: 400px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-tuto
  .tuto-title-group
  > div
  > p {
  margin-top: 10px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-tuto
  .tuto-title-group
  > .btn-primary {
  width: fit-content;
}
.grid-accueil .grid-accueil-center .accueil-center-top-tuto .tuto-img-group {
  position: relative;
  flex: 1 0 300px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-tuto
  .tuto-img-group
  > img {
  position: absolute;
  width: 100%;
  bottom: -30px;
  right: 0;
}
@media screen and (max-width: 1150px) {
  .grid-accueil .grid-accueil-center .accueil-center-top-tuto .tuto-img-group {
    display: none;
  }
}
.grid-accueil .grid-accueil-center .accueil-center-top-triplebox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 0;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box {
  flex: 1 0 200px;
  height: 150px;
  background: rgb(255, 255, 0);
  border-radius: 8px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  text-decoration: none;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box
  > h3 {
  text-align: center;
  width: 15ch;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(1) {
  background: #f8b5b5;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(1)
  > h3 {
  font-size: 16px;
  font-weight: 600;
  color: #942e2e;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(1)
  span {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 99px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ed9e9e;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  z-index: 0;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(1):hover {
  cursor: pointer;
  box-shadow: 0 40px 50px -50px rgba(0, 0, 0, 0.308);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(1):hover
  h3 {
  color: white;
  transform: scale(1.1);
  z-index: 1;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(1):hover
  span {
  border: 200px solid #ed9e9e;
  transform: translate(-50%, -50%) scale(1.1);
}
@media screen and (max-width: 1150px) {
  .grid-accueil
    .grid-accueil-center
    .accueil-center-top-triplebox
    .triplebox-box:nth-child(1):hover
    span {
    border: 300px solid #ed9e9e;
  }
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(2) {
  background: #b5cbf8;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(2)
  > h3 {
  font-size: 16px;
  font-weight: 600;
  color: #254485;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(2)
  span {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 99px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #96aedf;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  z-index: 0;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(2):hover {
  cursor: pointer;
  box-shadow: 0 40px 50px -50px rgba(0, 0, 0, 0.308);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(2):hover
  h3 {
  color: white;
  transform: scale(1.1);
  z-index: 1;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(2):hover
  span {
  border: 200px solid #96aedf;
  transform: translate(-50%, -50%) scale(1.1);
}
@media screen and (max-width: 1150px) {
  .grid-accueil
    .grid-accueil-center
    .accueil-center-top-triplebox
    .triplebox-box:nth-child(2):hover
    span {
    border: 300px solid #96aedf;
  }
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(3) {
  background: #f8e9b5;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(3)
  > h3 {
  font-size: 16px;
  font-weight: 600;
  color: #824b0c;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(3)
  span {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 99px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #d9cd9b;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  z-index: 0;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(3):hover {
  cursor: pointer;
  box-shadow: 0 40px 50px -50px rgba(0, 0, 0, 0.308);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(3):hover
  h3 {
  color: white;
  transform: scale(1.1);
  z-index: 1;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-top-triplebox
  .triplebox-box:nth-child(3):hover
  span {
  border: 200px solid #d9cd9b;
  transform: translate(-50%, -50%) scale(1.1);
}
@media screen and (max-width: 1150px) {
  .grid-accueil
    .grid-accueil-center
    .accueil-center-top-triplebox
    .triplebox-box:nth-child(3):hover
    span {
    border: 300px solid #d9cd9b;
  }
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .btn-picto-project {
  color: rgb(109, 106, 113);
  place-content: center;
  aspect-ratio: 1/1;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .search-contain2 {
  margin-top: 0;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .search-contain2
  > input {
  height: 36px;
  background: #f8f9fa;
  border: 0;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .search-contain2
  #vidage-input {
  display: none;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle {
  display: flex;
  justify-content: space-between;
  background: white;
  z-index: 10;
  position: sticky;
  transition: 0.1s cubic-bezier(0.32, 0.43, 0.01, 1);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle
  .projects-tittle-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle
  .projects-tittle-left
  h2 {
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle
  .projects-tittle-left
  > .btn-project-checked {
  background: #e4efff;
  color: #506eec;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle
  .projects-tittle-left
  > .btn-project-checked:hover {
  background: #d6e5ff;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle
  .projects-tittle-left
  > .btn-project-checked:active {
  background: #bed1f1;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle
  .projects-tittle-left
  > .btn-project-checked[data-active="false"] {
  display: none;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-tittle
  .project-tittle-right {
  display: flex;
  gap: 10px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 20px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-radius: 8px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-left {
  display: flex;
  gap: 15px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-left
  .project-tittle {
  text-decoration: none;
  display: flex;
  align-items: center;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-left
  .project-tittle
  .badge-container {
  width: 50px;
  border-right: 1px solid rgb(228, 228, 229);
  margin-right: 10px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-left
  .project-tittle
  > h3 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-right
  .project-date {
  font-size: 12px;
  font-weight: 600;
  color: rgb(161, 159, 164);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-right
  button {
  color: rgb(59, 58, 61);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-right
  .add-to-comparison[data-selected="true"] {
  color: rgb(5, 123, 29);
  background: rgb(205, 231, 210);
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project
  .project-right
  .add-to-comparison.reveal {
  animation: reveal 1s 3 cubic-bezier(0.32, 0.43, 0.01, 1);
}
@keyframes reveal {
  0% {
    box-shadow: 0 0 0px 0px rgb(30, 164, 30);
  }
  100% {
    box-shadow: 0 0 0px 7px rgba(30, 164, 30, 0);
  }
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project:hover {
  background: #f8f9fa;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project.cbx-checked {
  background: #e4efff;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project.cbx-checked
  button {
  background: #d6e5ff;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project.cbx-checked
  button:hover {
  background: #c2d8ff;
}
.grid-accueil
  .grid-accueil-center
  .accueil-center-projects-container
  .projects-list
  .project.cbx-checked:hover {
  background: #d6e5ff;
}
@media screen and (max-width: 1150px) {
  .grid-accueil
    .grid-accueil-center
    .accueil-center-projects-container
    .projects-tittle {
    flex-direction: column;
    gap: 10px;
  }
}
.grid-accueil .grid-accueil-right {
  border-left: 1px solid #e8e8e8;
  padding: 40px;
  max-height: 100vh;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.grid-accueil .grid-accueil-right::-webkit-scrollbar {
  display: none;
}
.grid-accueil .grid-accueil-right h2 {
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
}
.grid-accueil .grid-accueil-right .comparison-drop-box {
  position: relative;
  margin: 15px 0 10px 0;
  width: 100%;
  min-height: 160px;
  border-radius: 8px;
  border: 3px dashed rgb(201, 200, 203);
  transition: 0.2s cubic-bezier(0.32, 0.43, 0.01, 1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grid-accueil .grid-accueil-right .comparison-drop-box .comparison-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 10px;
}
.grid-accueil
  .grid-accueil-right
  .comparison-drop-box
  .comparison-item
  .comparison-item-left
  .comparison-item-title {
  display: flex;
  align-items: center;
}
.grid-accueil .grid-accueil-right .comparison-drop-box:hover {
  border: 3px dashed rgb(81, 172, 99);
  background: rgb(251, 252, 255);
  cursor: pointer;
}
.grid-accueil .grid-accueil-right .comparison-drop-box .empty-drop-zone {
  position: absolute;
  display: grid;
  place-content: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 10px;
  color: rgb(201, 200, 203);
  font-size: 16px;
  user-select: none;
  width: 100%;
  height: 100%;
}
.grid-accueil .grid-accueil-right button {
  width: 100%;
}
.grid-accueil .grid-accueil-right hr {
  margin: 20px 0;
}
.grid-accueil .grid-accueil-right h3 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
}
.grid-accueil .grid-accueil-right .comparisons {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.grid-accueil .grid-accueil-right .comparisons .comparison {
  display: block;
  text-decoration: none;
  color: black;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
  margin-bottom: 15px;
}
.grid-accueil .grid-accueil-right .comparisons .comparison .comparison-title {
  margin-bottom: 10px;
}
.grid-accueil
  .grid-accueil-right
  .comparisons
  .comparison
  .comparison-title
  h3 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
}
.grid-accueil .grid-accueil-right .comparisons .comparison > div {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 3;
}
.grid-accueil .grid-accueil-right .comparisons .comparison > div h4 {
  font-size: 12px;
  font-weight: 600;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 60%;
  white-space: nowrap;
}
.grid-accueil .grid-accueil-right .comparisons .comparison > svg {
  z-index: 2;
  position: absolute;
  right: -60px;
  bottom: -40px;
  font-size: 200px;
  color: rgb(208, 140, 206);
  transition: 0.4s cubic-bezier(0.32, 0.43, 0.01, 1);
}
.grid-accueil .grid-accueil-right .comparisons .comparison:hover {
  cursor: pointer;
  box-shadow: 0 40px 40px -40px rgba(0, 0, 0, 0.308);
  transform: scale(1.02);
}

.cbx {
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098a9;
  transition: all 0.2s ease;
}
.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506eec;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.cbx:hover span:first-child {
  border-color: #506eec;
}

.inp-cbx:checked + .cbx span:first-child {
  background: #506eec;
  border-color: #506eec;
  animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}
label {
  cursor: inherit;
}

.container-segmented {
  background: rgb(246, 246, 246);
  border-radius: 4px;
  margin: 0;
  padding: 3px;
  border: none;
  outline: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 36px;
}
.container-segmented .option {
  position: relative;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.container-segmented .option:hover input:not(:checked),
.container-segmented .option:active input:not(:checked),
.container-segmented .option:focus input:not(:checked) {
  background: rgb(228, 228, 228);
}
.container-segmented .option:active input:not(:checked) + label span {
  transform: scale(0.95);
}
.container-segmented .option input:checked + label span {
  color: rgb(6, 137, 32);
}
.container-segmented .option label {
  position: relative;
  display: block;
  text-align: center;
  padding: 3px 10px;
  font-weight: 500;
  color: rgb(161, 159, 164);
  font-size: 14px;
}
.container-segmented .option:first-of-type {
  grid-column: 1;
  grid-row: 1;
  box-shadow: none;
}
.container-segmented .option:first-of-type label::before {
  opacity: 0;
}
.container-segmented .option:last-of-type label::after {
  opacity: 0;
}
.container-segmented .option input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}
.container-segmented .option input:hover {
  cursor: pointer;
}
.container-segmented .option input:active {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}
.container-segmented .option input:focus {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}
.container-segmented .selection {
  background: white;
  border-radius: 4px;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  will-change: transform;
  transition: transform 0.2s ease;
}
.container-segmented .option label span {
  display: block;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
  will-change: transform;
}
.container-segmented .option input:checked + label {
  cursor: default;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
}

.height-full {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  appearance: textfield;
}

.sb {
  display: flex;
  justify-content: space-between;
}

.close-button {
  transition: 0.15s ease-out;
  cursor: pointer;
  border: 0;
  font-size: 18px;
  border-radius: 4px;
  display: flex;
  place-content: center;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 3px;
  background: white;
  color: gray;
}

.close-button-modal {
  transition: 0.15s ease-out;
  cursor: pointer;
  border: 0;
  font-size: 18px;
  border-radius: 4px;
  display: flex;
  place-content: center;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 3px;
  background: white;
  color: gray;
}

.close-button-modal:hover {
  background: rgb(228, 228, 228);
  color: rgb(0, 0, 0);
}

.close-button-modal:active {
  background: rgb(198, 198, 198);
}

.close-button:hover {
  background: rgb(228, 228, 228);
  color: rgb(0, 0, 0);
}

.close-button:active {
  background: rgb(198, 198, 198);
}

#my-input-container {
  display: inline-block;
  position: relative;
  font: 12px arial;
}

#my-input {
  font: inherit;
}

#my-suffix {
  position: absolute;
  left: 0;
  top: 3px;
  color: #555;
  padding-left: 5px;
  font: inherit;
}

/*# sourceMappingURL=main.init.css.map */

/** 
FLO ADDS 
Need to be integrated with SCSS
*/

.box-info {
  padding: 0;
  overflow: hidden;
}

.box-info .box-info-1 {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  text-align: center;
  padding: 8px;
}

.box-info .box-info-2 {
  margin-top: 30px;

  .single-score,
  .double-score {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .double-score {
    justify-content: center;

    .reference-score {
      padding-right: 15px;

      svg {
        opacity: 0;
      }
    }

    .simulation-score {
      padding-left: 15px;
    }

    .score {
      flex-shrink: 0;
      flex-grow: 1;
      flex-basis: 50%;
      min-width: 50%;
      width: 50%;
      max-width: 50%;
      height: 100%;
      text-align: center;
      box-sizing: border-box;

      .value {
        display: inline-block;
        width: 100%;
        font-weight: bold;
      }

      .lock-icon {
        display: inline-block;
        margin-top: 8px;
        fill: rgb(201, 200, 203);
        transform: scale(1.6);
      }
    }
  }

  .hidden-element {
    display: none;
  }
}

.box-info .box-info-3 {
  padding: 0px 8px 8px 0px;
  margin: 0;
  font-size: 13px;
}

.box-info .box-info-3 .box-info-chips {
  padding: 4px 5px;
}

.box-info .chart {
  height: 73%;
  bottom: 0;
}

#select-box-help-message {
  position: fixed;
  top: 60px;
  left: 0;
  display: none;
  width: 100vw;
  font-size: 30px;
  color: white;
  text-align: center;
  z-index: 9999;
}

#add-manual-extrapolation {
  margin-left: 7px;
}

#adjustments-block,
.stat-pep-add {
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  // border: 1px #e7e7e7 solid;
}
.stat-pep-add:empty {
  padding: 0;
}
#adjustments-block .adjustments-inputs {
  display: flex;
  flex-direction: column;
}

#adjustments-block .adjustments-inputs .line {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

#adjustments-block .adjustments-inputs .line:last-of-type {
  margin: 0;
}

#adjustments-block .adjustments-inputs .line .form-item:first-of-type {
  margin-right: 10px;
}

#modal-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  text-align: center;

  .background {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px);
    z-index: 100;
  }

  #modal-form {
    display: inline-block;
    background-color: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    bottom: 100vh;
    margin-top: 50px;
    overflow: hidden;
    min-width: 600px;
    width: 80vw;
    max-width: 1200px;
    max-height: 90vh;

    .form-head {
      display: block;
      width: 100%;
      height: 35px;
      padding-bottom: 10px;
      text-align: right;

      svg {
        display: inline-block;
        cursor: pointer;
        animation: blurCancelIcon 0.1s cubic-bezier(0.34, 0.49, 0.59, 0.79);

        &:hover {
          transform: scale(1.5);
          animation: hoverCancelIcon 0.1s cubic-bezier(0.34, 0.49, 0.59, 0.79);
        }
      }
    }

    .form-body {
      max-height: 80vh;
      overflow-x: hidden;
      overflow-y: auto;

      .form-title {
        display: block;
        margin-bottom: 20px;

        &:after {
          content: "";
          display: inline-block;
          width: 50px;
          height: 4px;
          border-radius: 50px;
          background-color: rgb(6, 137, 32);
        }

        h2 {
          font-weight: normal;
          font-size: 20px;
          display: block;
          padding: 0;
          cursor: default;
        }
      }

      .form-instruction,
      .form-information {
        padding: 0px 15px 5px;
        font-size: 18px;
        text-align: left;
        cursor: default;

        svg {
          display: inline-block;
          vertical-align: middle;
        }
      }

      .form-instruction {
        font-weight: bold;
      }

      .form-section {
        display: block;
        width: 100%;
        padding: 3px;
        margin-bottom: 15px;

        .input-text-large,
        .select-large {
          display: block;
          width: 100%;
          height: 45px;
          text-align: left;
          background-color: transparent;
          padding: 0px 15px;
          font-size: 16px;
        }

        .input-with-unit {
          display: flex;
          flex-direction: row;
          align-items: stretch;
          width: 100%;
          height: 45px;

          input {
            flex-grow: 1;
            height: 100%;
            background-color: transparent;
            padding: 0px 15px;
            font-size: 16px;
            text-align: left;
            border-radius: 6px 0px 0px 6px;
          }

          span {
            flex-basis: 10%;
            height: 100%;
            background-color: rgba(245, 245, 245, 1);
            font-size: 16px;
            color: rgba(120, 120, 120, 1);
            padding: 11px 15px;
            text-align: right;
            border-radius: 0px 6px 6px 0px;
            border: 1px rgba(180, 180, 180, 1) solid;
            border-left: 0;
          }
        }
      }
    }

    .form-footer {
      display: block;
      padding: 3px;
      margin-top: 15px;
      text-align: right;

      .form-button-1,
      .form-button-2,
      .form-button-3 {
        color: white;
        display: inline-block;
        margin-left: 10px;
        font-size: 18px;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        padding: 10px 15px;
        border: 0;
        outline: 0;
      }

      .form-button-1 {
        background-color: rgb(5, 103, 24);

        &:hover {
          background-color: rgb(6, 137, 32);
        }
      }

      .form-button-2 {
        background-color: rgb(160, 15, 27);

        &:hover {
          background-color: rgb(196, 45, 57);
        }
      }

      .form-button-3 {
        background-color: rgb(125, 125, 125);

        &:hover {
          background-color: rgb(140, 140, 140);
        }
      }
    }

    .form-loader {
      display: inline-block;

      .dots {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;

        div {
          position: absolute;
          top: 33px;
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: rgba(30, 160, 100, 1);
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
        }
        div:nth-child(1) {
          left: 8px;
          animation: login-loading1 0.6s infinite;
        }
        div:nth-child(2) {
          left: 8px;
          animation: login-loading2 0.6s infinite;
        }
        div:nth-child(3) {
          left: 32px;
          animation: login-loading2 0.6s infinite;
        }
        div:nth-child(4) {
          left: 56px;
          animation: login-loading3 0.6s infinite;
        }
      }
    }
  }
}

@keyframes hoverCancelIcon {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
@keyframes blurCancelIcon {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes login-loading1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes login-loading3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes login-loading2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

#search-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 100%;
  max-width: 100%;

  .search-bar {
    display: block;
    width: 100%;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    overflow: hidden;
    text-align: right;
    border-radius: 6px;
    background-color: white;
    padding: 3px;

    input {
      display: block;
      width: 100%;
      height: 100%;
      text-align: left;
      background-color: transparent;
      position: relative;
      z-index: 1;
      padding: 0px 15px;
      font-size: 16px;
    }

    svg {
      display: inline-block;
      position: relative;
      bottom: 34px;
      right: 10px;
    }
  }

  .search-table {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 3px;
    margin-top: 15px;
    text-align: left;
    flex-grow: 1;
    overflow: hidden;

    .scrollable-table {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      height: 100%;
      border: 1px solid lightgrey;
      border-radius: 6px;
      overflow-y: auto;
      overflow-x: hidden;

      table {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        table-layout: fixed;

        th,
        td {
          padding: 10px;
        }

        .th-radio {
          max-width: 50px;
          min-width: 50px;
          width: 50px;
        }

        tr {
          border-bottom: 1px rgba(240, 240, 240, 1) solid;
          width: 100%;
          min-width: 100%;
          max-width: 100%;
          cursor: pointer;

          th:first-of-type {
            padding-left: 15px;
          }
          td:first-of-type {
            padding-left: 5px;
          }
        }

        thead {
          position: sticky;
          top: 0px;
          background-color: rgba(245, 245, 245, 1);
          cursor: pointer;
          width: 100%;
          min-width: 100%;
          max-width: 100%;

          th {
            white-space: nowrap;
          }

          .sort-th {
            display: inline-block;
            vertical-align: middle;
            margin-left: 4px;
            border-radius: 4px;
            padding: 6px 6px 4px;

            &:hover {
              background-color: white;
              box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
            }
          }
        }

        tbody {
          width: 100%;
          min-width: 100%;
          max-width: 100%;

          tr {
            &:hover {
              background-color: rgb(246, 255, 248);
              box-shadow: 3px 0px 0px rgb(59, 161, 81) inset;
            }

            &:last-of-type {
              border-bottom: 0;
            }
          }

          .tr-selected {
            background-color: rgb(246, 255, 248);
            box-shadow: 3px 0px 0px rgb(59, 161, 81) inset;
            font-weight: bold;
          }

          td {
            padding: 0px;

            label {
              display: block;
              padding: 10px;
              width: 100%;
              height: 100%;
              cursor: pointer;
            }
          }

          .td-radio {
            padding: 7px 0px 3px 15px;

            div {
              display: inline-block;
              margin-left: 10px;
              width: 20px;
              height: 20px;
              overflow: hidden;
              border: 1px rgb(143, 143, 143) solid;
              border-radius: 5px;
              cursor: pointer;

              &:hover {
                border: 1px rgb(5, 123, 29) solid;
              }

              input,
              span {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
                cursor: pointer;
              }

              input {
                z-index: 1;
                opacity: 0;

                &:checked ~ span {
                  opacity: 1;
                }
              }

              span {
                z-index: 0;
                bottom: 18px;
                background-color: rgb(32, 183, 62);
                box-shadow: 0px 0px 0px 2px white inset;
                border-radius: 5px;
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }
}

.search-block-in-page {
  height: 100%;
}

.search-block-in-form {
  min-height: 350px;
  height: 350px;
  max-height: 350px;
}

.simple-page-container {
  padding: 30px 0px;
  overflow: hidden;
  display: flex;
  flex-direction: row !important;
  gap: 30px;
}
.simple-page-left {
  flex: 3;
  display: flex;
}
.simple-page-right {
  position: relative;
  flex: 1;
  display: flex;
  border-radius: 8px;
  border: 1px solid lightgrey;
  background: #f8f9fa;
  transition: 0.2s cubic-bezier(0.32, 0.43, 0.01, 1);
  padding: 20px;

  .informations {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    overflow-y: scroll;
  }

  .information-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .information-name {
    font-size: 32px;
    min-height: 120px;
  }

  .information-rubrique {
    margin-top: 15px;

    p {
      font-weight: 400;
      font-size: 16px;
      color: rgb(129, 129, 129);
    }
    h5 {
      font-size: 18px;
      margin-top: 2px;
    }
  }
  .space-btw {
    display: flex;
    justify-content: space-between;

    .information-rubrique {
      flex: 1;
    }
  }

  .information-bottom {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 20px;

    > div {
      background: rgb(255, 255, 255);
      border: 1px solid rgb(231, 229, 229);

      .box-info-1 {
        background: #f8f9fa;
      }
      .box-info-bottom {
        flex: 1;
        display: grid;
        place-content: center;
        font-size: 20px;
      }
    }
  }
}
.empty-drop-zone {
  position: absolute;
  display: grid;
  place-content: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 10px;
  color: #c9c8cb;
  font-size: 16px;
  user-select: none;
  width: 100%;
  height: 100%;
}

#container-existing-product,
#container-material-services {
  border-top: 1px rgba(0, 0, 0, 0.15) solid;
  padding: 8px 3px;
  overflow: auto;

  .modelling-component {
    text-align: right;
    margin-bottom: 5px;

    .component-quantity {
      display: inline-block;
      background-color: rgba(60, 60, 60, 1);
      color: white;
      font-size: 10px;
      font-weight: bold;
      padding: 3px 6px 2px 9px;
      margin: 0px 15px 0px;
      border-top-left-radius: 8px 15px;
      border-top-right-radius: 4px;
    }

    .component-block {
      display: flex;
      flex-direction: row;
      text-align: left;
      border-radius: 5px;
      background-color: white;
      padding: 15px;
      border-top: 3px rgba(60, 60, 60, 1) solid;
      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.05);
      margin: 0;
      cursor: default;

      .component-information {
        flex-grow: 1;
        padding: 0px 10px 0px 0px;

        .component-type {
          display: inline-block;
          padding: 3px 7px;
          margin-bottom: 10px;
          border-radius: 50px;
          font-size: 12px;
          background-color: rgba(0, 0, 0, 0.2);
          color: rgba(60, 60, 60, 1);
        }

        .component-impact {
          display: inline-block;
          vertical-align: middle;
          border-radius: 50px;
          font-size: 12px;
          margin: 10px 0px 0px 0px;
          background-color: rgb(221, 251, 241);
          word-break: keep-all;
          white-space: nowrap;

          .absolute-value {
            display: inline-block;
            box-shadow: 0px 0px 0px 2px white;
            padding: 3px 7px;
            border-radius: 50px;
            background-color: rgb(185, 247, 226);
            color: rgb(67, 142, 117);

            span {
              color: #1e5d48;
            }
          }

          .relative-value {
            display: inline-block;
            padding: 3px 7px;
            border-radius: 50px;
            background-color: rgb(221, 251, 241);
            color: rgb(67, 142, 117);
          }
        }

        .help-toggle {
          display: inline-block;
          vertical-align: middle;
          margin: 14px 0px 0px 0px;

          svg {
            opacity: 0.6;
          }
        }

        .component-name {
          font-size: 14px;
        }

        .component-supply {
          svg {
            vertical-align: middle;
            margin-right: 2px;
          }

          span {
            vertical-align: middle;
            font-size: 13px;
            font-style: italic;
            color: rgba(150, 150, 150, 1);
          }
        }
      }

      .component-edit-button {
        min-width: 60px;
        width: 60px;
        max-width: 60px;
        padding: 0px 0px 0px 10px;
        border-left: rgba(0, 0, 0, 0.02) solid;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        svg {
          display: block;
          border-radius: 4px;
          background-color: rgba(0, 0, 0, 0.05);
          padding: 8px;
        }

        &:hover svg {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .form-item {
    display: flex;
    flex-direction: row;
    border: 1px rgba(0, 0, 0, 0.1) solid;
    border-radius: 8px;
    margin-top: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);

    .form-item-left {
      flex-grow: 1;

      input {
        margin-top: 5px;
      }
    }

    .form-item-align {
      flex-grow: 1;
      min-width: 50px;
      width: 50px;
      max-width: 50px;
      text-align: center;

      .close-button {
        width: 50px;
        height: 50px;
        margin-top: 5px;
      }
    }
  }
}
/* END OF ADDS */
/* END OF ADDS */

input[type="checkbox"] {
  height: fit-content;
}

.checkbox {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border: 1px solid #999;
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}

.checkbox.selected {
  background-color: #007bff;
}

.container-segmented {
  gap: 5px;
}
.filter-project {
  display: grid;
  place-content: center;
  text-align: center;
  padding: 3px 10px;
  font-weight: 500;
  color: #a19fa4;
  font-size: 14px;
  border-radius: 4px;
  height: 100%;
}
.filter-project:hover {
  background: #e4e4e4;
  cursor: pointer;
}
.filter-project.selected {
  color: #26883a;
  background: white;
}
.filter-project-list {
  display: grid;
  place-content: center;
  text-align: center;
  padding: 3px 10px;
  font-weight: 500;
  color: #a19fa4;
  font-size: 14px;
  border-radius: 4px;
  height: 100%;
}
.filter-project-list:hover {
  background: #e4e4e4;
  cursor: pointer;
}

.filter-project-list.selected {
  color: #26883a;
  background: white;
}
.filter-project-edit {
  display: grid;
  place-content: center;
  text-align: center;
  padding: 3px 8px;
  font-weight: 500;
  color: #a19fa4;
  font-size: 16px;
  border-radius: 4px;
  height: 100%;
  border: 0;
  background: #f6f6f6;

  &:hover {
    color: #26883a;
    background: white;
    cursor: pointer;
  }
  &:active {
    transform: scale(0.9);
  }
}

.filter-btn {
  font-weight: 500;
  color: #a19fa4;
  font-size: 12px;
}

.btn-delete {
  color: #ef4152;
  background-color: #ffe1e4;

  &:hover {
    background-color: #f8cbd0;
  }
  &:active {
    background-color: #f0b1b8;
  }
}

.nav-setting-project {
  padding-inline: 20px;
  height: 80%;
  display: none !important;
}
.container-segmented {
  background: rgb(246, 246, 246);
  border-radius: 4px;
  margin: 0;
  padding: 3px;
  border: none;
  outline: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 36px;
}

.ml-10 {
  margin-left: 10px;
}
.mt-10 {
  margin-top: 10px;
}
#mini-modal-container {
  z-index: 49;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.mini-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  max-width: 450px;
  min-height: 250px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 200;
  border-radius: 8px;
  display: none;
  flex-direction: column;
  justify-content: space-between;

  .modal-header {
    padding-inline: 3rem;
    margin-bottom: 50px;
  }
  .modal-content {
    padding-inline: 20px;
  }
  .modal-bottom {
    padding: 20px;
  }
}
.disclaimer-delete-project {
  font-size: 14px;
  color: #79767d;
  margin-bottom: 20px;

  span {
    font-weight: bold;
    color: #272727;
  }
}

input.error {
  border: 1px solid red;

  &:focus-within {
    box-shadow: 0 0 0 3px rgba(101, 0, 2, 0.29);
  }
  &::placeholder {
    color: red;
  }
}

.box-info .box-info-3 {
  .chips-neutral {
    background-color: #e8e8e8;
    color: #5c5c5c;
  }

  .chips-decrease {
    background-color: #d2f5d0;
    color: #28a21f;
  }

  .chips-increase {
    background-color: #f8dae2;
    color: #ac151a;
  }
}

.simulation-page {
  .box-info:first-of-type {
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.02),
      0px 0px 0px 3px rgba(0, 0, 0, 0.05);
  }

  .box-info:last-of-type {
    border: 2px rgba(0, 0, 0, 0.1) dashed;
  }
}

.modelling-page {
  .container-rest {
    display: flex;
    flex-direction: row;

    .left-side {
      flex-grow: 1;
      padding-top: 30px;

      .pre-prop {
        display: flex;
        flex-direction: column;
        min-height: 0;

        .ref-PEP {
          min-height: 130px;
          height: 130px;
          max-height: 130px;
        }

        .prop {
          display: flex;
          flex-direction: row;
          min-height: 0;

          .prop-1,
          .stat-pep-add-pre {
            flex-basis: 0;
            flex-grow: 1;
            padding-bottom: 30px;
            min-height: 0;

            .ref-BOM {
              display: flex;
              flex-direction: column;
              width: 100%;
              height: 100%;
              min-height: 0;

              .ref-BOM-title {
                min-height: 35px;
                height: 35px;
                max-height: 35px;
              }

              #container-existing-product,
              #container-material-services {
                min-height: 0;
                flex-grow: 1;
                margin-top: 15px;
              }
            }
          }
        }
      }
    }

    .right-side {
      display: flex;
      flex-direction: column;
      min-width: 400px;
      width: 40%;
      padding: 0px 0px 30px 40px;

      .box-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        min-height: 300px;
        height: 300px;
        max-height: 300px;
        margin-top: 20px;

        .hidden-element {
          display: none;
        }

        .box-info-wrapper {
          flex-grow: 1;
          flex-basis: 0;
          min-width: 30%;
          min-height: 50%;
          height: 50%;
          max-height: 50%;
          padding: 10px;

          .hidden-element {
            display: none;
          }

          .box-info {
            height: 100%;

            .hidden-element {
              display: none;
            }

            .transparent-element {
              opacity: 0;
            }

            .box-info-1 {
              padding: 3px;
              height: 27%;

              h5 {
                font-size: 14px;

                .help-toggle {
                  margin: 0;

                  svg {
                    opacity: 0.6;
                  }
                }
              }

              p {
                font-size: 9px;
                margin-top: 1px;
              }
            }

            .box-info-2 {
              margin-top: 15px;
              height: 47px;

              .score .value {
                font-size: 11px;
                font-weight: normal;
              }

              .single-score {
                display: block;
                width: 100%;
                text-align: center;
                margin: 0;
                padding: 0;
              }

              .hidden-element {
                display: none;
              }

              .single-score .value {
                font-size: 16px;
                position: relative;
                bottom: 15px;
              }

              .reference-score {
                padding-right: 10px;
              }

              .simulation-score {
                padding-left: 10px;
              }
            }

            .box-info-3 {
              font-size: 8px;
              padding: 2px;

              svg {
                width: 8px;
                position: relative;
              }
            }
          }

          &:first-of-type .box-info {
            box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.02),
              0px 0px 0px 3px rgba(0, 0, 0, 0.05);
          }

          &:last-of-type .box-info {
            border: 2px rgba(0, 0, 0, 0.1) dashed;
          }
        }
      }

      .graph {
        flex-grow: 1;
      }
    }
  }
}

#unlock-work-area-button,
#lock-work-area-button {
  position: relative;
  //margin-right: 25px;
  height: 32px;
  max-height: 32px;
  width: 32px;
  max-width: 32px;
}

#unlock-work-area-button {
  animation: highlight-button 3s ease-out infinite;
}

#work-area-glass {
  position: absolute;
  z-index: 999;
  background-color: white;
  opacity: 0.02;
  background: repeating-linear-gradient(
    -45deg,
    black,
    black 5px,
    white 5px,
    white 25px
  );
  width: 100vw;
  height: 100%;
  left: 0;
  cursor: default;
}

.highlight-button {
  z-index: 999999;
}

@keyframes highlight-button {
  0% {
    box-shadow: 0px 0px 0px 0px #26883a;
  }
  20% {
    box-shadow: 0px 0px 0px 20px transparent;
  }
  100% {
    box-shadow: 0px 0px 0px 20px transparent;
  }
}

.waiting-blocks {
  border-radius: 4px;
  height: 30px;
  background-color: white;
  margin: 10px 0px;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
  animation: waiting-block 0.6s infinite;

  &:after {
    content: "";
    display: block;
    border-radius: 4px;
    height: 30px;
    background-color: white;
    margin: 10px 0px;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
    position: relative;
    top: 40px;
    animation: waiting-block 0.6s infinite;
  }
}

@keyframes waiting-block {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.hidden-element {
  display: none;
}

.no-component-info {
  color: grey;
  font-size: 14px;
  font-style: italic;
  padding: 15px 0px;
}

#energy-select {
  width: 100%;
  min-height: 40px;
  max-height: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid lightgrey;
  padding-left: 8px;
  background-color: white;
}

#rename-project-button {
  margin-left: 10px;
}

.fake-snackbar-container {
  position: absolute;
  box-sizing: border-box;
  right: 10px;
  top: 90%;
  width: 344px;
}

.conversion {
  display: block;
  text-align: right;
  padding: 0;

  div {
    display: inline-block;
    height: 20px;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 50px;
    color: white;
    position: relative;
    bottom: 7px;
  }

  .bg-grey {
    background-color: grey;
  }

  .bg-green {
    background-color: green;
  }

  .bg-red {
    background-color: red;
  }
}