listado de pruebas / grid

css/all.css

     border-radius: 0;
     margin-bottom: 40px;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+    height: 57px;
 }
 .navbar-btn {
     box-shadow: none;
     width: 100%;
 }
 #sidebar {
-    width: 180px;
+    width: 210px;
     position: fixed;
     top: 0;
     left: 0;
     CONTENT STYLE
 ----------------------------------------------------- */
 #content {
-    width: calc(100% - 180px);
+    width: calc(100% - 210px);
     padding: 0;
     min-height: 100vh;
     transition: all 0.3s;
     width: 20%;
 }
 .main .panel {
-    background: #25344f;
-    color: #fff;
-    padding: 45px 20px;
+    background: #ffffff;
+    color: #25344f;
     margin-bottom: 30px;
     border-radius: 2px;
     width: 100%;
     float: left;
+    border: 1px solid #dcdcdc;
 }
 .footerinfo p {
-    font-size: 12px;
-    color: #fff;
+    font-size: 14px;
+    color: #25344f;
     margin-left: 14px;
 }
 .main .panel h1 {
-    font-size: 14px;
-    color: #b9c3ce;
+    font-size: 22px!important;
+    color: #959595!important;
+    text-transform: uppercase;
+    font-family: 'gudea';
+    letter-spacing: 7px;
+    padding: 0!important;
+    margin: 0!important;
+    position: relative;
+    top: 10px;
 }
 .breadcrumb-header {
     font-size: 20px;
     width: 100%;
 }
 section.lockscreen {
-    background: #192231;
+    background: #f1f1f1;
     width: 100%;
     height: 100%;
 }
 .lockscreen h1 {
     font-size: 21px;
-    color: #e1ebf5e6;
+    color: #25344f;
     text-align: center;
     margin: 20px 0 6px;
 }
 .lockscreen p {
     font-size: 14px;
-    color: #e1ebf5e6;
+    color: #25344f;
     text-align: center;
     margin: 0;
 }
     float: right;
 }
 .btn_add_password {
-    border: 1px solid #2ec5d3;
-    background: #2ec5d3;
+    border: 1px solid #fd4b4b;
+    background: #fd4b4b;
     border-radius: 0 4px 4px 0;
     color: #fff;
-    font-size: 12px;
+    font-size: 13px;
 }
 .btn_add_password a {
     display: block;
     cursor: pointer;
 }
 .btn_add_password:hover {
-    border: 1px solid #2ec5d3;
-    background: transparent;
+    border: 1px solid #d91212;
+    background: #d91212;
     color: #fff;
     transition: all 0.3s;
 }
 .password-again input {
-    border: 1px solid #324462;
+    border: 1px solid #fd4b4b;
     background: transparent;
     padding: 9px 11px;
     font-size: 14px;
     vertical-align: middle;
 }
 section.error_page {
-    background: #192231;
+    background: #f1f1f1;
     width: 100%;
     height: 100%;
 }
 .error_page h1 {
     font-size: 150px;
     font-weight: 400;
-    color: #2ec5d3;
+    color: #fd4b4b;
     text-align: center;
     margin: 20px 0 6px;
 }
 .error_page p {
     font-size: 14px;
-    color: #e1ebf5e6;
+    color: #25344f;
     text-align: center;
     margin: 0;
 }
 .error_page h3 {
     font-size: 30px;
-    color: #e1ebf5e6;
+    color: #25344f;
     text-align: center;
     margin: 0;
 }
 .form_restore h1 {
     font-size: 16px;
     font-weight: 400;
-    color: #e1ebf5e6;
+    color: #25344f;
     text-align: center;
     margin: 20px 0 6px;
 }
 button.restore_btn {
     margin-top: 20px;
     width: 100%;
-    background: #2ec5d3;
-    border: 1px solid transparent;
+    border: 1px solid #fd4b4b;
+    background: #fd4b4b;
     padding: 5px;
     border-radius: 2px;
     cursor: pointer;
     transition: all 0.3s;
 }
 button.restore_btn:hover {
-    border: 1px solid #2ec5d3;
-    background: transparent;
-    color: #2ec5d3;
+    border: 1px solid #d91212;
+    background: #d91212;
+    color: #fff;
     transition: all 0.3s;
 }
 .form_restore input {
     width: 100%;
     position: relative;
     margin-top: 10px;
-    color: #e1ebf5e6;
+    color: #25344f;
     margin-bottom: 0;
     background: transparent;
     padding: 5px 15px;
     border-top: 0;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid #e1ebf5e6;
+    border-bottom: 1px solid #ec1c245c;
 }
 .data_product select {
     width: 100%;
     transition: all 0.3s;
     color: #ffffff;
 }
