.sinoptico-cenario {
  background-color: #f5f5f5;
  min-width: 1265px;
  height: 245px;
  margin: 0 auto;
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
}
.sinoptico-menu-left {
  width: 37px;
  background-color: #3492d0;
  height: 245px;
  position: absolute;
  left: 0;
  z-index: 1;
}

.sinoptico-menu-right {
  width: 37px;
  background-color: #3ebd62;
  height: 245px;
  position: absolute;
  right: 0;
  z-index: 1;
}
.sinoptico-column {
  flex-direction: column;
}

.sinoptico-center {
  align-items: center;
}

.sinoptico-base {
  width: 92%;
}

#sinoptico-line-blue {
  border: solid #3492d0;
}
#sinoptico-line-green {
  border: solid #3ebd62;
}

.sinoptico-pista {
  margin-top: 35px;
  border-bottom: 55px solid #e4e4e4;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.sinotico-bus-relative {
  position: relative;
  width: 95%;
  margin: 0 auto;
}

.sinoptico-bus {
  width: 48px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  text-align: center;
  position: absolute;
  cursor: pointer;
}
.sinoptico-bus-left {
  top: 18px;
}

.sinoptico-bus-left-down {
  top: 55px;
}

.sinoptico-bus-right {
  top: 133px;
}

.sinoptico-bus-right-down {
  top: 170px;
}

.sinoptico-bus-transform-right {
  transform: translateX(50%);
}
.sinoptico-bus-transform-left {
  transform: translateX(-50%);
}

.sinoptico-bus-info {
  background-color: #fff;
  border-radius: 2.5px;
  width: 48px;
  height: 12px;
  font-weight: bold;
  font-size: 0.6em;
  color: #000;
  margin-bottom: 2px;
  transition: 0.3s all ease;
}

.sinoptico-icon-bus {
  width: 20px;
  height: 20px;
  align-self: center;
}

/* Criação e animação do menu */
.sinoptico-menuToggle {
  height: 28px;
  width: 20px;
  position: relative;
  margin: auto;
}
.sinoptico-icon-bar {
  position: absolute;
  height: 3px;
  background-color: #fff;
  width: 20px;
  display: block;
  border-radius: 2px;
  margin-top: 4px;
  transition: 0.35s ease all;
  z-index: 3;
}
.sinoptico-top-bar {
  top: 0px;
}
.sinoptico-middle-bar {
  top: 6px;
  opacity: 1;
}
.sinoptico-bottom-bar {
  top: 12px;
}

.sinoptico-menuToggle input:checked ~ .sinoptico-top-bar {
  top: 10px;
  transform: rotate(225deg);
}
.sinoptico-menuToggle input:checked ~ .sinoptico-middle-bar {
  opacity: 0;
  width: 0%;
  transform-origin: left center;
  transition: 0.175s ease all;
}
.sinoptico-menuToggle input:checked ~ .sinoptico-bottom-bar {
  top: 10px;
  transform: rotate(-225deg);
}

.sinoptico-menuToggle input {
  display: block;
  width: 20px;
  height: 23px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 4;
  -webkit-touch-callout: none;
}

#sinoptico-menu-left {
  position: absolute;
  width: 300px;
  height: 245px;
  background: #3f3f3f;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  z-index: 2;
  left: -10px;
  border-radius: 0 23px 0 0;
}

#menuToggle-left input:checked ~ #sinoptico-menu-left {
  transform: none;
}

.sinoptico-navbar-left {
  background: #3492d0;
  top: 0;
  height: 30px;
  width: 100%;
  border-radius: 0 20px 0 0;
  padding: 4px 5px 0 35px;
  display: flex;
}
.sinoptico-navbar-left span {
  margin: 5px 0 0 7px;
  font-size: 0.7em;
  color: #fff;
  font-weight: 600;
}
#sinoptico-menu-right {
  position: absolute;
  width: 300px;
  height: 245px;
  background: #3f3f3f;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  z-index: 2;
  right: -10px;
  border-radius: 23px 0 0 0;
}

