* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(223, 238, 252);
  box-sizing: border-box;

}

.navbar {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}

.navbar a {
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: black;
  font-size: 2.5vw;
  font-weight: bold;
}

#contenedor {
  display: flex;
  margin: 100px;

}

#main {
  width: 100%;
}

.panelUsuarios {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 9%;
  text-align: center;
  margin-bottom: 15px;
  color: #fff;

}

.formatoUsuarios {
  border-radius: 8px;
  padding: 15px 10% 15px 60%;
}

.formatoUsuarios h2 {
  font-size: 2vw;
}

.formatoUsuarios {
  font-size: .8vw;
}

.totalUsuarios {
  background-color: #ED8A11;

}

.totalActivos {
  background-color: #246355;
}

.totalInactivos {
  background-color: #ED4054;
}

#panelEstadistica {
  display: flex;
  width: 100%;
}

div.panel {
  width: 50%;
  padding: 10px 15px;
  margin: 10px 10px 10px 0px;
  border-radius: 8px;
  box-sizing: border-box;

}

div.panelIzq {
  width: 50%;
  height: auto;
  gap: 10px;
  padding: 10px 15px;
  margin: 10px 10px 10px 0px;
  border-radius: 8px;
  box-sizing: border-box;
}

div.panelDer {
  width: 50%;
  height: auto;
  gap: 10px;
  padding: 10px 15px;
  margin: 10px 00px 10px 10px;
  border-radius: 8px;
  box-sizing: border-box;
}

table {
  border-spacing: 1;
  border-collapse: collapse;
  background-color: white;
  text-align: left;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 20px;
}

th,
td {
  padding: 15px;
}

table .subTituloTabla {
  background-color: black;
  color: white
}

.subTituloTabla th {
  padding: 4px 15px;

}


thead {

  background-color: #34B1ED;
  border-bottom: solid 2px #0f2836;
  border-radius: 8px !important;
  color: white;
}

thead th {
  font-size: 2vw
}

tr:nth-child(even) {
  background-color: #ddd;
}

tr:hover td {
  background-color: #46a6c6;
  color: white;
}

.btnEdit {
  width: auto;
  height: auto;
  background-color: rgb(243, 243, 243, 0);
  border: none;
  cursor: pointer;
}

.btnTabla {
  text-align: center;
}

/*-----------------------MODAL---------------------------------------*/
.modal-contenido {
  background-color: rgb(223, 238, 252);
  width: 500px;
  padding: 10px 20px;
  margin: 5% auto;
  position: relative;
  border-radius: 8px;
}

#miModalVerComentarios .modal-contenido {
  background-color: rgb(223, 238, 252);
  width: 500px;
  height: 80%;
  padding: 10px 20px;
  margin: 5% auto;
  position: relative;
  border-radius: 8px;
  overflow-y: scroll;
}

.modal {
  background-color: rgba(0, 0, 0, .8);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 1s;
}

#miModalAgregar:target {
  opacity: 1;
  pointer-events: auto;
  transition: all 1s;
}

#miModal:target {
  opacity: 1;
  pointer-events: auto;
  transition: all 1s;
}

#miModalBuscar:target {
  opacity: 1;
  pointer-events: auto;
  transition: all 1s;
}

#miModalPost:target {
  opacity: 1;
  pointer-events: auto;
  transition: all 1s;
}

#miModalVerComentarios:target {
  opacity: 1;
  pointer-events: auto;
  transition: all 1s;
}

#miModalAgregarComentario:target {
  opacity: 1;
  pointer-events: auto;
  transition: all 1s;
}

#miModal,
#miModalAgregar,
#miModalBuscar,
#miModalPost,
#miModalPost,
#miModalVerComentarios,
#miModalAgregarComentario {
  opacity: 0;
  transition: all 0s;
}

.modal-contenido a {
  text-decoration: none;
  color: black;
}

#miModal,
#miModalAgregar {
  font-size: 1.5rem !important;
}

.modal-contenido h3 {
  width: 100%;
  display: inline-block;
  text-align: right;
}

