@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap);
.topnav-container {
  display: grid;
  align-items: center;
  grid-template: "logo menu carrinho";
  max-width: 1350px;
  font-family: Roboto;
  height: 60px;
  grid-template-columns: minmax(210px, 1fr) 60% 20%;
  width: 100%;
}

.topnav-link-first {
    grid-column-start: 3;
}

.topnav-container .topnav-links-container {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: menu;
}

.topnav-container .topnav-links-container a {
  font-size: 16px;
  min-height: 60px;
  line-height: 60px;
  color: var(--primary-font-color);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  padding: 0 18px;
}

.topnav-container .topnav-links-container a:hover{
  border-bottom: 3px solid var(--secondary-color);
}

.topnav-container .topnav-links-container a.topnav-link-active {
    position: relative;
    font-weight: bold;
    height: 100%;
    /* TODO: combinar com o param tamanho */
    line-height: 60px;
}

.topnav-container .topnav-btns-container div.topnav-btn-active {
    position: relative;
    font-weight: bold;
    height: 100%;
    /* TODO: combinar com o param tamanho */

    /*border-bottom: solid;*/
    /*border-color: var(--secondary-color);*/
}

.topnav-container .topnav-btns-container {
    display: grid;
    align-items: center;
    grid-template-columns: 33%;
    grid-area: carrinho;
}

.topnav-container .topnav-btns-container .topnav-btn {
    position: relative;
    cursor: pointer;
    grid-column: span 1;
}

.topnav-container .topnav-btns-container .topnav-btn img {
    display: block;
    margin: 0 auto;
}

.topnav-container .topnav-btns-container .topnav-btn:active img {
    opacity: .5;
    transform: scale(.9);
    transition: all .1s;
}

.topnav-container .topnav-btn .btn-badge {
    position: absolute;
    top: -12px;
    right: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 20px;
    height: 17px;
    font-size: 12px;
    text-align: center;
    color: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.topnav-container a.topnav-link-active{
  border-bottom: 3px solid var(--secondary-color);
}



/* .topnav-container a.topnav-link-active::after {
    content: '';
    display: block;
    height: 3px;
    width: 100%;
    background: var(--secondary-color);
    position: absolute;
    bottom: 0;
    left: 0;
}
.topnav-btns-container div.topnav-btn-active::after {
    content: '';
    display: block;
    height: 3px;
    width: 100%;
    background: var(--secondary-color);
    position: absolute;
    bottom: -14px;

    line-height: 11px;
} */

.link-show-responsive-menu{
  color: var(--primary-color);
  font-size: 18px;
  cursor: pointer;
  display: none;

}

.block-container-responsive-menu{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  z-index: 7;
  cursor: pointer;
}

.btn-close-responsive-menu{
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--primary-color);
  color: var( --secondary-font-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  border: none;
  display: none;
}

@media(max-width: 1024px) {
  .topnav-container .topnav-links-container {
    display: flex;
    justify-content: space-around;
    z-index: 8;
  }

  .topnav-container .topnav-links-container a {
    padding: 0 15px;
  }

  .topnav-container .topnav-btns-container{
    justify-content: center;
  }
}

.link-show-responsive-menu{
  color: var(--primary-color);
  font-size: 18px;
}

@media(max-width: 1160px) {
  .topnav-container {
    grid-template: "menu carrinho";
    grid-template-columns: 80% 20%;
  }
}

@media(max-width: 1024px) {
  .topnav-container .topnav-links-container {
    display: flex;
    justify-content: space-around;
  }

  .topnav-container .topnav-links-container a {
    padding: 0 15px;
  }

  .topnav-container .topnav-btns-container{
    justify-content: center;
  }
}

@media(max-width: 815px) {
  .topnav-container {
    grid-template-columns: 90% 10%;
  }
}

@media(max-width: 768px) {
  .topnav-container .topnav-btns-container{
    justify-content: flex-end;
    grid-template-columns: 100%;
  }

  .topnav-container .topnav-links-container a {
    padding: 0 10px;
  }
}

@media(max-width: 650px) {
  .topnav-container .topnav-links-container{
    position: fixed;
    top: 100px;
    bottom: 0;
    left: -165px;
    flex-direction: column;
    background: var(--content-background);
    justify-content: flex-start;
    width: 165px;
    align-items: flex-start;
    padding: 0 10px;
    transition: all 0.2s;
  }

  .topnav-container .topnav-links-container a.topnav-link-active {
    height: auto;
  }

  .link-show-responsive-menu {
    display: block;
  }

  .topnav-container .topnav-links-container a{
    width: 100%;
    text-align: left;
  }

  .btn-close-responsive-menu{
    display: block;
  }
}

@media(max-width: 455px){
  .topnav-container .topnav-links-container {
    top: 162px;
  }
}



.wrapper-menu-lateral {
  background: var(--alternative-background);
  min-height: 100%;
  max-width: 285px;
  width: 100%;
  padding-top: 208px;
  padding-left: 20px;
  margin-right: 32px;
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.1);
}

.link-back-menu-lateral {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 16px;
}

.link-back-menu-lateral span {
  display: inline-block;
  margin-right: 10px;
}

.title-menu-lateral {
  font-size: 20px;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 16px;
}

.list-menu-lateral {
  list-style: none;
}

.list-item-menu-lateral{
  display: flex;
  position: relative;
  margin-bottom: 8px;
  border-right: 2px solid var(--alternative-background);
  transition: 0.2s all;
}

.list-item-menu-lateral:hover{
  border-right: 2px solid var(--secondary-color)
}

.list-item-menu-lateral a{
  display: flex;
  width: 100%;
  align-items: center;
  padding: 8px 0;
  text-decoration: none;
  color: var(--primary-color);
  font-size: 18px;
}

.list-item-menu-lateral-active {
  border-right: 2px solid var(--secondary-color);
}

.list-item-menu-lateral-active a{
  font-weight: bold;
  color: var(--secondary-color);
}

.link-open-menu-lateral {
  position: absolute;
  top: 180px;
  left: 30px;
  color: var(--primary-color);
  font-size: 19px;
  background: none;
  border: none;
  display: none;
}

.background-black {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  z-index: 1;
  cursor: pointer;
}

@media(max-width: 650px){
  .wrapper-menu-lateral {
    position: absolute;
    z-index: 2;
    width: 200px;
    left: -200px;
    transition: 0.3s all;
    top: 100px;
    padding-top: 44px;
  }

  .title-menu-lateral {
    font-size: 18px;
  }

  .link-open-menu-lateral {
    display: block;
  }
}

@media (max-width: 455px) {
  .wrapper-menu-lateral {
      top: 162px;
  }

  .link-open-menu-lateral {
    top: 233px;
    left: 20px;
  }
}

/*TODO: colocar isso num lugar mais genérico*/
html {
  font-family: Roboto;
}

p {
  line-height: 24px;
}

.container-fastcash {
  display: flex !important;
  flex: 1;
}

.wrapper-main-content {
  width: 70%;
}

.fastcash-container-form {
  display: grid;
  grid-template-rows: 30px auto auto;
  padding: 28px 0px;
  margin: 10px auto 0px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.1);
  width: 100%;
  min-height: 150px;

}
.fastcash-container-form
.form-fieldset .inputs-container .input-set
 .input-readonly {
  color: var(--primary-font-color) !important;
}

.fastcash-container-form-alt {
  margin: 180px auto 0;
  background-color: transparent;
  box-shadow: none;
  line-height: 24px;
}

.form-input-label {
  font-size: 24px !important;
  margin-top: 25px;
  margin-bottom: 25px !important;
  color: var(--primary-color) !important;
  font-weight: bolder;
}

.fastcash-input-label {
  font-size: 32px;
  /*margin-top: 25px;*/
  /*margin-bottom: 25px;*/
  color: var(--primary-color) !important;
  font-weight: bolder;
}

.fastcash-input-label-alt {
  line-height: 46px;
  text-align: left;
}

.fastcash-descrition-text {
  color: var(--primary-font-color);
  margin-top: 12px;
  font-size: 18px;
  line-height: 22px;
}

.fastcash-descrition-text-titleee {
  margin: 0 0 10px 0;
  font-size: 15px;
}

.fastcash-descrition-text-alt:before {
  content: "\2022";
  color: #fff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 0em;
}

.fastcash-descrition-text-alt {
  color: #fff;
}

.fastcash-done-table {
  width: 100%;
  text-align: left;
}

.fastcash-done-table-title {
  color: var(--primary-font-color);
  font-weight: bolder;
  border-bottom: 2px solid var(--content-background);
  padding-bottom: 21px;
}

.fastcash-done-table-item {
  color: var(--primary-font-color);
  padding-top: 21px;
}

.fastcash-submit-btn {
  width: 200px !important;
  height: 48px;
  float: right;
  margin-top: -15px;
  border-radius: 5px;
  background: var(--secondary-color);
  border: solid 1px var(--secondary-color);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  justify-self: end;
  outline: none;
}

.fastcash-alert {
  width: 100%;
  margin: 32px;
}

.fastcash-logo {
  float: right;
  margin-right: 16px;
}

.fastcash-logo-container {
  width: 100%;
}

.user-feedback-container img {
  width: 150px !important;
}

.user-feedback-container .text-container .title {
  margin: 54px 0 0 0 !important;
  color: var(--secondary-color) !important;
}

.form-long-text-title {
  color: var(--primary-font-color);
  margin: 24px;
}

.form-long-text-description {
  color: var(--primary-font-color);
  font-size: 14px;
  line-height: 22px;
  margin: 24px;
}

.fastcash-descrition-text-old {
  color: #fff;
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  background-color: var(--secondary-color);
  padding: 5px 10px;
  border-radius: 3px;
}