.sinoptico-navbar-right {
  background: #3ebd62;
  top: 0;
  height: 30px;
  width: 100%;
  border-radius: 20px 0 0 0;
  display: flex;
  justify-content: flex-end;
  padding: 4px 35px 0 5px;
}
.sinoptico-navbar-right span {
  margin: 5px 7px 0 0;
  font-size: 0.7em;
  color: #fff;
  font-weight: 600;
}

#menuToggle-right input:checked ~ #sinoptico-menu-right {
  transform: none;
}

.sinoptico-size-x {
  height: 23px;
  width: 23px;
}

.sinoptico-circle {
  background: #333;
  color: #fff;
  border-radius: 50%;
  font-size: 0.9em;
  font-weight: bold;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}

#sinoptico-circle-right {
  position: absolute;
  right: 45px;
}

.sinoptico-info-vehicle {
  width: 300px;
  height: 110px;
  position: absolute;
  z-index: 1;
  background: #000;
  right: 50px;
  margin-top: 10px;
  opacity: 0.6;
  border-radius: 10px;
}

.sinoptico-info-vehicle i {
  right: 10px;
  top: 3px;
  position: absolute;
  color: #fff;
  cursor: pointer;
  font-size: 1.2em;
}
.sinoptico-info-vehicle > div {
  font-size: 0.7em;
  color: #fff;
  padding: 8px;
}
.sinoptico-sentido-trajeto {
  font-size: 0.8em;
  font-weight: bold;
}

/* Dropmenu lateral */

.sinoptico-container {
  width: 300px;
  position: absolute;
  z-index: 5;
}
.sinoptico-container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.sinoptico-dropdown {
  position: relative;
}

.sinoptico-dropdown [data-toggle='sinoptico-dropdown'] {
  display: block;
  color: white;
  background: #626060;
  padding: 2px 2px 2px 11px;
  font-size: 0.9em;
  font-weight: bold;
}
.sinoptico-dropdown [data-toggle='sinoptico-dropdown']:hover {
  background: #626060;
}
.sinoptico-dropdown [data-toggle='sinoptico-dropdown']:before {
  position: absolute;
  display: block;
  content: '\25BC';
  font-size: 0.9em;
  color: #fff;
  top: 3px;
  right: 10px;
  transform: rotate(0deg);
  transition: transform 0.6s;
}
.sinoptico-dropdown > .sinoptico-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: scaleY(0);
  transform-origin: 50% 0%;
  transition: max-height 0.6s ease-out;
  animation: hideAnimation 0.4s ease-out;
  background: #3f3f3f;
  overflow: auto;
  height: 175px;
}
.sinoptico-order-vehicles {
  color: #fff;
  background: #626060;
  font-weight: bold;
  padding: 2px 4px 2px 7px;
  margin-right: 5px;
  font-size: 0.9em;
}

.sinoptico-info-trajeto {
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  margin-top: 3px;
}

.sinoptico-dropdown > .sinoptico-dropdown-menu li {
  display: flex;
  padding: 3px 10px;
}

.sinoptico-dropdown > .sinoptico-dropdown-menu .sinoptico-size-x {
  height: 21px;
  width: 21px;
  right: 23px;
  padding-left: 1px;
  position: absolute;
}

.sinoptico-dropdown > .sinoptico-dropdown-menu .sinoptico-circle {
  background: #626060;
  font-size: 0.8em;
}

.sinoptico-dropdown > input[type='checkbox'] {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  cursor: pointer;
}
.sinoptico-dropdown > input[type='checkbox']:checked ~ .sinoptico-dropdown-menu {
  max-height: 9999px;
  display: block;
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  transition: max-height 2s ease-in-out;
  padding-top: 5px;
}
.sinoptico-dropdown > input[type='checkbox']:checked + span[data-toggle='sinoptico-dropdown']:before {
  transform: rotate(-180deg);
  transition: transform 0.6s;
}

@keyframes showAnimation {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.04);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.04);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.02);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes hideAnimation {
  0% {
    transform: scaleY(1);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.02);
  }
  100% {
    transform: scaleY(0);
  }
}

/* fim do dropdown menu  */

.sinoptico-menu-conteudo {
  margin: 25px 13px 2px 9px;
  height: 183px;
}

.sinoptico-menu-conteudo .sinoptico-menu-conteudo-title > span {
  color: #bcbcbc;
  font-size: 0.9em;
  font-weight: bold;
}

