.crud-climatiko{
  width:100%;
}


.crud-toolbar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;
}


.crud-toolbar-right{
  display:flex;

  gap:7px;
}


.crud-btn-primary,
.crud-btn-secondary{
  min-height:38px;

  padding:0 14px;

  border-radius:6px;

  font-family:inherit;

  font-size:10px;

  font-weight:700;

  cursor:pointer;
}


.crud-btn-primary{
  border:1px solid #102235;

  background:#102235;

  color:#fff;
}


.crud-btn-primary:hover{
  background:#19344f;
}


.crud-btn-secondary{
  border:1px solid #d2dae4;

  background:#fff;

  color:#344054;
}


.crud-pesquisa{
  width:260px;

  height:38px;

  padding:0 11px;

  border:1px solid #d2dae4;

  border-radius:6px;

  background:#fff;

  outline:none;
}


.crud-pesquisa:focus{
  border-color:#91a9c1;
}


.crud-table-card{
  overflow:hidden;

  border:1px solid #dfe5ec;

  border-radius:8px;

  background:#fff;
}


.crud-table-scroll{
  overflow:auto;
}


.crud-table{
  width:100%;

  border-collapse:collapse;

  font-size:9px;
}


.crud-table thead{
  background:#f8fafc;
}


.crud-table th{
  padding:11px 12px;

  border-bottom:1px solid #dfe5ec;

  color:#344054;

  text-align:left;

  white-space:nowrap;
}


.crud-table td{
  padding:11px 12px;

  border-bottom:1px solid #edf0f3;

  color:#475467;
}


.crud-table tr:last-child td{
  border-bottom:0;
}


.crud-table tbody tr:hover{
  background:#fafbfd;
}


.crud-acoes-th{
  width:85px;
}


.crud-acoes{
  display:flex;

  gap:5px;
}


.crud-acoes button{
  width:29px;

  height:29px;

  border:1px solid #dce3ea;

  border-radius:5px;

  background:#fff;

  cursor:pointer;
}


.crud-acoes button:hover{
  background:#f4f7fa;
}


.crud-acoes .crud-danger{
  color:#c0392b;
}


.crud-vazio{
  height:160px;

  color:#98a2b3 !important;

  text-align:center !important;
}


/* ============================================================
   MODAL
============================================================ */

.crud-modal-overlay{
  position:fixed;

  inset:0;

  z-index:9999;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    rgba(15,23,42,.42);
}


.crud-modal{
  width:min(900px,96vw);

  max-height:90vh;

  overflow:auto;

  border-radius:10px;

  background:#fff;

  box-shadow:
    0 25px 60px
    rgba(15,23,42,.22);
}


.crud-modal-head{
  position:sticky;

  top:0;

  z-index:2;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  padding:20px 22px 15px;

  border-bottom:1px solid #e7ebf0;

  background:#fff;
}


.crud-modal-head h3{
  margin:0 0 4px;

  color:#172033;

  font-size:17px;
}


.crud-modal-head p{
  margin:0;

  color:#667085;

  font-size:9px;
}


.crud-modal-x{
  width:33px;

  height:33px;

  border:0;

  background:transparent;

  color:#667085;

  font-size:23px;

  cursor:pointer;
}


.crud-form{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px 18px;

  padding:20px 22px;
}


.crud-field label{
  display:block;

  margin-bottom:6px;

  color:#344054;

  font-size:9px;

  font-weight:600;
}


.crud-field input,
.crud-field select,
.crud-field textarea{
  width:100%;

  border:1px solid #cfd8e3;

  border-radius:5px;

  background:#fff;

  color:#344054;

  font-family:inherit;

  font-size:10px;

  outline:none;
}


.crud-field input,
.crud-field select{
  height:39px;

  padding:0 10px;
}


.crud-field textarea{
  padding:10px;

  resize:vertical;
}


.crud-field input:focus,
.crud-field select:focus,
.crud-field textarea:focus{
  border-color:#8ea9c2;

  box-shadow:
    0 0 0 2px
    rgba(42,105,154,.07);
}


.crud-span2{
  grid-column:span 2;
}


.crud-modal-footer{
  position:sticky;

  bottom:0;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:14px 22px;

  border-top:1px solid #e7ebf0;

  background:#fff;
}


.crud-modal-footer > div{
  display:flex;

  gap:7px;
}


#crudMensagem{
  color:#b42318;

  font-size:9px;
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:700px){

  .crud-toolbar{
    align-items:stretch;

    flex-direction:column;
  }


  .crud-toolbar-right{
    width:100%;
  }


  .crud-pesquisa{
    flex:1;

    width:auto;
  }


  .crud-form{
    grid-template-columns:1fr;
  }


  .crud-span2{
    grid-column:auto;
  }

}