@media (max-width: 980px) {
  .fastcash-container-form {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .fastcash-logo-container {
    margin-top: 18px;
  }

  .inputs-container {
    padding-bottom: 18px;
  }
}

@media (max-width: 650px) {
  .container-fastcash {
    flex-direction: column;
  }
  .wrapper-main-content {
    width: 100%;
  }
  .fastcash-container-form-alt {
    margin: 232px auto 0;
  }
  .fastcash-logo-container{
    text-align: center;
  }
  .fastcash-logo {
    float: none;
  }

  .input-set {
    width: 100% !important;
  }

  .form-fieldset .radio-container-alt {
    display: flex !important;
    flex-direction: column;
  }

  .form-fieldset .submit-btn-alt {
    width: 100% !important;
    float: none !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 455px){
  .fastcash-container-form-alt {
    margin: 285px auto 0;
  }
}

.loading-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-container .loader-container {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loading-container .loader-container .loader-dot {
    animation: loader-container 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.loading-container .loader-container .loader-dot:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary-color);
    margin: -4px 0 0 -4px;
}

.loading-container .loader-container .loader-dot:nth-child(1) {
    animation-delay: -0.036s;
}

.loading-container .loader-container .loader-dot:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.loading-container .loader-container .loader-dot:nth-child(2) {
    animation-delay: -0.072s;
}

.loading-container .loader-container .loader-dot:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.loading-container .loader-container .loader-dot:nth-child(3) {
    animation-delay: -0.108s;
}

.loading-container .loader-container .loader-dot:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.loading-container .loader-container .loader-dot:nth-child(4) {
    animation-delay: -0.144s;
}

.loading-container .loader-container .loader-dot:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.loading-container .loader-container .loader-dot:nth-child(5) {
    animation-delay: -0.18s;
}

.loading-container .loader-container .loader-dot:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.loading-container .loader-container .loader-dot:nth-child(6) {
    animation-delay: -0.216s;
}

.loading-container .loader-container .loader-dot:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.loading-container .loader-container .loader-dot:nth-child(7) {
    animation-delay: -0.252s;
}

.loading-container .loader-container .loader-dot:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.loading-container .loader-container .loader-dot:nth-child(8) {
    animation-delay: -0.288s;
}

.loading-container .loader-container .loader-dot:nth-child(8):after {
    top: 56px;
    left: 12px;
}

@keyframes loader-container {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.containerModal{
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.containerModal img{
    cursor: pointer;
}

.containerModal div{
   
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 730px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgb(80 85 90 / 20%);
    border-radius: 4px;
}

.containerModal section{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.containerModal h1{
    font-weight: bold;
    color: var(--primary-color) ;
    font-size: 1.5rem;
}

.containerModal span:nth-of-type(1){
    margin-top: 2rem;
    line-height: 36px;
    color: #50555A;
}

.containerModal span:nth-of-type(2){
    margin-top: 0;
    line-height: 36px;
    color: #50555A;
}

.containerModal hr{
    width: 100%;
    border: 1px solid #EAEEF0;
    margin: 2rem 0;
}

.containerModal article{
    display: flex;
    justify-content: flex-end;
}

.containerModal article button{
    width: 231px;
height: 48px;
background: #234581;
border-radius: 4px;
border: none;
color: #FFFFFF;
cursor: pointer;
}

.container-smiles {
  display: flex !important;
  flex: 1;
}

.wrapper-main-content-smiles {
  width: 70%;
  margin: 180px auto 0;
}

.title-page-smile {
  font-size: 32px;
  max-width: 290px;
  color: var(--primary-color) !important;
  font-weight: bolder;
  margin-bottom: 9px;
}

.description-page-smil {
  color: var(--primary-font-color);
  margin-top: 12px;
  font-size: 18px;
  line-height: 22px;
}

.content-form-points-smiles {
  padding: 28px 0px;
  margin: 30px auto 0px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.1);
  width: 100%;
}

.wrapper-input-points-smile {
  padding: 0 28px 28px;
  border-bottom: 1px solid lightgray;
  display: flex;
  align-items: center;
}

.input-points-smile {
  height: 40px;
  width: 100%;
  max-width: 280px;
  padding: 0 0 0 12px;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid var(--secondary-color);
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.1);
  color: var(--primary-font-color);
  font-family: Roboto;
  font-size: 16px;
}

.img-convert-points-smile {
  margin: 0 35px;
  display: inline-block;
  margin-top: 79px;
}

.img-logo-smiles {
  margin-left: auto;
}

.wrapper-rules-points-smile {
  padding: 28px 28px 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.title-rules-points-smile {
  color: var(--primary-font-color);
  font-family: Roboto;
  font-weight: bold;
  width: 100%;
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.description-rules-points-smile {
  flex: 1;
  padding: 0 73px 0 0;
  color: var(--primary-font-color);
  font-size: 14px;
  line-height: 22px;
}

.button-finish-rescue-smile {
  max-width: 250px;
  width: 100%;
  height: 42px;
  border-radius: 5px;
  background: var(--secondary-color);
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary-font-color);
  cursor: pointer;
  transition: 0.2s all;
}

.button-finish-rescue-smile:hover {
  filter: brightness(0.95);
}

input[type='text']:disabled {
  background: #dddddd;
}

.input-disable {
  height: 40px;
  width: 100%;
  max-width: 280px;
  padding: 0 0 0 12px;
  cursor: no-drop;
}

.divInputYourPoints {
  display: flex;
  flex-direction: column;
  width: 280px;
}

.LabelYourPoints {
  font-size: 24px !important;
  margin-top: 25px;
  margin-bottom: 25px !important;
  color: var(--primary-color) !important;
  font-weight: bolder;
}

@media (max-width: 890px) {
  .wrapper-input-points-smile {
    flex-direction: column;
    justify-content: center;
  }

  .img-logo-smiles {
    margin-left: 0;
  }

  .img-convert-points-smile {
    margin: 18px 0;
    transform: rotate(87deg);
  }

  .wrapper-rules-points-smile {
    flex-direction: column;
  }

  .button-finish-rescue-smile {
    max-width: 100%;
    margin-top: 18px;
  }
}

@media (max-width: 890px) {
  .wrapper-main-content-smiles {
    width: 100%;
    margin: 220px 30px;
  }
}

@media (max-width: 455px) {
  .wrapper-main-content-smiles {
    margin: 280px 20px;
  }
}

.container-notification-shared{
  width: 100%;
  margin: 20px 0;
  transition: 2s ease-out;

}


.containerRocketDoneCenter {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 30px;
}

.containerRocketDone {
  width: 100%;
  /* margin: 24vh auto 0; */
}

.divImgRocketDoneContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0 0 30px 0;
}

.divImgRocketDone img {
  height: 150px;
}

.divImgRocketDoneContainer > h1 {
  width: 40%;
  color: var(--primary-color);
}

.thTableRocketDone {
  font-weight: bold;
  color: #ffffff;
}

.tdTableRocketDone {
  font-weight: lighter;
}

.trTableRocketDone2 {
  line-height: 1.5;
}

.thDadosTable {
  font-weight: 400;
  color: #b3afaf;
}

.divTableRocketDone {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

tr:nth-child(odd) {
  background: var(--secondary-color);
}

.tableRocketDone {
  width: 65%;
  background: #ffffff;
  line-height: 2;
}

@media (max-width: 455px) {
  .containerRocketDoneCenter {
    padding: 20px;
    margin-top: 100px;
  }

  .divImgRocketDoneContainer {
    flex-direction: column;
    margin-top: 44%;
  }
  .divImgRocketDoneContainer > h1 {
    width: 100%;
  }

  .divTableRocketDone {
    display: block;
    overflow-x: scroll;
  }

  .tableRocketDone {
    width: max-content;
    padding: 0;
  }

  .thTableRocketDone {
    color: #ffffff;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr:nth-child(odd) {
    background: var(--secondary-color);
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
}

th,
td {
  padding: 8px;
}

.divValueOperators {
  padding-left: 21px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.divCredit {
  border: solid 1px var(--secondary-color);
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--secondary-color);
  font-weight: bold;
  cursor: pointer;
}

.divCredit:hover, .active{
  color: #fff;
  background-color: var(--secondary-color);
}



.spanValuePointsConvert {
  padding: 21px;
  color: #7b7f84;
}

.divValueOperators {
  padding-left: 21px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.divCredit {
  border: solid 1px var(--secondary-color);
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--secondary-color);
  font-weight: bold;
  cursor: pointer;
}

.divCredit:hover,
.active {
  color: #fff;
  background-color: var(--secondary-color);
}

.spanValuePointsConvert {
  padding: 21px;
  color: #7b7f84;
}

.wrapper-input-points-shellbox {
  padding: 0 28px 11px 28px;
  display: flex;
  align-items: center;
}

.ContainerInfo {
  padding: 0 28px 11px 28px;
  display: flex;
  gap: 20px;
  font-size: 11px;
  width: 700px;
  margin: 2px 0 40px 0;
  color: var(--primary-font-color);
}

.ContainerInfo p {
  line-height: 13px;
}

.ulTabsMenu {
  display: flex;
  justify-content: space-around;
  list-style: none;
  cursor: pointer;
  font-weight: bold;
  color: var(--primary-font-color);
}

.ulTabsMenu li {
  display: inline-block;
  position: relative;
  padding: 0 0 15px 0;
}

.ulTabsMenu li:hover {
  color: var(--secondary-color);
}

.divTabContent {
  padding: 25px 28px 28px;
  display: none;
  color: var(--primary-font-color);
  font-size: 14px;
  line-height: 22px;
}

.divTabContent a {
  color: var(--primary-font-color);
  font-family: Roboto;
  font-weight: bold;
  font-size: 16px;
}

.active-tab {
  display: flex;
  flex-direction: column;
}

.is-active {
  border-bottom: 3px solid var(--secondary-color);
  color: var(--secondary-color);
}

.embedShellLocationPost {
  margin: 30px 0;
}

.containerAceptButton {
  padding: 25px 28px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.labelDivAceotButtonCheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.labelDivAceotButtonCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.divAceptButtonSpan {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: transparent;
  border: 2px solid var(--secondary-color);
  box-sizing: border-box;
  border-radius: 4px;
}

.labelDivAceotButtonCheck:hover input ~ .divAceptButtonSpan {
  background-color: #ccc;
}

.labelDivAceotButtonCheck {
  color: var(--primary-font-color);
  font-size: 15px;
}

/* When the checkbox is divAceptButtonSpan, add a blue background */
.labelDivAceotButtonCheck input:checked ~ .divAceptButtonSpan {
  background-color: var(--secondary-color);
}

/* Create the checkmark/indicator (hidden when not divAceptButtonSpan) */
.divAceptButtonSpan:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when divAceptButtonSpan */
.labelDivAceotButtonCheck input:checked ~ .divAceptButtonSpan:after {
  display: block;
}

/* Style the checkmark/indicator */
.labelDivAceotButtonCheck .divAceptButtonSpan:after {
  left: 4px;
  top: 0px;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.button-finish-shell {
  max-width: 250px;
  width: 100%;
  height: 42px;
  border-radius: 5px;

  border: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary-font-color);
  cursor: not-allowed;
  transition: 0.2s all;
}

.button-finish-active {
  background: var(--secondary-color);
  cursor: pointer;
}

.input-points-shell {
  height: 40px;
  width: 100%;
  max-width: 280px;
  padding: 0 12px 0 12px;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid var(--secondary-color);
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.1);
  color: var(--primary-font-color);
  font-family: Roboto;
  font-size: 16px;
}

@media (max-width: 1024px) {
  .wrapper-input-points-shellbox {
    padding: 0 28px 11px 28px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
  }

  .ContainerInfo {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .ContainerInfo img {
    height: 20px;
  }

  .ulTabsMenu {
    font-size: 11px;
  }

  .containerAceptButton {
    flex-direction: column;
  }
}

* {
  padding: 0;
  margin: 0;
}

.middle-page {
  max-width: 1300px;
  width: 100%;
  min-height: 100vh;
  background: var(--content-background);
  display: table;
}

.wrapper-servicos {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 180px 0px 0 0px;
  padding: 0 20px;
}

.wrapper-title {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title-page-servicos {
  color: var(--primary-color);
  font-size: 38px;
  font-weight: bolder;
}

.subtitle-page-servicos {
  margin: 22px 0 63px 0;
  font-size: 18px;
  color: var(--primary-font-color);
  font-weight: normal;
  padding: 0 5%;
}

.wrapper-card-service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  grid-column-gap: 20px;
  grid-row-gap: 40px;
  justify-content: center;

}


.card-service {
  box-shadow: 0 16px 24px rgb(48 49 51 / 10%);
  border-radius: 4px;
  background-color: #ffffff;
  max-width: 405px;
  overflow: hidden;
  width: 100%;
  justify-self: center;
  cursor: pointer;
  transition: transform 250ms;
  
}


.card-service:hover .figure-card-service  {
  transform: translateY(-10px);
}

.card-service:hover .text-card-service{
  transform: translateY(-10px);
}

.figure-card-service {
  display: flex;
  padding: 24px 21px 24px 21px;
  border-bottom: 1px solid #e6e6e6;
  height: 125px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.image-card-service {
  object-fit: cover;
  height: 100%;
}

.text-card-service {
  padding: 24px 21px 24px 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 22px;
  color: var(--primary-color);
  font-weight: bolder;
  text-decoration: none;
}

@media (max-width: 455px) {
  .wrapper-servicos {
    margin: 195px 0px 0 0px;
  }
}


.product-page-wrapper {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 180px auto 0 auto;
  padding: 0 20px;
}

.container-product-card-item {
  display: flex;
}

.page-title-products {
  color: var(--primary-font-color);
  font-size: 32px;
  font-weight: 700;
  margin: 16px 0;
}

.product-page-wrapper .page-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-font-color);
}

.product-wrapper-advanced-filter-and-search {
  display: flex;
  justify-content: space-between;
  margin-top: 37px;
}

.wrapper-products-search-container {
  flex: 1;
  margin-left: 32px;
}

.product-page-wrapper .products-search-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 32px;
  justify-content: space-between;
}

.product-page-wrapper .products-search-results-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(301px, 1fr));
  gap: 20px;
}

.container-produtos-pagination {
  margin: 22px 0;
  grid-column: 1 / -1;
  justify-self: center;
  order: 2;
}

.btn-produtos-pagination {
  font-size: 16px;
  width: 260px;
  padding: 16px;
  text-align: center;
  background: var(--secondary-color);
  color: white;
  cursor: pointer;
  display: inline-block;
  border-radius: 4px;
}

.product-store-logo {
  max-height: 30px;
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

.product-img {
  display: block;
  height: 140px;
  margin: 30px auto 16px auto;
}

.products-cards-elements {
  display: flex;
  flex-direction: column;
}

.product-card-item {
  width: 100%;
  cursor: pointer;
  position: relative;
  background: white;
  border-radius: 7px;
  border: 1px solid #eaeef0;
}

.product-card-item:hover .product-img {
  transform: scale(1.02);
  transition: transform 0.3s;
}

.product-card-item-alt {
  grid-column: 5 / span 2;
}

.product-card-title {
  font-size: 14px;
  padding: 0 21px;
  font-weight: 400;
  margin: 16px 0 0 0;
  text-align: left;
  color: var(--primary-font-color);
  font-family: 'Roboto', sans-serif;
}

.product-card-price {
  margin: 8px 0 30px 0;
  padding: 0 21px;
  font-size: 24px;
  text-align: left;
  font-weight: bolder;
  color: var(--primary-color);
  font-family: 'Roboto', sans-serif;
}

.product-card-price .product-card-price-span {
  font-size: 1rem;
}

.product-line-separator {
  display: block;
  border-top: 1px solid #eaeef0;
  width: 100%;
}

.product-line-separator-filter {
  margin-top: 15px;
  margin-bottom: 15px;
}

.product-card-footer {
  position: relative;
  margin: 2%;
  width: 96%;
  height: 100px;
}

.product-action-links {
  margin: 12px 0;
  font-size: 1rem;
  text-align: center;
  font-weight: bolder;
  grid-column: 1 / span 2;
  text-decoration: underline;
  color: var(--secondary-color);
  cursor: pointer;
}

.products-card-details {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 3px 6px rgba(var(--primary-color-rgb), 0.1);
}

input[type='checkbox']:after {
  background-color: var(--secondary-color) !important;
  color: red !important;

  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--secondary-color);
  background-color: transparent;
}

.slider-arrow-down {
  border: solid var(--secondary-color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);

  width: 0px;
  margin: 4px 12px 4px 12px;
}

.slider {
  -webkit-appearance: none;
  /*width: 100%;*/
  height: 8px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 4px 12px 4px 12px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: var(--secondary-color);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: var(--secondary-color);
  cursor: pointer;
}

.products-feedback-no-data {
  grid-column: 3 / span 3;
  margin-top: 27px;
}

.products-input-search {
  height: 49px;
  width: 70%;
  outline: none;
  font-size: 1rem;
  border-radius: 4px;
  padding-left: 16px;
  color: var(--primary-font-color);
  font-family: 'Roboto', sans-serif;
  border: 1px solid #eaeef0;
  transition: all 0.2s;
}

.products-input-search:focus {
  border: solid 1px var(--secondary-color);
}

.products-order-select {
  width: 25%;
  height: 49px;
  outline: none;
  font-size: 1rem;
  border-radius: 4px;
  padding-left: 16px;
  color: var(--primary-font-color);
  font-family: 'Roboto', sans-serif;
  border: 1px solid #eaeef0;
}

.btn-advanced-search {
  display: none;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}

.btn-advanced-search span {
  color: var(--primary-font-color);
  font-size: 18px;
  display: inline-block;
  cursor: pointer;
  margin-left: 8px;
}

.btn-advanced-search img {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  transform: rotate(-90deg);
}

@media (max-width: 890px) {
  .wrapper-products-search-container {
    margin-left: 0;
  }
  .product-page-wrapper .product-advanced-search {
    display: none;
  }

  .product-page-wrapper .products-search-container {
    width: 100%;
    justify-content: center;
  }

  .product-page-wrapper .products-search-results-container {
    width: 100%;
  }

  .btn-advanced-search {
    display: flex;
  }

  .slider-arrow-down {
    display: none;
  }

  .slider {
    width: 90%;
    height: 10px;
  }

  .products-input-search {
    width: 100%;
  }

  .products-order-select {
    font-size: 18px;
    margin-top: 16px;
    position: relative;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url('/src/assets/icons/relevancia.svg') no-repeat center left;
    background-size: 20px;
    padding-left: 25px;
    min-width: 120px;
  }
}

@media (max-width: 660px) {
  .product-card-item:nth-child(3) {
    margin-top: 22px;
  }
}

@media (max-width: 480px) {
  .product-card-item:nth-child(2) {
    margin-top: 22px;
  }

  .products-input-search {
    width: 100%;
    margin-bottom: 9px;
  }

  .product-page-wrapper {
    margin: 194px auto 0 auto;
  }
}

.we-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    animation: fadeIn .3s ease-in-out;
    z-index: 9;
}

.we-modal-backdrop .we-modal-view-carrinho {
    width: 60%;
    height: 75%;
    overflow-y: auto;
    background: var(--content-background);
    position: absolute;
    top: 10%;
    left: 20%;
    /*animation: slideUp .5s;*/
    padding: 32px 32px;
}

.we-modal-view-carrinho .user-feedback-container .text-container .title {
    color: var(--primary-color)!important;
    margin: 24px 24px 24px 0!important;
}

.we-modal-view-carrinho .user-feedback-container {
    margin-top: 200px;
}

.we-modal-backdrop .we-modal-view-carrinho .we-modal-close-btn {
top: 10%;
right: 5%;
border: none;
font-weight: 900;
background: unset;
font-size: 1.3rem;
position: absolute;
color: var(--secondary-color);
font-family: Roboto, sans-serif;
}

.we-modal-backdrop .we-modal-view .we-modal-title-container .we-modal-title {
margin: 0 0 22px 0;
font-family: Roboto, sans-serif;
color: var(--primary-font-color);
}

/* ---------------------------------------------------------------------------------------VALORES DO FRETE */
.we-modal-backdrop .we-modal-view hr {
    opacity: 0.2;
    margin: 0 0 22px 0;
    border-top: solid 1px var(--primary-font-color);
}

.we-modal-backdrop .we-modal-view .dados-frete-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.we-modal-backdrop .we-modal-view .dados-frete-row .dados-frete-label {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-font-color);
    font-family: Roboto, sans-serif;
}

.we-modal-backdrop .we-modal-view .dados-frete-row .dados-frete {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-font-color);
    font-family: Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------------------INPUT DO CEP */

.we-modal-backdrop .we-modal-view .cep-container {
    display: grid;
    grid-template-columns: 70% 30%;
    margin-bottom: 32px;
}

.we-modal-backdrop .we-modal-view .cep-container .cep-input {
    width: 100%;
    border: none;
    height: 48px;
    font-size: 1rem;
    padding: 0 20px;
    transition: all .3s;
    border-radius: 4px 0 0 4px;
    transform: translateX(1px);
    background-color: #ffffff;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
    border: solid 2px var(--secondary-color);
}

.we-modal-backdrop .we-modal-view .cep-container .cep-input:focus {
    outline: none;
    box-shadow: 0 2px 4px rgba(var(--secondary-color-rgb), .7);
}

.we-modal-backdrop .we-modal-view .cep-container .calcular-btn {
    height: 48px;
    border-radius: 0 4px 4px 0;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bolder;
    font-family: Roboto;
    color: var(--secondary-font-color);
    background-color: var(--secondary-color);
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .4);
}

.we-modal-backdrop .we-modal-view .cep-container .calcular-btn:active {
    transform: translateY(1px);
    filter: saturate(150%);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@media(max-width: 680px){
  .we-modal-backdrop .we-modal-view-carrinho {
    width: 94%;
    height: 85%;
    left: 3%;
    padding: 15px;
    position: relative;
  }

  .we-modal-backdrop .we-modal-view-carrinho .we-modal-close-btn {
    top: 3%;
  }
}

.carrinho-container {
    margin: 54px auto 0 auto;
    max-width: 1350px;
    width: 100%;
    padding: 0 20px;
    display: table;
}

.carrinho-container-alt {
    margin: 180px auto 0 auto;
}

.carrinho-card-container {
    width: 65%;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
    float: left;

    display: grid;
    grid-template-columns: 15% 35% 20% 30%;
    margin-bottom: 54px;
}

.carrinho-card-container-modal {
    width: 100%;
}

.carrinho-item-img {
    width: 100px;
    margin: 39px;
    grid-column: 1;
}

.carrinho-item-description-container {
    color: var(--primary-font-color);
}

.carrinho-item-vendor {
    margin-top: 32px;
    text-decoration: underline;
    color: var(--primary-font-color);
}

.carrinho-item-name {
    margin-top: 12px;
    color: var(--primary-font-color);
}

.carrinho-item-quantity-container {
    margin: 42px 22px 42px 22px;
    /*min-width: 100px;*/
}

.carrinho-item-quantity-input {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 2px solid var(--secondary-color);
    text-align: center;
}

.carrinho-item-minus, .carrinho-item-plus {
    margin: 12px;
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: bolder;

    cursor: pointer;
}

.carrinho-line-separator {
    display: block;
    grid-column: 1 / span 4;
    width: 100%;
    border-top: none;
    border-left: none;
}

.carrinho-item-price {
    margin: 32px 32px 0 0;
    color: var(--primary-font-color);
    text-align: right;
}

.carrinho-item-exclude {
    margin: 32px 32px 0 0;
    color: var(--secondary-color);
    font-weight: bolder;
    text-decoration: underline;
    text-align: right;

    cursor: pointer;
}


.carrinho-status-line-container {
    margin: 46px -5em 12px /* tem que ser o mesmo que a margem do li - negativo*/;
}

.carrinho-nav-link {
    color: var(--secondary-color);
    font-weight: bolder;
}

.carrinho-checkout-button {
    margin: 10%;
    width: 80%;
    height: 54px;
    border-radius: 4px;
    background-color: var(--secondary-color);

    color: var(--alternative-background);
    font-size: 18px;
    font-weight: bolder;

    border: none;

    cursor: pointer;
}

.carrinho-go-to-cart-button {
    /*margin-top: 32px;*/
    width: 35%;
    height: 54px;
    border-radius: 4px;
    background-color: var(--secondary-color);
    color: var(--alternative-background);
    font-size: 18px;
    font-weight: bolder;
    border: none;
    cursor: pointer;
    float: right;
    outline: none;
}

.carrinho-title {
    color: var(--primary-color);
    font-size: 32px;
    font-weight: bolder;
    margin: 24px 0 24px 0;
}

.carrinho-status-text-container {
    margin: 0 -5em /* tem que ser o mesmo que a margem do li - negativo*/;
    display: flex;
}

.carrinho-status-text {
    max-width: 9em;
    margin-left: 5em;
    flex: 1;
    text-align: center;
    min-width: 9em;
    color: var(--tertiary-font-color);
}

.carrinho-status-text-active {
    color: var(--secondary-color);
    font-weight: bolder;
}

.carrinho-card-title {
    font-size: 42px;
    font-weight: bolder;
    color: var(--primary-color);
    margin: 15px auto;
}

/*LINES AND SHIT*/

.carrinho-container > .carrinho-status-line-container > li {
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border-radius: 1em;
    background: var(--secondary-color);
    margin: 0 6em;
    display: inline-block;
    color: white;
    position: relative;
    z-index: 1;

    cursor: default;
}

.carrinho-container > .carrinho-status-line-container > li::before{
    content: '';
    position: absolute;
    top: 0.9em;
    left: -12em; /* tem que ser o dobro da margem do li - negativo */
    width: 12em; /* tem que ser o dobro da margem do li - positivo */
    height: 0.1em;
    background: var(--secondary-color);
    z-index: 2;
}

.carrinho-container > .carrinho-status-line-container > li:first-child::before {
    display: none;
}

.carrinho-container > .carrinho-status-line-container > .active {
    background: var(--secondary-color);
}

.carrinho-container > .carrinho-status-line-container > .active ~ li {
    background: var(--tertiary-font-color);
}


.carrinho-container > .carrinho-status-line-container > .active ~ li::before {
    background: var(--tertiary-font-color);
}

.carrinho-container .form-fieldset .inputs-container .input-set .form-input-label {
    /*TODO: sumir com esses importants*/
    color: var(--primary-font-color)!important;
    font-size: 16px!important;
    margin-bottom: 12px!important;
    margin-top: 12px!important;
}

.carrinho-campos-obrigatorios-label {
    font-weight: normal;
    color: var(--primary-font-color);
}

.carrinho-container .carrinho-card-container .form-fieldset .submit-btn {
    border-radius: 4px;
    margin: 0 3.5% 32px 0;
    min-width: 33%;
    color: var(--alternative-background);
    background-color: var(--secondary-color);
}

.carrinho-resume-container {
    max-width: 30%;
    min-width: 30%;
    background-color: #ffffff;
    /*border: 1px solid var(--secondary-color);*/
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);

    float: right;
}