+li.cabecera_li {
+    color: #cbcbcb;
+    padding: 12px 30px 10px;
+    font-size: 12px;
+    font-weight: bold;
+}
+.content-section .main .panel .col-md-6 i {
+    font-size: 35px;
+    color: #fd4b4b;
+    width: 50%;
+    float: left;
+    text-align: center;
+    position: relative;
+    top: 8px;
+}
+.panel .content_info p {
+    font-size: 34px;
+    color: #25344f;
+    margin: 0;
+    text-align: right;
+    width: 50%;
+    float: left;
+    position: relative;
+    top: 0px;
+}
+.content-section .main h1 {
+    font-size: 27px;
+    padding: 0 15px 30px;
+    color: #949494;
+}
+.main .panel a {
+    width: 100%;
+    height: 100%;
+    display: block;
+    transition: all 0.3s;
+}
+.main .panel a:hover {
+    transition: all 0.3s;
+    -webkit-box-shadow: 0px 0px 28px -5px rgba(10,10,10,0.24);
+    -moz-box-shadow: 0px 0px 28px -5px rgba(10,10,10,0.24);
+    box-shadow: 0px 0px 28px -5px rgba(10,10,10,0.24);
+}
+.body_tabs {
+    padding: 45px 20px;
+}
+.header_historial {
+    background: #d7d7d7;
+    padding: 10px;
+    border: 1px solid #dcdcdc;
+}
+.header_historial i{
+    color: #fff;
+    float: left;
+    margin-right: 20px;
+}
+.header_historial p{
+    margin: 0!important;
+    padding: 0;
+    line-height: 1;
+    color: #fff;
+    letter-spacing: 5px;
+}
+.content_historial {
+    background: #fff;
+    border: 1px solid #dcdcdc;
+    padding: 20px;
+}
+.content_historial p {
+    padding: 0;
+    margin: 0 0 20px 0;
+    line-height: 1;
+    font-size: 14px;
+    color: #25344f;
+}
+.cabeceras {
+    background: #f1f1f1;
+    padding: 10px;
+}
+.col20 {
+    width: 20%;
+    float: left;
+    -ms-flex: 0 0 20%;
+    flex: 0 0 20%;
+    max-width: 20%;
+}
+.col25{
+    width: 25%;
+    float: left;
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+}
+.cabeceras .col20 p{
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    font-size: 14px;
+    color: #25344f;
+}
+.data_candidato p{
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    font-size: 14px;
+    color: #25344f;
+}
+.data_candidato {
+    padding: 10px;
+    border-bottom: 1px solid #f1f1f1;
+}
+.data_candidato a:hover {
+    color: #fd4b4b;
+    transition: all 0.3s;
+}
+.cabecera_recently {
+    background: #eceff1;
+    padding: 10px;
+    border: 1px solid #dcdcdc;
+}
+.cabecera_recently i {
+    color: #607d8b;
+    float: left;
+    margin-right: 20px;
+}
+.cabecera_recently p{
+    margin: 0!important;
+    padding: 0;
+    line-height: 1;
+    color: #607d8b;
+    letter-spacing: 5px;
+}
+.cabeceras_actividad{
+    background: #f1f1f1;
+    padding: 10px;
+}
+.cabeceras_actividad p{
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    font-size: 14px;
+    color: #25344f;
+}
+.body_history {
+    padding: 10px;
+    border-bottom: 1px solid #f1f1f1;
+}
+.footer_history {
+    text-align: right;
+}
+.footer_history a{
+    font-size: 14px;
+    color: #fd4b4b;
+    transition: all 0.3s;
+}
+.footer_history a:hover{
+    color: #981111;
+    transition: all 0.3s;
+}
+.filtros_history .col-md-4 {
+    padding-left: 0!important;
+}
+.filtros_history .col-md-4 input {
+    width: 100%;
+    border: 1px solid #eceff1;
+    font-size: 14px;
+    padding: 1px 10px;
+}
+.filtros_history .col-md-4 label {
+    font-size: 14px;
+    color: #25344f;
+}
+.filtros_history .col-md-4 select{
+    font-size: 14px;
+    color: #798082;
+    border: 1px solid #eceff1;
+    padding: 1px 10px;
+    width: 100%;
+}
+.filtros_history {
+    margin-bottom: 30px;
+}
+input#custom-input-date {
+  color: #212529;
+  font-size: 14px;
+  font-weight: 500;
+}
+.label-error {
+  height: 13px;
+  margin-top: 4px;
+  font-size: 10px;
+  color: #DC3545;
+}
+input#custom-input-date:focus {
+  border: 1px solid #007BFF;
+}
+input#custom-input-date,
+label {
+  display: block;
+  outline: none;
+}
+.buscar_filtros_history {
+    border: 1px solid #fd4b4b;
+    color: #fff;
+    background: #fd4b4b;
+    padding: 2px;
+    width: 100%;
+    font-size: 14px;
+    position: relative;
+    top: 27px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.buscar_filtros_history:hover {
+    border: 1px solid #fd4b4b;
+    color: #fd4b4b;
+    background: #fff;
+    transition: all 0.3s;
+}
+.footerinfo a {
+    font-size: 14px;
+    color: #ababab;
+    margin-right: 10px;
+    float: left;
+    transition: all 0.3s;
+}
+.footerinfo a:hover {
+    color: #fd4b4b;
+    transition: all 0.3s;
+}
+.active .dropdown-toggle::after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+    color: #ffffff;
+}
+.footerinfo {
+    padding: 0 15px;
+}
+.tabs_pruebas .test_tab.active {
+    background: #fd4b4b;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.tabs_pruebas .test_tab.active p{
+    margin: 0;
+    letter-spacing: 9px;
+    color: #fff;
+}
+.tabs_pruebas .test_tab.active:hover {
+    background: #f81919;
+    transition: all 0.3s;
+}
+.tabs_pruebas .test_tab {
+    background: #d0d0d0;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.tabs_pruebas .test_tab p{
+    margin: 0;
+    letter-spacing: 9px;
+    color: #fff;
+}
+.tabs_pruebas .test_tab:hover {
+    background: #f81919;
+    transition: all 0.3s;
+}
+.tabs_pruebas {
+    margin-bottom: 40px;
+}
+.comportamiento_body {
+    display: block;
+    margin-bottom: 80px;
+}
+.personalidad_body {
+    display: none;
+    margin-bottom: 80px;
+}
+.inteligencia_body {
+    display: none;
+    margin-bottom: 80px;
+}
+.modern-Checkbox [type="checkbox"] {
+  display: none;
+}
+.modern-Checkbox [type="checkbox"]:not(:checked) + label, .modern-Checkbox [type="checkbox"] :not(:checked) + label:hover {
+    background-color: white;
+    color: #363636;
+    border: 1px solid #d8d8d8;
+    width: 100%;
+    border-radius: 0;
+    font-size: 14px;
+    font-family: 'gudea';
+    padding: 35px;
+    letter-spacing: 6px;
+}
+.modern-Checkbox [type="checkbox"]:checked + label:before {
+    transform: rotate(45deg);
+    color: #fff;
+}
+.modern-Checkbox label {
+    color: #fff;
+    background-color: #fd4b4b78;
+    border-color: #fd4b4b;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: 35px;
+    font-size: 14px;
+    border-radius: 0;
+    transition: all 144ms ease-in-out;
+    width: 100%;
+    letter-spacing: 6px;
+}
+.modern-Checkbox label:hover {
+  transform: scale(0.985);
+}
+.modern-Checkbox label:before {
+    float: left;
+    margin-top: -0.75rem;
+    margin-bottom: -1rem;
+    margin-right: 0.4rem;
+    margin-left: -0.2rem;
+    font-weight: 100;
+    font-size: 2rem;
+    transition: transform 200ms ease-in-out;
+    content: "+";
+    position: relative;
+    top: -2px;
+    color: #fd4b4b;
+}

