/* === Notificacoes === */

.header__notification-wrapper[data-counter]:not([data-counter='0']),
.notificacao-header__notification-wrapper[data-counter]:not([data-counter='0']),
.total-header__notification-wrapper[data-counter]:not([data-counter='0']) {
  display: inline-flex;
  max-width: 24px;
  position: relative;
}

.header__notification-wrapper[data-counter]:not([data-counter='0']):after,
.notificacao-header__notification-wrapper[data-counter]:not([data-counter='0']):after,
.total-header__notification-wrapper[data-counter]:not([data-counter='0']):after {
  align-items: center;
  animation: pop 1s ease forwards;
  /*  background: #f78323; */
  background: rgba(231, 76, 60, 0.88);
  border-radius: 50%;
  box-sizing: content-box;
  /* color: var(--color-neutral-70); */
  color: white;
  content: attr(data-counter);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  height: 17px;
  justify-content: center;
  left: -8px;
  line-height: 19px;
  padding: 1px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: -8px;
  width: 17px;
}

.instance__notification-wrapper[data-counter]:not([data-counter='0']):after {
  align-items: center;
  animation: pop 1s ease forwards;
  background: #f78323;

  border-radius: 50%;
  box-sizing: content-box;
  content: attr(data-counter);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  height: 17px;
  justify-content: center;
  left: -8px;
  line-height: 19px;
  padding: 1px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: -8px;
  width: 17px;
}

.header__notification-wrapper[data-counter]:not([data-counter='0']) svg {
  animation-delay: 1s;
  /*  -webkit-backface-visibility: hidden;
   backface-visibility: hidden; */
  transform-origin: top right;
}

.instance_notification {
  animation: bell-shake 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3;
  animation-delay: 1s;
  /*   -webkit-backface-visibility: hidden;
   backface-visibility: hidden; */
  transform-origin: top right;
}

.bell-shake .header__notification-wrapper[data-counter]:not([data-counter='0'], .instance_notification) {
  display: inline-flex;
  max-width: 24px;
  position: relative;
  color: #fff;
}

/* ========================= Modal Editar Senha =============================== */
.position-relative-password {
  position: relative;
}

.password-input {
  padding-right: 40px;
}

.eye-password {
  top: 25px;
  right: 20px;
  position: absolute;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease;
  color: var(--buttonSuccess);
}

.eye-password:hover {
  color: var(--hoverSuccess) !important;
}

@keyframes bell-shake {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(10deg);
  }

  10% {
    transform: rotate(-10deg);
  }

  15% {
    transform: rotate(10deg);
  }

  20% {
    transform: rotate(-10deg);
  }

  25% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(0deg);
  }

  80% {
    transform: rotate(10deg);
  }

  85% {
    transform: rotate(-10deg);
  }

  90% {
    transform: rotate(10deg);
  }

  95% {
    transform: rotate(-10deg);
  }

  to {
    transform: rotate(0);
  }
}

/* moved from template.php on 10/03/2024 */
.favoritado {
  color: #f0da2a !important;
}
.profile_info {
  width: 100% !important;
}
.favoritoAdicionado::after {
  left: 17px !important;
}

.favoritoAdicionado {
  padding-left: 27px !important;
}

.iconeFavorito {
  font-size: 18px;
  margin-top: 8px;
  float: left;
}

.naoFavoritado {
  color: #72869b;
}

.catFavoritos {
  width: 104%;
  color: rgba(255, 255, 255, 0.75);
  padding-left: 15px;
  letter-spacing: 0.5px;
  font-size: 12.5px;
  margin-bottom: 0;
  margin-top: 0;
  padding-right: 20px !important;
  text-shadow: 1px 1px #000;
  background: var(--primary-color);
  padding: 7px 12px 7px 12px;
  cursor: default;
}

.catFavoritos:hover {
  /*   background:  !important; */
}

.subCat {
  font-size: 11px;
  /*color: #fff*/
}

.bg-danger {
  background-color: #2a3f54;
  color: #ffffff;
}

.tabela tbody tr:hover {
  background-color: #ededed;
}

tr {
  cursor: pointer;
}

/* Loading animation */
#loading-main {
  position: fixed;
  background: linear-gradient(#202a44, #0a2a56); /* background do loading */
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0px;
  z-index: 1000000000000;
}

