/*!
 * SR PAGO - FIRMAS
 * Version - 1.0
 * Author: Vannelo - http://vannelo.com

 * - RESOURCES -
 * COLORS
 * ACCENT: #;
 * ACCENT: #;

*/

/* TIPOGRAFÍA */
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-Thin.otf');
        font-weight: 100;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-ExtraLight.otf');
        font-weight: 200;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-Light.otf');
        font-weight: 300;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-Regular.otf');
        font-weight: 400;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-Medium.otf');
        font-weight: 500;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-SemiBold.otf');
        font-weight: 600;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-Bold.otf');
        font-weight: 700;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-ExtraBold.otf');
        font-weight: 800;
    }
    @font-face {
        font-family: montse;
        src: url('../fonts/Montserrat-Black.otf');
        font-weight: 900;
    }


/* GENERAL */
    body {

    }
    * {
        font-family: montse;
    }
    a {
        color: white;
    }
    a:hover {
        color: white;
        text-decoration: none;
    }
    .accent {
        color: #333;
    }
    .dandy-button-1 {
        display: inline-block;
        color: white;
        font-size: 12px;
        font-weight: 500;
        padding: 10px 30px;
        border-radius: 20px;
        border: none;
        margin: 10px;
        background: rgb(0,0,0);
        background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 100%);        -webkit-box-shadow: 0px 10px 40px -5px rgba(0,0,0,.5);
        -moz-box-shadow: 0px 10px 40px -5px rgba(0,0,0,.5);
        box-shadow: 0px 10px 40px -5px rgba(0,0,0,.5);
        transition-duration: .2s;
    }
    .dandy-button-1:hover {
        background: linear-gradient(139deg, #005a32 100%, rgb(0, 136, 72) 40%, rgb(0, 177, 85) 0%);
        -webkit-box-shadow: 0px 10px 40px -5px rgba(28, 156, 78,1);
        -moz-box-shadow: 0px 10px 40px -5px rgba(28, 156, 78,1);
        box-shadow: 0px 10px 40px -5px rgba(28, 156, 78,1);
        transition-duration: .2s;
    }
    .dandy-button-1 i {
        color: #ccc;
        margin-right: 10px;
    }
    .dandy-button-2 {
        display: inline-block;
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 10px 30px;
        border-radius: 3px;
        border: none;
        background-color: #1b1e21;
        transition-duration: .1s;
    }
    .dandy-button-2:hover {
        background-color: #353a3d;
        transition-duration: .2s;
    }
    .dandy-button-2 i {
        color: #ccc;
        margin-right: 10px;
    }
    .dandy-button-3 {
        display: inline-block;
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 10px 30px;
        border-radius: 5px;
        border: none;
        margin: 10px;
        background: linear-gradient(139deg, rgb(177, 0, 38) 0%, rgb(136, 0, 28) 40%, #5a0013 100%);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
        transition-duration: .2s;
    }
    .dandy-button-3:hover {
        background: linear-gradient(139deg, #5a0b11 100%, rgb(136, 0, 30) 40%, rgb(177, 0, 62) 0%);
        transition-duration: .2s;
    }
    .dandy-button-3 i {
        color: #f97a7c;
        margin-right: 10px;
    }
    .dandy-button-4 {
        display: inline-block;
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 10px 30px;
        border-radius: 3px;
        border: none;
        background-color: #03b267;
        transition-duration: .1s;
    }
    .dandy-button-4:hover {
        background-color: #037a3e;
        transition-duration: .2s;
    }
    h4 {
        color: #333;
        font-size: 26px;
        font-weight: 600;
        text-align: left;
        margin: 20px 0px;
        padding: 10px 0px;
        border-bottom: 1px solid #eee;
    }
    h5 {
        color: #333;
        font-weight: 600;
        margin: 20px 0px;
        border-bottom: 1px solid #eee;
        padding: 10px;
    }
    .aladerecha {
        text-align: right;
    }
    .separador {
        width: 100%;
        margin: auto;
        height: 1px;
        background-color: #eee;
        margin-top: 20px;
    }
    .alert {
        font-size: 12px;
    }
    .rojo {
        color: red;
    }

/* MENU MOBILE */
    .menu-mobile {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background: linear-gradient(68deg, rgba(21,185,66,1) 0%, rgba(16,176,65,1) 22%, rgba(10,147,73,1) 44%, rgba(5,126,113,1) 70%, rgba(7,112,92,1) 100%);
    }
    .menu-mobile .izquierda {
        padding: 10px 35px;
    }
    .menu-mobile .izquierda img {
        width: 100px;
    }
    .menu-mobile .derecha {
        text-align: right;
        padding: 10px 35px;
    }
    .menu-mobile .derecha .burguer {
        display: inline-block;
        width: 35px;
    }
    .menu-mobile .burguer .line {
        width: 100%;
        height: 2px;
        background-color: white;
        margin: 7px 0px;
    }
    .menu-mobile .hidden {
        display: none;
        background-color: rgba(0,0,0,.5);
    }
    .menu-mobile .hidden a {
        display: block;
        padding: 15px;
    }

/* LOGIN */
    .login-box {
        position: relative;
        width: 100vw;
        min-height: 100vh;
    }
    .login-box .layer-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

    }
    .login-box .layer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #012c77;
        background: radial-gradient(circle, #012c77 0%, #01122c 100%);
        opacity: 1;
        z-index: 2;

    }
    .login-box .layer-contenido {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        text-align: center;
        color: white;
        padding-top: 15vh;
    }
    .login-box .layer-contenido .contenido {
        width: 350px;
        margin: auto;
    }
    .login-box .layer-contenido .contenido .imagen {
        width: 80px;
        height: 80px;
        margin: auto;
        border-radius: 50%;
        border: 3px solid white;
        background-image: url("../img/logocms.jpg");
        background-position: center;
        background-size: cover;
    }
    .login-box .layer-contenido .contenido .nombre {
        font-weight: 600;
        margin: 20px 0px;
    }
    .login-box .layer-contenido .box-head {
        margin: 20px 0px;
    }
    .login-box .layer-contenido .box-body {
        margin: 20px 0px;
        background-color: #f3f3f3;
        padding: 40px 20px;
        border-radius: 8px;
        -webkit-box-shadow: 0px 0px 18px -4px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 18px -4px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 18px -4px rgba(0,0,0,0.5);
        background: #012c77;
        background: linear-gradient(126deg, #012c77 0%, #013699 50%, #012c77 100%);
    }
    .login-box .layer-contenido .box-body .titulo {
        color: white;
        font-weight: 700;
        font-size: 20px;
        margin-top: 10px;
    }
    .login-box .layer-contenido .login-input {
        background-color: white;
        width: 280px;
        margin: auto;
        border-radius: 8px;
        color: #666;
        margin-top: 20px;
        margin-bottom: 20px;
        -webkit-box-shadow: 0px 0px 18px -4px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 18px -4px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 18px -4px rgba(0,0,0,0.2);
    }
    .login-box .layer-contenido .login-input input {
        width: 230px;
        border: none;
        background-color: white !important;
        font-size: 12px;
        padding: 10px;
        font-weight: 600;
        color: #666;
    }
    .login-box .layer-contenido .login-input i {
        font-size: 12px;
        margin-right: 5px;
    }
    .login-box .layer-contenido .box-body button {
        font-size: 12px;
        font-weight: 500;
        padding: 10px 50px;
        border-radius: 20px;
        letter-spacing: 1px;
        border: none;
        margin: 10px 0px 20px 0px;
        background-color: #1b1e21;
        transition-duration: .1s;
    }
    .login-box .layer-contenido .box-body button:hover {
        background-color: #353a3d;
        transition-duration: .1s;
    }
    .login-box .layer-contenido .box-body .form-control {
        display: inline-block;
        height: auto;
        background-clip: padding-box;
    }

/* DASHBOARD */
    .master-dashboard {
        position: relative;
        width: 100%;
        min-height: 100vh;
        padding-left: 220px;
        overflow-x: hidden;
    }
    .master-dashboard .dashboard-izquierda {
        position: fixed;
        top: 0;
        left: 0;
        width: 220px;
        min-height: 100vh;
        color: white;
        z-index: 10;

    }
    .dashboard-izquierda .layer-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        filter: blur(1px);
        -webkit-filter: blur(1px);
    }
    .dashboard-izquierda .layer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100.4%;
        height: 100%;
        background: #012c77;
        background: radial-gradient(circle, #012c77 0%, #01122c 100%);

        opacity: 1;
        z-index: 2;
    }
    .dashboard-izquierda .layer-contenido {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        text-align: center;
        color: white;
        padding-top: 10%;
    }
    .dashboard-izquierda .layer-contenido .izquierda-head .imagen {
        width: 80px;
        height: 80px;
        margin: auto;
        border-radius: 50%;
        border: 3px solid white;
        background-image: url("../img/logocms.jpg");
        background-position: center;
        background-size: cover;
    }
    .dashboard-izquierda .layer-contenido .izquierda-head .nombre {
        font-weight: 600;
        margin: 20px 0px;
    }
    .dashboard-izquierda .layer-contenido .izquierda-body a {
        display: block;
        width: 100%;
        margin: auto;
        text-align: left;
        padding: 10px 10px;
        font-size: 12px;
        color: white;
        font-weight: 500;
    }
    .dashboard-izquierda .layer-contenido .izquierda-body a:hover {
        background-color: #333;
        text-decoration: none;
    }
    .dashboard-izquierda .layer-contenido .izquierda-body a.activo {
        background-color: #1b1e21;
        text-decoration: none;
    }
    .dashboard-izquierda .layer-contenido .izquierda-body a i {
        width: 15px;
        color: #ccc;
        margin-right: 5px;
    }
    .dashboard-izquierda .layer-contenido .izquierda-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .dashboard-izquierda .layer-contenido .izquierda-footer a {
        display: block;
        width: 100%;
        margin: auto;
        text-align: left;
        padding: 20px 20px;
        font-size: 14px;
        color: white;
        font-weight: 500;
        text-align: center;
    }
    .dashboard-izquierda .layer-contenido .izquierda-footer a:hover {
        background-color: #333;
        text-decoration: none;
    }
    .dashboard-izquierda .layer-contenido .izquierda-footer a i {
        color: #ccc;
        margin-right: 10px;
        margin-left: -10px;
    }

    .master-dashboard .dashboard-derecha {
        position: relative;
        min-height: 100vh;
        padding-bottom: 40px;
        color: #333;
    }
    .master-dashboard .dashboard-derecha .layer-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        filter: blur(1px);
        -webkit-filter: blur(1px);
    }
    .master-dashboard .dashboard-derecha .layer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(139deg, rgb(242, 242, 242) 0%, #ededed 50%, rgb(228, 228, 228) 100%);
        opacity: .95;
        z-index: 2;
    }
    .master-dashboard .dashboard-derecha .layer-contenido {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        text-align: center;
        color: #333;
    }
    .master-dashboard .dashboard-derecha .layer-contenido .derecha-header {
        padding: 15px 20px 5px 20px;
        opacity: 1;
        border-bottom: 1px solid #ccc;
    }
    .master-dashboard .dashboard-derecha .layer-contenido .derecha-header .header-menu {
        display: inline-block;
        cursor: pointer;
    }
    .master-dashboard .dashboard-derecha .derecha-header .imagen {
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 50%;
        border: 1px solid #aaa;
        background-image: url("../img/logocms.jpg");
        background-position: center;
        background-size: cover;
    }
    .master-dashboard .dashboard-derecha .derecha-header .izquierda {
        text-align: left;
        font-weight: 600;
    }
    .master-dashboard .dashboard-derecha .derecha-header .derecha {
        text-align: right
    }
    .master-dashboard .dashboard-derecha .derecha-header .menu > i {
        color: #666;
        cursor: pointer;
        font-size: 20px;
    }
    .master-dashboard .dashboard-derecha .derecha-header .menu {
        display: inline-block;
        position: relative;
        top: -6px;
        font-weight: 600;
        margin: 0px 0px;
    }
    .master-dashboard .dashboard-derecha .derecha-header .menu .box {
        display: none;
        position: absolute;
        top: 35px;
        left: -105px;
        background-color: #ccc;
        width: 150px;
        text-align: center;
        height: auto;
    }
    .master-dashboard .dashboard-derecha .derecha-header .menu a {
        display: inline-block;
        font-size: 12px;
        color: #666;
        width: 100%;
        vertical-align: top;
        padding: 10px;
    }
    .master-dashboard .dashboard-derecha .derecha-header .menu a i {
        color: black;
    }
    .master-dashboard .dashboard-derecha .derecha-header .nombre {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        margin: 0px 10px;
        position: relative;
        top: -5px;
        color: #666;
    }
    .master-dashboard .dashboard-derecha .derecha-body {
       padding: 30px;

    }
    .master-dashboard .dashboard-derecha .botones {
        text-align: left;
    }

/* CMS CONTENT */
    .inside-home {}
    .inside-home .menu-grid {

    }
    .inside-home .marco {
        padding: 10px;
    }
    .inside-home .item {
        cursor: pointer;
        border-radius: 5px;
        padding: 20px;
        color: white;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.30);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.30);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.30);
        transition-duration: .2s;
        background: rgb(0,0,0);
        background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 100%);
    }
    .inside-home .item:hover {
        -webkit-box-shadow: 0px 0px 59px -16px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 59px -16px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 59px -16px rgba(0,0,0,0.75);
        background: linear-gradient(90deg, rgba(64,64,64,1) 0%, rgba(0,0,0,1) 100%);

    }
    .inside-home .item .izquierda {
        text-align: left;
    }
    .inside-home .item .titulo {
        font-size: 26px;
        font-weight: 600;
    }
    .inside-home .item i {
        font-size: 60px;
        margin-top: 20px;
    }

    .formulario {
        text-align: left;
    }
    .formulario .titulo {
        font-size: 16px;
        font-weight: 700;
        text-align: left;
        margin: 15px 0px;
    }
    .formulario select {
        width: 300px;
        font-size: 14px;
        margin: 10px 0px;
    }
    .formulario button {
        margin: 40px 0px;
    }
    .formulario .box-imagen {
        width: 200px;
        cursor: pointer !important;
        transition-duration: .2s;
    }
    .formulario .box-imagen:hover {
        -webkit-box-shadow: 0px 0px 59px -16px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 59px -16px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 59px -16px rgba(0,0,0,0.75);
    }
    .formulario .box-imagen input {
        cursor: pointer;
        background-color: transparent;
    }
    .formulario .box-imagen img {
        width: 100%;
    }
    .formulario .image-trigger {
        font-size: 12px;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
    }
    .formulario input {
        font-size: 14px;
    }
    .formulario .botones-edit {
        margin: 20px 0px;
    }
    .formulario .botones-edit .derecha {
        text-align: right;
    }

    .items-box {
        padding: 0px;
        text-align: left;
        margin: 20px 0px;
    }
    .items-box .table .thead-dark th {
        background-color: transparent;
        border: none;
    }
    .items-box .table .thead-dark {
        background-color: #1b1e21;
    }
    .items-box th {
        font-size: 14px;
        padding: 10px;
    }
    .items-box td {
        font-size: 14px;
        padding: 10px;
    }
    .items-box td.boton {
        padding: 5px;
    }
    .items-box a {
        padding: 5px 20px;
        font-size: 12px;
    }
    .items-box button {
        padding: 5px 20px;
        font-size: 12px;
    }
    .items-box .table {
        background-color: #f8f8f8;
        border-radius: 5px;
        overflow: hidden;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
    }
    .items-box .thead-dark {

    }

