@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2/css/weather-icons.min.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#sliderDiv {
    width: 70%;
}

td.details-control {
    background: url('../media/img/icons/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('../media/img/icons/details_close.png') no-repeat center center;
}

.activeB {
    background: #5867dd !important;
    color: white !important;
}

.sentinel-image-wrap {
    margin: 8px;
}
#imagesSentinel {
    display: flex;
    flex-direction: row;
    overflow: auto;
    width: 100vh;
}

.line-through {
    text-decoration: line-through;
}

.modal-xg {
    max-width: 90%;
}

#pac-input {
    margin:10px;
}

#layer-button {
    margin:10px;    
    background-color: #fff;
    height: 40px;
    width: 40px;
    color: #000;
    z-index: -2;
}

#menu-button {
    margin: 0px;
    left: 15px;
    position: absolute;
    color: #000;
    z-index: 1;
    top: 10px;
}

#menu-button .m-dropdown .m-dropdown__wrapper {
    top: 0%;
    left: 50px;
}


#button-profile {
    margin: 0px;
    right: 20px;
    position: absolute;
    color: #000;
    z-index: 1;
    top: 10px;
}

#bottom-profile .m-dropdown .m-dropdown__wrapper {
    top: 0%;
    left: 50px;
}

#button-layer {
    margin: 0px;
    right: 70px;
    position: absolute;
    color: #000;
    z-index: 1;
    top: 10px;
}

#shp-button {
    background-color: #fff;
    margin: 10px;
    height: 40px;
    width: 40px;
    right: 138px;
    position: absolute;
    color: #000;
    z-index: 1;
}

#shp-button-regua > div {   
    height: 20px;
    width: 20px;
    color: #bfbfbf;
}


.fontawesomesvg {
    color: #bfbfbf;
    margin-top:8%;
    margin-left:30%;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -.125em;
}

#shp-button-regua > div > i {   
    font-size: 2.0rem;
    cursor: pointer;
    margin-left: 6px;
}

#btn-unidades {
    margin: 10px;
    height: 40px;
    right: 138px;
    position: absolute;
    z-index: 1;
}

#btn-unidades > button.active{
    border-color:#FFFFFF;
    border-width: 2px;
}

.legendRenda {
    max-width: 250px !important;
}

.modal {
    overflow-y: auto !important;
}

.form-control, .input-group .input-group-btn > .btn.btn-secondary, .has-success .input-group-addon, .has-success .form-control {
    border-color: #b3b3b3;
}

.m-spinner {
    display: none !important;
}

.tabela thead {
    border-bottom: 1px solid #d6d6d6;
}

.tabela tr td {
    border-bottom: 1px solid #d6d6d6;
}

#tt {
    position: absolute;
    display: block;
    /*background: url(./assets/app/media/img/tt_left.gif) top left no-repeat*/
}

#tttop {
    display: block;
    height: 5px;
    margin-left: 5px;
    /*background: url(./assets/app/media/img/tt_top.gif) top right no-repeat;*/
    overflow: hidden
}

#ttcont {
    display: block;
    padding: 2px 12px 3px 7px;
    margin-left: 5px;
    background: #666;
    color: #FFF
}

#ttbot {
    display: block;
    height: 5px;
    margin-left: 5px;
    /*background: url(./assets/app/media/img/tt_bottom.gif) top right no-repeat;*/
    overflow: hidden
}

#layer_sup {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    position: relative; 
}

.layers {
    margin: 0;
    padding: 10px;
    border: 1px solid #999;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background-color: #fff;
    display: none;
}

#ultimos_focos_port {
    /*position: absolute;*/
    bottom: 0px;
    /*right: 10px;*/
    z-index: 1001;
    /*display:none;*/
    border-radius: 5px;
    margin-bottom: 0;
}

.ultimos-focos-container {
    bottom: 0;
    position: absolute;
    right: 10px;
    z-index: 9999999;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
    max-width: calc(100vw - 40px);
}

.labels {
    color: #000;
    background-color: #ddd;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    width: auto;
    border: 1px solid #c7c5c5;
    white-space: nowrap;
    padding: 2px;
    opacity: .75;
    filter: alpha(opacity=75);
    -ms-filter: "alpha(opacity=75)";
    -khtml-opacity: .75;
    -moz-opacity: .75;
    box-shadow: 2px 2px 2px #686868;
}

