/* Estilos generales */

* {
  padding: 0;
  margin: 0;
}

:root {
  --primario: #00A351;
  --secundario: #E84C49;
  --primario-claro: #c5ffe2;
  --secundario-claro: #ffc5c4;
  --acento: #50EA96;
  --texto: #505050;
  --fondo: #001E2B;
  --fondo2: #023749;
  --texto-claro: #ffffff;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

i{
  width: 1.2rem;
}

.titulo{
  padding-top: 2rem;
  padding-left: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

.titulo h1{
  color: var(--acento);
}

.img-logo {
  width: 120px;
  margin-bottom: 2rem;
}

.admin{
  background-color: var(--fondo);
}

.clearfix{
  clear: both;
}

.logo{
  margin: 0 0 1rem 2rem;
}

.nav, .nav2{
  font-size: 1rem;
  cursor: pointer;
  color: var(--texto-claro);
}

.nav2{
  display: none;
}

.side-nav{
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--fondo2);
  overflow: hidden;
  transition: 0.5s;
  padding-top: 1rem;
}

.side-nav ul li {
  height: 50px;
}

.side-nav ul li a{
  padding: 15px 8px 15px 2rem;
  font-size: 1rem;
  color: var(--texto-claro);
  display: block;
  transition: 0.3s;
}

.side-nav .active{
  background-color: var(--fondo);
}

.side-nav ul li a:hover{
  color: var(--texto-claro);
  background-color: var(--fondo);
}

#main{
  transition: margin-left .5s;
  padding: 1rem;
  margin-left: 200px;
}

.menu-top{
  padding: 1.2rem;
}

.col-6{
  width: 50%;
  float: left;
}

.close{
  display: inline-block;
  float: right;
}

.close button{
  color: var(--texto-claro);
  background-color: var(--fondo);
  border: none;
  cursor: pointer;
}

.close button:hover{
  color: var(--acento);
}

.close button:hover i{
  color: var(--texto-claro) !important;
}

/* Contenido*/

.container{
  background-color: var(--fondo2);
  width: 100%;
  padding-bottom: 3rem;
  min-height: 260px;
  height: 100%;
  margin-top: 2rem;
  border-radius: 5px;
  overflow: auto;
}

.box{
  padding-top: 2rem;
  width: calc(100% - 2rem);
  margin: 0 auto;
}

@media (max-width: 768px){

  #main .menu-top {
    padding: 1.2rem 0rem;
}

  .titulo {
    padding-top: 1rem;
    padding-left: 0rem;
}

}

@media (max-width: 440px) {

  .titulo h1{
    font-size: 1.2rem;
  }
}