body{
    background:#f5f7fa;
}

.imagen-login{
    background-image:url('../img/fondo-login.jpg');
    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
}

.texto-imagen{
    text-align:center;
    color:white;
}

.texto-imagen h1{
    font-size:50px;
    font-weight:bold;
}

.login{
    display:flex;
    justify-content:center;
    align-items:center;
}

.card{
    width:80%;
    border-radius:20px;
}

.card img{
    margin:auto;
}

.btn{
    border-radius:10px;
}

/* Responsive */

@media(max-width:768px){

    .imagen-login{
        display:none;
    }

    .login{
        width:100%;
    }

    .card{
        width:95%;
    }

}
.sidebar{
    min-height:100vh;
}

.menu-item{
    display:block;
    color:white;
    text-decoration:none;
    padding:15px;
    transition:0.3s;
}

.menu-item:hover{
    background:#0d6efd;
    color:white;
}

.salir{
    background:#dc3545;
}

.tarjeta1{
    background:#0d6efd;
    color:white;
}

.tarjeta2{
    background:#198754;
    color:white;
}

.tarjeta3{
    background:#ffc107;
    color:white;
}
.tarjeta4{
    background:#dc3545;
    color:white;
}
.tarjeta5{
    background:#6f42c1;
    color:white;
}
.tarjeta6{
    background:#0dcaf0;
    color:white;
}

.card{
    border:none;
    border-radius:20px;
}
.tarjeta-dashboard{
    height: 200px;
     width: 315px;
    border-radius: 20px;
    transition: .3s;
}
h1{
    font-weight:bold;
}
.fondo-verde{
    background: linear-gradient(45deg,#198754,#20c997);
    color:white;
    border-radius:20px;
}

.table{
    vertical-align: middle;
}

.table th{
    text-align:center;
}

.table td{
    text-align:center;
}

h1{
    font-weight:bold;
}
.card{
    border:none;
}

.card img{
    max-width:100%;
}

.navbar{
    box-shadow:0px 2px 10px rgba(0,0,0,.2);
}

.table td,
.table th{
    text-align:center;
    vertical-align:middle;
}

.fw-bold{
    font-weight:bold;
}
.oscuro{

background:#1e1e1e;

color:white;

}

.oscuro .card{

background:#2d2d2d;

color:white;

}

.oscuro .table{

color:white;

}
@media (max-width: 768px) {
.tarjeta-dashboard{
   
     width: 99%;

}
}

@media (max-width: 576px) {
  .tarjeta-dashboard{
   
     width: 99%;

}
}