@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root {
    /*CORES*/
    --color-brand-primary-900: hsl(131, 45%, 37%);
    --color-brand-primary-800: hsl(117, 43%, 42%);
    --color-brand-primary-700: hsl(118, 34%, 48%);
    --color-brand-primary-600: hsl(118, 32%, 54%);
    --color-brand-primary-500: hsl(118, 31%, 59%);
    --color-brand-primary-400: hsl(118, 31%, 65%);
    --color-brand-primary-300: hsl(117, 32%, 71%);
    --color-brand-primary-200: hsl(117, 32%, 77%);
    --color-brand-primary-100: hsl(118, 32%, 83%);
    --color-brand-secondary-900: hsl(160, 100%, 18%);
    --color-brand-secondary-800: hsl(147, 100%, 20%);
    --color-brand-secondary-700: hsl(147, 63%, 28%);
    --color-brand-secondary-600: hsl(147, 44%, 36%);
    --color-brand-secondary-500: hsl(147, 31%, 44%);
    --color-brand-secondary-400: hsl(148, 25%, 52%);
    --color-brand-secondary-300: hsl(148, 25%, 60%);
    --color-brand-secondary-200: hsl(147, 24%, 68%);
    --color-brand-secondary-100: hsl(148, 25%, 76%);
    --color-brand-accent-900: hsl(86, 58%, 41%);
    --color-brand-accent-800: hsl(85, 54%, 51%);
    --color-brand-accent-700: hsl(86, 54%, 56%);
    --color-brand-accent-600: hsl(85, 54%, 61%);
    --color-brand-accent-500: hsl(86, 54%, 66%);
    --color-brand-accent-400: hsl(85, 54%, 71%);
    --color-brand-accent-300: hsl(86, 55%, 76%);
    --color-brand-accent-200: hsl(86, 54%, 80%);
    --color-brand-accent-100: hsl(86, 54%, 85%);
    --color-brand-priority-900: hsl(125, 100%, 23%);
    --color-brand-priority-800: hsl(125, 88%, 33%);
    --color-brand-priority-700: hsl(125, 73%, 45%);
    --color-brand-priority-600: hsl(125, 85%, 58%);
    --color-brand-priority-500: hsl(125, 100%, 69%);
    --color-brand-priority-400: hsl(125, 100%, 76%);
    --color-brand-priority-300: hsl(125, 100%, 83%);
    --color-brand-priority-200: hsl(126, 100%, 89%);
    --color-brand-priority-100: hsl(123, 100%, 96%);
    --color-brand-complementary1-800: hsl(83, 47%, 63%);
    --color-brand-complementary1-700: hsl(83, 47%, 66%);
    --color-brand-complementary1-600: hsl(83, 47%, 70%);
    --color-brand-complementary2-800: hsl(86, 37%, 37%);
    --color-brand-complementary2-700: hsl(86, 28%, 44%);
    --color-brand-complementary2-600: hsl(86, 22%, 50%);
    --color-brand-complementary3-800: hsl(125, 31%, 34%);
    --color-brand-complementary3-700: hsl(125, 23%, 41%);
    --color-brand-complementary3-600: hsl(125, 18%, 47%);
    --color-brand-pamais-800: hsl(171, 100%, 37%);
    --color-brand-pamais-700: hsl(171, 77%, 44%);
    --color-brand-pamais-600: hsl(171, 60%, 50%);
    --color-brand-oferta-800: hsl(15, 100%, 54%);
    --color-brand-oferta-700: hsl(15, 100%, 59%);
    --color-brand-oferta-600: hsl(15, 100%, 63%);
    --color-brand-selos-800: hsl(26, 88%, 53%);
    --color-brand-selos-700: hsl(26, 88%, 58%);
    --color-brand-selos-600: hsl(26, 87%, 62%);
    --color-brand-adega-800: hsl(283, 43%, 21%);
    --color-brand-adega-700: hsl(283, 49%, 28%);
    --color-brand-adega-600: hsl(283, 36%, 42%);
    --color-catg-flv-800: hsl(114, 36%, 40%);
    --color-catg-flv-700: hsl(114, 41%, 57%);
    --color-catg-flv-600: hsl(114, 77%, 76%);
    --color-catg-queijo-800: hsl(36, 94%, 63%);
    --color-catg-queijo-700: hsl(36, 100%, 80%);
    --color-catg-queijo-600: hsl(37, 96%, 90%);
    --color-catg-peixes-800: hsl(195, 65%, 59%);
    --color-catg-peixes-700: hsl(195, 100%, 72%);
    --color-catg-peixes-600: hsl(195, 100%, 85%);
    --color-catg-padaria-800: hsl(26, 62%, 40%);
    --color-catg-padaria-700: hsl(26, 67%, 57%);
    --color-catg-padaria-600: hsl(26, 100%, 71%);
    --color-catg-cafeteria-800: hsl(359, 48%, 19%);
    --color-catg-cafeteria-700: hsl(358, 38%, 35%);
    --color-catg-cafeteria-600: hsl(358, 32%, 53%);
    --color-catg-carnes-800: hsl(18, 64%, 29%);
    --color-catg-carnes-700: hsl(18, 55%, 40%);
    --color-catg-carnes-600: hsl(18, 49%, 51%);
    --color-catg-rotissere-800: hsl(351, 79%, 57%);
    --color-catg-rotissere-700: hsl(351, 100%, 65%);
    --color-catg-rotissere-600: hsl(351, 100%, 73%);
    --color-catg-vinho-800: hsl(332, 51%, 24%);
    --color-catg-vinho-700: hsl(332, 44%, 34%);
    --color-catg-vinho-600: hsl(332, 37%, 46%);
    --color-catg-sushi-800: hsl(15, 79%, 54%);
    --color-catg-sushi-700: hsl(15, 100%, 63%);
    --color-catg-sushi-600: hsl(15, 100%, 71%);
    --color-neutral-dark-800: hsl(0, 0%, 0%);
    --color-neutral-dark-700: hsl(190, 19%, 12%);
    --color-neutral-dark-600: hsl(240, 3%, 31%);
    --color-neutral-dark-500: hsl(240, 2%, 48%);
    --color-neutral-dark-400: hsl(240, 3%, 62%);
    --color-neutral-light-800: hsl(0, 0%, 100%);
    --color-neutral-light-700: hsl(240, 4%, 77%);
    --color-neutral-light-600: hsl(240, 5%, 89%);
    --color-neutral-light-500: hsl(240, 13%, 95%);
    --color-neutral-light-400: hsl(0, 0%, 97%);
    --color-semantics-positive-900: hsl(147, 100%, 20%);
    --color-semantics-positive-800: hsl(117, 44%, 42%);
    --color-semantics-positive-700: hsl(132, 27%, 81%);
    --color-semantics-negative-900: hsl(354, 84%, 39%);
    --color-semantics-negative-800: hsl(354, 87%, 55%);
    --color-semantics-negative-700: hsl(354, 88%, 87%);
    --color-semantics-alert-900: hsl(41, 100%, 45%);
    --color-semantics-alert-800: hsl(41, 100%, 50%);
    --color-semantics-alert-700: hsl(41, 100%, 85%);
    --color-semantics-info-900: hsl(204, 78%, 37%);
    --color-semantics-info-800: hsl(204, 78%, 41%);
    --color-semantics-info-700: hsl(204, 55%, 83%);
    /*ESPAÇAMENTO*/
    --rem-base: 1rem;
    --rem-base-4: calc(var(--rem-base) * 0.25);
    --rem-base-8: calc(var(--rem-base) * 0.5);
    --rem-base-12: calc(var(--rem-base) * 0.75);
    --rem-base-24: calc(var(--rem-base) * 1.5);
    --rem-base-32: calc(var(--rem-base) * 2);
    --rem-base-40: calc(var(--rem-base) * 2.5);
    --rem-base-48: calc(var(--rem-base) * 3);
    --rem-base-56: calc(var(--rem-base) * 3.5);
    --rem-base-64: calc(var(--rem-base) * 4);
    --rem-base-72: calc(var(--rem-base) * 4.5);
    --rem-base-80: calc(var(--rem-base) * 5);
    --rem-base-88: calc(var(--rem-base) * 5.5);
    --rem-base-96: calc(var(--rem-base) * 6);
    --rem-base-104: calc(var(--rem-base) * 6.5);
    --rem-base-112: calc(var(--rem-base) * 7);
    --rem-base-120: calc(var(--rem-base) * 7.5);
    --rem-base-128: calc(var(--rem-base) * 8);
    --rem-base-136: calc(var(--rem-base) * 8.5);
    --rem-base-144: calc(var(--rem-base) * 9);
    --rem-base-152: calc(var(--rem-base) * 9.5);
    --rem-base-160: calc(var(--rem-base) * 10);
    --rem-base-168: calc(var(--rem-base) * 10.5);
    --rem-base-176: calc(var(--rem-base) * 11);
    --rem-base-184: calc(var(--rem-base) * 11.5);
    --rem-base-192: calc(var(--rem-base) * 12);
    --rem-base-200: calc(var(--rem-base) * 12.5);
    --rem-base-208: calc(var(--rem-base) * 13);
    --rem-base-216: calc(var(--rem-base) * 13.5);
    --rem-base-224: calc(var(--rem-base) * 14);
    --rem-base-232: calc(var(--rem-base) * 14.5);
    --rem-base-240: calc(var(--rem-base) * 15);
    --rem-base-248: calc(var(--rem-base) * 15.5);
    --rem-base-256: calc(var(--rem-base) * 16);
    --rem-base-264: calc(var(--rem-base) * 16.5);
    /*ELEVAÇÃO*/
    --elevation-base: 0px 1px 5px 0px rgba(0, 2, 5, 0.06);
    --elevation-uniform: 0px 0px 8px 0px rgba(0, 2, 5, 0.06);
    --elevation-spread: 0px 6px 12px 0px rgba(0, 2, 5, 0.08);
    --elevation-float: 0px 8px 16px 0px rgba(0, 2, 5, 0.12);
    --elevation-above: 0px -1px 5px 0px rgba(0, 2, 5, 0.06);
    --elevation-modal: 0 1px rgba(0, 0, 0, .02), 0 1px 8px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .2);
    /*TIPOGRAFIA*/
    --ff-montserrat: "Montserrat", sans-serif;
    --ff-inter: "Inter", sans-serif;
    --ff-os: "Open Sans", sans-serif;
  }

  /* ICONES INICIO */

  .material-symbols-outlined {
    text-decoration: none;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;

    &.--l {
      margin-right: var(--rem-base-8);
    }
    &.--r {
      margin-left: var(--rem-base-8);
    }

    &.--md14 {
      font-size: 14px;
    }

    &.--md16 {
      font-size: 16px;
    }

    &.--md18 {
      font-size: 18px;
    }

    &.--md20 {
      font-size: 20px;
    }

    &.--md22 {
      font-size: 22px;
    }
  }

