* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
}

html {
  height: 100%;
  width: 100%;
  background: url('./assets/ecorodovias_body_css_bg.jpg') no-repeat center center fixed !important; 
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  scrollbar-width: none !important;
}
 
body {
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  color: white;
  backdrop-filter: blur(3px);
  flex-direction: column;
  overflow: hidden;
  flex:1;
  background-color: transparent;
}

button {
  display: flex;
  border-radius: 50%;
  border:0;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: ease-in all 330ms;
  background-color: transparent;
}

button:hover {
  opacity: .78;
}

button[disabled=true] {
  opacity: 0.3;
  width: 3rem;
}

#header {
  width: 100%;
  flex: 1;
  position:absolute;
  top: 0;
  display: flex;
  justify-content: center;
  padding: 16px 0;
  height: 4.8rem;
  align-items: center;
  background: linear-gradient(
    .25turn,
    #4c8430,
    50%,
    #9ec34a
  );
  
}

#header img {
  max-width: 100%;
  width: 11.5rem;
  height: 4rem;
  /* margin-left: 40px; */
  padding: 6px 8px;
  border-radius: 5px;
  background-color: rgba(234, 234, 234, 0.25);
  transition: 330ms all ease-out;
}

#header a img:hover {
  opacity: 0.7;
}

#main-content {
  width: 100%;
  flex:1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#banners {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 55%;
  gap: 1.6rem;
  margin-bottom: -1.3rem;
}

#banners.active {
  margin-top: 5rem;
  height: 50%;
  justify-content: center;
  gap: .8rem;
  margin-bottom: -3rem;
}


#banners img.ecovias_banner {
  width: 11.36rem;
  height: 1.4rem;
  background-color: rgba(234, 234, 234, 0.25);
  padding: .18rem .28rem;
  border-radius: .21rem;
}

#banners button img.sos_icon {
  width: 7rem;
  height: 7rem;
}

#banners img.cellphone_warning {
  width: 16.5rem;
  height: calc(16.5rem / 2.5);
}

#options {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 3rem 0;
}

#options > button {
  z-index: 500;
  margin-bottom: -1.15rem;
}


#options > button.active {
  opacity: 1;
}

#options button img {
  width: 5.4rem;
  height: 5.4rem;
}

#options > button.active img {
  width: 3.9rem;
  height: 3.9rem;
}

#options .active {
  opacity: .5;
}

.options-tabnav {
  margin-top: -3.25rem;
  padding: -1rem 3rem 0 3rem;
  font-size: 13pt;
  font-family: Arial, Helvetica, sans-serif;
  overflow: scroll;
  scrollbar-width: none;
}
.options-tabnav::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

@media only screen and (max-height: 520px) {
  html, body {
    overflow: scroll !important;
  }

  #modal-dialog {
    margin: 0;
    font-size: 8pt !important;
    overflow: hidden;
  }

  

  #banners {
    margin: 7rem 1rem 0 1rem;
  }
}

@media only screen and (max-height: 520px) {
  html, body {
    overflow: scroll !important;
  }

  #modal-dialog {
    margin: 0;
    font-size: 8pt !important;
    overflow: hidden;
  }

  

  #banners {
    margin: 7rem 1rem 0 1rem;
  }
}

@media only screen and (max-width: 600px) {
  #header {
    padding: 48px 0 ;
  }

  #banners {
    margin-top: -0.8rem;
    height: 52vh;
  } 

  #header img {
    max-width: 100%;
    width: 11rem;
    height: 4rem;
  }

  /* #header img.artesp {
    width: 8rem;
    height: 1.6rem;
  } */

  #banners img.cellphone_warning {
    width: 14.8rem;
    height: calc(14.8rem / 2.55);

  }

  #banners img.ecovias_banner {
    padding: .21rem .32rem;
  }


  #options-tabnav div {
    padding: 0 .4rem 12px .4rem;
    width: 100%;
    font-size:11pt;
  }

  thead th {
    font-size: 10pt;
    padding: .5rem;
  }
  
  tbody td {
    font-size: 8.9pt;
    padding: .5rem;
  }

  .dropdown button {
    font-size: 11pt !important;
    font-weight: bold;
    padding: 0.2rem;
  }
  
}