/*
Gambiarra necessária porque o jstree esta dentro de um modal e o z-index do modal é maior.
 */
.vakata-context {
    z-index: 9999 !important;
}

.fa-folder {
    color: #F8D775;
}

.div-fit-content {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
}

.cursor-pointer {
    cursor: pointer;
}

.la.la-remove {
    color: red;
}

.la.la-plus {
    color: green;
}


.divider { /* minor cosmetics */
    display: table;
    font-size: 1.3rem;
    text-align: center;
    width: 84%;
    margin: 32px auto; /* spacing above/below */
}

.divider span {
    display: table-cell;
    position: relative;
}

.divider span:first-child, .divider span:last-child {
    width: 50%;
    top: 13px; /* adjust vertical align */
    -moz-background-size: 100% 2px; /* line width */
    background-size: 100% 2px; /* line width */
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
}

.divider span:first-child { /* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#2a2a2b));
    background-image: -webkit-linear-gradient(0deg, transparent, #2a2a2b);
    background-image: -moz-linear-gradient(0deg, transparent, #2a2a2b);
    background-image: -o-linear-gradient(0deg, transparent, #2a2a2b);
    background-image: linear-gradient(0deg, transparent, #2a2a2b);
}

.divider span:nth-child(2) {
    color: #2a2a2b;
    padding: 0px 5px;
    width: auto;
    white-space: nowrap;
}

.divider span:last-child { /* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2a2a2b), to(transparent));
    background-image: -webkit-linear-gradient(0deg, #2a2a2b, transparent);
    background-image: -moz-linear-gradient(0deg, #2a2a2b, transparent);
    background-image: -o-linear-gradient(0deg, #2a2a2b, transparent);
    background-image: linear-gradient(0deg, #2a2a2b, transparent);
}

.card {
    position: relative;
    border:none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius:0px;
}

.card-header {
    margin-bottom: 0;
    background:none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.m-dropdown .maior {
    width: 622px;
}

.m-nav-grid > .m-nav-grid__row > .m-nav-grid__item {
    padding: 10px 5px 10px 5px;
}

.novo.m-dropdown--arrow .m-dropdown__wrapper {
    padding:0px;  
}

.m-nav-grid > .m-nav-grid__row > .m-nav-grid__item > .m-nav-grid__text {
    color:#908c89;
}

.m-nav-grid > .m-nav-grid__row > .m-nav-grid__item > .m-nav-grid__icon {
    color:#908c89;
}

.m-nav-grid .m-nav-grid__row .m-nav-grid__item:hover {
    background: #ffffff; 
}

.m-nav-grid .m-nav-grid__row .m-nav-grid__item:hover .m-nav-grid__icon {
    color: #34bfa3;
}

.m-nav-grid .m-nav-grid__row .m-nav-grid__item:hover .m-nav-grid__text {
    color: #34bfa3;
}

.m-nav-grid > .m-nav-grid__row > .active {
    background-color:#34bfa3;
}

.m-nav-grid > .m-nav-grid__row > .active > .m-nav-grid__text {
    color:#ffffff;
}

.m-nav-grid > .m-nav-grid__row > .active > .m-nav-grid__icon {
    color:#ffffff;
}

#map {
    height: 100%;
}

#map2 {
    height: 100%;
}

.esconder {
    display:none;
}

.aparecer {
    display:inline;
}

.cd-image-container {
  max-width: 768px;
}
.cd-image-container img {
  display: block;
}
.cd-image-label {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #000;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  visibility: hidden;
}
.is-visible .cd-image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-right: 3px solid rgb(255, 255, 255);
}
.cd-resize-img img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.cd-resize-img .cd-image-label {
  right: auto;
  left: 0;
}
.is-visible .cd-resize-img {
  width: 50%;
  /* bounce in animation of the modified image */
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}

@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
.cd-handle {
  position: absolute;
  height: 44px;
  width: 44px;
  /* center the element */
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #000000 url("cd-arrows.svg") no-repeat center center;
  border-color: #ffffff;
  border-width:1px;
  border-style: solid;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
#cd-handle {
  z-index:26;    
}
#cd-resize-img {
  z-index:25;
}
.is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}

