body {
    background-color: #fd7e14;
  }
h1{
    color: rgb(255, 255, 255);
}
h2{
  color: rgb(255, 255, 255);
}
h3{
  color: white;
}
h4{
  color: #ffffff;
}
h5{
  color: #3b3b3b;
}
h6{
  color: #ffffff;
}
/* Nav bar */

.sidebar {
  background-color: #007bff;
}
.main-content {
  margin-left: 300px; /* Ajuste este valor de acordo com a largura da sua barra lateral */
}
.title{
  color: white;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  margin-left: clamp(5px, 5vw, 15px);
  margin-right: clamp(5px, 5vw, 15px);
}
.title-icon{
  color: white;
  font-size: clamp(40px, 3vw, 50px);
}
.title-icon2{
  color: white;
  font-size: clamp(30px, 2vw, 35px);
}
.subtitle{
  color: white;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 600;
  margin-left: clamp(5px, 5vw, 15px);
  margin-right: clamp(5px, 5vw, 15px);
}
.option-title{
  color: white;
  font-size: clamp(15px, 1.5vw, 25px);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  margin-left: 2.5px;
  margin-right: 10px;
}
.nav-pills .nav-link.active{
  background-color: #FD7E14;
}
.nav-pills .nav-link.active:hover{
  background-color: #ed7818;
}
.option.active{
  background-color: #FD7E14;
}
.option.active:hover{
  background-color: #ed7818;
}
.nav-pills .nav-link{
  border: 1px solid transparent;
  border-radius: 10px ;
  background: transparent;
  padding: 5px 10px;
  color: white;
}
.nav-pills .nav-link:hover{
  background-color: #0272e9;
}
.option{
  border: 1px solid transparent;
  border-radius: 10px ;
  background: transparent;
  margin-bottom: 15px;
}
.extra-option{
  border: 1px solid transparent;
  border-radius: 10px ;
  background: transparent;
  padding: 5px 10px;
}
.extra-option:hover{
 background-color: #0272e9;
}
.option:hover {
 background-color: #0272e9;
}
.option-icon{
  margin-right: 2.5px;
  color: #ffffff;
  font-size: clamp(25px ,4.5vw ,40px);
}
p.topic{
  color: rgba(255, 255, 255, 0.70);
  font-size: clamp(12px, 2vw, 20px);
  font-family: 'Inter', sans-serif;
}
.dropdown-bg{
  background-color: #007bff;
}
.dropdown-item{
  color: white;
  font-family: 'Inter', sans-serif;
}

/* .col-auto.col-md-3.col-xl-2.px-sm-2.px-0.sidebar {
  height: 100vh;
}

.nav.nav-pills.flex-column.mb-sm-auto.mb-auto.align-items-center.align-items-sm-start.col-12 {
  height: 50vh;
  overflow-y: auto;
} */


/*Área de interação do usuário*/
.menu{
  background-color: white;
  padding: 20px 0;
}
.badge1 {
  position:relative;
}
.badge1[data-badge]:after {
  content:attr(data-badge);
  position:absolute;
  top:-10px;
  right:-10px;
  font-size:.7em;
  background:red;
  color:white;
  width:18px;height:18px;
  text-align:center;
  line-height:18px;
  border-radius:50%;
  box-shadow:0 0 1px #333;
}
.badge1-disable {
  position:relative;
}
.badge1-disable[data-badge]:after {
  content:attr(data-badge);
  position:absolute;
  top:-10px;
  right:-10px;
  font-size:.7em;
  background:rgb(82, 82, 82);
  color:white;
  width:18px;height:18px;
  text-align:center;
  line-height:18px;
  border-radius:50%;
  box-shadow:0 0 1px #333;
}

.company-btn{
  border: 1px solid transparent;
  background-color: #ed7818;
  border-radius: 10px;
  pointer-events: none;
}
.section-btn{
  border: 1px solid transparent;
  background-color: #ed7818;
  border-radius: 10px;
}
.section-btn:hover{
  border: 1px solid transparent;
  background-color: #d66c15;
  border-radius: 10px;
}
.section-btn.active{
  border: 1px solid transparent;
  background-color: #d66c15;
  border-radius: 10px;
}
.section-btn.disable{
  border: 1px solid transparent;
  background-color: #787878;
  border-radius: 10px;
  cursor: default;
}
.section-title{
  color: white;
  font-size: clamp(14.6px, 2.5vw, 20px);
  font-family: 'Inter', sans-serif;
  padding: 5px 10px;
  margin:0
}
.card-title{
  color: white;
  font-size: clamp(14.6px, 2vw, 40px);;
}