.carrinho-resume-label {
    font-weight: bolder;
    font-size: 24px;
    color: var(--primary-color);
    margin: 12px;
}

.carrinho-resume-item {
    color: var(--primary-font-color);
    margin: 12px;
}

.carrinho-resume-value {
    margin: 12px;
    color: var(--primary-font-color);
}

.carrinho-subtotal-label {
    font-weight: bolder;
    margin: 12px;
    float: left;
    width: 50%;
    color: var(--primary-font-color);
}

.carrinho-subtotal-value {
    margin: 12px;
    float: right;
    color: var(--primary-font-color);
    /*width: 50%;*/
}

.carrinho-confirm-label {
    font-size: 42px;
    font-weight: bolder;
    color: var(--primary-color);
    margin: 32px 12px;
}

.carrinho-cep {
    float: left;
    margin: 0 10px;
}

.carrinho-change-frete {
    margin: 0 12px;
    float: left;
    width: 50%;
    color: var(--secondary-color);
    cursor: pointer;
    text-decoration: underline;
}

.carrinho-back-link-container {
    position: relative;
    height: 50px;
    width: 100%;
}

.carrinho-back-link {
    position: relative;
    margin: 34px 12px;
    float: left;
    width: 100%;
    font-weight: bolder;
    font-size: 18px;
    color: var(--secondary-color);
    cursor: pointer;
    text-decoration: underline;
}

.carrinho-back-to-cart {
    position: relative;
    margin: 34px 12px;
    float: left;
    width: 100%;
    font-weight: bolder;
    font-size: 26px;
    color: var(--primary-color);
    cursor: pointer;
}

.carrinho-items-container {
    display: grid;
    grid-template-columns: 5% 20% 10% 15% 20% 20% 10%;

    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
}

.carrinho-items-footer {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;

    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
}

.carrinho-item-footer-header {
    margin: 25px;
    font-weight: bolder;
    color: var(--primary-font-color);
    text-align: center;
}

.carrinho-item-footer-header-total {
    color: var(--primary-color);
}

.carrinho-item-footer-item {
    margin: 0px 25px 25px;
    font-weight: normal;
    color: var(--primary-font-color);
    text-align: center;
}

.carrinho-item-footer-item-total {
    color: var(--primary-color);
}

.carrinho-items-header {
    font-weight: bolder;
    margin: 24px 15px;
    color: var(--primary-font-color);
}

.carrinho-item {
    font-weight: normal;
    margin: 24px 15px;
    color: var(--primary-font-color);
}

.carrinho-items-header-name {
    color: var(--primary-font-color);
    grid-column: 2;
}

.carrinho-items-line-separator {
    display: block;
    border-top: 1px solid lightgray;
    grid-column: 1 / span 7;
    width: 100%;
}

.carrinho-item-img {
    position: relative;
    max-width: 100%;
    margin: 24px auto;
}

.carrinho-total {
    margin: 32px 0;
    text-align: left;
}

.carrinho-total-label {
    color: var(--primary-font-color);
    grid-column: 6;
}

.carrinho-finish-btn {
    font-weight: bolder;
    font-size: 18px;
    color: var(--alternative-background);

    border: none;
    border-radius: 4px;
    outline: none;

    width: 250px;
    height: 50px;

    margin: 24px 0px 24px 24px;
    float: right;

    background-color: var(--secondary-color);
    cursor: pointer;
}

.carrinho-exclude-link {
    color: var(--secondary-color);
    text-decoration: underline;
    grid-column: 2 / span 6;
    margin: 0 15px;
    font-weight: bolder;
    cursor: pointer;
}

.carrinho-exclude-link:before {
    /*TODO: colocar ícone*/
}

.carrinho-container .user-feedback-container {
    height: 400px;
}

.middle-page .user-feedback-container {
    margin-top: 50px;
    height: 600px;
}

.carrinho-container .user-feedback-container .text-container .action-button {
    margin-top: 45px;
}

.carrinho-container .user-feedback-container .text-container .title {
    color: var(--primary-color)!important;
}

.middle-page .user-feedback-container .illustration {
    width: 45%!important;
}

.middle-page .user-feedback-container .text-container .title {
   color: var(--primary-color)!important;
    margin-bottom: 32px!important;
}

.middle-page .user-feedback-container .text-container .action-button {
    margin-top: 45px!important;
}

.input-readonly {
    border: 1px solid lightgrey!important;
    
}

.carrinho-feedback-container {
    width: 60%;
    margin: 32px;
}

.we-modal-backdrop {
    position: fixed!important;
}

@media(max-width: 980px){
  .carrinho-card-container {
    width: 100%;
  }

  .carrinho-resume-container {
    width: 100%;
    max-width: 100%;
  }
}

@media(max-width: 680px){
  .carrinho-go-to-cart-button {
    width: 100%;
    margin-bottom: 9px;
  }

  .carrinho-card-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
  }

  .carrinho-item-img{
    margin: 5px auto;
  }

  .carrinho-item-description-container{
    text-align: center;
    padding: 0 9px;
  }

  .carrinho-item-vendor {
    margin-top: 9px;
  }

  .carrinho-item-quantity-container {
    margin: 9px 9px 9px 9px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carrinho-item-minus, .carrinho-item-plus{
    font-size: 32px;
  }
  .carrinho-item-quantity-input {
    width: 34px;
    height: 34px;
  }

  .carrinho-item-price{
    margin: 0;
    text-align: center;
  }

  .carrinho-item-exclude{
    margin: 9px;
    text-align: center;
  }

  .carrinho-container {
    margin: 0;
  }

  .carrinho-container-alt{
    margin: 180px auto 0 auto;
  }

  .carrinho-title {
    font-size: 28px;
    margin: 18px 0;
    text-align: center;
  }

  .middle-page .user-feedback-container .illustration{
    min-width: 210px;
  }
}

.we-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease-in-out;
  z-index: 9;
}

.we-modal-backdrop .we-modal-view {
  width: 400px;
  background: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  animation: slideUp 0.5s;
  transform: translate(-50%, -50%);
  padding: 52px 32px;
}

.button-container {
  position: absolute;
  bottom: 10px;
}

.we-modal-backdrop .we-modal-view .we-modal-close-btn {
  top: 10%;
  right: 5%;
  border: none;
  font-weight: 900;
  background: unset;
  font-size: 1.3rem;
  position: absolute;
  color: var(--secondary-color);
  font-family: Roboto, sans-serif;
}

.we-modal-backdrop .we-modal-view .we-modal-ok-btn {
  height: 36px;
  width: 100px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  font-family: Roboto, sans-serif;
  color: var(--secondary-font-color);
  background-color: var(--secondary-color);
  margin: 34px 10px 0 300px;
  font-weight: 900;
}

.we-modal-backdrop .we-modal-view .we-modal-ok-btn-hide {
  display: none;
}

.we-modal-backdrop .we-modal-view .we-modal-title-container .we-modal-title {
  margin: 0 0 22px 0;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

/* ---------------------------------------------------------------------------------------VALORES DO FRETE */
.we-modal-backdrop .we-modal-view hr {
  opacity: 0.2;
  margin: 0 0 22px 0;
  border-top: solid 1px var(--primary-font-color);
}

.we-modal-backdrop .we-modal-view .dados-frete-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.we-modal-backdrop .we-modal-view .dados-frete-row .dados-frete-label {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-font-color);
  font-family: Roboto, sans-serif;
}

.we-modal-backdrop .we-modal-view .dados-frete-row .dados-frete {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-font-color);
  font-family: Roboto, sans-serif;
  width: 50%;
}

/* ---------------------------------------------------------------------------------------INPUT DO CEP */

.we-modal-backdrop .we-modal-view .cep-container {
  display: grid;
  grid-template-columns: 70% 30%;
  margin-bottom: 32px;
}

.we-modal-backdrop .we-modal-view .cep-container .cep-input {
  width: 100%;
  border: none;
  height: 48px;
  font-size: 1rem;
  padding: 0 20px;
  transition: all 0.3s;
  border-radius: 4px 0 0 4px;
  transform: translateX(1px);
  background-color: #ffffff;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
  border: solid 2px var(--secondary-color);
}

.we-modal-backdrop .we-modal-view .cep-container .cep-input:focus {
  outline: none;
  box-shadow: 0 2px 4px rgba(var(--secondary-color-rgb), 0.7);
}

.we-modal-backdrop .we-modal-view .cep-container .calcular-btn {
  height: 48px;
  border-radius: 0 4px 4px 0;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bolder;
  font-family: Roboto;
  color: var(--secondary-font-color);
  background-color: var(--secondary-color);
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.4);
}

.we-modal-backdrop .we-modal-view .cep-container .calcular-btn:active {
  transform: translateY(1px);
  filter: saturate(150%);
}

.container-calculo-frete {
  width: 100%;
  display: block;
  margin-top: 10px;
}

.calculo-frete-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
  margin-top: 16px;
}

.calculo-frete-row h2 {
  font-weight: normal;
  font-size: 16px;
}

.calculo-frete-row p {
  font-weight: 700;
  font-size: 16px;
}

.valor-total-frete-label {
  font-weight: 700;
}

.valor-total-frete {
  color: var(--primary-color);
  font-size: 18px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 990px) {
  .we-modal-backdrop .we-modal-view .we-modal-title-container .we-modal-title {
    margin: 0 0 9px 0 !important;
  }

  .button-container {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    padding: 0 20px;
  }

  .we-modal-backdrop .we-modal-view .we-modal-ok-btn {
    width: 100%;
    margin: 0;
  }
}

.voucher-profile-card,
.voucher-info-card {
    margin: 32px auto;
    overflow: hidden;
    max-width: 1230px;
    border-radius: 4px;
    position: relative;
    background: white;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .3);
    padding: 0 20px 26px 20px;
    width: 100%;
}

.voucher-profile-card {
    margin-top: 180px;
}

.voucher-profile-card .voucher-tag {
    top: 0;
    width: 15%;
    font-size: 0.9rem;
    padding: 4px 12px;
    text-align: center;
    position: absolute;
    border-radius: 4px 0;
    font-family: Roboto, sans-serif;
    color: var(--secondary-font-color);
}