.m-quick-sidebar-left {
  padding: 20px 30px 30px 30px; }
  .m-quick-sidebar-left .m-quick-sidebar__close {
    position: absolute;
    font-size: 1.4rem;
    cursor: pointer; }
  .m-quick-sidebar-left .mCSB_scrollTools {
    right: -13px !important; }
  .m-quick-sidebar-left.m-quick-sidebar--tabbed .m-quick-sidebar__close {
    top: 16px;
    right: 30px; }
  .m-quick-sidebar-left.m-quick-sidebar--tabbed .m-tabs.m-tabs-line {
    margin: 0 0 30px 0; }
    .m-quick-sidebar-left.m-quick-sidebar--tabbed .m-tabs.m-tabs-line > .m-tabs__item > .m-tabs__link {
      padding: 15px 0; }

.m-quick-sidebar-left {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  -moz-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
  .m-quick-sidebar-left .m-quick-sidebar__close {
    color: #cfcedb; }
    .m-quick-sidebar-left .m-quick-sidebar__close:hover {
      color: #716aca; }

.m-quick-sidebar-left.m-quick-sidebar--skin-dark {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4);
  -moz-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4);
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4); }
  .m-quick-sidebar-left.m-quick-sidebar--skin-dark .m-quick-sidebar__close {
    color: #dfdff1; }
    .m-quick-sidebar-left.m-quick-sidebar--skin-dark .m-quick-sidebar__close:hover {
      color: #716aca; }

.m-quick-sidebar-close {
  display: none; }

.m-quick-sidebar-left {
  display: block !important;
  z-index: 1001;
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 455px !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  left: -465px; }
  .m-quick-sidebar-left.m-quick-sidebar--on {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    left: 0; }
  
    
.m-quick-sidebar-left-search {
  padding: 20px 30px 30px 30px; }
  .m-quick-sidebar-left-search .m-quick-sidebar__close {
    position: absolute;
    font-size: 1.4rem;
    cursor: pointer; }
  .m-quick-sidebar-left-search .mCSB_scrollTools {
    right: -13px !important; }
  .m-quick-sidebar-left-search.m-quick-sidebar--tabbed .m-quick-sidebar__close {
    top: 16px;
    right: 30px; }
  .m-quick-sidebar-left-search.m-quick-sidebar--tabbed .m-tabs.m-tabs-line {
    margin: 0 0 30px 0; }
    .m-quick-sidebar-left-search.m-quick-sidebar--tabbed .m-tabs.m-tabs-line > .m-tabs__item > .m-tabs__link {
      padding: 15px 0; }

.m-quick-sidebar-left-search {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  -moz-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
  .m-quick-sidebar-left-search .m-quick-sidebar__close {
    color: #cfcedb; }
    .m-quick-sidebar-left-search .m-quick-sidebar__close:hover {
      color: #716aca; }

.m-quick-sidebar-left-search.m-quick-sidebar--skin-dark {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4);
  -moz-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4);
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4); }
  .m-quick-sidebar-left-search.m-quick-sidebar--skin-dark .m-quick-sidebar__close {
    color: #dfdff1; }
    .m-quick-sidebar-left-search.m-quick-sidebar--skin-dark .m-quick-sidebar__close:hover {
      color: #716aca; }

.m-quick-sidebar-close {
  display: none; }

.m-quick-sidebar-left-search {
  display: block !important;
  z-index: 1001;
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 455px !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  left: -465px; }
  .m-quick-sidebar-left-search.m-quick-sidebar--on {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    left: 0; }


.m-quick-sidebar-check {
  padding: 20px 30px 30px 30px; }
  .m-quick-sidebar-check .m-quick-sidebar__close {
    position: absolute;
    font-size: 1.4rem;
    cursor: pointer; }
  .m-quick-sidebar-check .mCSB_scrollTools {
    right: -13px !important; }
  .m-quick-sidebar-check.m-quick-sidebar--tabbed .m-quick-sidebar__close {
    top: 16px;
    right: 30px; }
  .m-quick-sidebar-check.m-quick-sidebar--tabbed .m-tabs.m-tabs-line {
    margin: 0 0 30px 0; }
    .m-quick-sidebar-check.m-quick-sidebar--tabbed .m-tabs.m-tabs-line > .m-tabs__item > .m-tabs__link {
      padding: 15px 0; }

.m-quick-sidebar-check {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  -moz-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
  .m-quick-sidebar-check .m-quick-sidebar__close {
    color: #cfcedb; }
    .m-quick-sidebar-check .m-quick-sidebar__close:hover {
      color: #716aca; }

.m-quick-sidebar-check.m-quick-sidebar--skin-dark {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4);
  -moz-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4);
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.4); }
  .m-quick-sidebar-check.m-quick-sidebar--skin-dark .m-quick-sidebar__close {
    color: #dfdff1; }
    .m-quick-sidebar-check.m-quick-sidebar--skin-dark .m-quick-sidebar__close:hover {
      color: #716aca; }

.m-quick-sidebar-check {
  display: block !important;
  z-index: 1001;
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 455px !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  right: -465px; }
  .m-quick-sidebar-check.m-quick-sidebar--on {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    right: 0; }
  
  
#estresse-hidrico {  
  box-shadow: 0px 0px 15px 1px rgb(113 106 202 / 20%);
  position:fixed;
  width:90px;
  height:233px;
  bottom:20px;
  right: 5%;
  z-index:9999998; 
  display:none;
}

#estresse-ndvi {  
  box-shadow: 0px 0px 15px 1px rgb(113 106 202 / 20%);
  position:fixed;
  width:82px;
  height:224px;
  bottom:20px;
  right: 5%;
  z-index:9999998; 
  display:none;
}
  
  

#weather_wrapper {
  box-shadow: 0px 0px 15px 1px rgb(113 106 202 / 20%);
  position:fixed;
  bottom:1px;
  width: 300px;
  left: 20%;
  display:none;
}

#weather_wrapper.animation-on {
  display:inline;
  animation: appear 500ms ease-out forwards;     
}

#weather_wrapper.animation-off {
  animation: appear 500ms ease-out backwards;     
}

.weatherCard {
  width: 300px;
  height: 100px;
  font-family: 'Open Sans';
  position: relative;
}
.currentTemp{
  border-radius: 8px 0px 0px 0px;    
  width: 120px;
  height: 100px;
  background: rgb(41, 41, 41);
  position: absolute;
  top: 0;
  left: 0;
}
.currentWeather{
  border-radius: 0px 8px 0px 0px;    
  width: 180px;
  height: 100px;
  background: rgb(237, 237, 237);
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.temp{
  font-size: 30px;
  text-align: center;
  display: block;
  font-weight: 300;
  color: rgb(255, 255, 255);
  padding: 20px 0 0;
}
.location{
  color: rgb(255, 255, 255);
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  display: block;
}
.conditions{
  font-family: weathericons;
  font-size: 30px;
  display: block;
  padding: 5px 0 0;
  text-align: center;
}
.info{
  border-radius: 0px 8px 0px 0px;  
  width: 180px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgb(42, 178, 234);
  font-weight: 700;
  color: rgb(255, 255, 255);
  text-align: center;
}
.rain {
  width: 50%;
  position: absolute;
  left: 10px;
  word-spacing: 60px;
  top: 3px;
}
.rain::before{
  display: block;
  content: '\f04e';
  font-family: weathericons;
  font-size: 40px;
  left: 6px;
  top: -4px;
  position: absolute;
}
.wind {
  width: 50%;
  right: -10px;
  position: absolute;
  word-spacing: 60px;
  top: 3px;
}
.wind::before{
  display: block;
  content: '\f050';
  font-family: weathericons;
  font-size: 25px;
  left: -10px;
  position: absolute;
  top: 5px;
}
.chuva-container {   
  bottom: 0;
  position: absolute;
  left: 10px;
  z-index: 9999999;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  max-width: calc(100vw - 40px);
  border-radius:10px;
  margin-bottom:10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.toggle {
  --width: 50px;
  --height: calc(var(--width) / 3);

  position: relative;
  display: inline-block;
  width: var(--width);
  height: var(--height);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: var(--height);
  cursor: pointer;
}

.toggle input {
  display: none;
}

.toggle .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--height);
  background-color: #ccc;
  transition: all 0.4s ease-in-out;
}

.toggle .slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--height));
  height: calc(var(--height));
  border-radius: calc(var(--height) / 2);
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-in-out;
}