footer.php

 <div class="footerinfo">
-	<p>Developed by Grupo DIT</p>
+	<a href="#">LICENCIA DE USO</a>
+	<a href="#">DERECHOS</a>
+	<a href="#">PRIVACIDAD</a>
+	<p>&copy; <?php echo date("Y"); ?> Developed by Grupo DIT</p>
 </div>

index.php

+<head>
+    <title>PruebasPsico</title>
+</head>
 <?php include('sidebar.php') ?>       
-<div id="content">
+<section id="content">
     <?php include('header.php') ?>       
     <div class="content-section">
         <div class="main">
-            <div class="row">
-                <div class="col-md-4">
-                    <div class="panel">
-                        <h1>Reporte últimos 30 días</h1>
-                        <canvas id="myChart" width="400" height="400"></canvas>
+            <h1>Bienvenido de nuevo Grupo DIT</h1>
+            <div class="panel_options">
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="panel" >
+                            <a href="#">
+                                <div class="body_tabs">
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <h1>Contraseñas</h1>
+                                        </div>
+                                        <div class="col-md-6 content_info">
+                                            <i class="fas fa-shield-alt"></i>
+                                            <p>432</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
                     </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="panel">
-                        <h1>Reporte última semana</h1>
-                        <canvas id="myChart1" width="400" height="400"></canvas>
+                    <div class="col-md-4">
+                        <div class="panel" >
+                            <a href="#">
+                                <div class="body_tabs">
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <h1>Expedientes</h1>
+                                        </div>
+                                        <div class="col-md-6 content_info">
+                                            <i class="far fa-user"></i>
+                                            <p>11982</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
                     </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="panel">