.modal-contenido a {
  float: right;
}

.modal-contenido h3 {
  font-size: 1.2vw !important;
}

.modal-contenido a span {
  font-size: 40px;
}

#survey-form {
  width: 80%;
  margin: auto;
  padding: 30px 2em 40px 2em;
}

label {
  display: block;
  font-size: 1vw;
  font-weight: 500;
}

#email,
#number,
#name,
#email_edit,
#number_edit,
#name_edit,
#name_buscar,
#id_buscar,
#title,
#body,
#name_comm,
#email_comm,
#body_comm {
  width: 100%;
  margin: .2em 0 0 0;
  background: transparent;
  border-radius: 8px;
  font-size: 1.5vw;
  padding: 2px 10px;
  border: 2px solid black;
  box-sizing: border-box;
}

.form-secciones {
  display: block;
  width: 100%;
  text-align: left;
  margin: .1em 0 1.2em 0em;
}

textarea {
  font-size: 2vw;
  width: 100%;
  height: 150px;
  margin: .5em 0 0 0;
  background: transparent;
  border-radius: 8px;
  padding: 2vw 1vw;
  box-sizing: border-box;
  overflow: hidden;
  resize: none;
}

.dropdown {
  width: 100%;
  font-size: 1.5vw;
  margin: .2em 0 0 0;
  background: transparent;
  border-radius: 8px;
  padding: 2px 10px;
  box-sizing: border-box;
  border: 2px solid black;
}

.btnModal {
  display: block;
  margin: auto !important;
  width: 70%;
  height: 45px;
  background-color: black;
  color: #fff;
  font-size: 1.5vw;
  border-radius: 8px;
  text-align: center
}

.btnModalPost {
  display: block;
  margin: auto !important;
  width: 100%;
  padding: 5px;
  background-color: black;
  color: #fff;
  font-size: 1.5vw;
  border-radius: 8px;
  text-align: center
}

.btnEdit {
  display: block;
  margin: auto !important;
  width: 35px;
  height: 35px;
  background-color: #ED8A11;
  color: #fff;
  font-size: 1.5vw;
  border-radius: 8px;
  text-align: center
}

.btnEdit:hover {
  border: none;
  box-shadow: 0 0 8px #ED8A11;
}

.btnAgregar,
.btnBuscar {
  display: block;
  width: 100%;
  height: 70px;
  background-color: #246355;
  color: #fff;
  font-size: 1.5vw;
  border: 1px solid black;
  border-radius: 8px;
  text-align: center
}

.btnBuscar:hover,
.btnAgregar:hover {
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0);
  cursor: pointer;
}

#nuevoUsuario {
  width: 15%;
  padding: 0px 30px 0px 0px;
}

.buscarUsuario {
  width: 14%;
  text-align: center;
  padding: 0px 20px;
}

.buscarUsuario h3 {
  margin-bottom: 8px;
}


/*
  .btnEditar{
    display: block;
    width: 14%;
    height: 70px;
    background-color: #ED8A11;
    color: #fff;
    font-size: 1.5vw;
    border-radius: 8px;
    
    text-align: center
  }
    */
.btnDel {
  display: block;
  margin: auto !important;
  width: 35px;
  height: 35px;
  background-color: #ED4054;
  color: #fff;
  font-size: 1.5vw;
  border-radius: 8px;
  text-align: center;
  border: none;
}

.btnAgregar:hover {
  cursor: pointer;
}

.btnDel:hover {
  border: none;
  box-shadow: 0 0 8px #ED4054;
  cursor: pointer;
}

.btnModal:hover {
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0);
  cursor: pointer;
}

.btnModalPost:hover {
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0);
  cursor: pointer;
}

#botonesUsuario {
  display: flex;
}

/*---------------POST-----------*/
#perfil-img-usuario {
  width: 20%;
  border-radius: 8px;
  margin: 15px auto;
  border: 1px solid black;
}

#contenedorUsuario {
  width: 100%;
  margin: auto;
  text-align: center;
}

#cont-add-search {
  display: flex;
  justify-content: space-between;
}