/* CONTENT BOX */
    .content-box {
        background-color: white;
        padding: 10px 30px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
    }
    .content-box .content-head {
        padding: 0;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        padding: 10px;
    }
    .content-box .content-options {
        padding: 20px 0px;
    }

    footer {
        padding: 10px;
        color: #666;
        font-size: 14px;
        margin: 20px 0px;
        letter-spacing: 2px;
    }
    footer a {
        color: #000;
    }
    footer a:hover {
        color: #333;
    }

/* EXTRAS */
    .botones {
        margin: 20px 0;
    }
    .sin-registros {
        text-align: center;
    }
    .filtros {
        width: 200px;
        text-align: left;
    }
    .filtros .titulo {
        font-size: 12px;
        margin: 5px 0;
        font-weight: 600;
    }
    .filtros button {
        margin: 10px 0;
        width: 100%;
    }
    .filtros select {
        padding: 5px;
        height: auto;
        font-size: 14px;
    }

    .page-empleados {}
    .page-empleados .items-box {
        display: none;
    }
    .page-empleados #box-1 {
        display: block;
    }

    .tabla-centrar {
        text-align: center !important;
    }
    tbody {
        font-weight: 500;
        color: #444;
    }


    .student-admin {
        text-align: left;
        background-color: white;
        padding: 30px;
    }
    .student-admin .divider {
        width: 100%;
        height: 1px;
        background-color: #ddd;
        margin: 20px 0;
    }
    .student-admin .user_box .label {
        font-size: 14px;
        font-weight: 600;
        margin: 5px 0;
    }
    .student-admin .user_box .text {
        font-size: 16px;
        margin: 5px 0;
    }
    .student-admin .c2a {
        margin: 20px 0;
    }
    .student-admin .form-box {}
    .student-admin .form-box input {
        margin: 10px 0;
    }
    .student-admin .form-box .label {
        font-size: 14px;
        font-weight: 600;
        margin: 5px 0;
    }
    .student-admin .project-box {
        margin: 20px 0 50px 0;
    }
    .student-admin .project-box .label {
        font-size: 14px;
        font-weight: 600;
        margin: 10px 0 5px 0;
    }
    .student-admin .project-box .text {
        font-size: 16px;
        margin: 5px 0;
    }
    .student-admin .project-box input {
        display: block;
        font-size: 20px;
        width: 120px;
        margin: 20px 0;
        padding: 5px;
    }
    .delete-popup {
        display: none;
        position: fixed;
        top: 20vh;
        left: 50%;
        margin-left: -200px;
        width: 400px;
        background-color: white;
        padding: 40px;
        border: 10px solid #1b1e21;
    }