@media only screen and (max-width: 360px) {
  /* #header img {
    max-width: 100%;
    width: 4rem;
    height: 2rem;
    margin: 0 24px;
    padding: 0;
  } */

  /* #header img.artesp {
    width: 6rem;
    height: calc(6rem / 5);
  } */

  #banners {
    margin-top: 0rem;
  } 

  #banners.active {
    margin-top: 4rem;
  }

  #banners img.cellphone_warning {
    width: 12rem;
    height: calc(12rem / 2.55);
  }

  #options > button {
    margin: 0 0.8rem;
  }

  #options-tabnav {
    padding: 0 1.2rem 12px 1.2rem;
  }

  .table>:not(caption)>*>*  {
    padding: 0.3rem 0.15rem !important;
    margin: 0;
  }


  #options-tabnav div {
    padding: 0 1.1rem 12px 1.1rem;
  }
  
  /* #banners img.ecovias_banner {
    width: 10rem;
    height: 1.2rem;
    padding: .12rem .18rem;
    border-radius: .18rem;
  } */
}


/**
End of new style


Start of old style
*/

.font17 {
  font-size: 17px !important;
}

.font30 {
  font-size: 30px !important;
} 

.message {
  padding: 0.5rem 1rem;
  max-width: 68%;
  font-size: 0.9rem;
  margin: 1rem 1rem 1rem auto;
  border-radius: 1.125rem 1.125rem 0 1.125rem;
  background: #333;
  color: white;
  text-align: center;
  height: fit-content;
}

.chat {
  max-height: 87%;
  overflow-x: scroll;
  background-color: #f8f8ff;
  overflow-x: scroll;
}

.modal-dialog-100 {
  height: 87%;
}

.modal-content-100 {
  min-height: 98%;
}

.message-receive {
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  margin: 1rem;
  font-size: 0.9rem;
  background: #fff;
  border-radius: 1.125rem 1.125rem 1.125rem 0;
  width: fit-content;
  max-width: 68%;
  box-shadow: 0 0 2rem rgb(0 0 0 / 8%), 0rem 1rem 1rem -1rem rgb(0 0 0 / 10%);
  text-align: center;
  height: fit-content;
}

.input-message {
  border: none;
  background-image: none;
  background-color: white;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  border-radius: 1.125rem;
  flex-grow: 2;
  box-shadow: 0 0 1rem rgb(0 0 0 / 10%), 0rem 1rem 1rem -1rem rgb(0 0 0 / 20%);
  font-family: Red hat Display, sans-serif;
  font-weight: 400;
  letter-spacing: 0.025em;
}

div.table-responsive {
  background: linear-gradient(
    .25turn,
    rgba(76, 132, 48, 0.81),
    50%,
    rgba(158, 195, 74, 0.81)
  );
  padding: 0 1.47rem;
  border-radius: 3rem;
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
  margin: 0 8%;
}
.accordion-item {
  background-color:transparent;
  border: none;
}
.accordion-item:first-of-type {
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
}
thead {
  color: white;
  border-color: white;
}
tr {
  color: white;
  border-color: white;
}

.modal {
  color: black;
}

.modal-content, .message-receive {
  border-radius: 1.8rem;
  border:0;
  background: linear-gradient(
    .25turn,
    rgba(76, 132, 48, 1),
    50%,
    rgba(158, 195, 74, 1)
  );
  color: white;
}

#selectBoxMessage {
  background-color: white;
  color: rgba(56, 112, 28, 1);
  border-radius: 0.9rem;
}

.btn-close {
  color: white;
}

/* tr {
  display:flex;
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}


td, thead {
  margin-right: 100px;
  display:flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
} */