@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Poppins;
}

*,
*::before,
*::after {
  box-sizing: content-box !important;
}

button {
  cursor: pointer;
}

.submit-button {
  background-color: #28A745;
  color: #FFF;

  width: 250px;
  border-radius: 42px;

  padding: 16px;
  margin-top: 24px;

  font-size: 16px;
}

.bg__container {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: -1;
}

.bg__item {
  flex-grow: 1;
}

.bg-top {
  height: 35%;

  background: #FFFFFF;
}

.bg-bottom {
  height: 65%;

  background-color: #208DD2;
}

.logos-container, 
.form-card-container {
  margin: 60px 150px;
}

.content {  
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-card-container {

  padding: 32px 64px;
  padding-bottom: 4px;

  background: #FFFFFF;
  border: 1px solid #707070;
  border-radius: 30px;
}

.form-card-header {
  text-align: center;
  margin-bottom: 24px;
}

.form-card-header p {
  font-size: 18px;
  font-weight: 600;
}

.form-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-group {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.form-group label {
  margin-left: 12px;
}

.form-group input,
.form-group select  {
  padding: 12px 18px;
  border-radius: 30px;
  border: 1px solid #707070;

  width: 300px;

  font-size: 14px;
}

.form-card-content button {
  padding: 14px 72px;
  
  border-radius: 30px; 
  background-color: #208DD2;
  color: #FFF;

  cursor: pointer;
}

.logos {
  text-align: center;
}

.logos img {
  height: 140px;
}

.form-card-content .resend-token {
  margin-top: 8px;

  font-weight: 300;
  font-size: 14px;
  color: #000;
}

.form-card-content .error i{
  margin-top: 4px;
  margin-left: 12px;

  color: #FF0000;
  font-size: 14px;
}

.logos-container {
  display: flex;
  justify-content: space-around;
  align-items: center; 
  
  margin-top: 32px;
}

.logos-container button {
  height: 40px;
  padding: 0px 24px;

  text-align: center;
  cursor: pointer;

  background-color: #FFF;
  border: 1px solid #707070;
  border-radius: 20px;
}

.cards-modules {
  display: flex;
  justify-content: center;
  gap: 26px;
}

.card-modules {
  width: 340px;
  background-color: #FFF;
  border: 0.5px solid #000000;
  border-radius: 30px;
  padding: 24px 30px;
  cursor: pointer;
}

.card-title p {
  font-size: 22px;
}

.card-content p {
  font-weight: 300;
}

header {
  background-color: #208DD2;
  padding: 32px 64px;

  color: #FFF;
  margin-bottom: 64px;
}

header h3 {
  font-weight: 600;
}

.card-contact {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;

  padding: 64px;

  background: #FFF;
  border: 1px solid #707070;
  border-radius: 30px;

  width: 550px;
}

.contact-header {
  display: flex;
  justify-content: space-between;
  
  font-size: 20px;

  width: 100%;
  margin-bottom: 24px;
}

.back-to-index {
  background-color: transparent;
  
  border: 0.5px solid #404040;
  border-radius: 100%;
}

.back-to-index i {
  font-size: 12px;
  font-weight: 300;

  padding: 12px;
}

.card-contact {
  font-size: 18px;
}

.agent-data{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.product-data {
  display: grid;
  grid-template-columns: 3fr 1fr 3fr;
  gap: 32px;
}

.agent-data input,
.agent-data select,
.product-data input,
.product-data select {
  width: -webkit-fill-available;
}

select {
  background: #FFF;
}

.product-data {
  margin-top: 16px;
}

.product-data #quantidade{
  max-width: 100px;
}

.first-message {
  margin-top: 24px;
}

.default_message {
  display: flex;
}

#defaultMessage {
  width: auto;
  margin-left: 64px;
}

.first-message {
  margin-top: 16px;
  display: flex;

  gap: 16px;
}

#mensagem {
  border: 1px solid #707070;
  border-radius: 30px;

  padding: 32px;
  font-size: 16px;
  margin-top: 8px;
}

.submit-message-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.submit-message-container u {
  max-width: 300px;
  text-align: center;
  font-size: 14px;
}

.form-group i {
  color: #515151;
  font-size: 12px;
  margin-top: 4px;
}

.back-to-index.agent {
  margin-left: 128px;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 8px 0;

  font-size: 12px;
  text-align: center;
  background-color: #FFF;
}

.exclamation {
  display: flex;
  justify-content: center;
}

.exclamation i {
  font-size: 64px;
}

.review {
  margin-top: 24px;
  text-align: center;
}

.message-review-container {
  border: 1px solid #707070;
  border-radius: 30px;
  padding: 32px;
}

.button-submit-container {
  display: flex;
  justify-content: center;
}

#track-order {
  color: #262626;
  font-size: 14px;
}

.buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.submit-button.blue {
  margin-top: 16px;
  background-color: #208DD2;
}

.dates {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  align-items: center;
}

#minhaTabela {
  width: 1100px !important;
}

.form-group #error-email {
  width: 100%;
  display: flex;
  justify-content: center;
}

#error-email p {
  max-width: 300px;
  text-align: center;
}

#error-email p i {
  margin-left: 0px;
}

@media (max-width: 1000px) {
  #minhaTabela {
    width: 768px !important;
  }

  .dates {
    flex-direction: column;
  }  

  .dates button{
    margin-top: 0px;
  }
}

@media(max-width: 768px) {
  .form-card-container {
    padding: 16px 32px;
  }

  .logos-container button {
    margin-left: 52px;
  }

  .cards-modules {
    flex-direction: column;
    align-items: center;
  }

  .card-contact {
    width: 280px;
  }

  .contact-header {
    font-size: 16px;
  }

  .contact-header button i {
    padding: 6px;
  }

  .agent-data,
  .product-data {
    grid-template-columns: 1fr;
  }


  .first-message {
    display: grid;
    grid-template-columns: 1fr;
  }

  .first-message #mensagem {
    width: 390px;
    padding: 0px;
  }

  .default_message {
    display: grid;
    grid-template-columns: 1fr;
  }

  #defaultMessage {
    margin-left: 12px;
  }

  .form-group i {
    text-align: center;
  }

  .back-to-index.agent {
    margin-left: 16px;
  }

  .content #form-voucher {
    padding: 16px;
  }

  #minhaTabela {
    width: 200px !important;
  }

  .items {
    width: 390px;
  }
}

@media(max-width: 500px) {
  #minhaTabela {
    width: 300px !important;
  }
}