/* RESPONSIVE */

    @media only screen and (max-width: 1000px) {
        .menu-desktop {
            display: none;
        }
        .menu-mobile {
            display: block;
        }
        .hide-mobile {
            display: none !important;
        }
        .show-mobile {
            display: block !important;
        }

        .firma-desktop {
            display: none;
        }
        .firma-mobile {
            display: block;
        }

        .master-dashboard {
            position: initial;
            width: 100%;
            min-height: 100vh;
            padding-left: 0px;
            padding-top: 60px;
            overflow-x: hidden;
        }
        .master-dashboard .dashboard-izquierda {
           display: none;
        }
        .master-dashboard .dashboard-derecha {
            position: initial;
            min-height: 100vh;
            padding-bottom: 20px;
            color: #333;
        }

        .items-box a {
            padding: 5px 20px;
            font-size: 12px;
            margin: 5px;
        }
        .formulario select {
            width: 100%;
            font-size: 14px;
            margin: 10px 0px;
        }
        h3 {}
        h4 {
            font-size: 20px;
        }

        .dandy-button-2 {
            display: inline-block;
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 10px;
            border-radius: 5px;
            border: none;
            margin: 10px 0px;
            background: linear-gradient(139deg, rgb(0, 177, 85) 0%, rgb(0, 136, 72) 40%, #005a32 100%);
            -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
            -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
            transition-duration: .2s;
        }

        .dandy-button-3 {
            display: inline-block;
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 10px;
            border-radius: 5px;
            border: none;
            margin: 10px 0px;
            background: linear-gradient(139deg, rgb(177, 0, 38) 0%, rgb(136, 0, 28) 40%, #5a0013 100%);
            -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
            -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
            transition-duration: .2s;
        }


    }

    @media only screen and (min-width: 1000px) {

        .menu-desktop {
            display: block;
        }
        .menu-mobile {
            display: none;
        }
        .hide-mobile {
            display: block;
        }
        .show-mobile {
            display: none;
        }




    }

    @media only screen and (min-width: 2000px) {

    }