-                        <h1>Reporte diario</h1>
-                        <canvas id="myChart2" width="400" height="400"></canvas>
+                    <div class="col-md-4">
+                        <div class="panel" >
+                            <a href="#">
+                                <div class="body_tabs">
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <h1>Puestos</h1>
+                                        </div>
+                                        <div class="col-md-6 content_info">
+                                            <i class="far fa-list-alt"></i>
+                                            <p>359</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-md-4">
-                    <div class="panel">
-                        <h1>Reporte últimos 30 días</h1>
-                        <canvas id="myChart3" width="400" height="400"></canvas>
+            <div class="historial_candidatos">
+                <div class="row">
+                    <div class="col-md-8">
+                        <div class="body_historial">
+                            <div class="header_historial">
+                                <i class="far fa-clock"></i>
+                                <p>HISTORIAL DE ACCESO DE CANDIDATOS</p>
+                            </div>
+                            <div class="content_historial">
+                                <p>Últimos candidatos que han ingresado al sistema:</p>
+                                <div class="cabeceras">
+                                    <div class="row">
+                                        <div class="col20">
+                                            <p>Contraseña</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Puesto</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>No. Identificación</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Fecha de aplicación</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Pruebas Pendientes</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data_candidato">
+                                    <div class="row">
+                                        <div class="col20">
+                                            <p>repartidorPARMA</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Piloto Repartidor</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p><a href="#">1583266600501</a></p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>27/12/2018</p>
+                                            <p>12:02 PM</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>No</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data_candidato">
+                                    <div class="row">
+                                        <div class="col20">
+                                            <p>repartidorPARMA</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Piloto Repartidor</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p><a href="#">1583266600501</a></p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>27/12/2018</p>
+                                            <p>12:02 PM</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>No</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data_candidato">
+                                    <div class="row">
+                                        <div class="col20">
+                                            <p>repartidorPARMA</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Piloto Repartidor</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p><a href="#">1583266600501</a></p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>27/12/2018</p>
+                                            <p>12:02 PM</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>No</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data_candidato">
+                                    <div class="row">
+                                        <div class="col20">
+                                            <p>repartidorPARMA</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Piloto Repartidor</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p><a href="#">1583266600501</a></p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>27/12/2018</p>
+                                            <p>12:02 PM</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>No</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data_candidato">
+                                    <div class="row">
+                                        <div class="col20">
+                                            <p>repartidorPARMA</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>Piloto Repartidor</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p><a href="#">1583266600501</a></p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>27/12/2018</p>
+                                            <p>12:02 PM</p>
+                                        </div>
+                                        <div class="col20">
+                                            <p>No</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="panel">
-                        <h1>Reporte última semana</h1>
-                        <canvas id="myChart4" width="400" height="400"></canvas>
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="panel">
-                        <h1>Reporte diario</h1>
-                        <canvas id="myChart5" width="400" height="400"></canvas>
+                    <div class="col-md-4">
+                        <div class="actividades_recientes">
+                            <div class="cabecera_recently">
+                                <i class="fas fa-plane-departure"></i>
+                                <p>HISTORIAL DE ACTIVIDADES</p>
+                            </div>
+                            <div class="content_historial">
+                                <p>Últimas actividades registradas</p>
+                                <div class="data_actividad">
+                                    <div class="filtros_history">
+                                        <div class="row">
+                                            <div class="col-md-4">
+                                                <label>Contraseña</label>
+                                                <input type="text" name="contraseña" placeholder="Contraseña">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <label>Módulo</label>
+                                                <select>
+                                                    <option>Puestos</option>
+                                                    <option>Contraseñas</option>
+                                                    <option>Expedientes</option>
+                                                    <option>Resultados</option>
+                                                    <option>Pruebas</option>
+                                                    <option>Ajustes</option>
+                                                    <option>Membresías</option>
+                                                    <option>Sesiones</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <label>Acción</label>
+                                                <select>
+                                                    <option>Crear</option>
+                                                    <option>Editar</option>
+                                                    <option>Eliminar</option>
+                                                    <option>Desbloquear</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <label>Fecha Inicio</label>
+                                                <input id="custom-input-date" class="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <label>Fecha Inicio</label>
+                                                <input id="custom-input-date-2" class="calendar" type="text" name="upload-release" placeholder="<?php echo date('d/m/y')?>">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <button class="buscar_filtros_history">Buscar</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="cabeceras_actividad">
+                                        <div class="row">
+                                            <div class="col25">
+                                                <p>Contraseña</p>
+                                            </div>
+                                            <div class="col25">
+                                                <p>Descripción</p>
+                                            </div>
+                                            <div class="col25">
+                                                <p>Módulo</p>
+                                            </div>
+                                            <div class="col25">
+                                                <p>Fecha</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="body_history">
+                                       <div class="row">
+                                           <div class="col25">
+                                               <p>rcardona2510</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>Creó la contraseña: pilotosanti</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>Contraseñas</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>21/12/18 8:25:52</p>
+                                           </div>
+                                       </div> 
+                                    </div>
+                                    <div class="body_history">
+                                       <div class="row">
+                                           <div class="col25">
+                                               <p>rcardona2510</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>Creó la contraseña: pilotosanti</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>Contraseñas</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>21/12/18 8:25:52</p>
+                                           </div>
+                                       </div> 
+                                    </div>
+                                    <div class="body_history">
+                                       <div class="row">
+                                           <div class="col25">
+                                               <p>rcardona2510</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>Creó la contraseña: pilotosanti</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>Contraseñas</p>
+                                           </div>
+                                           <div class="col25">
+                                               <p>21/12/18 8:25:52</p>
+                                           </div>
+                                       </div> 
+                                    </div>
+                                    <div class="footer_history">
+                                        <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
         <?php include('footer.php') ?>
     </div>