#load-main .container {
  width: 250px;
  height: 150px;
}
#load-main .container .box1,
#load-main .container .box2,
#load-main .container .box3 {
  border: 14px solid #1b365d; /* cores da borda */
  background: #fff;
  box-sizing: border-box;
  position: absolute;
  display: block;
}
#load-main .container .box1 {
  width: 112px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;
  -webkit-animation: anime1 4s 0s forwards ease-in-out infinite;
  animation: anime1 4s 0s forwards ease-in-out infinite;
}
#load-main .container .box2 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;
  -webkit-animation: anime2 4s 0s forwards ease-in-out infinite;
  animation: anime2 4s 0s forwards ease-in-out infinite;
}
#load-main .container .box3 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;
  -webkit-animation: anime3 4s 0s forwards ease-in-out infinite;
  animation: anime3 4s 0s forwards ease-in-out infinite;
}

#load-main .loading-main-title h3 {
  color: #fff;
  text-align: center;
  /*  margin-top: 150px; */
  font-family: Helvetica, sans-serif;
  animation: stroke 3s infinite alternate;
}

#load #loading {
  position: fixed;
  background: #2a3f54;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0px;
  z-index: 1000000000;
  opacity: 0.9;
}
#load .container {
  width: 112px;
  height: 112px;
}
#load .container .box1,
#load .container .box2,
#load .container .box3 {
  border: 16px solid #202a44;
  background: #fff;
  box-sizing: border-box;
  position: absolute;
  display: block;
}
#load .container .box1 {
  width: 112px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;
  -webkit-animation: anime1 4s 0s forwards ease-in-out infinite;
  animation: anime1 4s 0s forwards ease-in-out infinite;
}
#load .container .box2 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;
  -webkit-animation: anime2 4s 0s forwards ease-in-out infinite;
  animation: anime2 4s 0s forwards ease-in-out infinite;
}
#load .container .box3 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;
  -webkit-animation: anime3 4s 0s forwards ease-in-out infinite;
  animation: anime3 4s 0s forwards ease-in-out infinite;
}

#load .loading-title h3 {
  color: #ff8000;
  text-align: center;
  margin-top: 150px;
  font-family: Helvetica, sans-serif;
  animation: pulse 2s infinite;
}


/*
- new loading do SGA
- font personalizada
- by: Geraldo 21/07/2024
*/
@font-face {
  font-family: 'Yamaka';
  src: url('../../assets/fonts/YamakaPersonalUsed.woff2');
}

.myloading {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 100%;
}
.myloading text {
  animation: stroke 3s alternate;
  font-family: 'Yamaka', Arial, sans-serif;
  stroke-width: 2;
  /*  stroke: #CED9E5; */
  font-size: 6em;
}