.voucher-profile-card .voucher-profile {
    padding: 42px 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.voucher-profile-card .voucher-profile-info .voucher-code {
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
    font-size: 0.9rem;
    margin: 0 0 4px 0;
}

.voucher-profile-card .voucher-profile-info .voucher-name {
    font-weight: 500;
    font-size: 1.2rem;
    margin: 0;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile-info .voucher-points {
    font-weight: 600;
    font-size: 2.5rem;
    margin: 12px 0 0 0;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile-info span {
    font-size: 1rem;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions {
    display: flex;
    width: 30%;
    height: 190px;
    padding-left: 42px;
    flex-direction: column;
    justify-content: center;
    border-left: solid 2px #dfe6e9;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .alert-container {
    margin-bottom: 8px;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .calcular-frete-btn {
    height: 42px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 4px;
    margin-bottom: 12px;
    font-family: Roboto, sans-serif;
    color: var(--secondary-font-color);
    background-color: var(--secondary-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .calcular-frete-btn[disabled] {
    color: #9BA5AE;
    background-color: #EAEEF0;
    cursor: not-allowed;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .add-carrinho-btn {
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background-color: unset;
    text-decoration: underline;
    color: var(--secondary-color);
}

/* ---------------------------------------------ESTILOS DO CONTEÚDO DE DADOS CONSOLIDADOS--------------------------------------------- */

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-frete-item,
.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-prazo-item,
.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-subtotal-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-frete-item .we-frete-item-label {
    margin: 0;
    font-size: 1.1rem;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-frete-item .we-frete-item-label .we-frete-item-cep {
    display: flex;
    font-size: 1rem;
    font-weight: 400;
    margin: 4px 0 0 0;
    align-items: center;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-frete-item .we-frete-item-label .we-frete-item-btn {
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    margin-left: 12px;
    background-color: unset;
    text-decoration: underline;
    color: var(--secondary-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-frete-item .we-frete-item-value {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-prazo-item {
    margin-top: 22px;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-prazo-item .we-prazo-item-label {
    margin: 0;
    font-size: 1.1rem;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-prazo-item .we-prazo-item-value {
    margin: 0;
    font-weight: 400;
    font-size: 1.1rem;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-subtotal-item {
    margin-top: 22px;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-subtotal-item .we-subtotal-item-label {
    margin: 0;
    font-size: 1.1rem;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-subtotal-item .we-subtotal-item-label .we-subtotal-item-tip {
    margin: 4px 0 0 0;
    font-weight: 400;
    font-size: 1rem;
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-subtotal-item .we-subtotal-item-value {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-profile-card .voucher-profile .voucher-profile-actions .we-consolidado-container .we-consolidado-action-btn {
    width: 100%;
    height: 42px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 4px;
    margin: 22px 0 0 0;
    font-family: Roboto, sans-serif;
    color: var(--secondary-font-color);
    background-color: var(--secondary-color);
}

/* ---------------------------------------------ESTILOS DO CARD DE INFORMAÇÕES--------------------------------------------- */



.voucher-info-card .voucher-info-segment {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 50%);
}

.voucher-info-card .voucher-info-segment .segment-button {
    height: 52px;
    cursor: pointer;
    line-height: 52px;
    text-align: center;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
    border-bottom: solid 4px var(--content-background);
}

.voucher-info-card .voucher-info-segment .segment-button.active-segment-button {
    font-weight: bolder;
    border-bottom: solid 4px var(--secondary-color);
}

.voucher-info-card .voucher-description-text {
    padding: 22px;
    align-self: end;
    font-size: 0.8rem;
    max-height: 200px;
    line-height: 27px;
    overflow-y: scroll;
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
}

.voucher-info-card .voucher-description-text::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
}

@media(max-width: 660px){
  .voucher-profile-card .voucher-profile {
    flex-direction: column;
  }

  .voucher-profile-info {
    text-align: center;
  }

  .voucher-profile-card .voucher-profile .voucher-profile-actions {
    width: 100%;
    height: 67px;
    padding-left: 0;
    border-top: solid 2px #dfe6e9;
    border-left: 0;
    margin-top: 18px;
  }

  .voucher-profile-card .voucher-profile-info .voucher-points {
    font-size: 1.5rem;
  }

  .voucher-profile-card .voucher-tag {
    width: 100%;
  }

  .voucher-info-card .voucher-info-segment {
    grid-template-columns: repeat(1, 100%);
    margin-bottom: 18px;
  }
}

.container-produto-and-actions {
  display: flex;
  max-width: 1230px;
  gap: 24px;
  margin: 180px auto 32px;
}

.produto-info-card {
  height: fit-content;
  max-width: 440px;
  min-width: 330px;
  border-radius: 4px;
  position: relative;
  background: white;
  border: 1px solid #eaeef0;
  padding: 24px 0;
}

.produto-profile-card {
  max-width: 890px;
  width: 100%;
  background: white;
  border-radius: 4px;
  border: 1px solid #eaeef0;
}

.container-produto-profile-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eaeef0;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.tabs-links {
  display: flex;
}

.tabs-links button {
  background: none;
  border-right: 0;
  border-left: 0;
  border-top: 0;
  border-bottom: 2px solid #eaeef0;
  font-size: 18px;
  padding: 8px 16px;
  color: var(--primary-font-color);
  cursor: pointer;
  transition: all 0.2s;
}

.tabs-links button:hover,
.tabs-links-active {
  font-weight: 500;
  border-bottom: 2px solid var(--secondary-color) !important;
}

.wrapper-caracteristicas,
.wrapper-especificacoes {
  margin-bottom: 8px;
}

.produto-profile-card .produto-tag {
  top: 0;
  width: 15%;
  font-size: 0.9rem;
  padding: 4px 12px;
  text-align: center;
  position: absolute;
  border-radius: 4px 0;
  font-family: Roboto, sans-serif;
  color: var(--secondary-font-color);
}

.produto-profile-card .produto-profile {
  padding: 42px 0;
  display: flex;
  flex-direction: column;
}

.produto-profile-card .produto-profile .produto-profile-img {
  max-width: 40%;
}

.container-produto-profile-img-thumbs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}

.produto-profile-img-thumb {
  max-width: 68px;
  max-height: 68px;
  border-radius: 4px;
  padding: 9px 0;
  border: 1px solid #eaeef0;
  margin: 0 8px;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 12px;
}

.produto-profile-img-thumb-active {
  border: 1px solid var(--secondary-color);
}

.produto-profile-img-thumb img {
  width: 100%;
}

.produto-profile-info {
  padding: 0 40px;
}

.tab-content {
  margin-top: 24px;
}

.tab-content-text {
  color: var(--primary-font-color);
  font-size: 16px;
}

.produto-profile-card .produto-code {
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
  font-size: 0.9rem;
  margin: 0 0 4px 0;
}

.produto-info-card .produto-name {
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 16px;
  padding: 0 24px;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-info-card .produto-points {
  font-weight: 400;
  font-size: 36px;
  margin-bottom: 16px;
  padding: 0 24px;
  font-family: Roboto, sans-serif;
  color: var(--primary-color);
}

.title-features {
  font-size: 16px;
  color: var(--primary-font-color);
  margin: 8px 0;
  padding: 0 24px;
}

.container-label-features {
  margin-bottom: 8px;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.label-features {
  max-width: 95px;
}

.span-features {
  font-size: 16px;
  color: var(--primary-font-color);
  display: inline-block;
  margin-left: 10px;
}

.produto-profile-card .produto-profile-info span {
  font-size: 1rem;
}

.produto-profile-actions {
  padding: 0 24px;
}

.produto-profile-card .produto-profile .produto-profile-actions {
  display: flex;
  width: 30%;
  min-height: 190px;
  padding-left: 42px;
  padding-right: 42px;
  flex-direction: column;
  justify-content: center;
  border-left: solid 2px #dfe6e9;
  padding-top: 18px;
}

.produto-points .alert-container {
  margin: 8px 0;
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .calcular-frete-btn {
  height: 42px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  margin-bottom: 12px;
  font-family: Roboto, sans-serif;
  color: var(--secondary-font-color);
  background-color: var(--secondary-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .calcular-frete-btn[disabled] {
  color: #9ba5ae;
  background-color: #eaeef0;
  cursor: not-allowed;
}

.container-fornecedor {
  width: 100%;
  border-top: 1px solid #eaeef0;
  border-bottom: 1px solid #eaeef0;
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  margin: 24px 0;
}

.title-fornecedor {
  font-size: 16px;
  color: var(--primary-font-color);
  display: flex;
  flex-direction: column;
}

.container-calcular-frete {
  display: flex;
  flex-wrap: wrap;
  margin: 24px 0;
}

.title-calcular-frete {
  width: 100%;
  font-size: 16px;
  color: var(--primary-font-color);
  margin-bottom: 8px;
}

.box-calcular-frete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.input-calcular-frete {
  /* max-width: 160px; */
  height: 40px;
  border: 1px solid #d7dbde;
  color: var(--primary-font-color);
  border-radius: 4px;
  padding: 0 8px;
  flex: 1;
  margin-right: 15px;
}

.calcular-frete-btn {
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  background: none;
  border-radius: 4px;
  width: 90px;
  height: 40px;
}

.calcular-frete-btn:disabled {
  background: #d7dbde;
  border: 1px solid #d7dbde;
  color: #9ba5ae;
  cursor: no-drop;
}

.link-buscar-Cep {
  color: var(--secondary-color);
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}

.produto-info-card .add-carrinho-btn {
  border: none;
  outline: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--secondary-color);
  color: var(--secondary-font-color);
  display: flex;
  width: calc(100% - 48px);
  justify-content: center;
  align-items: center;
  height: 50px;
  border-radius: 4px;
  margin: 0 24px;
}

.add-carrinho-btn img {
  margin-right: 8px;
}

.add-carrinho-btn:disabled {
  background: #d7dbde;
  border: 1px solid #d7dbde;
  color: #9ba5ae;
  cursor: no-drop;
}

/* ---------------------------------------------ESTILOS DO CONTEÚDO DE DADOS CONSOLIDADOS--------------------------------------------- */

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-frete-item,
.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-prazo-item,
.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-subtotal-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-frete-item
  .we-frete-item-label {
  margin: 0;
  font-size: 1.1rem;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-frete-item
  .we-frete-item-label
  .we-frete-item-cep {
  display: flex;
  font-size: 1rem;
  font-weight: 400;
  margin: 4px 0 0 0;
  align-items: center;
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-frete-item
  .we-frete-item-label
  .we-frete-item-btn {
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 12px;
  background-color: unset;
  text-decoration: underline;
  color: var(--secondary-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-frete-item
  .we-frete-item-value {
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-prazo-item {
  margin-top: 22px;
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-prazo-item
  .we-prazo-item-label {
  margin: 0;
  font-size: 1.1rem;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-prazo-item
  .we-prazo-item-value {
  margin: 0;
  font-weight: 400;
  font-size: 1.1rem;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-subtotal-item {
  margin-top: 22px;
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-subtotal-item
  .we-subtotal-item-label {
  margin: 0;
  font-size: 1.1rem;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-subtotal-item
  .we-subtotal-item-label
  .we-subtotal-item-tip {
  margin: 4px 0 0 0;
  font-weight: 400;
  font-size: 1rem;
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-subtotal-item
  .we-subtotal-item-value {
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-profile-card
  .produto-profile
  .produto-profile-actions
  .we-consolidado-container
  .we-consolidado-action-btn {
  width: 100%;
  height: 42px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  margin: 22px 0 0 0;
  font-family: Roboto, sans-serif;
  color: var(--secondary-font-color);
  background-color: var(--secondary-color);
}

.we-consolidado-action-btn {
  border: none;
  outline: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--secondary-color);
  color: var(--secondary-font-color);
  display: flex;
  width: calc(100% - 48px);
  justify-content: center;
  align-items: center;
  height: 50px;
  border-radius: 4px;
  margin: 0 24px;
}

.we-consolidado-action-btn img {
  margin-right: 8px;
}
/* ---------------------------------------------ESTILOS DO CARD DE INFORMAÇÕES--------------------------------------------- */

.produto-info-card .produto-info-segment {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 50%);
}

.produto-info-card .produto-info-segment .segment-button {
  height: 52px;
  cursor: pointer;
  line-height: 52px;
  text-align: center;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
  border-bottom: solid 4px var(--content-background);
}

.produto-info-card .produto-info-segment .segment-button.active-segment-button {
  font-weight: bolder;
  border-bottom: solid 4px var(--secondary-color);
}

.produto-info-card .produto-description-text {
  padding: 22px;
  align-self: end;
  font-size: 0.8rem;
  max-height: 200px;
  line-height: 27px;
  overflow-y: scroll;
  font-family: Roboto, sans-serif;
  color: var(--primary-font-color);
}

.produto-info-card .produto-description-text::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
}

.produto-carousel-mobile {
  width: calc(100vw - 5px);
  position: relative;
  overflow: hidden;
  margin: 0 auto 0 auto;
  max-width: 1350px;
  display: none;
}

.container-img-products-carousel {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.produto-carousel-mobile .glide__slides {
  margin-bottom: 30px;
}

.img-products-carousel {
  max-height: 300px;
  max-width: 300px;
}

.bullet-products-carousel {
  width: 100%;
  display: flex;
  justify-content: center;
}

.bullet-products-carousel button {
  border: 1px solid lightgray;
  background: white;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 5px;
  cursor: pointer;
}

.bullet-products-carousel .glide__bullet--active {
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.label-features input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #fff;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid #ff9100;
}

.label-features input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #fff;
  background-image: url('/src/assets/icons/checkbox.svg');
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid #ff9100;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 11px, cover;
  text-decoration: line-through;
}

.select-features {
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--primary-font-color);
  border: 1px solid #eaeef0;
  border-radius: 4px;
  width: 219px;
  height: 40px;
  padding: 0 8px;
  font-size: 15px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  margin-left: 20px;
}

@media (max-width: 1230px) {
  .container-produto-and-actions {
    padding: 0 10px;
  }
}

@media (max-width: 890px) {
  .container-produto-and-actions {
    flex-direction: column;
  }

  .produto-profile-card {
    order: 3;
  }

  .produto-info-card {
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  .container-produto-profile-img {
    display: none;
  }

  .produto-carousel-mobile {
    display: block;
  }
}

@media (max-width: 720px) {
  .produto-profile-card .produto-profile {
    flex-direction: column;
  }

  .produto-profile-info {
    text-align: center;
    margin: 18px 0;
    padding: 0 16px;
  }

  .produto-profile-card .produto-profile-info .produto-name {
    padding-right: 0;
  }

  .produto-profile-card .produto-profile .produto-profile-actions {
    width: 100%;
    border-top: solid 2px #dfe6e9;
  }

  .produto-profile-card .produto-profile .produto-profile-img {
    max-width: 50%;
  }
}

@media (max-width: 455px) {
  .produto-carousel-mobile {
    margin-top: 75px;
    margin-left: 0;
    margin-right: 0;
    width: calc(88vw - 5px);
  }

  .img-products-carousel {
    max-height: 200px;
    max-width: 200px;
  }

  .tabs-links {
    flex-wrap: wrap;
  }

  .container-produto-and-actions {
    max-width: 375px;
  }
}

.glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;margin:0;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}

.product-page-wrapper {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 180px auto 0 auto;
  padding: 0 20px;
}

.container-product-card-item {
  display: flex;
}

.product-page-wrapper .page-title {
  font-family: 'Roboto', sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 32px 0 0 0;
}

.product-page-wrapper .page-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-font-color);
}
/*
.product-page-wrapper .products-search-container {
  width: 70%;
  float: right;
  display: flex;
  flex-wrap: wrap;
  margin: 32px 0;
  justify-content: space-between;
}

.product-page-wrapper .products-search-results-container {
  width: 70%;
  float: right;
  display: flex;
  flex-wrap: wrap;
  margin: 0px 0 32px 0;
  justify-content: space-between;
} */

.add-margin-top {
  margin: 32px 0 32px 0 !important;
}

.product-card-item:hover .product-img {
  transform: scale(1.02);
  transition: transform 0.3s;
}

.product-card-price .product-card-price-span {
  font-size: 1rem;
}

.product-line-separator-filter {
  margin-top: 15px;
  margin-bottom: 15px;
}

.product-card-footer {
  position: relative;
  margin: 2%;
  width: 96%;
  height: 100px;
}

.product-action-links {
  margin: 12px 0;
  font-size: 1rem;
  text-align: center;
  font-weight: bolder;
  grid-column: 1 / span 2;
  text-decoration: underline;
  color: var(--secondary-color);
  cursor: pointer;
}

.products-card-details {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 3px 6px rgba(var(--primary-color-rgb), 0.1);
}

input[type='checkbox']:after {
  background-color: var(--secondary-color) !important;
  color: red !important;

  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--secondary-color);
  background-color: transparent;
}

.slider-arrow-down {
  border: solid var(--secondary-color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);

  width: 0px;
  margin: 4px 12px 4px 12px;
}

.slider {
  -webkit-appearance: none;
  /*width: 100%;*/
  height: 8px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 4px 12px 4px 12px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: var(--secondary-color);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: var(--secondary-color);
  cursor: pointer;
}

.products-feedback-no-data {
  grid-column: 1 / span 3;
  margin-top: 27px;
}

@media (max-width: 890px) {
  .product-page-wrapper .products-search-results-container {
    width: 100%;
  }

  .btn-advanced-search {
    display: flex;
  }

  .slider-arrow-down {
    display: none;
  }

  .slider {
    width: 90%;
    height: 10px;
  }
}

@media (max-width: 660px) {
  .product-card-item:nth-child(3) {
    margin-top: 22px;
  }
}

@media (max-width: 480px) {
  .product-card-item:nth-child(2) {
    margin-top: 22px;
  }

  .products-input-search {
    width: 100%;
    margin-bottom: 9px;
  }

  .product-page-wrapper {
    margin: 194px auto 0 auto;
  }
}

.products-advanced-search-container {
  width: 30%;
  max-width: 285px;
  padding: 32px;
  background: white;
  border-radius: 7px;
  border: 1px solid #eaeef0;
  height: fit-content;
}

.product-advanced-search {
  height: auto;
  display: flex;
  flex-direction: column;
}

.title-filter-searched {
  font-size: 18px;
  color: var(--primary-font-color);
  padding-bottom: 4px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--primary-font-color);
}

.product-advanced-search-slider {
  grid-column: 1 / span 2;
}

.product-advanced-search-label {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: var(--primary-font-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.rotate-arrow img {
  transform: rotate(180deg);
}

.wrapper-product-advanced-search {
  border-bottom: 1px solid #9ba5ae;
  margin-bottom: 16px;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.wrapper-brand-active {
  height: 250px;
}

.product-advanced-search-slider-value-label {
  font-size: 0.9rem;
  grid-column: 1 / span 2;
  margin: 0;
  padding: 0 12px;
  font-family: 'Roboto', sans-serif;
  color: var(--primary-font-color);
}

.product-advanced-search-list {
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 12px 12px 0 12px;
  max-height: 200px;
  min-height: 100px;
  grid-column: 1 / span 2;
}

.product-advanced-search-hidden {
  /*TODO: verificar qual classe conflita com essa e retirar o !important*/
  display: none !important;
}

.product-advanced-search-checkbox-container {
  padding: 8px 0;
  display: flex;
  align-items: center;
}

.product-advanced-search-checkbox-container input[type='checkbox'] {
  min-width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}
.product-advanced-search-checkbox-container label {
  font-size: 1rem;
  color: var(--primary-font-color);
  font-family: 'Roboto', sans-serif;
}

.product-advanced-search-clear-filters {
  height: 48px;
  padding: 1px 12px;
  border-radius: 4px;
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  font-size: 18px;
  font-family: Roboto;
  font-weight: 700;
  background: var(--secondary-font-color);
  cursor: pointer;
  outline: none;
  width: 100%;
  margin-top: 32px;
}
.form-point {
  display: flex;
}

.products-input-search-filter {
  min-height: 40px;
  outline: none;
  font-size: 1rem;
  padding-left: 8px;
  border-radius: 4px;
  color: var(--primary-font-color);
  font-family: 'Roboto', sans-serif;
  border: solid 1px #9ba5ae;
  width: 100%;
}

.products-input-search-filter:focus {
  border: solid 1px var(--secondary-color);
}
.form-point {
  margin-bottom: 24px;
}
.products-input-search-points {
  max-width: 73px;
  margin-right: 14px;
}

.btn-go-point {
  background: var(--secondary-color);
  color: white;
  border-radius: 4px;
  height: 40px;
  width: 45px;
  border: none;
  cursor: pointer;
}

.confirm-filters {
  height: 48px;
  padding: 1px 12px;
  border-radius: 4px;
  background: var(--secondary-color);
  border: none;
  font-size: 18px;
  font-family: Roboto;
  font-weight: 700;
  color: var(--secondary-font-color);
  cursor: pointer;
  outline: none;
  margin: 15px;
  grid-column: 1 / span 2;
  display: none;
}

.btn-close-advanced-filter {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
}

.btn-close-advanced-filter img {
  width: 35px;
  height: 35px;
  margin-left: 4px;
  transform: rotate(90deg);
}

@media (max-width: 890px) {
  .products-advanced-search-container {
    display: none;
    position: fixed;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0;
  }

  .btn-close-advanced-filter {
    display: flex;
  }

  .confirm-filters {
    display: inline-block;
    width: 35%;
  }

  .product-advanced-search-clear-filters {
    width: 35%;
  }

  .title-filter-searched {
    border: none;
    font-size: 24px;
    font-weight: normal;
  }

  .products-input-search-points {
    max-width: 30%;
  }
}

@media (max-width: 480px) {
  .confirm-filters {
    width: 90%;
    margin: 15px 0 0 0;
  }

  .product-advanced-search-clear-filters {
    width: 90%;
  }
}

.voucher-page-wrapper {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 180px auto 0 auto;
  padding: 0 20px;
}

.voucher-page-wrapper .page-title {
  font-family: 'Roboto', sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 32px 0 0 0;
}

.voucher-page-wrapper .page-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-font-color);
}

.voucher-page-wrapper .products-search-container {
  width: 70%;
  float: right;
  display: flex;
  margin-top: 32px;
  justify-content: space-between;
}

.voucher-page-wrapper .voucher-list {
  width: 70%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  margin-left: 5%;
  margin-top: 32px;
  justify-content: space-between;
}

.voucher-page-wrapper .voucher-list .voucher-container:nth-child(1) {
  margin-top: 0;
}

.voucher-page-wrapper .voucher-list .voucher-container:nth-child(2) {
  margin-top: 0;
}

.voucher-page-wrapper .pager-container {
  width: 70%;
  margin: 32px 0 32px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  float: right;
}

.voucher-page-wrapper .pager-container a {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: underline;
  color: var(--secondary-color);
  font-family: Roboto, sans-serif;
}

.voucher-page-wrapper .pager-container a:hover {
  opacity: 0.9;
}

.voucher-page-wrapper .pager-container a:active {
  transform: translateY(1px);
}

.voucher-page-wrapper .product-advanced-search {
  width: 25%;
  float: left;
  margin-top: 32px;
}

.voucher-page-wrapper .voucher-feedback-no-data {
  position: absolute;
  left: 33%;
  top: 360px;
}

.voucher-page-wrapper .voucher-feedback-no-data-alert {
  grid-column: 3 / span 3;
}
@media (max-width: 890px) {
  .voucher-page-wrapper .product-advanced-search {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0;
  }

  .voucher-page-wrapper .products-search-container {
    width: 100%;
    flex-wrap: wrap;
  }

  .voucher-page-wrapper .products-search-results-container {
    width: 100%;
  }

  .voucher-page-wrapper .voucher-list {
    width: 100%;
    margin-left: 0;
  }

  .voucher-page-wrapper .pager-container {
    width: 100%;
  }
}

@media (max-width: 660px) {
  .products-input-search {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .voucher-container {
    width: 100% !important;
  }

  .voucher-page-wrapper .voucher-list .voucher-container:nth-child(1) {
    margin-bottom: 20px;
  }
}

.checkout-container {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 180px auto 0 auto;
  padding: 0 20px;
}

.checkout-form-container {
    width: 65%;
    min-height: 500px;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
    float: left;
}

.checkout-status-line-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
}

.checkout-status-line-container::before{
  content: '';
  display: block;
  position: absolute;
  width: 90%;
  height: 2px;
  background: var(--secondary-color);
}

.checkout-nav-link {
    color: var(--secondary-color);
    font-weight: bolder;
}

.checkout-status-text-container {
    display: flex;
}

.checkout-status-text {
    flex: 1;
    text-align: center;
    min-width: 9em;
    color: var(--tertiary-font-color);
}

.checkout-status-text-active {
    color: var(--secondary-color);
    font-weight: bolder;
}

.checkout-form-title {
    font-size: 42px;
    font-weight: bolder;
    color: var(--primary-color);
    margin: 15px auto;
}

/*LINES AND SHIT*/

.checkout-container > .checkout-status-line-container > li {
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border-radius: 1em;
    background: var(--secondary-color);
    display: inline-block;
    color: white;
    position: relative;
    /*z-index: 1;*/

    cursor: default;
}


.checkout-container > .checkout-status-line-container > li:first-child::before {
    display: none;
}

/* .checkout-container > .checkout-status-line-container > .active {
    background: var(--secondary-color);
} */

/* .checkout-container > .checkout-status-line-container > .active ~ li {
    background: var(--tertiary-font-color);
}


.checkout-container > .checkout-status-line-container > .active ~ li::before {
    background: var(--tertiary-font-color); */
/* } */


/* .checkout-container > .checkout-status-line-container > .active ~ li {
  background: var(--secondary-color) !important;
} */

.checkout-form-container .form-fieldset .inputs-container .input-set .account-form-input.input-readonly {
  color: var(--primary-font-color) !important;
}

.checkout-container .form-fieldset .inputs-container .input-set .form-input-label {
    /*TODO: sumir com esses importants*/
    color: var(--primary-font-color)!important;
    font-size: 16px!important;
    margin-bottom: 12px!important;
    margin-top: 12px!important;
}

.checkout-campos-obrigatorios-label {
    font-weight: normal;
    color: var(--primary-font-color);
}

.checkout-container  .checkout-form-container .form-fieldset .submit-btn {
    border-radius: 4px;
    margin: 0 3.5% 32px 0;
    min-width: 33%;
    color: var(--alternative-background);
    background-color: var(--secondary-color);
}

.checkout-resume-container {
    max-width: 30%;
    min-width: 30%;
    background-color: #ffffff;
    /*border: 1px solid var(--secondary-color);*/
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);

    float: right;
}

.checkout-resume-label {
    font-weight: bolder;
    font-size: 24px;
    color: var(--primary-color);
    margin: 12px;
}

.checkout-resume-item {
    color: var(--primary-font-color);
    margin: 12px;
}

.checkout-resume-value {
    margin: 12px;
    color: var(--primary-font-color);
}

.checkout-subtotal-label {
    font-weight: bolder;
    margin: 12px;
    float: left;
    width: 50%;
    color: var(--primary-font-color);
}

.checkout-subtotal-value {
    margin: 12px;
    float: right;
    color: var(--primary-font-color);
    /*width: 50%;*/
}

.checkout-confirm-label {
    font-size: 42px;
    font-weight: bolder;
    color: var(--primary-color);
    margin: 32px 12px;
}

.checkout-cep {
    float: left;
    margin: 0 10px;
}

.checkout-change-frete {
    margin: 0 12px;
    float: left;
    width: 50%;
    color: var(--secondary-color);
    cursor: pointer;
    text-decoration: underline;
}

.checkout-back-link-container {
    position: relative;
    height: 50px;
    width: 100%;
}

.checkout-back-link {
    position: relative;
    margin: 34px 12px;
    float: left;
    width: 100%;
    font-weight: bolder;
    font-size: 18px;
    color: var(--secondary-color);
    cursor: pointer;
    text-decoration: underline;
}

.checkout-back-to-cart {
    position: relative;
    margin: 34px 12px;
    float: left;
    width: 100%;
    font-weight: bolder;
    font-size: 26px;
    color: var(--primary-color);
    cursor: pointer;
}

.checkout-items-container {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
}

.header-checkout-items-container {
  display: grid;
  grid-template-columns: 5% 20% 10% 15% 20% 20% 10%;
  width: 100%;
}

.details-checkout-items-container{
  display: grid;
  grid-template-columns: 5% 20% 10% 15% 20% 20% 10%;
  width: 100%;
  padding: 0 32px;
}

.checkout-items-footer {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;

    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
}

.checkout-item-footer-header {
    margin: 25px;
    font-weight: bolder;
    color: var(--primary-font-color);
    text-align: center;
}

.checkout-item-footer-header-total {
    color: var(--primary-color);
}

.checkout-item-footer-item {
    margin: 0px 25px 25px;
    font-weight: normal;
    color: var(--primary-font-color);
    text-align: center;
}

.checkout-item-footer-item-total {
    color: var(--primary-color);
}

.checkout-items-header {
    font-weight: bolder;
    margin: 24px 15px;
    color: var(--primary-font-color);
}

.checkout-item {
    font-weight: normal;
    margin: 24px 15px;
    color: var(--primary-font-color);
}

.checkout-item-vendor {
    text-decoration: underline;
}

.checkout-items-header-name {
    color: var(--primary-font-color);
    grid-column: 2;
}

.checkout-items-line-separator, .details-checkout-items-line-separator {
    display: block;
    border-top: 1px solid lightgray;
    grid-column: 1 / span 7;
    width: 100%;
}

.details-checkout-items-line-separator {
  margin: 32px 0;
}

.checkout-item-img {
    position: relative;
    max-width: 100%;
    margin: 24px auto;
}

.container-checkout-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 32px;
  padding-bottom: 32px;
}

.checkout-total {
    text-align: left;
}

.checkout-total-label {
    color: var(--primary-font-color);
    grid-column: 6;
}

.checkout-finish-btn {
    font-weight: bolder;
    font-size: 18px;
    color: var(--alternative-background);

    border: none;
    border-radius: 4px;
    outline: none;

    width: 250px;
    height: 50px;

    margin: 24px 0px 24px 24px;
    float: right;

    background-color: var(--secondary-color);
    cursor: pointer;
}

.checkout-exclude-link {
    color: var(--secondary-color);
    text-decoration: underline;
    grid-column: 2 / span 6;
    margin: 0 15px;
    font-weight: bolder;
    cursor: pointer;
}

.checkout-exclude-link:before {
    /*TODO: colocar ícone*/
}

.checkout-container .user-feedback-container {
    height: 400px;
}

.middle-page .user-feedback-container {
    margin-top: 50px;
    height: 600px;
}

.checkout-container .user-feedback-container .text-container .action-button {
    margin-top: 45px;
}

.checkout-container .user-feedback-container .text-container .title {
    color: var(--primary-color)!important;
}

.middle-page .user-feedback-container .illustration {
    width: 45%!important;
}

.middle-page .user-feedback-container .text-container .title {
   color: var(--primary-color)!important;
    margin-bottom: 32px!important;
}

.middle-page .user-feedback-container .text-container .action-button {
    margin-top: 45px!important;
}

.input-readonly {
    border: 1px solid lightgrey!important;

}

.checkout-feedback-container {
    width: 60%;
    margin: 32px;
}

.we-modal-backdrop {
    position: fixed!important;
}

.detalhe-compra {
  display: none;
}

@media(max-width: 890px){
  .checkout-form-container{
    width: 100%;
  }

  .checkout-resume-container{
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
  }
}

@media(max-width: 660px) {
  .form-fieldset .inputs-container .input-set {
    width: 90% !important;
  }

  .form-fieldset .inputs-container .input-set:last-child {
    width: 100% !important;
  }

  .checkout-container .checkout-form-container .form-fieldset .submit-btn{
    width: 100%;
    margin: 0;
  }

  .header-checkout-items-container {
    display: none;
  }

  .checkout-item-vendor {
    text-decoration: none;
  }

  .detalhe-compra {
    display: flex;
    font-size: 18px;
    font-weight: bold;

  }

  .checkout-status-line-container{
    display: none;
  }

  .checkout-status-text-container {
    display: none
  }

  .checkout-form-title{
    font-size: 28px;
  }

  .details-checkout-items-container {
    display: flex;
    flex-direction: column;
  }

  .checkout-item {
    margin: 0px 15px;
  }

  .checkout-exclude-link {
    background: var(--secondary-color);
    margin: 0 15px;
    font-weight: bolder;
    cursor: pointer;
    color: var(--secondary-font-color);
    text-align: center;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    margin-top: 20px;
  }
}

@media(max-width: 455px){
  .checkout-container {
    margin: 230px auto 0 auto;
  }
}

.pedidos-page-wrapper {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 180px auto 0 auto;
  padding: 0 20px;
}

.meuspedidos-page-title {
  text-align: left;
  font-size: 32px;
  font-weight: bolder;
  color: var(--primary-color);
}

.container-pedidos {
  width: 100%;
  overflow: hidden;
}

.meuspedidos-card {
  display: grid;
  grid-template-columns: 20% 30% 50%;
  margin: 24px;
  align-self: center;
  min-height: 150px;
  background-color: #ffffff;
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.1);
}

.meuspedidos-card-legend {
  /*display: grid;*/
  /*grid-template-columns: 20% 30% 50%;*/
  margin-top: 24px;
  align-self: center;
  min-height: 150px;
  background-color: #ffffff;
  box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0.1);
  overflow: auto;
}

.meuspedidos-card-img {
  max-height: 150px;
  max-width: 150px;
  margin: 25px 0 25px 0;

  grid-column: 1;
}

.meuspedidos-card-item {
  color: var(--primary-font-color);
  margin: 12px;
}

.meuspedidos-card-item-vendor {
  text-decoration: underline;
}

.meuspedidos-status-container {
  position: relative;
}

.meuspedidos-status-line-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.meuspedidos-status-line-container::before {
  content: '';
  display: block;
  position: absolute;
  width: 90%;
  height: 2px;
  background: var(--secondary-color);
}

.meuspedidos-nav-link {
  color: var(--secondary-color);
  font-weight: bolder;
}

.meuspedidos-card-moreinfo {
  float: right;
  margin: 50px;
  color: var(--secondary-color);
  font-weight: bolder;
  text-decoration: underline;
  cursor: pointer;
}

.meuspedidos-card-details {
  height: 150px;
  display: grid;
  grid-column: 1 / span 3;
  grid-template-columns: 25% 25% 25% 25%;
}

.meuspedidos-card-details-hide {
  display: none;
}

.meuspedidos-card-detail-title {
  grid-column: 1 / span 1;
  color: var(--primary-font-color);
  font-weight: bolder;

  margin: 12px 12px 0px 12px;
}

.meuspedidos-card-detail-value {
  color: var(--primary-font-color);
  margin: 0px 12px 12px 12px;
}

.meuspedidos-line-separator {
  display: block;
  grid-column: 1 / span 4;
  width: 100%;
  border-top: none;
  border-left: none;
}

.meuspedidos-line-separator-alt {
  margin-top: 54px;
  margin-bottom: 54px;
}

/*LINES AND SHIT*/

.meuspedidos-card-legend
  > .meuspedidos-status-container
  > .meuspedidos-status-line-container
  > li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: var(--secondary-color);
  display: inline-block;
  color: white;
  position: relative;
  /*z-index: 1;*/

  cursor: default;
}

.meuspedidos-card-legend
  > .meuspedidos-status-container
  > .meuspedidos-status-line-container
  > li:first-child::before {
  display: none;
}

.meuspedidos-card-legend
  > .meuspedidos-status-container
  > .meuspedidos-status-line-container
  > .active {
  background: var(--secondary-color);
}

.meuspedidos-card-legend
  > .meuspedidos-status-container
  > .meuspedidos-status-line-container
  > .active
  ~ li {
  background: var(--tertiary-font-color);
}

.meuspedidos-card-legend
  > .meuspedidos-status-container
  > .meuspedidos-status-line-container
  > .active
  ~ li::before {
  background: var(--tertiary-font-color);
}

.meuspedidos-legend-label {
  padding: 18px 36px;
  color: var(--primary-font-color);
}

.meuspedidos-status-text-container {
  margin: 0 2em /* tem que ser o mesmo que a margem do li - negativo*/;
  display: flex;
}

.meuspedidos-status-text {
  /*max-width: 4.5em;*/
  /*margin-left: 6.7em;*/
  /*text-align: left;*/

  /*font-size: 12px;*/
  /*color: var(--tertiary-font-color);*/

  /*flex: 1;*/

  max-width: 15em;
  margin-left: 3em;
  text-align: center;
  font-size: 12px;
  color: var(--tertiary-font-color);
  flex: 1;
}

.meuspedidos-status-text-center {
  text-align: center;
}

.meuspedidos-status-text-active {
  color: var(--secondary-color);
  font-weight: bolder;
}

.meuspedidos-status-order-label {
  color: var(--tertiary-font-color);
  font-size: 14px;
  margin: 24px 0 0 24px;
}

.meuspedidos-status-order-text {
  color: var(--secondary-color);
  font-weight: bolder;
  font-size: 22px;
  margin: 0px 0 0 24px;
}

.meuspedidos-status-order-data {
  color: var(--tertiary-font-color);
  font-size: 14px;
  margin-left: 24px;
}

@media (max-width: 810px) {
  .meuspedidos-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .meuspedidos-status-container {
    text-align: center;
  }

  .meuspedidos-container-item {
    text-align: center;
  }
}

@media (max-width: 580px) {
  .container-pedidos {
    display: none;
  }

  .meuspedidos-card-details {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .meuspedidos-card-details-hide {
    display: none;
  }
}

@media (max-width: 455px) {
  .pedidos-page-wrapper {
    margin: 225px auto 0 auto;
  }
}

/*Novo*/

.containerCards {
  background: var(--alternative-background);
  border: 1px solid #eaeef0;
  min-height: 180px;
  width: 100%;
  border-radius: 5px;
  padding: 26px 26px 0px 26px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 26px;
  flex-direction: column;
}

.containerOrders {
  padding-bottom: 26px;
  display: flex;
}

.containerOrders:nth-child(n + 2) {
  border-top: 1px solid #eaeef0;
  padding-top: 26px;
}

.meusPedidosCardImage {
  position: relative;
  min-height: 150px;
  max-width: 150px;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
}

.meusPedidosImage {
  object-fit: cover;
  width: 100%;
}

.meusPedidosWrapperInfoCard {
  position: relative;
  min-height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 24px;
}

.superiorInfoCard {
  display: flex;
  flex-direction: column;
}

.meusPedidosTextStatusCard {
  font-size: 14px;
  color: var(--primary-font-color);
  margin: 0;
}
.meusPedidosStatusCard {
  color: var(--secondary-color);
  font-size: 24px;
  margin: 0;
}

.meusPedidosStatusCardCancelado {
  color: var(--status-red);
}

.meusPedidosStatusCardConfirmado {
  color: var(--status-green);
}
.meusPedidosDataStatusCard {
  color: var(--primary-font-color);
  font-size: 14px;
  margin: 0;
}
.inferiorInfoCard {
  position: relative;
}

.meusPedidosNameProductCard {
  color: var(--primary-font-color);
  font-size: 16px;
  margin: 0;
}
.boxQntandValue {
  display: flex;
}
.meusPedidosQntProduct {
  color: var(--primary-font-color);
  font-size: 16px;
  margin-right: 20px;
}
.meusPedidosvalueProduct {
  color: var(--primary-font-color);
  font-size: 16px;
}

.meusPedidosWrapperDetailsInfoCard {
  position: relative;
  min-height: 100%;
  max-width: 210px;
  display: flex;
  align-items: center;
}

.meusPedidosBtnDetailsInfoCard {
  background: var(--secondary-color);
  color: var(--secondary-font-color);
  font-size: 16px;
  display: flex;
  width: 100%;
  margin: 0;
  align-items: center;
  cursor: pointer;
  padding: 9px 36px;
  border-radius: 5px;
  text-decoration: none;
}
.meusPedidosArrowBtnDetailsInfoCard {
  width: 12px;
  height: 8px;
  margin-left: 6px;
  transition: all 0.2s;
}

.rotateArrowDetails {
  transform: rotate(180deg);
}

.meusPedidosDetailsInfoCard {
  width: 100%;
  height: 0;
  transition: all 0.2s;
  border-top: 0px solid #eaeef0;
  visibility: hidden;
  overflow: hidden;
  display: grid;
  grid-column: 1 / span 3;
  grid-template-columns: 25% 25% 25% 25%;
}

.showDetailsInfoCard {
  min-height: 150px;
  height: 100%;
  border-top: 1px solid #eaeef0;
  padding-top: 10px;
  margin-top: 32px;
  visibility: visible;
  overflow: visible;
}

/*Detalhes do pedido*/

.meuspedidos-page-title-details {
  margin: 9px 0 28px 0;
}

.btn-back-to-orders {
  display: flex;
  align-items: center;
  color: var(--primary-font-color);
  font-size: 16px;
}

.btn-back-to-orders span {
  order: 2;
}

.img-back-to-orders {
  width: 24px;
  height: 24px;
  margin-right: 9px;
  order: 1;
}

.with-number-orders {
  margin-top: 9px;
  margin-bottom: 45px;
}

.meusPedidoswrapperDatePrevious {
  display: flex;
  flex-direction: column;
}

.textDatePrevious {
  margin: 0;
  text-align: right;
  color: var(--primary-font-color);
  font-size: 16px;
}

.meusPedidosWrapperTrakingOrders {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.boxTrakingOrders {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 445px;
  background: var(--alternative-background);
  border: 1px solid var(--light-color);
  min-height: 180px;
  border-radius: 5px;
  padding: 26px;
}

.borderAlertTrakingOrders {
  border: 1px solid var(--status-yellow);
}

.boxListTrakingOrders {
  list-style: none;
  position: relative;
  margin: 18px 0 0 0;
  padding: 0;
}

.itemStatusTranking {
  display: flex;
  justify-content: space-between;
  background: #f4f7fa;
  border: 1px solid var(--light-color);
  padding: 12px;
  width: calc(100% - 28px);
  margin: 0;
  margin-left: 28px;
  margin-bottom: 18px;
  position: relative;
  border-radius: 3px;
  z-index: 1;
}

.itemStatusTranking:last-child {
  margin-bottom: 0px;
}

.itemStatusTranking::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: var(--secondary-color);
  position: absolute;
  left: -28px;
  border-radius: 50%;
}

.linhaListTrakingOrders {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  height: calc(100% - 20px);
  background: #eeeeee;
  left: 5px;
}

.statusTranking {
  color: var(--primary-font-color);
  font-size: 14px;
}

.timeStatusTranking {
  color: #949494;
  font-size: 12px;
}

.titleTrakingOrders {
  color: var(--primary-font-color);
  font-size: 18px;
}

.alertTrakingOrders {
  color: var(--primary-font-color);
  font-size: 16px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  margin: 0;
}

.alertTrakingOrders span {
  order: 2;
}

.imgWarningTrakingOrders {
  order: 1;
  margin-right: 9px;
}

.boxTrakingOrdersDetails {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--alternative-background);
  border: 1px solid #eaeef0;
  min-height: 180px;
  border-radius: 5px;
  padding: 26px 26px 0 26px;
  margin-left: 26px;
}

.itemTrakingOrdersDetails {
  border-bottom: 1px solid #eaeef0;
  margin-bottom: 26px;
  padding-bottom: 9px;
}

.itemTrakingOrdersDetails:last-child {
  border-bottom: 0;
  margin-bottom: 9px;
}

.titleTrakingOrdersDetails {
  color: var(--primary-font-color);
  font-size: 18px;
  margin-bottom: 9px;
  display: block;
}

.textTrakingOrdersDetails {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: var(--primary-font-color);
  font-size: 16px;
  align-items: center;
  margin-bottom: 9px;
}

.textTrakingOrdersDetails p {
  margin: 0;
  font-size: 16px;
}

.textTrakingOrdersDetails strong {
  font-size: 14px;
}

@media (max-width: 980px) {
  .titleTrakingOrdersDetails {
    text-align: center;
  }

  .textTrakingOrdersDetails {
    margin-bottom: 12px;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 825px) {
  .containerCards {
    flex-direction: column;
  }

  .containerOrders {
    flex-direction: column;
  }

  .meusPedidosCardImage {
    max-width: 100%;
    justify-content: center;
  }

  .meusPedidosImage {
    max-width: 180px;
  }

  .meusPedidosWrapperInfoCard {
    align-items: center;
  }

  .superiorInfoCard {
    text-align: center;
    margin: 18px 0;
  }

  .inferiorInfoCard {
    text-align: center;
  }

  .meusPedidosWrapperDetailsInfoCard {
    max-width: 100%;
    margin-top: 18px;
  }

  .meusPedidosBtnDetailsInfoCard {
    justify-content: center;
  }

  .meusPedidosDetailsInfoCard {
    grid-template-columns: 100%;
    text-align: center;
  }

  .meusPedidoswrapperDatePrevious {
    align-items: center;
    margin-top: 18px;
  }

  .titleTrakingOrders {
    text-align: center;
  }

  .alertTrakingOrders {
    width: 100%;
    justify-content: center;
  }

  .meusPedidosWrapperTrakingOrders {
    flex-direction: column;
  }

  .boxTrakingOrders {
    max-width: 100%;
    margin-bottom: 18px;
  }

  .boxTrakingOrdersDetails {
    margin-left: 0;
    width: 100%;
  }
}

.controls {
  width: 100%;
  display: flex;
  justify-content: end;
  gap: 25px;
}

.controls div {
  color: #ffff;
  background: var(--secondary-color);
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

body {
  overflow-x: hidden;
}

.wrapper-banner {
  width: calc(100vw - 5px);
  position: relative;
  overflow: hidden;
  margin: 180px auto 0 auto;
  max-width: 1350px;
}

.banner-carousel {
  max-height: 500px;
}

.img-banner img {
  display: block;
  width: 100%;
  object-fit: cover;
  max-height: 500px;
}

.glide__slides {
  margin: 0;
}

.glide__arrows {
  z-index: 1;
  width: 100%;
}

.glide__arrows__carousel .glide__arrow--left {
  left: -20px;
}

.glide__arrows__carousel .glide__arrow--right {
  right: -20px;
}

.glide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-top: -9px;
  box-shadow: 2px 2px 8px rgb(0 0 0 / 20%);
}

.glide__arrow--right img {
  transform: rotate(180deg);
}

.glide__arrow--right {
  right: 20px;
}

.glide__arrow--left {
  left: 20px;
}

.bullet-banners {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.bullet-banners button {
  border: 1px solid lightgray;
  background: white;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 5px;
  cursor: pointer;
}

.bullet-banners .glide__bullet--active {
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.bullet-offers {
  position: absolute;
  bottom: -30px;
  width: 100%;
  display: flex;
  justify-content: center;
  display: none;
}

.bullet-offers button {
  border: 1px solid lightgray;
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 0 5px;
  cursor: pointer;
}

.bullet-offers .glide__bullet--active {
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.title-offers {
  color: var(--primary-font-color);
  font-size: 32px;
  font-weight: 700;
  margin: 25px 0;
}

.wrapper-offers {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 20px;
}

.wrapper-block-voucher-and-service {
  width: 100%;
  max-width: 1350px;
  margin: 60px auto 0 auto;
  display: flex;
  justify-content: space-between;
}

.block-voucher-offers,
.block-service-offers {
  width: 49%;
  min-height: 158px;
  padding: 17px 20px;
  background: white;
  border-radius: 7px;
  border: 1px solid #eaeef0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.block-voucher-right,
.block-service-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title-block-voucher-right,
.title-block-service-right {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-font-color);
}

.link-block-voucher-right,
.link-block-service-right {
  font-size: 16px;
  color: var(--secondary-font-color);
  text-decoration: none;
  font-weight: bold;
  background: var(--secondary-color);
  width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.link-block-voucher-right:hover,
.link-block-service-right:hover {
  filter: brightness(120%) saturate(120%);
}

.img-block-voucher-left,
.img-block-service-left {
  display: flex;
  align-items: center;
  object-fit: cover;
  min-height: 100%;
  padding-left: 20px;
}

.img-block-voucher-left img,
.img-block-service-left img {
  width: 100%;
}

.wrapper-best-offers {
  width: 100%;
  max-height: 350px;
  max-width: 1350px;
  margin: 120px auto 0 auto;
}

.no-have-banner {
  margin: 0px auto 0 auto;
}

.best-offers-carousel {
  width: calc(100vw - 40px);
  max-width: calc(1350px - 40px);
  margin: 0 auto;
  position: relative;
}

.vouchers-carousel {
  width: calc(100vw - 40px);
  max-width: calc(1350px - 40px);
  margin: 0 auto;
  position: relative;
}

.item-best-offer {
  min-height: 275px;
  padding: 20px 0;
  margin-bottom: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: 7px;
  border: 1px solid #eaeef0;
  box-shadow: 0 0px 0px rgba(var(--primary-color-rgb), 0.1);
  transition: all 0.2s;
}

.item-best-offer:hover {
  box-shadow: 0 3px 6px rgba(var(--primary-color-rgb), 0.1);
}

.container-img-vendor-best-offer {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.img-vendor-best-offer {
  max-height: 40px;
  object-fit: contain;
}

.container-img-product-best-offer {
  width: 100%;
  height: 109px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-product-best-offer {
  max-height: 109px;
}

.container-description-best-offer {
  width: 100%;
  border-top: 1px solid #eaeef0;
  padding: 14px 28px 0 28px;
  font-family: 'Roboto', sans-serif;
  margin-top: 18px;
  text-align: left;
}

.description-best-offer {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  color: var(--primary-font-color);
}

.value-best-offer {
  font-size: 24px;
  margin-top: 18px;
  font-weight: 400;
  color: var(--primary-color);
}

.value-best-offer span {
  font-size: 22px;
}

.glide__arrow--products {
  left: -20px;
}

.glide__arrow--stores {
  margin-top: 0;
}

.wrapper-most-rescue {
  width: 100%;
  max-width: 1350px;
  margin: 120px auto 0 auto;
  max-height: 350px;
}

.most-rescue-carousel {
  width: calc(100vw - 40px);
  max-width: calc(1350px - 40px);
  margin: 0 auto;
  position: relative;
}

.wrapper-stores {
  width: 100%;
  max-width: 1350px;
  margin: 120px auto 0 auto;
  position: relative;
  max-height: 350px;
}

.stores-carousel {
  width: calc(100vw - 40px);
  max-width: calc(1350px - 40px);
  margin: 0 auto;
  position: relative;
}

.ofertas-card-vendor {
  height: 116px;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #eaeef0;
  display: flex;
  align-items: center;
  max-width: 120px;
  margin-bottom: 10px;
  box-shadow: 0 0px 0px rgba(var(--primary-color-rgb), 0.1);
  transition: all 0.2s;
}

.ofertas-card-vendor:hover {
  box-shadow: 0 3px 6px rgba(var(--primary-color-rgb), 0.1);
}

.ofertas-logo-vendor {
  max-width: 80px;
  max-height: 80px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.ofertas-all-vendors-link {
  color: var(--secondary-color);
  font-weight: bolder;
  text-decoration: underline;
  cursor: pointer;
  width: 100%;
  text-align: right;
  margin-top: 25px;
  display: block;
}

.wrapper-title-link-offers {
  display: flex;
  align-items: baseline;
}

.link-more-offers {
  text-decoration: none;
  font-size: 16px;
  color: var(--primary-color);
  display: inline-block;
  margin-left: 16px;
  margin-bottom: 5px;
}

.link-more-offers:hover {
  text-decoration: underline;
}

.wrapper-vouchers {
  width: 100%;
  max-width: 1350px;
  margin: 120px auto 0 auto;
  max-height: 350px;
}

@media (max-width: 1350px) {
  .most-rescue-carousel {
    max-width: calc(1350px - 120px);
  }

  .best-offers-carousel {
    max-width: calc(1350px - 120px);
  }

  .stores-carousel {
    max-width: calc(1350px - 120px);
  }

  .glide__arrows__carousel .glide__arrow--left {
    left: -20px;
  }

  .glide__arrows__carousel .glide__arrow--right {
    right: -20px;
  }
}

@media (max-width: 800px) {
  .img-banner img {
    min-height: 375px;
  }

  .container-card-vendor {
    grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
  }

  .banner-carousel .glide__arrows {
    display: none !important;
  }

  .wrapper-block-voucher-and-service {
    flex-direction: column;
  }

  .block-voucher-offers,
  .block-service-offers {
    width: 100%;
    margin-bottom: 20px;
  }

  .title-offers {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .wrapper-banner {
    margin: 225px auto 0 auto;
  }

  .img-banner img {
    min-height: auto;
  }

  .glide__arrows__carousel .glide__arrow--left {
    left: 0px;
  }

  .glide__arrows__carousel .glide__arrow--right {
    right: 0px;
  }

  .container-card-vendor {
    grid-template-columns: minmax(50%, 1fr) 1fr;
  }

  .banner-desktop {
    display: none !important;
  }

  .banner-mobile {
    display: block !important;
  }

  .bullet-banners button {
    width: 15px;
    height: 15px;
  }

  .bullet-offers {
    display: flex;
  }

  .glide__arrows__carousel {
    display: none !important;
  }

  .item-best-offer {
    height: 332px;
  }
}

.stores-container {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 180px auto 0 auto;
  padding: 0 20px;
}

.title-page-stores {
  color: var(--primary-font-color);
  font-size: 32px;
  font-weight: 700;
  margin: 16px 0;
}

.bread-crumb {
  display: flex;
  align-items: center;
  color: #9ba5ae;
  font-size: 14px;
}

.bread-crumb a {
  color: #9ba5ae;
  text-decoration: none;
}

.bread-crumb img {
  display: flex;
  margin: 0 6px;
  height: 12px;
  position: relative;
  top: 1px;
}

.bread-crumb p {
  color: var(--secondary-color);
  line-height: auto;
}

.wrapper-input-search-store {
  display: flex;
  align-items: center;
  border: 1px solid #eaeef0;
  max-width: 510px;
  width: 100%;
  height: 40px;
  background: white;
  margin-bottom: 60px;
  position: relative;
}

.input-search-store {
  flex: 1;
  min-height: 100%;
  height: 40px;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--primary-font-color);
  padding: 2px 20px;
}

.button-search-store {
  background: none;
  border: none;
  min-height: 100%;
  height: 40px;
  cursor: pointer;
  position: absolute;
  right: 10px;
}

.container-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(239px, auto));
  gap: 16px;
}

.ofertas-card-page-store {
  height: 116px;
  cursor: pointer;
  position: relative;
  background-color: white;
  border: 1px solid #eaeef0;
  display: flex;
  align-items: center;
  box-shadow: 0 0px 0px rgba(var(--primary-color-rgb), 0.1);
  transition: all 0.2s;
}

.ofertas-card-page-store:hover {
  box-shadow: 0 3px 6px rgba(var(--primary-color-rgb), 0.1);
}

.ofertas-logo-page-store {
  max-width: 80px;
  max-height: 80px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.name-stores {
  display: none;
}

body .loading-container {
    /*background-color: var(--content-background);*/
    z-index: 1;
}

td {
    list-style: none;
}

.extrato-item::before {
    content: '\2022';
    font-weight: bold;
    display: inline-block;

    /* width: 0.5em; */
    margin-left: -0.5em;
    font-size: 35px;
    position: absolute;
    margin-top: -10px;
}

.extrato-item-debit::before {
    color: red;
}

.extrato-item-credit::before {
    color: limegreen;
}


.sidenav {
  float: left;
  width: auto;
  position: absolute;
  left: 0;
  top: 100px;
  min-height: 500px;
  height: 120vh;
  z-index: 0;
  transition: all 0.5s;
}

.sidenav a {
    display: flex !important;
    align-items: center;
    line-height: normal !important;
}

.extrato-container {
  position: relative;
  display: table;
  width: 100%;
  max-width: 1350px;
  margin: 100px auto 0 auto;
  padding: 0 20px;
}

.extrato-container .index-back-link-container {
    margin-top: 0px;
}

.extrato-container .user-feedback-container {
    margin-top: 0px;
    max-height: 420px;
    grid-template-columns: 50% 50%;
}

.extrato-container .user-feedback-container .title {
    margin-top: 0px !important;
}

.extrato-container .user-feedback-container .description {
    margin-top: 100px !important;
}

.extrato-container .user-feedback-container .text-container .action-button {
    outline: none;
    border: solid;
    border-width: 1px;
    align-self: center;
    width: 200px;
    height: 48px;
    font-size: 16px;
    border-radius: 4px;
    font-weight: 700;
    color: var(--secondary-color);
    background: white;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0);
    cursor: pointer;
}

.extrato-sidenav-container {
    width: 20%;
    float: left;
}

.extrato-content-container {
    width: 75%;
    float: right;
    position: relative;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
}

.extrato-content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.extrato-content-title h1 {
  font-weight: bolder;
  color: var(--tertiary-color);
  font-size: 24px;
  text-transform: uppercase;
}

.content-search {
  display: none !important;
}

.wrapper-search {
    width: 100%;
    height: 48px;
    display: flex;
    margin-top: 40px;
    box-shadow: 0px 2px 4px var(--shadow-color);
}

.input-search {
    flex: 1;
    background: #ffffff;
    border-radius: 4px 0 0 4px;
    border: none;
    padding: 24px 16px;
    font-size: 16px;
    color: var(--primary-font-color);
}

.button-search {
    width: 160px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    color: var(--secondary-font-color);
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.button-search img {
    width: 15px;
    margin-right: 13px;
}

.button-search p {
    font-size: 18px;
    font-weight: bold;
}

.extrato-content-downloadbtn {
    outline: none;
    border: none;
    align-self: center;
    border-radius: 4px;
    font-weight: 700;
    color: var(--secondary-color);
    background: none;
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), 0);
    cursor: pointer;
    margin: 10px 0 10px auto;
}

.extrato-content-table {
    width: 100%;
    color: var(--primary-font-color);
    border-collapse: collapse;
}

.extrato-back-offer {
    color: var(--secondary-color) !important;
    font-weight: bolder;
    text-decoration: underline !important;
    text-align: left;
    cursor: pointer;
    padding-left: 25px;
}

.extrato-content-table-header {
    font-weight: bolder;
    height: 56px;
}

.extrato-content-table-rows {
    border-bottom: 1pt solid #eaeef0;
}

.extrato-content-table-rows:last-child {
    border-bottom: none;
}

.extrato-content-table-column-first {
    max-width: 30%;
    padding: 16px 24px;
}

.extrato-content-table-column {
    width: 16%;
    padding: 24px;
}

/* .extrato-content-table-column:last-child {
    width: 11%;
} */

.extrato-listagem-table-container {
    background-color: #ffffff;
    border-radius: 4px;

    /* box-shadow: 0 3px 6px rgba(var(--primary-color-rgb), 0.1); */
    box-shadow: 1px 3px 6px var(--shadow-color);
}

.img-item-download {
    width: 24px;
    height: 21px;
    margin-left: 8px;
}

.wrapper-button-advanced-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    margin-bottom: 24px;
}

.button-advanced-search {
    display: flex;
    color: var(--secondary-color);
    align-items: center;
    font-size: 18px;
    padding-right: 40px;
    position: relative;
    cursor: pointer;
}

.button-advanced-search:hover {
    text-decoration: underline;
}

.button-advanced-search::after {
    content: url("/src/assets/icons/arrow-down.svg");
    position: absolute;
    display: block;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    transform: translateY(-50%);
    width: 16px;
    transition: all 0.5s;
}

.rotate-arrow::after{
  transform: translateY(-50%) rotate(180deg);
}


.wrapper-advanced-search {
    background: #ffffff;
    box-shadow: 1px 3px 6px var(--shadow-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* padding: 32px 16px; */
    transition: all 0.25s ease;
    overflow: hidden;
    height: 0;
}

.show-container {

}

.container-select-advanced-search {
    padding: 32px 16px 24px 16px;
}

.container-select-advanced-search select {
    font-size: 16px;
    color: var(--primary-font-color);
    position: relative;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url("/src/assets/icons/arrow-down.svg") no-repeat center right;
    background-size: 16px;
    padding-right: 20px;
}

.type-advanced-search {
    margin-right: 80px;
}

.origin-advanced-search {
    /* width: 85px; */
}

.container-buttons-advanced-search {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    padding: 0px 16px 24px 16px;
}

.button-container-advanced {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    font-size: 16px;
    background: var(--secondary-font-color);
    border-radius: 4px;
    min-width: 109px;
    min-height: 32px;
    margin-right: 8px;
    outline-color: var(--secondary-color);
    cursor: pointer;
}

.button-container-advanced.active-button {
    background: var(--secondary-color);
    color: var(--secondary-font-color);
}

.text-ou {
    margin-right: 8px;
    color: var(--primary-font-color);
}

.input-initial-date {
    position: relative;
}

.input-initial-date::-webkit-calendar-picker-indicator,
.input-last-date::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.form-date {
    border: 1px solid var(--secondary-color);
    font-size: 16px;
    background: var(--secondary-font-color);
    border-radius: 4px;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0px 8px;
    width: 100%;
}

.form-date label {
    color: var(--primary-font-color);
    display: flex;
    position: relative;
    flex: 1;
}

.form-date input {
    color: var(--primary-font-color);
    border: none;
    font-size: 16px;
    text-align: center;
    outline-color: var(--secondary-color);
    margin: 0 8px;
    width: 100%;
}

.label-initial-date {
    border-right: 1px solid var(--secondary-color);
}

.pagination-table {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 16px;
}

.first-page,
.prev-page,
.next-page,
.last-page {
    color: var(--secondary-color);
    cursor: pointer;
}

.first-page,
.prev-page,
.next-page {
    padding: 0 5px;
}

.numbers-page {
    color: var(--tertiary-font-color);
    font-size: 18px;
    padding: 0 5px;
    margin: 0 3px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.numbers-page:hover,
.numbers-page.pageActive {
    color: var(--primary-font-color);
    cursor: pointer;
    border-bottom: 1px solid var(--secondary-color);
}

.container-error {
    width: 100%;
}

.hide-container-error {
    display: none;
}

.wrapper-alert-error {
    display: flex;
    border: 1px solid #ff3535;
    background: rgba(255, 53, 53, 0.15);
    border-radius: 4px;
    padding: 8px 16px;
    margin-bottom: 18px;
}

.text-alert-information {
    flex: 1;
    margin-left: 28px;
    color: var(--status-red);
    font-size: 14px;
}

.title-help-text {
    margin-bottom: 8px;
    color: var(--primary-font-color);
}

.icon-close-alert {
    cursor: pointer;
}

.detalhe-container {
    padding-top: 150px;
    display: flex;
    flex-direction: column;
}

/*Extrato Listagem*/

.extrato-back-list {
    color: var(--secondary-color) !important;
    font-weight: normal;
    text-decoration: underline !important;
    text-align: left;
    cursor: pointer;
}

.title-detalhe-extrato {
    font-weight: bold;
    color: var(--tertiary-color);
    font-size: 24px;
    margin: 32px 0;
}

.wrapper-details {
    background: #ffffff;
    box-shadow: 1px 3px 6px var(--shadow-color);
    border-radius: 4px;
    display: flex;
    transition: all 0.25s ease;
    overflow: hidden;
}

.box-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    list-style: none;
    text-align: center;
    margin: 12px 0;
    padding: 4px 0;
    border-left: 1px solid #eaeef0;
}

.box-item-details:first-child {
    border-left: none;
}

.box-item-details:last-child {
    border-left: 1px solid var(--tertiary-color);
}

.box-item-details li {
    font-size: 18px;
    color: var(--primary-font-color);
}

.box-item-details li strong {
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
}

.box-item-details:last-child li {
    color: var(--tertiary-color);
}

.number-results-datails {
    font-size: 14px;
    color: var(--primary-font-color);
    margin: 16px 0 8px;
}

.table-datails {
    min-height: 200px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 1px 3px 6px var(--shadow-color);
    width: 100%;
    border-collapse: collapse;
    padding-left: 8px;
    position: relative;
}

.table-datails tr {
    border-bottom: 1px solid #eaeef0;
}


.table-datails th {
  padding: 24px 16px 24px 16px;
  text-align: left;
  font-size: 16px;
  color: var(--primary-font-color);
}

.tr-thead-table-details th:first-child {
  padding: 24px 16px 24px 32px;
}

.tbody-table-details tr:last-child {
    border-bottom: none;
}

.tbody-table-details tr:last-child td {
    padding: 16px 16px 32px 16px;
}

.tbody-table-details tr:last-child td:first-child {
    padding: 16px 16px 32px 32px;
}


.table-datails td {
    padding: 16px;
    text-align: left;
    font-size: 16px;
    color: var(--primary-font-color);
}

.table-datails td:first-child {
    padding: 16px 16px 16px 32px;
}

.info-codigo-details {
    border: 1px solid var(--tertiary-color);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 4px;
}

.btn-download-details {
    background: var(--secondary-color);
    color: var(--secondary-font-color);
    max-width: 255px;
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 17px;
    align-self: flex-end;
    margin-top: 24px;
}

.btn-download-details img {
    width: 21px;
    height: 18px;
    margin-left: 24px;
    margin-bottom: 3px;
}

.button-to-compare{
  border: 1px solid #fff;
  background: none;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 4px 8px;
  border-radius: 4px;
}

.button-to-compare span{
  margin-right: 4px;
}

.button-to-compare:hover{
  border: 1px solid var(--secondary-color);
}

.background-black-menu-resposivo{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0, 0.3);
  z-index: 1;
  display: none;
}
.btn-show-sidenav-container{
  color: var(--primary-color);
  font-size: 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  display: none;
}

.btn-close-sidenav-container {
  position: absolute;
    top: 5px;
    right: 5px;
    background: var(--primary-color);
    color: var( --secondary-font-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    border: none;
    display: none;
}

.text-points-responsive {
  display: none;
}

@media(max-width: 980px){
  .btn-show-sidenav-container{
    display: block;
  }

  .btn-close-sidenav-container{
    display: flex;
  }

  .sidenav{
    position: fixed;
    top: 100px;
    bottom: 0;
    left: -210px;
    z-index: 2;
  }

  .extrato-content-container{
    width: 100%;
  }

  .extrato-listagem-table-container {
    width: 100%;
  }

  .extrato-content-table {
    width: 100%
  }
}

@media(max-width: 710px){
    .extrato-content-table-header{
        display: none !important;
    }

    .extrato-content-table-rows{
        display: flex;
        flex-direction: column;
    }

    .extrato-content-table-column{
        width: 100%;
        text-align: center;
    }

    .extrato-content-table-column:first-child{
        font-weight: bold;
        font-size: 22px;
        border-bottom: 1px solid #eaeef0
    }

    .extrato-container .user-feedback-container {
      grid-template-columns: 100% 100%;
      display: flex;
      flex-direction: column;
    }

    .user-feedback-container .text-container{
      margin-top: 18px;
      width: 100%;
    }

    .middle-page .user-feedback-container .text-container .title {
      font-size: 32px;
      text-align: center;
    }

    .extrato-container .user-feedback-container .text-container .action-button{
      width: 100%;
    }

    .text-points-responsive {
      display: flex;
      font-size: 18px;
      align-items: center;
      justify-content: center;
      margin: 0 0 8px 0;
    }

    .content-search {
      display: none !important;
    }
}

@media(max-width: 480px){
  .extrato-content-title {
    flex-direction: column;
  }

  .middle-page .user-feedback-container .text-container .title {
    font-size: 26px;
  }
}

* {
  box-sizing: border-box;
}
.center-box-header {
  background-color: var(--primary-color);
  width: 100%;
  position: relative;
  z-index: 9;
}

.header {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  font-family: Roboto;
  /*TODO: param tamanho*/
  height: 100px;
  padding: 0 20px;
}

.header a.logo {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  max-height: 110px;
  height: 100%;
  font-size: 25px;
  grid-column: 1;
  justify-self: flex-start;
  width: 100%;
  max-width: 210px;
}

.header .header-links-container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header .header-links-container a {
  margin: 0 16px;
  color: var(--tertiary-font-color);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

.header .header-links-container a:hover {
  opacity: 0.9;
}

.header .header-links-container a.header-link-active {
  position: relative;
  font-weight: bold;
  height: 100%;
  /* TODO: combinar com o param tamanho */
  line-height: 100px;
}

.header .header-links-container a.header-link-active::after {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background: var(--secondary-color);
  position: absolute;
  bottom: 0;
}

.menu-btn-responsive {
  width: 55px;
  height: 40px;
  position: relative;
  display: none;
  align-items: center;
  margin-right: 15px;
  cursor: pointer;
}

.hamburguer {
  display: block;
  width: 30px;
  height: 5px;
  background: var(--secondary-font-color);
  border-radius: 4px;
  position: relative;
  transition: 0.3s ease-in-out;
}

.hamburguer:before,
.hamburguer:after {
  width: 40px;
  content: "";
  display: block;
  height: 5px;
  background: var(--secondary-font-color);
  border-radius: 4px;
  position: absolute;
  transition: 0.3s ease-in-out;
}

.hamburguer:before {
  top: -11px;
}

.hamburguer:after {
  bottom: -11px;
}

#input-menu-btn-responsive {
  display: none;
}

#input-menu-btn-responsive:checked ~ .menu-btn-responsive .hamburguer {
  transform: rotate(45deg);
  width: 40px;
}

#input-menu-btn-responsive:checked ~ .menu-btn-responsive .hamburguer:before {
  transform: rotate(90deg);
  top: 0;
}

#input-menu-btn-responsive:checked ~ .menu-btn-responsive .hamburguer:after {
  transform: rotate(90deg);
  bottom: 0;
}

.full-container-responsive {
  position: fixed;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  transition: 0.5s;
}

#input-menu-btn-responsive:checked ~ .full-container-responsive {
  display: block;
  background: rgba(0, 0, 0, 0.2);
}

.header .notification {
  display: block;
  margin: 0 auto;
  height: 34px;
  width: 34px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  background-color: var(--secondary-color);
}

.header .notification:active {
  transform: translateY(1px);
}

.header .profile-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: auto;
}

.header .profile-container .user-points {
  width: 140px;
  height: 42px;
  line-height: 42px;
  padding-left: 22px;
  padding-right: 22px;
  border-radius: 32px 0 0 32px;
  pointer-events: none;
  background: var(--secondary-color);
  box-shadow: 0 3px 6px rgba(0, 217, 198, 0.2);
  color: var(--secondary-font-color);
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  position: relative;
  left: 16px;
}

.profile-container .user-points span {
  font-size: 16px;
  font-weight: normal;
  display: inline-block;
  margin-left: 4px;
}

.header .profile-container .profile-pic {
  width: 48px;
  height: 48px;
  border-radius: 50px;
  background: lightcyan;
  background-size: contain;
  position: relative;
  left: 0;
}

.wrapper-alert-bell {
  position: relative;
  width: 20px;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 36px;
  z-index: 6;
}

.icon-alert-bell {
  position: relative;
  width: 16px;
  height: 20px;
  cursor: pointer;
}

.alert-bell-stroke {
  fill: none;
  stroke: white;
}

.alert-bell {
  fill: white;
}

.ballon-alert-bell {
  position: absolute;
  background: var(--secondary-color);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  top: 20px;
  right: -20px;
  color: var(--secondary-font-color);
  font-size: 12px;
}

.container-info-alert {
  position: absolute;
  width: 285px;
  max-height: 270px;
  background: var(--alternative-background);
  border: 1px solid var(--secondary-color);
  border-radius: 0 0 8px 8px;
  top: 68px;
  right: -8px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 18px 14px 18px 9px;
  overflow: hidden;
}

.sem-conteudo-info-alert {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.box-info-alert {
  overflow-y: scroll;
  max-height: calc(270px - 36px);
  padding: 0 14px 0 9px;
}

.item-info-alert {
  position: relative;
  padding-left: 27px;
  margin-bottom: 18px;
}

.img-info-alert {
  position: absolute;
  left: 0;
}

.text-info-alert {
  color: var(--primary-font-color);
  font-size: 14px;
  overflow: hidden;
}

.text-info-alert strong {
  display: block;
  margin-bottom: 4px;
}

.link-info-alert {
  background-color: var(--secondary-color);
  color: var(--secondary-font-color);
  font-size: 15px;
  padding: 10px;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  margin-top: 14px;
}

.overlay-info-alert {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 4;
  display: none;
}

@media (max-width: 1024px) {
  .header-links-container {
    position: fixed;
    flex-direction: column;
    bottom: 0;
    top: 100px;
    left: -270px;
    z-index: 9;
    justify-content: flex-start !important;
    background: var(--secondary-font-color);
    box-shadow: -15px -25px 25px 0px var(--primary-color);
    width: 250px;
    padding-top: 40px;
    transition: 0.3s ease-in-out;
  }

  #input-menu-btn-responsive:checked ~ .header-links-container {
    left: 0px;
  }

  .header .header-links-container a {
    color: var(--primary-color);
    font-size: 18px;
    line-height: 24px;
    text-align: left;
    display: flex;
    border-right: 4px solid var(--secondary-font-color);
    width: 100%;
    padding-left: 20px;
    height: 48px;
    max-height: 48px;
    transition: 0.2s;
    align-items: center;
  }

  .header-links-container a:hover {
    right: 4px;
    padding-left: 24px;
    border-right: 4px solid var(--secondary-color);
  }

  .menu-btn-responsive {
    display: flex;
  }

  .header .header-links-container a.header-link-active {
    height: auto;
    line-height: auto;
  }

  .header .header-links-container a.header-link-active::after {
    right: 0;
    bottom: auto;
    height: 100%;
    width: 6px;
  }
}

@media (max-width: 575px) {
  .header .profile-container .user-points {
    width: 115px;
    padding-left: 0px;
    font-size: 17px;
  }

  .wrapper-alert-bell {
    margin: 0 15px;
  }
}

@media (max-width: 455px) {
  .header {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 20px;
  }
  .wrapper-alert-bell {
    margin: 0 15px 0 0px;
    order: 4;
  }

  .ballon-alert-bell {
    top: -20px;
  }

  .header a.logo {
    min-width: 100%;
    order: 1;
    height: 86px;
    margin-bottom: 8px;
  }

  .header .profile-container {
    order: 3;
    flex-grow: 1;
    justify-content: center;
  }

  .menu-btn-responsive {
    order: 2;
    margin-right: 0;
  }

  #input-menu-btn-responsive:checked ~ .header-links-container {
    top: 0;
  }

  .container-info-alert {
    top: 30px;
  }
}

@media screen and (max-width: 1600px) {
  .header .header-links-container a {
    margin: 0 12px;
    font-size: 16px;
  }
}

body {
    overflow-y: scroll;
    background: var(--content-background)
}

body .loading-container {
    position: fixed;
}

html {
    min-height: 100vh;
}

::-webkit-scrollbar {
    width: 4px;
}
/* Track */
::-webkit-scrollbar-track {
    background: var(--light-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--hover-color);
}

.middle-page {
    width: 100%;
    min-height: 100vh;
    background: var(--content-background);
    display: table;
    margin: 0 auto;
}

.middle-page .loading-container {
    position: fixed;
    top: 0;
    left: 0;
}

.we-modal-view-carrinho .loading-container {
    position: fixed;
    top: 0;
    left: 0;
}

.topnav-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    top: 100px;
    z-index: 1;
    background-color: var(--content-background);
    padding-left: 5%;
    padding-right: 5%;
}

.search-wrapper {
    width: 730px;
    margin: 32px auto;
}

.footer-container {
    /*TODO: colocar no componente de footer*/
    margin-top: 175px;
}

.form-fieldset {
    margin-top: 0px !important;
}

.radio-container-alt {
    margin-top: 32px;
}

.header-wrapper {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
}

.middle-page > .loading-container {
    width: 85%;
}

.index-back-link-container {
    margin-top: 120px;
    position: relative;
    height: 50px;
    width: 100%;
}

.index-back-link {
    position: relative;
    float: left;
    width: 100%;
    font-weight: bolder;
    font-size: 18px;
    color: var(--secondary-color);
    cursor: pointer;
    text-decoration: underline;
}

.header .profile-container .user-points {
    font-size: 18px;
}

@media (max-width: 455px) {
  .topnav-wrapper {
    top: 162px;
  }
}

@media screen and (max-width: 1600px) {
    .middle-page .loading-container .loader-container{
        top: 10%;
        left: 10%;
    }
}

.qs-datepicker-container{font-size:1rem;font-family:sans-serif;color:#000;position:absolute;width:15.625em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:9001;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid grey;border-radius:.263921875em;overflow:hidden;background:#fff;-webkit-box-shadow:0 1.25em 1.25em -.9375em rgba(0,0,0,.3);box-shadow:0 1.25em 1.25em -.9375em rgba(0,0,0,.3)}.qs-datepicker-container *{-webkit-box-sizing:border-box;box-sizing:border-box}.qs-centered{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.qs-hidden{display:none}.qs-overlay{position:absolute;top:0;left:0;background:rgba(0,0,0,.75);color:#fff;width:100%;height:100%;padding:.5em;z-index:1;opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.qs-overlay.qs-hidden{opacity:0;z-index:-1}.qs-overlay .qs-overlay-year{background:rgba(0,0,0,0);border:none;border-bottom:1px solid #fff;border-radius:0;color:#fff;font-size:.875em;padding:.25em 0;width:80%;text-align:center;margin:0 auto;display:block}.qs-overlay .qs-overlay-year::-webkit-inner-spin-button{-webkit-appearance:none}.qs-overlay .qs-close{padding:.5em;cursor:pointer;position:absolute;top:0;right:0}.qs-overlay .qs-submit{border:1px solid #fff;border-radius:.263921875em;padding:.5em;margin:0 auto auto;cursor:pointer;background:hsla(0,0%,50.2%,.4)}.qs-overlay .qs-submit.qs-disabled{color:grey;border-color:grey;cursor:not-allowed}.qs-overlay .qs-overlay-month-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.qs-overlay .qs-overlay-month{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% / 3);cursor:pointer;opacity:.5;-webkit-transition:opacity .15s;transition:opacity .15s}.qs-overlay .qs-overlay-month.active,.qs-overlay .qs-overlay-month:hover{opacity:1}.qs-controls{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;background:#d3d3d3;-webkit-filter:blur(0);filter:blur(0);-webkit-transition:-webkit-filter .3s;transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s, -webkit-filter .3s}.qs-controls.qs-blur{-webkit-filter:blur(5px);filter:blur(5px)}.qs-arrow{height:1.5625em;width:1.5625em;position:relative;cursor:pointer;border-radius:.263921875em;-webkit-transition:background .15s;transition:background .15s}.qs-arrow:hover{background:rgba(0,0,0,.1)}.qs-arrow:hover.qs-left:after{border-right-color:#000}.qs-arrow:hover.qs-right:after{border-left-color:#000}.qs-arrow:after{content:"";border:.390625em solid rgba(0,0,0,0);position:absolute;top:50%;-webkit-transition:border .2s;transition:border .2s}.qs-arrow.qs-left:after{border-right-color:grey;right:50%;-webkit-transform:translate(25%,-50%);-ms-transform:translate(25%,-50%);transform:translate(25%,-50%)}.qs-arrow.qs-right:after{border-left-color:grey;left:50%;-webkit-transform:translate(-25%,-50%);-ms-transform:translate(-25%,-50%);transform:translate(-25%,-50%)}.qs-month-year{font-weight:700;-webkit-transition:border .2s;transition:border .2s;border-bottom:1px solid rgba(0,0,0,0)}.qs-month-year:not(.qs-disabled-year-overlay){cursor:pointer}.qs-month-year:not(.qs-disabled-year-overlay):hover{border-bottom:1px solid grey}.qs-month-year:active:focus,.qs-month-year:focus{outline:none}.qs-month{padding-right:.5ex}.qs-year{padding-left:.5ex}.qs-squares{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.3125em;-webkit-filter:blur(0);filter:blur(0);-webkit-transition:-webkit-filter .3s;transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s, -webkit-filter .3s}.qs-squares.qs-blur{-webkit-filter:blur(5px);filter:blur(5px)}.qs-square{width:calc(100% / 7);height:1.5625em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-transition:background .1s;transition:background .1s;border-radius:.263921875em}.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background:orange}.qs-current{font-weight:700;text-decoration:underline}.qs-active,.qs-range-end,.qs-range-start{background:#add8e6}.qs-range-start:not(.qs-range-6){border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-middle{background:#d4ebf2}.qs-range-middle:not(.qs-range-0):not(.qs-range-6){border-radius:0}.qs-range-middle.qs-range-0{border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-end:not(.qs-range-0),.qs-range-middle.qs-range-6{border-top-left-radius:0;border-bottom-left-radius:0}.qs-disabled,.qs-outside-current-month{opacity:.2}.qs-disabled{cursor:not-allowed}.qs-day,.qs-empty{cursor:default}.qs-day{font-weight:700;color:grey}.qs-event{position:relative}.qs-event:after{content:"";position:absolute;width:.46875em;height:.46875em;border-radius:50%;background:#07f;bottom:0;right:0}

.feedback-alert-message {
    width: 100%;
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
    font-family: 'Roboto', sans-serif;
    font-size: .9rem;
}

.feedback-alert-error {
    background-color: rgba(255,53,53,.15);
    color: #992020;
    border: 1px solid #ff3535;
}

.feedback-alert-success {
    background-color: rgba(0,191,133,.15);
    color: #007350;
    border: 1px solid #00bf85;
}

.feedback-alert-warning {
    background-color: rgba(255,193,54,.15);
    border: 1px solid #ffc136;
    color: #b38726;
}

.feedback-alert-information {
    background-color: rgba(33,117,214,.15);
    border: 1px solid #2175d6;
    color: #154b8a;
}
.feedback-alert-icon {
    float: left;
    margin: 8px;
}

.feedback-alert-icon-close {
    float: right;
    margin: 8px;
}

.feedback-alert-tex {

}


.user-feedback-container {
    display: grid;
    grid-auto-flow: column;
}

.user-feedback-container img {
    justify-self: center;
    align-self: center;
    width: 300px;
}

.user-feedback-container .text-container {
    display: grid;
    align-self: center;
    grid-template-rows: 40px 40px 140px;
}

.user-feedback-container .text-container .title {
    margin: 0;
    font-weight: 700;
    font-family: Roboto;
    color: var(--primary-font-color)
}

.user-feedback-container .text-container .description {
    margin: 0;
    font-weight: 400;
    align-self: center;
    font-family: Roboto;
    color: var(--primary-font-color)
}

.user-feedback-container .text-container .action-button {
    outline: none;
    border: none;
    align-self: center;
    width: 200px;
    height: 48px;
    font-size: 16px;
    border-radius: 4px;
    font-weight: 700;
    font-family: Roboto;
    color: var(--secondary-font-color);
    background: var(--secondary-color);
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .6);
    cursor: pointer;
}

.user-feedback-container .text-container .action-button:hover {
    filter: contrast(95%);
}

.user-feedback-container .text-container .action-button:active {
    transform: translateY(1px);
}
.footer-container {
	width: 100%;
	background: var(--primary-color);
	padding: 0 20px;
}

.centraliza-footer-container {
	position: relative;
	display: flex;
	font-family: Roboto;
	align-items: center;
	max-width: 1300px;
	min-height: 100px;
	margin: 0 auto;
}

.footer-container .copyright {
	justify-self: center;
	font-size: 14px;
	color: var(--tertiary-font-color);

}

.footer-container .footer-links-container {
	display: grid;
	grid-auto-flow: column;
	justify-self: center;
	margin-left: auto;
}

.footer-container .footer-links-container a {
	margin-left: 22px;
	padding-right: 22px;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	font-family: Roboto;
	color: var(--tertiary-font-color);
	border-right: solid 1px var(--tertiary-font-color);
	cursor: pointer;
}

.footer-container .footer-links-container a:hover {
	opacity: .9;
}

.footer-container .footer-links-container a:last-child {
	border: none;
}

@media (max-width: 1024px) {
	.centraliza-footer-container{
		flex-wrap: wrap;
	}

	.copyright{
		width: 100%;
		order: 2;
		text-align: center;
	}

	.footer-container .footer-links-container{
		width: 100%;
		order: 1;
	}
}

@media (max-width: 680px) {
	.footer-container .footer-links-container {
		display: none;
	}
}
/* -----------------------------------------CUSTOM RADIO----------------------------------------- */

.radio-container .label-container {
    position: relative;
    display: block;
    padding-left: 35px;
    font-size: 18px;
    color: var(--primary-font-color);
    cursor: pointer;
    user-select: none;
}

/* SUMIR COM O RADIO ORIGINAL */
.radio-container .label-container input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    cursor: pointer;
}

/* CUSTOM RADIO */
.radio-container .label-container .radio-custom-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--secondary-color);
    background-color: transparent;
}

/* CUSTOM RADIO QUANDO MARCADO */
.radio-container .label-container input:checked~.radio-custom-checkmark {
    background-color: var(--secondary-color);
}

/* CHECK DO CUSTOM RADIO */
.radio-container .label-container .radio-custom-checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);

}

/* CHECK DO CUSTOM RADIO QUANDO MARCADO*/
.radio-container .label-container input:checked~.radio-custom-checkmark::after {
    display: block;
}
/* -----------------------------------------TOGGLE SWITCH----------------------------------------- */

.switch-container {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-auto-flow: column;
    align-items: center;
    min-width: 200px;
}

.switch-container .switch-label {
    margin: 0;
    font-size: 18px;
    font-family: Roboto;
    color: var(--primary-font-color);
    justify-self: start;
}


.switch-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 12px;
    overflow: visible;
    justify-self: center;
    cursor: pointer;
}

/* SUMIR COM CHECKBOX ORIGINAL */
.switch-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-container .toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--tertiary-font-color);
    transition: .4s;
    border-radius: 34px;
}

.switch-container .toggle-switch .slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: -4px;
    bottom: -2px;
    background-color: var(--primary-font-color);
    transition: .4s;
    border-radius: 50%;
}

.switch-container .toggle-switch input:checked+.slider {
    background-color: rgba(var(--secondary-color-rgb), .5);
}


.switch-container .toggle-switch input:checked+.slider::before {
    transform: translateX(16px);
    background-color: var(--secondary-color);
}
.form-fieldset {
    display: grid;
    margin-top: 36px;
    font-family: Roboto;
}

.form-fieldset .submit-btn {
    width: 152px;
    height: 48px;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffffff;
    border: solid 1px var(--secondary-color);
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-color);
    cursor: pointer;
    justify-self: end;
}

.form-fieldset .submit-btn:focus {
    outline: none;
}

.form-fieldset .submit-btn:active {
    transform: translateY(1px) scale(.99);
    transition: transform .2s;
}

.form-fieldset .submit-btn-alt {
    width: 250px;
    height: 48px;
    float: right;
    margin-top: -15px;
    border-radius: 5px;
    background: var(--secondary-color);
    border: solid 1px var(--secondary-color);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    justify-self: end;
}

.form-fieldset .submit-btn-alt:focus {
    outline: none;
}

.form-fieldset .submit-btn-alt:disabled {
    background: var(--tertiary-font-color);
    border: solid 1px var(--tertiary-font-color);

    cursor: not-allowed;

    color: var(--primary-font-color);
}

.form-fieldset .submit-btn-alt:active {
    transform: translateY(1px) scale(.99);
    transition: transform .2s;
}

.form-fieldset .radio-container {
    display: grid;
    width: 50%;
    grid-template-columns: 50% 50%;
    justify-self: end;
}

.form-fieldset .radio-container-alt {
    width: 95%;
    padding-left: 21px;
}

/* -----------------------------------------INPUT FIELDS----------------------------------------- */
.form-fieldset .inputs-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.form-fieldset .inputs-container .input-set {
    display: grid;
    padding: 12px 0 0 0;
    margin-left: 21px;
}

.form-fieldset .inputs-container .input-set .form-input-label {
    margin-bottom: 8px;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-font-color);
}

.form-fieldset .inputs-container .input-set .account-form-input {
    height: 40px;
    width: 100%;
    padding: 0 0 0 12px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid var(--secondary-color);
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
    color: var(--primary-font-color);
    font-family: Roboto;
    font-size: 16px;
}

.form-fieldset .inputs-container .input-set .account-form-input:focus {
    outline: none;
}


.form-fieldset .inputs-container .input-set .account-form-input.input-readonly {
    color: var(--tertiary-font-color)
}

/* -----------------------------------------TOGGLE----------------------------------------- */
.switch-container {
    width: 30%;
    justify-self: end;
    margin-top: 28px;
}

.form-convert {
    /*TODO: atrapalha um pouco o cálculo de %*/
    margin: 15px 0px 0 18px;
}

.form-input-without-label {
    margin-top: 27px;
}

.form-long-text, .form-container-check {
    /*padding: 25px 0 0 25px;*/
}

.form-long-text-title {
    font-weight: bolder;
}

.form-checkbox {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--secondary-color);
    background-color: transparent;
}

.form-line-separator {
    display: block;
    border-top: 1px solid lightgray;
    grid-column: 1 / span 2;
    margin: 24px 0% 24px 0%;
}


.containerBr{
    width: 100%;

}

.erroContainer{
    width: 100%;
    display: none;
    margin: 2rem 1.5rem;
}

.erroContainer div{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F9DDDE;
    border: 1px solid #FF3535;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px;
    gap: 10px;
    color: #992020;
    font-size: 12px;
}
.we-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    animation: fadeIn .3s ease-in-out;
    z-index: 9;
}

.we-modal-backdrop .we-modal-view {
    width: 400px;
    background: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: slideUp .5s;
    transform: translate(-50%, -50%);
    padding: 52px 32px;
}

.we-modal-backdrop .we-modal-view .we-modal-title-container .we-modal-title {
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
    margin: 0;
}

.we-modal-backdrop .we-modal-view .we-modal-text {
    font-family: Roboto, sans-serif;
    color: var(--primary-font-color);
    font-size: 1.1rem;
}

.we-modal-backdrop .we-modal-view .we-modal-btns-container {
    display: flex;
    justify-content: flex-end;
    border-top: solid 1px #EEEEEE;
    padding-top: 16px;
}

.we-modal-backdrop .we-modal-view .we-modal-btns-container button {
    height: 42px;
    width: 92px;
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
}

.we-modal-backdrop .we-modal-view .we-modal-accept-button {
    border: none;
    border-radius: 4px;
    color: var(--secondary-font-color);
    background: var(--secondary-color);
    margin-left: 12px;
}

.we-modal-backdrop .we-modal-view .we-modal-cancel-button {
    border-radius: 4px;
    color: var(--secondary-color);
    background: #FFFFFF;
    border: solid 1px var(--secondary-color);
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
.searchbar-container {
    display: grid;
    grid-template-columns: 80% 20%;
}

.searchbar-container .search-input {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 4px 0 0 4px;
    background-color: #ffffff;
    padding: 0 20px;
    font-size: 16px;
    color: var(--primary-font-color);
    box-shadow: 0 2px 4px rgba(var(--primary-color-rgb), .4);
    transition: box-shadow .5s;
}

.searchbar-container .search-input:focus {
    outline: none;
    box-shadow: 0 2px 4px rgba(var(--secondary-color-rgb), .7);
}

.searchbar-container .search-btn {
    height: 48px;
    border-radius: 0 4px 4px 0;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bolder;
    font-family: Roboto;
    color: var(--secondary-font-color);
    background-color: var(--secondary-color);
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .4);
}
.searchbar-container .search-btn:active {
    transform: translateY(1px);
    filter: saturate(150%);
}
.engagement-select-container select {
    height: 42px;
    width: 100%;
    padding: 0 0 0 12px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid var(--secondary-color);
    box-shadow: 0 3px 6px rgba(var(--secondary-color-rgb), .1);
    color: var(--primary-font-color);
    font-family: Roboto;
    font-size: 16px;
}

.engagement-select-container select:focus {
    outline: none;
}
body {
    font-family: Roboto;
}

.sidenav {
    background-color: var(--alternative-background);
    padding-top: 40px;
    box-shadow: -15px -25px 25px 0px var(--primary-color);
    grid-column-start: 1;
    grid-column-end: 3;
}

.sidenav p {
    font-weight: bolder;
    margin-left: 70px;
    color: var(--tertiary-color);
    font-size: 21px;
    text-transform: uppercase;
}

.sidenav a {
    cursor: pointer;
    padding: 18px 6px 18px 70px;
    text-decoration: none;
    display: block;
    height: 24px;
    color: var(--tertiary-color);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.sidenav a.active-sidemenu {
    color: var(--secondary-color);
    font-weight: bolder;
    border-right: inset;
    border-color: var(--secondary-color);
}

.sidenav a:hover {
    font-weight: bolder;
    border-right: inset;
    border-color: var(--secondary-color);
}

.main {
    margin-left: 200px;
    /* Same as the width of the sidenav */
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

@media screen and (max-width: 1440px) {
    .sidenav p {
        margin-left: 30px;
    }

    .sidenav a {
        padding: 18px 6px 18px 30px;
    }
}