svg{
  width: 90%; /* ou o tamanho específico que você quer */
  height: auto;
}

/* Títulos de input */
h6.register{
  color:#3b3b3b
}

.text-sm-small {
  font-size: 1.1rem;
}

/* Exportar excel */
.btn-export{
  color: white;
  background-color: #08743C;
  transition: 0.3s;
  border-radius: 0.25rem;
}

.btn-export:hover{
  color: white;
  background-color: #086434;
}

div.card{
  margin-bottom: 2%;
}

/* Login form */
.form-container{
  background-color: #007bff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0px 0px 10px 2px rgba(51, 51, 51, 0.2);
}

/* validação selects */
select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

/* Caixa de tags */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #eaeaea;
  color: #444444;
  border-radius: 10px;
  padding: 5px 10px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.large-badge {
  font-size: 1.25rem;
  padding: 0.3rem 0.5rem;
}
.btn-close-black {
  color: #444444;
  margin-left: 5px;
  font-size: 0.75rem;
}

.square-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.square-badge .btn-close {
  position: static;
  margin-left: 5px;
}

.close:hover {
  cursor: pointer;
}

#tagContainer:not(:empty) {
  border: 2px solid #bbb;
  border-radius: 5px;
  padding: 10px;
  overflow-y: auto;
  max-height: 100px; /* ajuste a altura máxima conforme necessário */
}

/* Lista de pesquisa */
.bag-item {
  padding-left: 2rem;
}

.bag-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

/* Btn plus */
.plus-icon {
  display: block;
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 0.8;
}

/*Snackbar horizontal slide*/
#snackbar {
  transition: right 1s;
  right: -600px;
}

/*Formulario de filtro*/
#filterForm {
  padding: 0 20px 0 20px;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.1), inset 0 -5px 5px rgba(0, 0, 0, 0.1);
}

.card-header.bg-primary.pl-0.pr-0 {
  border: none;
}

@media (max-width: 576px) {
  .btn-mobile-full-width {
      width: 100%;
      margin-bottom: 5px;
  }
  .flex-direction-column {
      flex-direction: column !important;
  }
}

@media (max-width: 576px) {
  #divInputOp {
      width: 50%;
  }
  #divBtnOp {
      width: 50%;
  }
  #btn-op {
      padding: 5px;
      font-size: 12px;
  }
}

/* Dashboard */

/* incrementador */
.count-text {
  color: #000;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  min-width: 35px;
  text-align: center;
}
.qty .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  text-align: center;
}
.qty .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: white;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial,sans-serif;
  text-align: center;
  border-radius: 50%;
  }
.qty .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: white;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial,sans-serif;
  text-align: center;
  border-radius: 50%;
  background-clip: padding-box;
}
.minus:hover{
  background-color: #005ed8 !important;
}
.plus:hover{
  background-color: #005ed8 !important;
}
/*Prevent text selection*/
span{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
input{
  border: 0;
  width: 2%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input:disabled{
  background-color:white;
}

.big-switch {
  transform: scale(2);
}

.medium-switch {
  transform: scale(1.5);
}

.product-icon{
  color: #ffffff;
  font-size: 200%
}


.grid-btn{
  text-decoration: none;
  background-color: #b6b6b6;
  color: #5f5f5f;
  padding: 5px
}

.grid-btn:hover{
  background-color: #9b9b9b;
  color: #cccccc;
}

.grid-btn.active{
  background-color:#0d6efd;
  color: #fff;
}
.grid-btn.active:hover{
  background-color:#0850bc;
}

.grid-row2{
  max-height: 80vh;
  min-height: 80vh;
}

.grid-row4{
  max-height: 40vh;
  min-height: 40vh;
}

.grid-row6{
  max-height: 26.6vh;
  min-height: 26.6vh;
}

.grid-space{
  background-color: white;
  max-height: 80vh;
  min-height: 80vh;
  display: flex;
  flex-wrap: wrap; /* Adicionado para permitir que os itens da linha se movam para a próxima linha se não houver espaço suficiente */
}

.tank-area{
  border: 3px dotted rgba(0, 0, 0, 0.300);
  height: 100%;
  flex: 1 0 auto; /* Adicionado para permitir que .tank-area cresça para preencher o espaço disponível, mas não encolha abaixo do seu tamanho de conteúdo */
}

.tank-area-text{
  color:rgba(0, 0, 0, 0.300);
  font-size: 30px;
}

.tank-title{
  font-family: 'Inter', sans-serif;
  color: #000;
  font-size: 25px;
  margin: 0
}