-</div>
+</section>
+<!-- Modal ver más información-->
+<div class="modal fade" id="ayudaHistorial" role="dialog">
+    <div class="modal-dialog">
 
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">Asistencia</h4>
+        </div>
+        <div class="modal-body">
+            <div class="data_notification">
+                <p>La lista muestra un historial de las actividades que se han realizado en cada módulo del sistema a nivel Administradores y Asistentes, realice búsquedas avanzadas o simplemente actualice la lista para obtener los últimos registros.</p>
+        </div>
+      </div>
+    </div>
+</div>
 <script>
-var ctx = document.getElementById("myChart").getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-            borderColor: [
-                'rgba(255,99,132,1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero:true
-                }
-            }]
-        }
-    }
-});
-</script>
-<script>
-var ctx = document.getElementById("myChart1").getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-            borderColor: [
-                'rgba(255,99,132,1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero:true
-                }
-            }]
-        }
-    }
-});
-</script>
-<script>
-var ctx = document.getElementById("myChart2").getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-            borderColor: [
-                'rgba(255,99,132,1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero:true
-                }
-            }]
-        }
+    $("#custom-input-date").datepicker({ dateFormat:'dd/mm/yy'});
+
+    // ACTIONS
+    $("input").on("change", function(e) {
+      $(this).siblings(".label-error").text("");
+      $(this).removeClass("error");
+    })
+
+    $("#custom-input-date").on("focusout", function(e) {
+      if($(this).val() != '') {
+        dateValidation($(this));
+      }
+    })
+
+    // CHECK
+    function dateValidation(input) {
+      var errorLabel = input.siblings(".label-error");
+      var date = input.val();
+
+      input.removeClass("error");
+      errorLabel.text("");
+
+      var matches = /^(\d{1,2})[/\/](\d{1,2})[/\/](\d{4})$/.exec(date);
+      if (matches == null) {
+        input.addClass("error");
+        errorLabel.text("Date not valid.");
+      };
+
+      var d = matches[1];
+      var m = matches[2] - 1;
+      var y = matches[3];
+      var composedDate = new Date(y, m, d);
+
+      if(composedDate.getDate() == d && composedDate.getMonth() == m && composedDate.getFullYear() == y) {} else {
+        input.addClass("error");
+        errorLabel.text("Date not valid.");
+      }
     }
-});
 </script>
 <script>
-var ctx = document.getElementById("myChart3").getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-            borderColor: [
-                'rgba(255,99,132,1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero:true
-                }
-            }]
-        }
-    }
-});
-</script>
+    $("#custom-input-date-2").datepicker({ dateFormat:'dd/mm/yy'});
 
-<script>
-var ctx = document.getElementById("myChart4").getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-            borderColor: [
-                'rgba(255,99,132,1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero:true
-                }
-            }]
-        }
-    }
-});
-</script>
+    // ACTIONS
+    $("input").on("change", function(e) {
+      $(this).siblings(".label-error").text("");
+      $(this).removeClass("error");
+    })
 
-<script>
-var ctx = document.getElementById("myChart5").getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-            borderColor: [
-                'rgba(255,99,132,1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero:true
-                }
-            }]
-        }
+    $("#custom-input-date").on("focusout", function(e) {
+      if($(this).val() != '') {
+        dateValidation($(this));
+      }
+    })
+
+    // CHECK
+    function dateValidation(input) {
+      var errorLabel = input.siblings(".label-error");
+      var date = input.val();
+
+      input.removeClass("error");
+      errorLabel.text("");
+
+      var matches = /^(\d{1,2})[/\/](\d{1,2})[/\/](\d{4})$/.exec(date);
+      if (matches == null) {
+        input.addClass("error");
+        errorLabel.text("Date not valid.");
+      };
+
+      var d = matches[1];
+      var m = matches[2] - 1;
+      var y = matches[3];
+      var composedDate = new Date(y, m, d);
+
+      if(composedDate.getDate() == d && composedDate.getMonth() == m && composedDate.getFullYear() == y) {} else {
+        input.addClass("error");
+        errorLabel.text("Date not valid.");
+      }
     }
-});
 </script>

login.php

-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Inicio de sesión - Dashboard</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/all.css">
-    <link rel="stylesheet" href="css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
-    <script src="js/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
-    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
-    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
-
-</head>    
-<section class="inicio_sesion">
-    <div class="page_login">
-        <div class="form_login">
-            <div class="logo">
-                <img src="images/logo.png">
-            </div>
-            <div class="text_login">
-                <p>Por favor ingresa en tu cuenta</p>
-            </div>
-            <div class="formulario_ingreso">
-                <form>
-                    <input type="email" name="correo" placeholder="Correo electrónico" value="" required autocomplete="off">
-                    <input type="password" name="password" placeholder="Password" required autocomplete="new-password">
-                    <button class="login_btn" type="submit">Login</button>
-                </form>
-            </div>
-            <div class="forgot_password">
-                <a href="forgot-password.php">Olvidé mi contraseña</a>
-            </div>
-            <?php include('footer.php') ?>
-        </div>
-    </div>    
-</section>

mensajes.php

