.imagem-slide{
  width: 100%;
  height: auto; /* Isso garantirá que a imagem mantenha sua proporção ao ser redimensionada */
  border-radius: 0.5rem;
  object-fit: cover; /* Isso garante que a imagem cubra todo o contêiner */
}
.endereco-mensagem {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background-color: #4caf50;

    color: white;

    padding: 10px 20px;

    border-radius: 5px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);

    z-index: 9999;

    width: 300px;

    /* Exemplo de largura */

    height: 50px;

    /* Exemplo de altura */

  }



  .endereco-erro {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background-color: #ad0a0a;

    color: white;

    padding: 10px 20px;

    border-radius: 5px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);

    z-index: 9999;

    width: 300px;

    /* Exemplo de largura */

    height: 50px;

    /* Exemplo de altura */

  }



  .endereco-mensagem i {

    margin-right: 10px;

    /* Adicione a margem à direita para o ícone */

  }



  .error {

    color: #ad0a0a;



  }



  .pedido-status {

          text-align: center;

          max-width: 600px;

          margin: 10px auto;

          border: 1px solid #eee;

          font-family: "Arial";

      }



      .pedido-status .top-part {

          border-bottom: 1px solid #eee;

      }



      .pedido-status .top-part i {

          font-size: 50px;

          padding-top: 15px;

      }



      .pedido-status.pedido-success .top-part {

          color: #2ca954;

      }



      .pedido-status.pedido-error .top-part {

          color: #ff0000;

      }



      .pedido-status .top-part h3 {

          margin-bottom: 0;

          font-weight: bold;

          margin-bottom: 15px;

      }



      .pedido-status .top-part small {

          font-size: 14px;

          font-weight: normal;

          display: block;

          color: #000;

          background: #f1f3f6;

          padding: 20px 40px;

      }



      .pedido-status .top-part h3 span {

          display: block;

          margin-top: 5px;

          color: #000;

          font-size: 16px;

          font-weight: normal;

      }



      .pedido-status ul {

          list-style-type: none;

          padding: 0;

          margin: 0;

      }



      .pedido-status ul li {

          font-family: "Arial";

          display: flex;

          justify-content: space-between;

          padding: 10px;

          text-transform: capitalize;

          border-bottom: 1px solid #eee;

      }



      .pedido-status ul li:last-child {

          border: none;

      }



      .pedido-status ul li div {

          font-size: 14px;

          font-weight: normal;

          color: #444;

      }



      .pedido-status ul li div:last-child {

          font-weight: bold;

          color: #000;

      }

  input {

    width: 300px;

    padding: 10px;

    font-size: 16px;

    text-align: center;

  }



  button {

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

  }



  button:hover {

    background-color: #ddd;

  }



  /* Estilo para o overlay de tela cheia */

  #loadingOverlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(3, 3, 26, 0.5);

    /* Cor de fundo azul com transparência */

    z-index: 9999;

  }



  #countdown {

    color: #ffc926;

    font-size: 15px;

  }



  .menu-promo {

    background-color: #1C4690;

  }



  .text-gold {

    color: #ffc926;

  }



  .text-white {

    color: #fff;

  }



  .full-width {

    width: 100%;

  }



  /* Estilo para o spinner */

  .spinner {

    position: fixed;

    top: 40%;

    left: 40%;

    transform: translate(-50%, -50%);

    border: 8px solid #f3f3f3;

    /* Cor do spinner */

    border-top: 8px solid #3498db;

    /* Cor do spinner */

    border-radius: 50%;

    width: 80px;

    /* Tamanho do spinner */

    height: 80px;

    /* Tamanho do spinner */

    animation: spin 2s linear infinite;

  }



  @keyframes spin {

    0% {

      transform: rotate(0deg);

    }



    100% {

      transform: rotate(360deg);

    }

  }



  .corpo-sucess {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

flex-direction: column;

}

h2 {

font-family: Helvetica;

font-size: 36px;

margin-top: 40px;

color: #333;

opacity: 0;

animation: 0.6s title ease-in-out;

animation-delay: 1.2s;

animation-fill-mode: forwards;

}

.circle {

stroke-dasharray: 1194;

stroke-dashoffset: 1194;

}

.tick {

stroke-dasharray: 350;

stroke-dashoffset: 350;

}

svg .circle {

animation: circle 1s ease-in-out;

animation-fill-mode: forwards;

}

svg .tick {

animation: tick 0.8s ease-out;

animation-fill-mode: forwards;

animation-delay: 0.95s;

}



