@font-face { font-family: Circular; src: url('../../assets/fonts/circular-std-font-family/CircularStd-Bold.woff'); font-weight: 600; }
@font-face { font-family: Circular; src: url('../../assets/fonts/circular-std-font-family/CircularStd-Medium.woff'); font-weight: 500; }
@font-face { font-family: Circular; src: url('../../assets/fonts/circular-std-font-family/CircularStd-Book.woff'); font-weight: 400; }
@font-face { font-family: Circular; src: url('../../assets/fonts/circular-std-font-family/CircularStd-Book.woff'); font-weight: 300; }



* {
    -webkit-font-smoothing: antialiased;
    font-family: 'Circular', sans-serif;
}

:root {

    --neutral: #fff;
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-150: #eee;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-450: #8f8f8f;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;

    --color: #fff;

}

body {
    font-weight: 400;
    color: var(--neutral-700);
    width: 100%;
    margin: auto;
    background-color: var(--neutral);
}

main, .header-produto, .dadoFinal {
    width: 60vw;
    min-width: 780px;
    max-width: 1100px;
    margin: auto;
    padding: 0 10px !important;
}

main {
    padding: 20px 10px !important;
}

nav {
    border-bottom: 1px solid var(--neutral-100);
    height: 70px;
    padding: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark1);
    font-weight: 500;
    /* margin-bottom: 20px; */
}


nav a {
    color: var(--dark1);
    text-decoration: none;
}

nav a:hover {
    color: var(--padrao) !important;
    text-decoration: none;
}

*:focus {
    outline: none !important;
}

input {
    background: #f7f7f7;
    border: none;
    border-radius: 5px;
    padding: 10px;
    color: var(--neutral-500);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #f7f7f7 inset !important;
    -webkit-text-fill-color: var(--neutral-500);
}

b, strong {
    font-weight: 600 !important;
}

.row {
    margin: 0;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 2px;
}

.scroll-div::-webkit-scrollbar { 
    width: 7px;
    height: 2px;

}

.scroll-div::-webkit-scrollbar-thumb { 
    background: var(--neutral-200);
    border-left: 3px solid var(--neutral);
}

.scroll-div::-webkit-scrollbar-track {
    background-color: var(--neutral-100);;
    border-left: 3px solid var(--neutral);
}

.flex-col { flex-direction: column }
.flex-row { flex-direction: row }

.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-60 { padding: 60px; }
.p-70 { padding: 70px; }
.p-80 { padding: 80px; }
.p-90 { padding: 90px; }
.p-100 { padding: 100px; }

.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }
.m-40 { margin: 40px; }
.m-50 { margin: 50px; }
.m-60 { margin: 60px; }
.m-70 { margin: 70px; }
.m-80 { margin: 80px; }
.m-90 { margin: 90px; }
.m-100 { margin: 100px; }

.g-5 { gap: 5px !important; }
.g-8 { gap: 8px !important; }
.g-10 { gap: 10px !important; }
.g-20 { gap: 20px !important; }
.g-30 { gap: 30px !important; }
.g-40 { gap: 40px !important; }
.g-50 { gap: 50px !important; }
.g-60 { gap: 60px !important; }
.g-70 { gap: 70px !important; }
.g-80 { gap: 80px !important; }
.g-90 { gap: 90px !important; }
.g-100 { gap: 100px !important; }


/* .input {
    background: none;
    border: 1px solid var(--neutral-200);
    border-radius: 5px;
    padding: 10px;
    color: var(--neutral-500);
}

.input1 {
    background: #fcfcfc;
    border: none;
    border-radius: 5px;
    padding: 10px;
    color: var(--neutral-500);
}

.input2 {
    background: #f0f0f0;
    border: none;
    border-radius: 5px;
    padding: 10px;
    color: var(--neutral-500);
} */

input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
}

input::placeholder {
    color: var(--neutral-300);
    font-weight: 300;
}

hr { border: 1px solid #EEEFF3; }

select {
    -moz-appearance: none;
    -webkit-appearance: none;
}

.fi {
    display: flex;
}


@media screen and (max-width: 780px) {

    main, .header-produto, .dadoFinal {
        width: 90vw;
        min-width: 90vw;
        max-width: 90vw;
    }

}