@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/*
 *
 * CONFIGURAÇÕES GERAIS DO SITE CUSTUMIZADAS
 *
 */
:root {
  --fonte-principal: "Manrope", sans-serif; /* fonte padrão do seu site */

  --cor-sui-princ: #263781; /* utilize para cores padrão do site desenvolvido */
  --cor-sui-sec: #081b6f; /* utilize para cores padrão do site desenvolvido */
  --cor-sui-ter: #ec671b; /* utilize para cores padrão do site desenvolvido */
  --cor-sui-ter-hover: #d8560a;
  --cor-sui-qua: #4b4b4d; /* utilize para cores padrão do site desenvolvido */
}

/* tags */
.ui-simulacao {
  & .simulacao {
    height: auto;

    & .botao-simulacao {
      background-color: var(--cor-sui-ter);
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      padding: 15px 40px;
      border-radius: 5px;
      border: 0;
      cursor: pointer;
      transition: all linear 0.4s;
      min-width: 200px;

      & i {
        margin-left: 10px;
      }

      &:hover {
        background-color: var(--cor-sui-ter-hover);
      }

      &:hover i {
        margin-left: 15px;
        transition: all linear 0.4s;
      }
    }

    & .botao-simulacao-azul {
      background-color: var(--cor-sui-princ);
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      padding: 15px 40px;
      border-radius: 5px;
      border: 0;
      cursor: pointer;
      transition: all linear 0.4s;
      min-width: 200px;

      & i {
        margin-left: 10px;
      }

      &:hover {
        background-color: var(--cor-sui-sec);
      }

      &:hover i {
        margin-left: 15px;
        transition: all linear 0.4s;
      }
    }

    & .simulacao-esquerdo {
      height: 100vh;

      & mark {
        background-color: var(--cor-sui-princ);
        color: #fff;
        padding: 10px 20px;
        border-radius: 20px;
        font-weight: bold;
      }

      & h1 {
        color: #fff;
        font-size: min(3rem, 10vw);
      }
    }

    & .form-simulacao {
      margin-top: 80px;
      & .form-floating {
        border: 1px solid var(--cor-sui-sec);
        border-radius: 5px;
        color: var(--cor-sui-sec);
        font-weight: bold;
        background-color: #fff;

        & input,
        & select {
          color: var(--cor-sui-ter);
          font-weight: bold;
        }
      }

      & .radio-pesonalizado {
        & .btn {
          width: 150px;
          background-color: #fff;
          border: 1px solid var(--cor-sui-princ);
          font-weight: bold;
          color: var(--cor-sui-ter);
          margin-right: 10px;
          margin-bottom: 10px;
          padding: 20px;
          text-align: left;

          & i {
            font-size: 30px;
          }
        }

        & .btn-check:checked + .btn {
          border: 1px solid var(--cor-sui-sec);
          background-color: var(--cor-sui-princ);
          color: #fff;
        }
      }
    }

    & .simulacao-direito {
      & .box-resultado-simulacao {
        padding: 30px;
        background-color: #fff;
        border-radius: 10px;

        & .box-resultado-simulacao--valores {
          border: 2px solid var(--cor-sui-sec);
          border-radius: 10px;
          padding: 10px 40px;
        }
      }
    }

    & .simulacao-resposta {
      width: 280px;
      height: auto;
      position: fixed;
      bottom: 30px;
      right: 20px;
      border: 0px;
    }
  }
}

/*   835 px | Ipad / tablet*/
@media only screen and (max-width: 835px) {
  .simulacao-esquerdo {
    height: auto !important;
    padding-bottom: 50px;
  }
}

/*   640 px | mobile Iphone Plus  **/
@media only screen and (max-width: 640px) {
  .simulacao-esquerdo {
    height: auto !important;
    padding-bottom: 50px;
  }
}

/*    414 px | mobile Iphone Plus  **/
@media only screen and (max-width: 414px) {
  .simulacao-esquerdo {
    height: auto !important;
    padding-bottom: 50px;
  }
}

/*    360 px | mobile     **/
@media only screen and (max-width: 360px) {
  .simulacao-esquerdo {
    height: auto !important;
    padding-bottom: 50px;
  }
}