-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Mensajes - Dashboard</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/all.css">
-    <link rel="stylesheet" href="css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
-    <script src="js/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
-    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
-    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
-
-</head>
-<script type="text/javascript">
-    $(document).ready(function () {
-        $(".list-unstyled").find('li').removeClass("active");
-        $("#mensajes").addClass("active");
-    });
-</script>
-<?php include('sidebar.php') ?>       
-<div id="content">
-    <?php include('header.php') ?>       
-    <div class="content-section">
-        <div class="main">
-            <h1 class="breadcrumb-header">Bandeja de entrada</h1>
-            <div class="row">
-              <div class="col-md-4">
-                <div class="panel panel_mensajes">
-                  <a href="#" class="active">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#" class="active">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#" class="active">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#" class="active">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#" class="active">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="#" class="active">
-                    <div class="contact_body">
-                      <div class="row">
-                          <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <h1>Fernando Vásquez</h1>
-                              <p>He publicado una nueva plaza, puedes checarla acá.</p>
-                          </div>
-                          <div class="col-md-3 panel_time_notification">
-                            <p>Hace 20 segundos.</p>
-                          </div>
-                      </div>
-                    </div>
-                  </a>
-                </div>
-              </div>
-              <div class="col-md-8">
-                <div class="panel panel_conversation">
-                  <div class="conversation_body">
-                    <div class="row">
-                      <div class="chatleft">
-                        <div class="burbuja left">
-                          <div class="row">
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                            <div class="col-md-9">
-                              <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 2 minutos.</p>
-                            </div>
-
-                          </div>
-                        </div>
-                      </div>
-                      <div class="chatright">
-                        <div class="burbuja right">
-                          <div class="row">
-                            <div class="col-md-9">
-                              <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 1 minutos.</p>
-                            </div>
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="row">
-                      <div class="chatleft">
-                        <div class="burbuja left">
-                          <div class="row">
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                            <div class="col-md-9">
-                              <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 2 minutos.</p>
-                            </div>
-
-                          </div>
-                        </div>
-                      </div>
-                      <div class="chatright">
-                        <div class="burbuja right">
-                          <div class="row">
-                            <div class="col-md-9">
-                              <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 1 minutos.</p>
-                            </div>
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="row">
-                      <div class="chatleft">
-                        <div class="burbuja left">
-                          <div class="row">
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                            <div class="col-md-9">
-                              <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 2 minutos.</p>
-                            </div>
-
-                          </div>
-                        </div>
-                      </div>
-                      <div class="chatright">
-                        <div class="burbuja right">
-                          <div class="row">
-                            <div class="col-md-9">
-                              <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 1 minutos.</p>
-                            </div>
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="row">
-                      <div class="chatleft">
-                        <div class="burbuja left">
-                          <div class="row">
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                            <div class="col-md-9">
-                              <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 2 minutos.</p>
-                            </div>
-
-                          </div>
-                        </div>
-                      </div>
-                      <div class="chatright">
-                        <div class="burbuja right">
-                          <div class="row">
-                            <div class="col-md-9">
-                              <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
-                              <p>Hace 1 minutos.</p>
-                            </div>
-                            <div class="col-md-3">
-                              <div class="rounded-pic">
-                                  <img src="images/man_2.png" alt="">
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="box_message">
-                    <div class="row">
-                      <div class="col-md-8">
-                        <textarea placeholder="Presiona enter para enviar"></textarea>
-                      </div>
-                      <div class="col-md-4">
-                        <div class="enviar_mensaje">
-                            <div class="send_btn">
-                                <a href="#">Enviar</a>
-                            </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-        </div>
-        <?php include('footer.php') ?>
-    </div>
-</div>
-
-  <!-- Modal ver notificaciones-->
-<div class="modal fade" id="verNotificacion" role="dialog">
-    <div class="modal-dialog">
-    
-      <!-- Modal content-->
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal">&times;</button>
-          <h4 class="modal-title">Notificaciones</h4>
-        </div>
-        <div class="modal-body">
-            <div class="data_notification">
-                <h1>Fernando Vásquez</h1>
-                <p>Ha cambiado el nombre de la tienda OXXO con código 123 por Walmart.</p>
-            </div>
-        </div>
-      </div>
-    </div>
-  </div>
-<script>
-      ;(function($) {
-
-          // Browser supports HTML5 multiple file?
-          var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined',
-              isIE = /msie/i.test( navigator.userAgent );
-
-          $.fn.customFile = function() {
-
-            return this.each(function() {
-
-              var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input
-                  $wrap = $('<div class="file-upload-wrapper">'),
-                  $input = $('<input type="text" class="file-upload-input" disabled placeholder="Ningún archivo seleccionado" />'),
-                  // Button that will be used in non-IE browsers
-                  $button = $('<button type="button" class="file-upload-button">Subir foto</button>'),
-                  // Hack for IE
-                  $label = $('<label class="file-upload-button" for="'+ $file[0].id +'">Subir foto</label>');
-
-              // Hide by shifting to the left so we
-              // can still trigger events
-              $file.css({
-                position: 'absolute',
-                left: '-9999px'
-              });
-
-              $wrap.insertAfter( $file )
-                .append( $file, $input, ( isIE ? $label : $button ) );
-
-              // Prevent focus
-              $file.attr('tabIndex', -1);
-              $button.attr('tabIndex', -1);
-
-              $button.click(function () {
-                $file.focus().click(); // Open dialog
-              });
-
-              $file.change(function() {
-
-                var files = [], fileArr, filename;
-
-                // If multiple is supported then extract
-                // all filenames from the file array
-                if ( multipleSupport ) {
-                  fileArr = $file[0].files;
-                  for ( var i = 0, len = fileArr.length; i < len; i++ ) {
-                    files.push( fileArr[i].name );
-                  }
-                  filename = files.join(', ');
-
-                // If not supported then just take the value
-                // and remove the path to just show the filename
-                } else {
-                  filename = $file.val().split('\\').pop();
-                }
-
-                $input.val( filename ) // Set the value
-                  .attr('title', filename) // Show filename in title tootlip
-                  .focus(); // Regain focus
-
-              });
-
-              $input.on({
-                blur: function() { $file.trigger('blur'); },
-                keydown: function( e ) {
-                  if ( e.which === 13 ) { // Enter
-                    if ( !isIE ) { $file.trigger('click'); }
-                  } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del
-                    // On some browsers the value is read-only
-                    // with this trick we remove the old input and add
-                    // a clean clone with all the original events attached
-                    $file.replaceWith( $file = $file.clone( true ) );
-                    $file.trigger('change');
-                    $input.val('');
-                  } else if ( e.which === 9 ){ // TAB
-                    return;
-                  } else { // All other keys
-                    return false;
-                  }
-                }
-              });
-
-            });
-
-          };
-
-          // Old browser fallback
-          if ( !multipleSupport ) {
-            $( document ).on('change', 'input.customfile', function() {
-
-              var $this = $(this),
-                  // Create a unique ID so we
-                  // can attach the label to the input
-                  uniqId = 'customfile_'+ (new Date()).getTime(),
-                  $wrap = $this.parent(),
-
-                  // Filter empty input
-                  $inputs = $wrap.siblings().find('.file-upload-input')
-                    .filter(function(){ return !this.value }),
-
-                  $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>');
-
-              // 1ms timeout so it runs after all other events
-              // that modify the value have triggered
-              setTimeout(function() {
-                // Add a new input
-                if ( $this.val() ) {
-                  // Check for empty fields to prevent
-                  // creating new inputs when changing files
-                  if ( !$inputs.length ) {
-                    $wrap.after( $file );
-                    $file.customFile();
-                  }
-                // Remove and reorganize inputs
-                } else {
-                  $inputs.parent().remove();
-                  // Move the input so it's always last on the list
-                  $wrap.appendTo( $wrap.parent() );
-                  $wrap.find('input').focus();
-                }
-              }, 1);
-
-            });
-          }
-
-}(jQuery));
-
-$('input[type=file]').customFile();
-  </script>

