@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
   /* --notification-background: #313e2c; */
   --notification-background: #eeeeee;
   --notification-primary: #9bc96f;
   --background: #faf9ff;
}

.lato-thin {
   font-family: "Lato", sans-serif;
   font-weight: 100;
   font-style: normal;
}

.lato-light {
   font-family: "Lato", sans-serif;
   font-weight: 300;
   font-style: normal;
}

.lato-regular {
   font-family: "Lato", sans-serif;
   font-weight: 400;
   font-style: normal;
}

.lato-bold {
   font-family: "Lato", sans-serif;
   font-weight: 700;
   font-style: normal;
}

.lato-black {
   font-family: "Lato", sans-serif;
   font-weight: 900;
   font-style: normal;
}

.lato-thin-italic {
   font-family: "Lato", sans-serif;
   font-weight: 100;
   font-style: italic;
}

.lato-light-italic {
   font-family: "Lato", sans-serif;
   font-weight: 300;
   font-style: italic;
}

.lato-regular-italic {
   font-family: "Lato", sans-serif;
   font-weight: 400;
   font-style: italic;
}

.lato-bold-italic {
   font-family: "Lato", sans-serif;
   font-weight: 700;
   font-style: italic;
}

.lato-black-italic {
   font-family: "Lato", sans-serif;
   font-weight: 900;
   font-style: italic;
}

aside {
   background: #fff;
   width: 370px;
   height: 100vh;
   position: fixed;
   transition: 0.3s;
   right: -370px;
   top: 0;
   transition-timing-function: cubic-bezier(0.9, 0, 1, 1);
   z-index: 999;
   /* border: 2px red solid; */
}

aside.close {
   right: 0;
   transition: 0.3s;
   transition-timing-function: cubic-bezier(0.9, 0, 1, 1);
}

.menu-cart {
   display: flex;
   height: 24px;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   justify-items: center;
   color: #000;
   margin-top: 40px;
   padding: 15px 20px 20px 20px;
   border-bottom: 1px #c6c6c6 solid;
   font-size: 18px;
}

.menu-cart p {
   display: flex;
   margin: 0;
}

.menu-cart-send {
   display: flex;
   height: 24px;
   align-items: center;
   justify-items: center;
   color: #000;
   margin-top: 20px;
   padding: 15px 20px 20px 20px;
   border-bottom: 1px #c6c6c6 solid;
   font-size: 18px;
}

.menu-cart-send p {
   display: flex;
   margin: 0;
}

.menu-cart i {
   font-size: 20px;
   font-weight: 500;
   cursor: pointer;
}

.products-cart {
   display: flex;
   flex-direction: column;
   padding: 10px;
   height: 70vh;
   overflow-y: auto;
   gap: 0.5rem; /* 8px */
}

.product-card-item {
   display: flex;
   flex-direction: column;
   height: 72px;
   width: 100%;
}

.total-cart {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 15px 20px 0 20px;
   border-top: 1px #c6c6c6 solid;
   border-bottom: 1px #c6c6c6 solid;
}

.totalCartDetail {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.totalCart {
   width: max-content;
   height: 1.3rem;
}

.total-cart p {
   font-size: 1.3rem;
}

.send-cotacao {
   display: flex;
   justify-content: center;
   padding: 20px;
}

.fa-circle-xmark {
   color: rgb(100 116 139);
}

.fa-circle-xmark:hover {
   color: rgb(30 41 59);
}

.btn-remove {
   right: 0.5rem;
   position: absolute;
   top: 0;
   background-color: transparent !important;
   background-image: none !important;
   border: none;
   font-family: inherit;
   font-feature-settings: inherit;
   font-variation-settings: inherit;
   font-size: 100%;
   font-weight: inherit;
   line-height: inherit;
   color: inherit;
   margin: 0;
   padding: 0;
}

article {
   display: flex !important;
   background-color: rgb(241 245 249);
   border-radius: 0.5rem;
   position: relative;
   padding: 0.25rem;
}

article img {
   border-radius: 0.5rem;
   height: 6rem;
}

.product-title {
   color: rgb(15 23 42);
   font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
   padding-left: 5px;
   padding-right: 20px;
   width: 100%;
}

.product-card {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 75%;
}

.btn-actions {
   display: flex;
   color: rgb(2 6 23);
   align-items: center;
   align-content: center;
   justify-items: center;
   bottom: 0;
   right: 0.5rem;
   width: max-content;
   height: 1.3rem;
}

.btn-actions p {
   display: flex;
   margin: 0;
}

.btn-actions button {
   display: flex;
   background-color: transparent !important;
   background-image: none !important;
   border: none;
   font-weight: bold;
   font-size: 20px;
   height: 1.3rem;
   align-items: center;
}

.product-price {
   display: flex;
   flex-direction: row;
   color: rgb(21 128 61);
   font-size: 1.125rem;
   line-height: 1.3rem;
   padding-left: 5px;
   width: max-content;
}

.product-supplier {
   color: rgb(148 163 184);
   font-size: 0.75rem;
   line-height: 1rem;
   padding-left: 5px;
}

.product-cart {
   display: flexbox;
   flex-direction: column;
   justify-content: space-between;
   padding: 0.5rem; /* 8px */
}

button,
[role="button"] {
   cursor: pointer;
}
:disabled {
   cursor: default;
}

/* Notifications */

.notification {
   display: none;
   position: fixed;
   /* width: max-content; */
   max-width: 350px;
   height: 115px;
   /* left: 0; */
   right: 1rem;
   top: 7rem;
   margin-left: auto;
   margin-right: auto;
   border-radius: 0.375rem;
   background-color: var(--notification-background);
   color: #000;
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
   transform: translateY(1.875rem);
   animation: fade-in 1s linear;
   opacity: 0;
   z-index: 9999;
}

.status-notification {
   display: flex;
   justify-content: center;
   align-items: center;
   /* width: 3rem !important; */
   background-color: var(--notification-primary);
   border-radius: 0.375rem 0 0 0.375rem;
}

.status-notification img {
   width: 1.7rem;
   height: 1.7rem;
   margin: 0 7px 0 7px;
   /* padding: 0 1rem; */
}

.notification__body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 1rem;
}

.notification__body p {
   color: gray;
   word-wrap: break-word;
   margin: 0 0 5px 0;
}

.notification__progress {
   position: absolute;
   left: 0.25rem;
   bottom: 0.25rem;
   width: calc(100% - 0.5rem);
   height: 0.2rem;
   transform: scaleX(0);
   transform-origin: left;
   background: linear-gradient(to right, var(--notification-background), #aaec8a);
   border-radius: inherit;
   animation: progress 0.6s 0.3s linear;
}

.itens-cart {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 14px;
   line-height: 18px;
}

@keyframes fade-in {
   5% {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }
   95% {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes progress {
   to {
      transform: scaleX(1);
   }
}

/* Enviar Cotação */

#dados-usuario,
#dados-entrega,
.produtos-cotacao {
   border-radius: 0.5rem !important;
}

#dados-usuario,
.produtos-cotacao {
   min-width: 400px;
}

#formulario-cotacao {
   flex-wrap: wrap;
}

.container-produtos {
   overflow-y: auto;
}

.container-checkout {
   padding-top: 10px;
}

.h-0 {
   height: fit-content;
}

.form-cotacao {
   padding: 0 0 0 15px;
}

.field-form {
   padding-left: 0;
}