.toggle input:checked+.slider {
  background-color: #2196F3;
}

.toggle input:checked+.slider::before {
  transform: translateX(calc(var(--width) - var(--height)));
}

.toggle .labels-u {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-family: sans-serif;
  transition: all 0.4s ease-in-out;
}

.toggle .labels-u::after {
  content: attr(data-off);
  position: absolute;
  right: 5px;
  color: #4d4d4d;
  opacity: 1;
  transition: all 0.4s ease-in-out;
}

.toggle .labels-u::before {
  content: attr(data-on);
  position: absolute;
  left: 5px;
  color: #ffffff;
  opacity: 0;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
  transition: all 0.4s ease-in-out;
}

.toggle input:checked~.labels-u::after {
  opacity: 0;
}

.toggle input:checked~.labels-u::before {
  opacity: 1;
}

.typeahead {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes appear {
  0% {
    transform:scale(0);
  }
  50% {
    transform:scale(1.05)
  }
  75% {
    transform:scale(0.95)
  }
  100% {
   transform:scale(1)
  }
}

.borderClass{
  border-color: #000000;
  border-width:1px;
  border-style: solid;
}
.daterangepicker{z-index:11111111111 !important}

.m-datatable.m-datatable--default.m-datatable--scroll > .m-datatable__table > .m-datatable__body {
  overflow-y: scroll;  
  height:400px;
}

.custom-drawing-button {
  width: 50px !important;
  height: 40px !important;
  border-radius: 2px !important;
  margin: 5px 0 0 4px !important;
}
.control:hover {
    border: 2px solid #000;  /* Borda mais grossa ao passar o mouse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Sombra mais forte */
    transform: scale(1.05);  /* Leve zoom para realçar o botão */
}

/* Classe para o controle selecionado */
.selected-b {
    border: 2px solid #000;  /* Borda mais grossa quando selecionado */
}

.zoom-control-in {
  cursor: pointer;
  font-weight: 300;
  user-select: none;
  padding: 5px;
  font: 1.2em Arial;  
  border: 0;
  color: rgba(0, 0, 0, 0.6);
  background-color: white;
}

.zoom-control-out {
  cursor: pointer;
  font-weight: 300;
  user-select: none;
  padding: 5px;
  font: 1.2em Arial;  
  border: 0;
  color: rgba(0, 0, 0, 0.6);
  background-color: white;
}
.no-checkbox > a.jstree-anchor > i.jstree-checkbox {
    display: none;
}

#layer-sentinel {
  bottom: 0;
  position: absolute;
  right: 10px;
  z-index: 9999999;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  max-width: calc(100vw - 40px);
  border-radius:10px;
  margin-bottom:10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.layers-caption {
  padding: 10px;
  background-color: #fff;
  width:300px;
}

#target1 {
  width: 100%;
  border: 2px dashed gray;
  margin:10px;
  padding:10px;
  position:relative;
}
.target {
  width: 68px;
  height: 68px;
  border-radius:50%;
  border: 2px dashed gray;
  margin:2px;
}
.target.over{
  border: 2px dashed red;
}
.box{
  color:#FFFFFF;
  font-weight:bold;
  text-align: center;
  vertical-align: middle;
  line-height: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin:9px;
  float:left;
}