.material-icons { 
  text-decoration: none!important;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';

    &.--l {
      margin-right: var(--rem-base-8);
    }
    &.--r {
      margin-left: var(--rem-base-8);
    }

    &.--md14 {
      font-size: 14px;
    }

    &.--md16 {
      font-size: 16px;
    }

    &.--md18 {
      font-size: 18px;
    }

    &.--md20 {
      font-size: 20px;
    }

    &.--md22 {
      font-size: 22px;
    }

}

/* ICONES FIM */

/* FORM INICIO */

  form {

    & .flex-container i {
      margin-right:var(--rem-base-8);
    }

  }

.input-container {
  position: relative;

    & i {
      font-family: 'Material Symbols Outlined';
      position: absolute;
      left: var(--rem-base-8);
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-neutral-dark-600);
  }
  
}

.input-container i + .input-solid {
  padding-left: var(--rem-base-40);
}

.input-container-outlined {
  position: relative;

    & i {
      font-family: 'Material Symbols Outlined';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-neutral-dark-600);
  }
  
}

.input-container-outlined i + .input-outlined {
  padding-left: var(--rem-base-32);
}

.input-container.disabled {
  opacity: 0.40!important;
  cursor: not-allowed;
}

.input-container-outlined.disabled {
  opacity: 0.40!important;
  cursor: not-allowed;
}

/* FORM FIM */