.sinoptico-menu-conteudo .sinoptico-menu-conteudo-title {
  margin-bottom: 10px;
}

.sinoptico-menu-conteudo > div > section {
  display: flex;
  justify-content: space-between;
}
.sinoptico-menu-conteudo > div > section > span {
  color: #fff;
  font-size: 0.9em;
  font-weight: 600;
}

.sinoptico-menu-conteudo > hr {
  border: 1px solid #bcbcbc;
  margin: 10px 0;
}

.sinoptico-menu-conteudo > div > section > .sinoptico-size-x {
  height: 21px;
  width: 21px;
  right: 23px;
  padding-left: 1px;
}

.sinoptico-menu-conteudo > div > section > .sinoptico-circle {
  background: #626060;
  font-size: 0.8em;
}

.sinoptico-menu-conteudo > div {
  overflow: auto;
  height: 82px;
  padding-right: 10px;
}

/* Menu do veículo */
.sinoptico-infobus-menuToggle {
  display: block;
  position: relative;
  top: 2px;
  left: 3px;
  width: 50px;
  z-index: 1;
  user-select: none;
}
.sinoptico-infobus-menuToggle input {
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  opacity: 0;
  top: -2px;
  z-index: -1;
}

.sinoptico-infobus-menuToggle input:checked ~ div {
  transform: none;
}

.sinoptico-infobus-icon {
  color: #fff;
  font-size: 1.5em;
  margin-left: 2px;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
}

.sinoptico-infobus-icon-color-left:hover {
  background: rgb(20, 105, 158);
}

.sinoptico-infobus-icon-color-right:hover {
  background: rgb(23, 140, 56);
}

.sinoptico-infobus-menu {
  position: absolute;
  width: 263px;
  margin-top: -30px;
  height: 245px;
  background: #3f3f3f;
  list-style-type: none;
}

.sinoptico-infobus-menu-left {
  border-radius: 0 23px 0 0;
  transform-origin: 0% 0%;
  transform: translate(-120%, 0);
  left: 33px;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.sinoptico-infobus-menu-right {
  border-radius: 23px 0 0 0;
  transform-origin: 0% 0%;
  transform: translate(120%, 0);
  right: 51px;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.sinoptico-infobus-navbar {
  background: #626060;
  top: 0;
  height: 30px;
  width: 100%;
  display: flex;
}

.sinoptico-infobus-navbar span {
  margin: 5px 7px 0 0;
  font-size: 0.8em;
  color: #fff;
  font-weight: 600;
}

#sinoptico-infobus-navbar-left {
  padding: 4px 5px 0 10px;
  border-radius: 0 20px 0 0;
  justify-content: flex-start;
}

#sinoptico-infobus-navbar-right {
  border-radius: 20px 0 0 0;
  padding: 4px 10px 0 5px;
  justify-content: flex-end;
}

.sinoptico-info-conteudo {
  margin: 5px 13px 5px 9px;
  height: 208px;
}
.sinoptico-info-conteudo > div {
  /* height: 82px; */
  padding-right: 10px;
}

.sinoptico-info-conteudo > div > section {
  display: flex;
  flex-direction: column;
}

.sinoptico-info-conteudo > div > section > span {
  color: #fff;
  font-size: 0.7em;
  font-weight: 600;
  margin-bottom: 4px;
}
.sinoptico-info-conteudo > div > section > span > b {
  color: #bcbcbc;
}

.position-relative {
  position: relative;
}

#new-sinotico #tooltip-box {
  /* position: absolute; */
  margin: 0;
  z-index: 99;
  margin-top: 5px;
  height: 30px;
  display: flex;
  align-items: center;
}

.tooltip-box-list {
  position: relative;
  margin-top: 5px;
}

.tooltip-box-list .container-closeButton {
  position: absolute;
  right: -4px;
  top: 0;
}

.tooltip-box-list .button-buschat-click {
  background-color: #a3ca00;
}

.tooltip-box {
  background-color: transparent !important;
  box-shadow: unset !important;
  padding: 0;
  margin: 0;
  bottom: 7px;
}

.tooltip-box .tooltip-box-list li {
  padding: 0 !important;
  margin: 0 !important;
}