@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
 :root {
	 --primary-ligth: #fefae0;
	 --color-dark: #1c1c1c;
	 --color-neutral-dark: #151515;
	 --color-mid-dark: #212121;
	 --color-mid-dark-2: #252525;
	 --color-neutral-mid: #9f9c9a;
	 --color-neutral-mid-3: #747474;
	 --color-neutral-mid-2: #c9c9c9;
	 --color-border: #3d3d3d;
	 --color-neutral-light: #fff;
	 --color-neutral-light-opacity-9: rgba(255, 255, 255, 0.9);
	 --color-neutral-light-opacity-5: rgba(255, 255, 255, 0.5);
	 --color-primary-dark: #100b07;
	 --color-primary-dark-opacity: rgba(16, 11, 7, 0.7);
	 --color-primary-dark-opacity-2: rgba(16, 11, 7, 0.4);
	 --color-primary-2: #322c29;
	 --color-primary-3: #775c4c;
	 --color-primary-10: #b37c5c;
	 --color-error: #e63333;
	 --color-error-ligth: #ff6174;
	 --color-error-ligth-2: #ff3f5b;
	 --color-sucess: #4bae4f;
}
 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
	 -webkit-appearance: none;
	 margin: 0;
}
 input[type="number"] {
	 -moz-appearance: textfield;
}
 * {
	 margin: 0;
	 padding: 0;
	 outline: 0;
	 box-sizing: border-box;
	 user-select: none;
	 font-family: 'Roboto', sans-serif;
	 -webkit-tap-highlight-color: transparent;
}
 *::-webkit-scrollbar {
	 background: transparent;
}
 *::-webkit-scrollbar-track {
	 background: transparent;
}
 *::-webkit-scrollbar-thumb {
	 background-color: var(--color-primary-3);
	 border-radius: 20px;
	 border: 6px solid var(--color-mid-dark);
	 margin-right: 50px;
}
 *:focus {
	 outline: none;
}
 body, html {
	 width: 100vw;
	 height: 100svh;
	 background-color: #252525;
}
 h1, h2, h3, h4, h5, h6, p {
	 margin: 0;
	 font-weight: 500;
}
 button {
	 cursor: pointer;
}
 a {
	 text-decoration: none;
}
 html {
	 -ms-touch-action: manipulation;
	 touch-action: manipulation;
}
 ul, li {
	 text-decoration: none;
	 list-style-type: none;
}
 button {
	 background-color: transparent;
	 border: none;
}
 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
	 -webkit-transition-delay: 99999999s;
	 transition-delay: 99999999s;
}
 .caixa-de-erro {
	 display: none;
	 color: var(--color-error-ligth);
	 font-size: 14px;
	 align-items: center;
	 justify-content: center;
}
 .container-input {
	 width: 100%;
}
 .container-input button {
	 position: absolute;
	 margin-left: -20px;
}
 .container-input img {
	 margin-left: -15px;
	 width: clamp(15px, 5vw, 22px);
	 height: clamp(15px, 5vw, 22px);
}
 @media (max-width: 600px) {
	 .container-input img {
		 margin-left: -5px;
	}
}
 .spinner {
	 width: 65px;
	 height: 65px;
	 border: 4px solid var(--color-sucess);
	 border-top-color: white;
	 border-radius: 50%;
	 animation: spin 1s linear infinite;
	 position: absolute;
	 margin-top: -155px;
}
 @media (max-width: 600px) {
	 .spinner {
		 margin-top: -130px;
	}
}
 .card-wrapper {
	 position: fixed;
	 width: 100vw;
	 height: 100vh;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 left: 0;
	 top: 0;
	 background-color: var(--color-primary-dark-opacity);
	 z-index: 3000;
}
 .card {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 background-color: var(--color-mid-dark);
	 border: 1px solid var(--color-sucess);
	 padding: 60px 40px 40px 40px;
	 border-radius: 15px;
	 color: white;
}
 @media (max-width: 600px) {
	 .card {
		 padding: 60px 20px 20px 20px;
		 width: 300px;
	}
}
 .card-image, .card-image-delet {
	 margin-top: -90px;
	 min-width: 60px;
	 min-height: 60px;
}
 .card-title {
	 font-size: 20px;
	 font-weight: 600;
	 margin-top: 20px;
}
 @media (max-width: 600px) {
	 .card-title {
		 font-size: 18px;
	}
}
 .card-content {
	 margin-top: 20px;
	 font-size: 18px;
}
 @media (max-width: 600px) {
	 .card-content {
		 font-size: 16px;
	}
}
 .delet {
	 border: 1px solid var(--color-error-ligth-2) !important;
}
 .spinerDelet {
	 border: 4px solid var(--color-error-ligth-2) !important;
	 border-top-color: white !important;
	 margin-top: -235px;
}
 @media (max-width: 600px) {
	 .spinerDelet {
		 margin-top: -230px;
	}
}
 .card-product {
	 margin-top: 10px;
}
 .button-container {
	 display: flex;
	 justify-content: space-between;
	 margin-top: 20px;
	 gap: 30px;
}
 .button-container button {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 padding: 0 15px;
	 border-radius: 10px;
	 font-size: 16px;
	 gap: 10px;
	 height: 30px;
}
 .card-button {
	 border: 1px solid var(--color-sucess);
	 color: var(--color-sucess);
}
 .card-button img {
	 width: 19px;
	 height: 19px;
}
 .close {
	 border: 1px solid var(--color-error-ligth);
	 color: var(--color-error-ligth);
}
 .close img {
	 width: 14px;
	 height: 14px;
}
 @keyframes spin {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}
 .zoomIn {
	 -webkit-animation-name: zoomIn;
	 animation-name: zoomIn;
	 -webkit-animation-duration: 1s;
	 animation-duration: 1s;
	 -webkit-animation-fill-mode: both;
	 animation-fill-mode: both;
}
 @-webkit-keyframes zoomIn {
	 0% {
		 opacity: 0;
		 -webkit-transform: scale3d(0.3, 0.3, 0.3);
		 transform: scale3d(0.3, 0.3, 0.3);
	}
	 50% {
		 opacity: 1;
	}
}
 @keyframes zoomIn {
	 0% {
		 opacity: 0;
		 -webkit-transform: scale3d(0.3, 0.3, 0.3);
		 transform: scale3d(0.3, 0.3, 0.3);
	}
	 50% {
		 opacity: 1;
	}
}