.boxT {
  color:#000;
  font-weight:bold;
  text-align: center;
  vertical-align: middle;
  line-height: 88px;
  height: 48px;
  margin-left:5px;
  margin-right:5px;
  float:left;
}

/* Container do slider */
#slider-container {
    margin-top:10px;
    margin-bottom:10px;
    position: relative;
    width: 100%; /* Ajustar a largura para evitar que o slider seja comprimido */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Slider customizado */
#date-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #5DADE2;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

/* Estilo para o cursor do slider (thumb) */
#date-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #3498DB;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

#date-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: #3498DB;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* Label para a data */
#date-label {
    font-size: 12px;
    color: #3498DB;
    margin-bottom: 10px; /* Espaçamento adicional abaixo do label */
    white-space: nowrap; /* Impedir quebra de linha no label */
}

#date-label {
    position: absolute;
    font-size: 12px;
    color: #3498DB;
    top: -20px; /* Ajuste conforme necessário */
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Marcadores de datas */
#slider-markers {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}
#m_quick_sidebar_left_search .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

#m_quick_sidebar_left_search .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90%;
}

.chart-container {
  width: 100%; /* Ajustar para o tamanho total do contêiner */
  height: 300px; /* Definir uma altura consistente */
}

#ctt-portlet {
  bottom: 0;
  position: absolute;
  left: 10px;
  z-index: 1058;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  max-width: calc(100vw - 40px);
  border-radius:10px;
  margin-bottom:10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.kanban-item {
    border: 1px solid #e9ecef;
    background-color:#FFF;
}