@keyframes circle {

from {

  stroke-dashoffset: 1194;

}

to {

  stroke-dashoffset: 2388;

}

}



@keyframes tick {

form {

  stroke-dashoffset: 350;

}

to {

  stroke-dashoffset: 0;

}

}



@keyframes title {

from {

  opacity: 0;

}

to {

  opacity: 1;

}

}

/* Estilo para o overlay */
#CarregaPedido {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 3, 26, 0.5);
    z-index: 9999;
}

/* Estilo para a barra de progresso */
.progress-bar {
    position: absolute;
    top: calc(50% + 60px); /* Ajusta a posição vertical da barra de progresso */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 20px;
    background-color: #970000;
    border-radius: 10px;
}

.progress {
    position: absolute;
    height: 100%;
    background-color: #af4c4c;
    border-radius: 10px;
    animation: progress 2s linear infinite; /* Animação para simular o progresso */
}

/* Estilo para a porcentagem de progresso */
.progress-percentage {
    position: absolute;
    top: calc(50% + 60px); /* Ajusta a posição vertical da porcentagem */
    left: 50%;
    transform: translateX(-50%);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #fff;
}

/* Estilo para o texto de carregamento */
.loading-text {
    position: absolute;
    top: calc(50% + 90px); /* Ajusta a posição vertical do texto */
    left: 50%;
    transform: translateX(-50%);
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #fff;
}

/* Estilo para o novo ícone de carrinho de compras */
.cart-icon {
    position: absolute;
    top: calc(50% - 50px); /* Ajusta a posição vertical do ícone */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-image: url('../../assets/images/general/order.svg'); /* Substitua pelo caminho para o seu ícone de carrinho de compras */
    background-size: cover;
    background-repeat: no-repeat;
    animation: spin 2s linear infinite; /* Adiciona uma animação giratória */
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg); /* Define o início da animação */
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg); /* Define o fim da animação */
    }
}

@keyframes progress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.focusable {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid gray;
}

/* steps do formulario pedido */

#multi-step-form-container {
  margin-top: 5rem;
}
.form-step {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
ul.form-stepper {
  counter-reset: section;
  margin-bottom: 3rem;
}
ul.form-stepper .form-stepper-circle {
  position: relative;
}
ul.form-stepper .form-stepper-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.form-stepper-horizontal {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
ul.form-stepper > li:not(:last-of-type) {
  margin-bottom: 0.625rem;
  -webkit-transition: margin-bottom 0.4s;
  -o-transition: margin-bottom 0.4s;
  transition: margin-bottom 0.4s;
}
.form-stepper-horizontal > li:not(:last-of-type) {
  margin-bottom: 0 !important;
}
.form-stepper-horizontal li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.form-stepper-horizontal li:not(:last-child):after {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 1px;
  content: "";
  top: 32%;
}
.form-stepper-horizontal li:after {
  background-color: #dee2e6;
}
.form-stepper-horizontal li.form-stepper-completed:after {
  background-color: #4da3ff;
}
.form-stepper-horizontal li:last-child {
  flex: unset;
}
ul.form-stepper li a .form-stepper-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 0;
  line-height: 1.7rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 50%;
}
.form-stepper .form-stepper-active .form-stepper-circle {
  background-color: #4361ee !important;
  color: #fff;
}
.form-stepper .form-stepper-active .label {
  color: #4361ee !important;
}
.form-stepper .form-stepper-active .form-stepper-circle:hover {
  background-color: #4361ee !important;
  color: #fff !important;
}
.form-stepper .form-stepper-unfinished .form-stepper-circle {
  background-color: #f8f7ff;
}
.form-stepper .form-stepper-completed .form-stepper-circle {
  background-color: #0e9594 !important;
  color: #fff;
}
.form-stepper .form-stepper-completed .label {
  color: #0e9594 !important;
}
.form-stepper .form-stepper-completed .form-stepper-circle:hover {
  background-color: #0e9594 !important;
  color: #fff !important;
}
.form-stepper .form-stepper-active span.text-muted {
  color: #fff !important;
}
.form-stepper .form-stepper-completed span.text-muted {
  color: #fff !important;
}
.form-stepper .label {
  font-size: 1rem;
  margin-top: 0.5rem;
}
.form-stepper a {
  cursor: default;
}
/*form styles*/
#msform {
  width: 100%;
  margin: 1px 1px 1px 1px;
  text-align: center;
  position: relative;
}
/*progressbar*/
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}
#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
}
#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,
#progressbar li.active:after {
  background: #27ae60;
  color: white;
}