pruebas.php

+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>PruebasPsico - Pruebas</title>
+    <link rel="stylesheet" href="css/all.css">
+    <script src="js/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
+    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
+
+</head>
+<script type="text/javascript">
+    $(document).ready(function () {
+        $(".list-unstyled").find('li').removeClass("active");
+        $("#pruebas").addClass("active");
+    });
+</script>
+<?php include('sidebar.php') ?>       
+<section id="content">
+    <?php include('header.php') ?>       
+    <div class="content-section">
+        <div class="main">
+            <h1>Listado de pruebas psicométricas</h1>
+            <div class="tabs_pruebas">
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="test_tab active" id="comportamiento" onclick="comportamiento()">
+                            <p>COMPORTAMIENTO</p>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="test_tab" id="personalidad" onclick="personalidad()">
+                            <p>PERSONALIDAD</p>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="test_tab" id="inteligencia" onclick="inteligencia()">
+                            <p>INTELIGENCIA</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="pruebas_grid">
+                <div class="comportamiento_body" id="comportamiento_body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-1">
+                                    <label for="box-1">CLEAVER</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-2">
+                                    <label for="box-2">ESTILO</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-3">
+                                    <label for="box-3">VALORES</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-4">
+                                    <label for="box-4">VALORES COMP.</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-5">
+                                    <label for="box-5">MOSS</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-6">
+                                    <label for="box-6">KOSTICK</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-7">
+                                    <label for="box-7">ZAVIC</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-8">
+                                    <label for="box-8">VALPER</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-9">
+                                    <label for="box-9">LIFO</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <div class="personalidad_body" id="personalidad_body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-10">
+                                    <label for="box-10">LUSCHER</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-11">
+                                    <label for="box-11">CPI</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-12">
+                                    <label for="box-12">PGV</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-13">
+                                    <label for="box-13">BFQ</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-14">
+                                    <label for="box-14">16FP</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-15">
+                                    <label for="box-15">PIP</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-16">
+                                    <label for="box-16">IMP</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-17">
+                                    <label for="box-17">PVC</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-18">
+                                    <label for="box-18">NIC</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <div class="inteligencia_body" id="inteligencia_body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-19">
+                                    <label for="box-19">TERMAN</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-20">
+                                    <label for="box-20">BETAIIR</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-21">
+                                    <label for="box-21">BETAIII</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-22">
+                                    <label for="box-22">IE</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-23">
+                                    <label for="box-23">RAVEN</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-24">
+                                    <label for="box-24">DOMINOS</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-25">
+                                    <label for="box-25">WONDERLIC</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="body_prueba">
+                                <div class="modern-Checkbox">
+                                    <input type="checkbox" id="box-26">
+                                    <label for="box-26">COIR</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <?php include('footer.php') ?>
+    </div>
+</section>
+<script type="text/javascript">
+    function comportamiento() {
+        $("#comportamiento_body").css('display', 'block');
+        $("#personalidad_body").css('display', 'none');
+        $("#inteligencia_body").css('display', 'none');
+        $("#personalidad").removeClass("active");
+        $("#inteligencia").removeClass("active");
+        $("#comportamiento").addClass("active");
+    };
+</script>
+<script type="text/javascript">
+    function personalidad() {
+        $("#comportamiento_body").css('display', 'none');
+        $("#personalidad_body").css('display', 'block');
+        $("#inteligencia_body").css('display', 'none');
+        $("#comportamiento").removeClass("active");
+        $("#inteligencia").removeClass("active");
+        $("#personalidad").addClass("active");
+    };
+</script>
+<script type="text/javascript">
+    function inteligencia() {
+        $("#comportamiento_body").css('display', 'none');
+        $("#personalidad_body").css('display', 'none');
+        $("#inteligencia_body").css('display', 'block');
+        $("#comportamiento").removeClass("active");
+        $("#personalidad").removeClass("active");
+        $("#inteligencia").addClass("active");
+    };
+</script>