/*   svg.myloading */
.newAnimation {
  xbackground: radial-gradient(rgba(255, 255, 255, 0.06), #0a2a56);
  xbackground: radial-gradient(black, transparent);
  border-radius: 10px;
  xbox-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
  animation: animateBackground 5s linear infinite, changeColor 2.5s ease-in-out alternate infinite;
}

@keyframes stroke {
  0% {
    fill: rgba(32, 42, 68, 0);
    stroke: rgba(206, 217, 229, 1);
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 2;
  }
  70% {
    fill: rgba(32, 42, 68, 0);
    stroke: rgba(206, 217, 229, 1);
  }
  80% {
    fill: rgba(32, 42, 68, 0);
    stroke: rgba(206, 217, 229, 1);
    stroke-width: 3;
  }
  100% {
    fill: rgba(32, 42, 68, 1);
    stroke: rgba(206, 217, 229, 0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

/* Text pulse do loading */

.pulse-text {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  color: #ced9e5;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes animateBackground {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}

@keyframes changeCoxlor {
  0% {
    background-color: #7089ac;
  }
  100% {
    background-color: #292929;
  }
}

p#loadingTime {
  text-align: center;
  font-size: 1.5rem;
}

.breadcrumb {
  padding: 10px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #fff;
  border-radius: 4px;
  margin-left: -9px !important;
  margin-right: -10px !important;
  border-top: none;
  border-bottom: 1px solid #d9dee4;
  margin-top: -10px;
}

@-webkit-keyframes anime1 {
  0% {
    width: 112px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  25% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  50% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  75% {
    width: 48px;
    height: 112px;
    margin-top: 0px;
    margin-left: 0px;
  }
  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
}
@keyframes anime1 {
  0% {
    width: 112px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  25% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  50% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
  75% {
    width: 48px;
    height: 112px;
    margin-top: 0px;
    margin-left: 0px;
  }
  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
}
@-webkit-keyframes anime2 {
  0% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  25% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  50% {
    width: 112px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  75% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  100% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
}
@keyframes anime2 {
  0% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  25% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  50% {
    width: 112px;
    height: 48px;
    margin-top: 0px;
    margin-left: 0px;
  }
  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  75% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  100% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
}
@-webkit-keyframes anime3 {
  0% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  25% {
    width: 48px;
    height: 112px;
    margin-top: 0px;
    margin-left: 64px;
  }
  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  50% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  75% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  100% {
    width: 112px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
}
@keyframes anime3 {
  0% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  12.5% {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    margin-left: 64px;
  }
  25% {
    width: 48px;
    height: 112px;
    margin-top: 0px;
    margin-left: 64px;
  }
  37.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  50% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  62.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  75% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  87.5% {
    width: 48px;
    height: 48px;
    margin-top: 64px;
    margin-left: 64px;
  }
  100% {
    width: 112px;
    height: 48px;
    margin-top: 64px;
    margin-left: 0px;
  }
}

nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #ffffff;
  cursor: default;
  background-color: #ff8000;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.breadcrumb {
  padding: 10px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #fff;
  border-radius: 4px;
  margin-left: -30px;
  margin-right: -30px;
  border-top: none;
  border-bottom: 1px solid #d9dee4;
  margin-top: -10px;
}

/*.top_nav .navbar-right li{height: 50px !important;}*/

/*
 * Component: Control sidebar. By default, this is the right sidebar.
 */
.control-sidebar-bg {
  position: fixed;
  z-index: 1000;
  bottom: 0;
}
.control-sidebar-bg,
.control-sidebar {
  top: 50px;
  border-top: solid 1px #405060;
  right: -230px;
  width: 230px;
  -webkit-transition: right 0.3s ease-in-out;
  -o-transition: right 0.3s ease-in-out;
  transition: right 0.3s ease-in-out;
}
.control-sidebar {
  position: absolute;
  padding-top: 0;
  z-index: 1010;
}
@media (max-width: 767px) {
  .control-sidebar {
    padding-top: 100px;
  }
}
.control-sidebar > .tab-content {
  padding: 10px 15px;
}
.control-sidebar.control-sidebar-open,
.control-sidebar.control-sidebar-open + .control-sidebar-bg {
  right: 0;
}
.control-sidebar-hold-transition .control-sidebar-bg,
.control-sidebar-hold-transition .control-sidebar,
.control-sidebar-hold-transition .content-wrapper {
  transition: none;
}
.control-sidebar-open .control-sidebar-bg,
.control-sidebar-open .control-sidebar {
  right: 0;
}
@media (min-width: 768px) {
  .control-sidebar-open .content-wrapper,
  .control-sidebar-open .right-side,
  .control-sidebar-open .main-footer {
    margin-right: 230px;
  }
}
.fixed .control-sidebar {
  position: fixed;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 50px;
}
.nav-tabs.control-sidebar-tabs > li:first-of-type > a,
.nav-tabs.control-sidebar-tabs > li:first-of-type > a:hover,
.nav-tabs.control-sidebar-tabs > li:first-of-type > a:focus {
  border-left-width: 0;
}
.nav-tabs.control-sidebar-tabs > li > a {
  border-radius: 0;
}
.nav-tabs.control-sidebar-tabs > li > a,
.nav-tabs.control-sidebar-tabs > li > a:hover {
  border-top: none;
  border-right: none;
  border-left: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.nav-tabs.control-sidebar-tabs > li > a .icon {
  font-size: 16px;
}
.nav-tabs.control-sidebar-tabs > li.active > a,
.nav-tabs.control-sidebar-tabs > li.active > a:hover,
.nav-tabs.control-sidebar-tabs > li.active > a:focus,
.nav-tabs.control-sidebar-tabs > li.active > a:active {
  border-top: none;
  border-right: none;
  border-bottom: none;
}
@media (max-width: 768px) {
  .nav-tabs.control-sidebar-tabs {
    display: table;
  }
  .nav-tabs.control-sidebar-tabs > li {
    display: table-cell;
  }
}
.control-sidebar-heading {
  font-weight: 400;
  font-size: 16px;
  padding: 10px 0;
  margin-bottom: 10px;
}
.control-sidebar-subheading {
  display: block;
  font-weight: 400;
  font-size: 14px;
}
.control-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
}
.control-sidebar-menu > li > a {
  display: block;
  padding: 10px 15px;
}
.control-sidebar-menu > li > a:before,
.control-sidebar-menu > li > a:after {
  content: ' ';
  display: table;
}
.control-sidebar-menu > li > a:after {
  clear: both;
}
.control-sidebar-menu > li > a > .control-sidebar-subheading {
  margin-top: 0;
}
.control-sidebar-menu .menu-icon {
  float: left;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
}
.control-sidebar-menu .menu-info {
  margin-left: 45px;
  margin-top: 3px;
}
.control-sidebar-menu .menu-info > .control-sidebar-subheading {
  margin: 0;
}
.control-sidebar-menu .menu-info > p {
  margin: 0;
  font-size: 11px;
}
.control-sidebar-menu .progress {
  margin: 0;
}
.control-sidebar-dark {
  color: #b8c7ce;
}
.control-sidebar-dark,
.control-sidebar-dark + .control-sidebar-bg {
  background: #222d32;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs {
  border-bottom: #1c2529;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a {
  background: #181f23;
  color: #b8c7ce;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus {
  border-left-color: #141a1d;
  border-bottom-color: #141a1d;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:active {
  background: #1c2529;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
  color: #fff;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:focus,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:active {
  background: #222d32;
  color: #fff;
}
.control-sidebar-dark .control-sidebar-heading,
.control-sidebar-dark .control-sidebar-subheading {
  color: #fff;
}
.control-sidebar-dark .control-sidebar-menu > li > a:hover {
  background: #1e282c;
}
.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
  color: #b8c7ce;
}
.control-sidebar-light {
  color: #5e5e5e;
}
.control-sidebar-light,
.control-sidebar-light + .control-sidebar-bg {
  background: #f9fafc;
  border-left: 1px solid #d2d6de;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs {
  border-bottom: #d2d6de;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a {
  background: #e8ecf4;
  color: #444;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus {
  border-left-color: #d2d6de;
  border-bottom-color: #d2d6de;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:active {
  background: #eff1f7;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:focus,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:active {
  background: #f9fafc;
  color: #111;
}
.control-sidebar-light .control-sidebar-heading,
.control-sidebar-light .control-sidebar-subheading {
  color: #111;
}
.control-sidebar-light .control-sidebar-menu {
  margin-left: -14px;
}
.control-sidebar-light .control-sidebar-menu > li > a:hover {
  background: #f4f4f5;
}
.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
  color: #5e5e5e;
}

.main_menu_side {
  overflow-y: scroll;
  height: 90vh;
}

.favorite-icon:hover {
  background: #35495d;
}

#sidebar-menu::-webkit-scrollbar {
  width: 7px; /* width of the entire scrollbar */
}

#sidebar-menu::-webkit-scrollbar-track {
  background: var(--primary-color); /* color of the tracking area */
}

#sidebar-menu::-webkit-scrollbar-thumb {
  background-color: #fff; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid #fff;
  cursor: pointer; /* creates padding around scroll thumb */
}

.topSticky {
  position: sticky;
  top: 0;
  z-index: 55;
}

:root {
  --navHCMbackground: linear-gradient(to bottom, #24480d, #2d3f2e);
}

.nav_menu_HCM {
  float: left;
  background: var(--navHCMbackground);
  margin-bottom: 10px;
  width: 100%;
  height: 50px;
  position: relative;

}

.nav_title_hcm {
  background: var(--navHCMbackground);
  width: 230px;
  float: left;
  border-radius: 0;
  /* height: 57px; */
}

.modoHCM {
  text-transform: uppercase;
  color: coral;
  width: fit-content;
  padding: 5px;
  margin: auto;
  font-weight: bold;
  -webkit-animation: bounce-top 0.9s both;
  animation: bounce-top 0.9s both;

  font-size: smaller;
}
.modoDev {
  font-size: smaller;
  text-transform: uppercase;
  color: rgb(255, 250, 248);
  width: fit-content;
  padding: 5px;
  
  font-weight: bold;
}
.absolute {
  position: absolute;
}

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

/* Ajusta o layout do template */
.main__container{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.top__container {
  flex: 1;
}