sidebar.php

     <link rel="stylesheet" href="css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
     <script src="js/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
     <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
     <link rel="stylesheet" href="css/all.css">
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
     <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
 </head>
 
                 </div>
             </div>
             <ul class="list-unstyled components">
+                <li class="cabecera_li">MENÚ</li>
                 <li id="home" class="active">
-                    <a href="index.php"><i class="fas fa-chart-line"></i>Dashboard</a>
+                    <a href="index.php"><i class="fas fa-home"></i>Inicio</a>
                 </li>
                 <li id="plazas">
-                    <a href="plazas.php"><i class="fas fa-list-ol"></i>Plazas</a>
+                    <a href="plazas.php"><i class="far fa-list-alt"></i>Puestos</a>
                 </li>
                 <li id="notificaciones">
-                    <a href="notificaciones.php"><i class="far fa-bell"></i>Notificaciones</a>
+                    <a href="notificaciones.php"><i class="fas fa-shield-alt"></i>Contraseñas</a>
+                </li>
+                <li id="expedientes">
+                    <a href="expedientes.php"><i class="far fa-user"></i>Expedientes</a>
+                </li>
+                <li id="resultados">
+                    <a href="resultados.php"><i class="fas fa-chart-line"></i>Resultados</a>
+                </li>
+                <li id="pruebas">
+                    <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-paperclip"></i>Pruebas</a>
+                    <ul class="collapse list-unstyled" id="pageSubmenu2">
+                        <li>
+                            <a href="pruebas.php">Listado de pruebas</a>
+                        </li>
+                        <li>
+                            <a href="#">Aplicar</a>
+                        </li>
+                        <li>
+                            <a href="#">Respuestas</a>
+                        </li>
+                        <li>
+                            <a href="#">Calificaciones</a>
+                        </li>
+                    </ul>
                 </li>
                 <li id="configuraciones">
                     <a href="configuraciones.php"><i class="fas fa-cog"></i>Configuraciones</a>
                 </li>
+                <li id="historial">
+                    <a href="historial.php"><i class="far fa-clock"></i>Historial</a>
+                </li>
+                <li class="cabecera_li">EXTRAS</li>
                 <li id="elementos">
                     <a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-star"></i>Elementos</a>
                     <ul class="collapse list-unstyled" id="pageSubmenu3">
                         <li>
                             <a href="forgot-password.php" target="_blank">Contraseña Olvidada</a>
                         </li>
+                    </ul>
+                </li>
+                <li id="tutoriales">
+                    <a href="#pageSubmenu4" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="far fa-bookmark"></i>Tutoriales</a>
+                    <ul class="collapse list-unstyled" id="pageSubmenu4">
+                        <li>
+                            <a href="#">Manual de Uso Básico</a>
+                        </li>
+                        <li>
+                            <a href="#">¿Qué evalúa cada test?</a>
+                        </li>
+                        <li>
+                            <a href="#">Ayuda General</a>
+                        </li>
+                    </ul>
+                </li>
+                <li id="asistencia">
+                    <a href="#pageSubmenu5" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-headphones"></i>Asistencia Técnica</a>
+                    <ul class="collapse list-unstyled" id="pageSubmenu5">
                         <li>
-                            <a href="login.php" target="_blank">Login</a>
+                            <a href="#">Soporte En Línea</a>
                         </li>
                         <li>
-                            <a href="mensajes.php" target="_blank">Mensajes</a>
+                            <a href="#">Soporte Por Ticket</a>
                         </li>
                     </ul>
                 </li>