/**********************
*  Estilos generales  *
*                     *
***********************/
.caja-error {
    margin: 80px 370px;
}

.icono-error {
    font-size: 85px;
}

.titulo-error {
    font-size: 35px;
}

.parrafo-error {
    font-size: 18px;
}

@media (max-width: 790px) {
    .caja-error {
        margin: 0;
    }
}

@media () .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    box-shadow: 3px 8px 10px 0 #000 !important;
}

.activo {
    font-weight: bold;
}

.btn-primary {
    color: #ffffff !important;
    background: #2a54a9 !important;
}

    .btn-primary:hover {
        background: #2558ff !important;
        color: #ffffff !important;
    }

.input-infoFinanciera {
    width: 70% !important;
}

@media only screen and (max-width: 600px) {
    .input-infoFinanciera {
        width: 100% !important;
    }
}

.content-wrapper {
    background: #f2f2f2;
}

.form-control {
    border-radius: 5px !important;
    box-shadow: none;
    border-color: #c5c6c8 !important;
    height: 45px;
}

.input-group .input-group-addon {
    border-radius: 4px !important;
    border-color: #c5c6c8 !important;
}

.box {
    background: #fdfdfd;
    box-shadow: 3px 8px 10px 0 #b7b7b7 !important;
    border-top: 0 !important;
}


/*Codigo para que el body no se desplace al abrir modal*/

body.with-modal {
    position: static;
    height: auto;
    overflow-y: overlay;
}


/*
@-moz-document url-prefix() {
    body.with-modal2 {
        overflow: hidden;
        position: static;
        width: 100%;
    }
}
*/


/*
.main-header {
    position: fixed;
    max-height: 100px;
    z-index: 1030;
    margin: 0 -1364;
    width: 100%;
}

.content-wrapper {
    margin-top: 50px;
}

@media (max-width: 767px) {
    .main-header {
        position: fixed;
        max-height: 100px;
        z-index: 1030;
        margin: 0;
        width: 100%;
    }
    .content-wrapper {
        margin-top: 101px;
    }
}

@media (min-width: 768px) and (min-height: 1024px) {
    .main-header {
        position: fixed;
        max-height: 100px;
        z-index: 1030;
        margin: 0 -783px;
        width: 100%;
    }
    .content-wrapper {
        margin-top: 50px;
    }
}

@media (min-width: 1024px) and (min-height: 1366px) {
    .main-header {
        position: fixed;
        max-height: 100px;
        z-index: 1029;
        margin: 0 -1038px;
        width: 100%;
    }
}
*/


/*
body.with-modal {
    overflow: hidden;
    position:fixed;
    width: 100%;
}*/


/*******************************
*        Forgot Password       *                
*                              *
********************************/

body.forgost-pass {
    background: #d2d6de;
}

div.caja-forgotPass {
    width: 409px;
    height: 240px;
    margin: 15% auto;
    background: #ffffff;
}

h2.titulo-forgotPass {
    margin-bottom: -16px;
    padding-top: 20px;
}

p.forgot-cuenta {
    margin-bottom: 30px;
}


/***********************************
*   Forgot Password Confirmation   *                
*                                  *
************************************/

body.passwordConfirm {
    background: #d2d6de;
}

.seccion-confirm {
    margin: 25% auto;
}

.titulo-confirm {
    color: #000000;
}

.texto-confirm {
    color: #000000;
}


/********************************
*    Forgot Password Reset      *                
*                               *
*********************************/

body.passwordReset {
    background: #d2d6de;
}

.seccion-reset {
    margin: 25% auto;
}

.titulo-reset {
    color: #000000;
}

.texto-reset {
    color: #000000;
}


/********************************
*      estilos de navbar        *                
*                               *
*********************************/

.dropdown-menu .divider {
    margin: 5pX;
}

.dropdown-menu > .divider {
    background-color: #727272;
}

.a_title {
    background: #e2e2e2;
}

.dropdown-menu {
    background-color: #ffffff !important;
}

.dropdown-menu {
    box-shadow: none !important;
    border-color: #fff !important;
}

    .dropdown-menu > li > a:hover {
        background-color: #e1e3e9 !important;
        color: #4b4a4a !important;
    }

@media (max-width: 768px) {
    .skin-blue .main-header .navbar .dropdown-menu li a.a_title {
        color: #4e4e4e !important;
        background: #dadada !important;
    }

    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #444 !important;
        background: #ffffff !important;
    }

        .skin-blue .main-header .navbar .dropdown-menu li a:hover {
            color: #444 !important;
            background: #dfdede !important;
        }
}

.label-notifications {
    position: absolute !important;
    top: 9px !important;
    right: 7px !important;
    text-align: center !important;
    font-size: 9px !important;
    padding: 3px 5px;
    border-radius: 7px;
    line-height: .9 !important;
    background-color: #f57c00 !important;
}

.fa-users-notifications,
.fa-warning {
    color: #d43420 !important;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover, .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
    background: #f4f4f4 !important;
    text-decoration: none !important;
    border-left: 3px solid #1344b7 !important;
}
/********************************
*      Estilos de Usuarios      *                
*                               *
*********************************/


/*Lista Usuarios*/

.form-control-date {
    border-radius: 5px !important;
    box-shadow: none;
    border-color: #c5c6c8 !important;
    height: 40px;
}

.btn-filter {
    height: 39px;
    color: #ffffff;
    background: #2a54a9;
    border-radius: 4px;
    padding: 0;
}

.fa-filter {
    font-size: 18px;
}

.btn-filter:hover {
    background: #2558ff;
    color: #f4f4f4;
}

.btn-search {
    height: 39px;
    color: #ffffff;
    background: #2a54a9;
    border-radius: 4px;
    padding: 0;
}

.fa-search {
    font-size: 18px;
    ;
}

.btn-search:hover {
    background: #2558ff;
    color: #f4f4f4;
}

.btn-actions:hover {
    background: #c3c8ca;
}

@media only screen and (max-width: 600px) {
    .input-group-filtro {
        margin-bottom: 20px;
    }

    .btn-filter {
        height: 38px;
        width: 76px;
        margin-top: 1px;
        margin-left: -25px;
    }

    .fa-filter {
        font-size: 17px;
        margin-right: 4px;
    }

    .btn-search {
        height: 38px;
        width: 76px;
        margin-left: -25px;
        margin-top: 1px;
    }

    .fa-search {
        font-size: 17px;
        margin-right: 4px;
        margin-left: -4px;
    }

    div.modal > div.modal-dialog > div.modal-content > div.modal-header > i.fa-exclamation-triangle {
        color: #ffb62d;
        font-size: 85px;
        margin: auto 119px;
    }

    .btn-download {
        font-size: 13px;
    }
}

@media only screen and (min-width: 700px) {
    .input-group-filtro {
        margin-bottom: 20px;
    }

    .btn-filter {
        height: 38px;
        width: 76px;
        margin-top: 1px;
        margin-left: -25px;
    }

    .fa-filter {
        margin-right: 4px;
    }

    .btn-search {
        height: 38px;
        width: 76px;
        margin-left: -25px;
        margin-top: 1px;
    }

    .fa-search {
        margin-right: 4px;
        margin-left: -3px;
    }
}

@media only screen and (min-width: 1000px) {
    .btn-filter {
        margin: 0 -28px;
    }

    .fa-filter {
        margin-right: 4px;
    }

    .btn-search {
        margin: 0 -29px;
    }

    .fa-search {
        margin-right: 4px;
        margin-left: -3px;
    }
}

@media only screen and (max-width: 680px) and (orientation: landscape) {
    .btn-filter {
        margin: 10px 0;
    }

    .btn-search {
        margin: 10px 0;
    }
}

@media only screen and (max-width: 830px) and (orientation: landscape) {
    .btn-filter {
        margin: 10px 0;
    }

    .btn-search {
        margin: 10px 0;
    }
}

@media only screen and (min-width: 830px) and (orientation: landscape) {
    .btn-filter {
        margin: 0 -29px;
    }

    .fa-filter {
        margin-right: 4px;
    }

    .btn-search {
        margin: 0 -29px;
        margin-top: 0;
        ;
    }

    .fa-search {
        margin-right: 4px;
        margin-left: -3px;
    }
}

.modal-usuarios {
    background-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

.fa-exclamation-triangle {
    color: #ffb62d;
    font-size: 85px;
    margin: 0 245px;
    ;
}

.modal-Verusuario {
    width: 70%;
    margin: 0 auto;
}

.fa-trash {
    color: #ff0000;
    font-size: 17px;
}

.fa-ban {
    color: #ff9422;
    font-size: 17px;
}

.fa-pencil {
    color: #04c;
    font-size: 17px;
}

.fa-eye {
    color: black;
}

.list-group-unbordered > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    height: 55px;
}


/*list roles*/

.btn-search-roles {
    height: 35px;
    color: #ffffff;
    background: #2487c1;
    border-radius: 4px;
    margin-left: -28px;
}

    .btn-search-roles:hover {
        background: #0f73ad;
        color: #f4f4f4;
    }

.col-inputBuscar {
    right: -165px
}

.form-control-date-rols {
    border-radius: 5px !important;
    box-shadow: none;
    border-color: #c5c6c8 !important;
    height: 35px;
}

@media only screen and (max-width: 600px) {
    .col-inputBuscar {
        margin: 0 -25px;
        left: 10px;
    }

    .form-control-date-rols {
        height: 35px;
        width: 105%;
    }

    .btn-search-roles {
        height: 35px;
        margin: 0 -10px;
    }
}

@media only screen and (min-width: 768px) and (min-height: 1024px) {
    .col-inputBuscar {
        left: 30px;
    }

    .form-control-date-rols {
        height: 35px;
    }

    .btn-search.rols {
        height: 35px !important;
    }
}

@media only screen and (min-width: 1024px) and (min-height: 1366px) {
    .col-inputBuscar {
        left: 60px;
    }
}


/*Crear usuarios*/

.content-form {
    width: 81%;
}

.box-form {
    width: 80%;
}

@media (max-width: 768px) {
    .content-form {
        width: 100%;
    }

    .box-form {
        width: 100%;
    }
}


/*
@media only screen and (max-width: 736px) and (max-height: 414px) and (orientation: landscape) {
    .col-inputBuscar {
        margin: -15px 0;
    }
}

@media only screen and (max-width: 830px) and (max-height: 415px) and (orientation: landscape) {
    .col-inputBuscar {
        margin: -15px 295px;
    }
}
*/

.btn-newUser {
    color: #ffffff;
    background: #2487c1;
    border-radius: 4px;
}

    .btn-newUser:hover {
        background: #0f73ad;
        color: #f4f4f4;
    }


/*New Role*/

.titulo-newrole {
    margin: 0px;
    padding: 0px;
}

.btn-newRole {
    margin-top: 5px;
    color: #ffffff;
    background: #0f73ad;
    border-radius: 4px;
}

    .btn-newRole:hover {
        color: #ffffff;
        background: #2487c1;
    }


/*Edit role*/

.btn-editRole {
    margin-top: 15px;
    color: #ffffff;
    background: #0f73ad;
    border-radius: 4px;
}

    .btn-editRole:hover {
        color: #ffffff;
        background: #2487c1;
    }

.col-roles {
    margin: 0 165px;
}

.rol {
    margin: 0 10px;
}


/* Dispositivos extra grandes (laptops y computadoras de escritorio grandes, 1200px y más) */

@media only screen and (max-width: 600px) {
    .col-roles {
        margin: 0 -65px;
    }

    .rol {
        margin: 3px 33px;
    }

    .btn-rol {
        width: 90px;
    }
}


/********************************
*           Index               *                
*                               *
*********************************/

.welcome {
    min-height: 250px;
    padding: 15px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 0;
    margin-left: -15px;
    padding-left: 15px;
    padding-right: 15px;
    background: #002885 !important;
    color: #fff;
    padding: 70px 0;
    margin-top: -16px;
    width: 104%;
}

@media (max-width: 600px) {
    .welcome {
        width: 109%;
    }
}

.small-box p {
    font-size: 18px !important;
}

.small-box h3 {
    font-size: 45px !important;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}

.small-box > .small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff !important;
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, 0.17) !important;
    text-decoration: none;
}
/********************************
*        Logan Partial          *                
*                               *
*********************************/

.skin-blue .main-header .navbar {
    background: #001e65;
}

.skin-blue .main-header .logo {
    background: #001e65;
    color: #fff;
    border-bottom: 0 solid transparent;
}

    .skin-blue .main-header .logo:hover {
        background: #002885;
        color: #fff;
        border-bottom: 0 solid transparent;
    }

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: #001e65;
}

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: #0f1d23 !important;
}

/*color de fondo donde esta el perfil*/

.skin-blue .main-header li.user-header {
    background-color: #0f1d23 !important;
}


/*******************************************
*     estilos de caja de cerrar sesión     *
*                                          *
********************************************/

@media only screen and (max-width: 414px) {
    .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
        z-index: 5;
        color: #fff;
        color: rgba(255, 255, 255, 0.8);
        font-size: 13px;
        margin-top: 10px;
        /* width: 99px; */
    }

    .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
        z-index: 5;
        height: 90px;
        width: 70px;
        border: 3px solid;
        border-color: transparent;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .navbar-custom-menu > .navbar-nav > li > .menu-perfil {
        position: absolute;
        right: 5%;
        left: auto;
        border: 1px solid #ddd;
        background: #fff;
        width: 65%;
    }

    .foto-perfil {
        width: auto !important;
    }
}

.btn-perfil {
    margin-top: -15px;
    margin-left: 10px;
    margin-bottom: 15px;
}

.btn-sesion {
    margin-top: -15px;
    margin-right: 10px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .skin-blue .main-header .navbar .dropdown-menu li a.btn-perfil {
        color: #ffffff !important;
        background: #3c8dbc !important;
    }

    .skin-blue .main-header .navbar .dropdown-menu li a.btn-sesion {
        color: #ffffff !important;
        background: #3c8dbc !important;
    }
}


/*************************
*    Estilos Bancos      *                
*                        *
*************************/


/*Ingresar Banco*/

div.col-banco {
    margin: 9px 0;
}

.box-banco1 {
    width: 90%;
}

.body-banco1 {
    padding: 0 !important;
}

.btn-banco {
    margin-left: 15px;
}

.files-banco {
    margin: 3px 0;
}


/*Bancos-archivos*/

.header-files {
    width: 75%;
}

.box-files {
    width: 70%;
    height: auto;
}

.btn-files {
    width: 150px;
    margin: 50px 40%;
}

@media(min-width: 740px;) {
    .btn-files {
        width: 150px;
        margin: 50px 28%;
    }

    .i.icono-files-text {
        font-size: 80px;
        margin: 20px 40% 0 40%;
    }
}

div.box-header > i.icono-files-text {
    font-size: 80px;
    margin: 20px 44% 0 44%;
}

.label {
    padding: 0.3em 1.6em 0.4em !important;
}

.label-default {
    background-color: #909090;
}

span > a.link-file {
    color: #ffffff;
}

    span > a.link-file:hover {
        color: #bbbbbb;
    }

@media only screen and (max-width: 600px) {
    .header-files {
        width: 100%
    }

    .box-files {
        width: 100%;
        height: auto;
    }

    .btn-files {
        width: 150px;
        margin: 15px 0 15px 27%;
    }

    .files {
        margin: 3px 0px;
        display: inline-block;
        font-size: 11.5px;
    }
}

@media only screen and (min-width: 768px) and (min-height: 1024px) {
    .btn-files {
        width: 150px;
        margin: 10px 0 33px 33%;
    }
}

@media only screen and (min-width:1024px) and (min-height: 1366px) {
    .btn-files {
        width: 150px;
        margin: 15px 60px 45px 245px;
    }
}

@media only screen and (min-width: 1366px) and (min-height: 1024px) and (orientation: landscape) {
    .btn-files {
        width: 150px;
        margin: 10px 168px 33px 41%;
    }

    .header-files {
        width: 85.5%
    }

    .box-files {
        width: 85%;
        height: auto;
    }
}

@media only screen and (max-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
    .btn-files {
        width: 150px;
        margin: 15px 60px 45px 37%;
    }

    .header-files {
        width: 85.5%
    }

    .box-files {
        width: 85%;
        height: auto;
    }
}


/*Modal subir archivos*/

.modal-header {
    padding: 0 20px;
    background: #f7f7f7;
    color: rgb(255, 255, 255);
}

.input-modal {
    border: 0px !important;
    width: 60%;
    margin: 0 110px;
}

.modal-title {
    border-bottom-color: #f4f4f4;
    color: rgb(255, 255, 255);
    /* padding-bottom: 5px; */
    font-size: 20px;
    text-align: center;
    color: black;
    margin: 10px 0;
}

div.figura {
    background: #ac0a0a;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin: 15px 260px;
}

i.fa-files-o {
    color: #ffffff;
    font-size: 30px;
    margin: 20px;
}

@media (max-width: 500px) {
    div.figura {
        background: #ac0a0a;
        height: 70px;
        width: 70px;
        border-radius: 50%;
        margin: 11px 140px;
    }

    .input-modal {
        border: 0px !important;
        width: 90%;
        margin: 0px 15px;
    }
}


/*Ingresar banco pt2*/

.box-bancop2 {
    height: 270px;
}

.input-file {
    margin: 40px 90px;
    font-size: 15px;
    width: 70%;
    border: 0 !important;
}

.titulo-file {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.box-title {
    display: block !important;
}

div.figura-Bancop2 {
    background: #ac0a0a;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin: 15px auto;
}

@media (max-width:600px) {
    .input-file {
        margin: 40px -3px;
        font-size: 15px;
        width: 100%;
        border: 0 !important;
    }

    div.figura-Bancop2 {
        background: #ac0a0a;
        height: 70px;
        width: 70px;
        border-radius: 50%;
        margin: 15px auto;
    }
}

div.figura-bancop2 {
    background: #ac0a0a;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin: 15px 260px;
}

i.fa-bancop2 {
    color: #ffffff;
    font-size: 30px;
    margin: 20px;
}

.box-header.with-border-files {
    background: #dedede;
    border-bottom: 1px solid #f5f5f5;
}

.box-files-bancos {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media only screen and (max-width: 600px) {
    div.figura-bancop2 {
        height: 70px;
        width: 70px;
        margin: 12px 135px;
    }
}

@media only screen and (max-width: 350px) {
    div.figura-bancop2 {
        height: 70px;
        width: 70px;
        margin: 12px 90px;
    }
}

@media only screen and (min-width: 780px) and (min-height: 1024px) {
    div.figura-bancop2 {
        height: 70px;
        width: 70px;
        margin: 12px 275px;
    }

    .input-file {
        margin: 40px 90px;
        font-size: 15px;
        width: 75%;
        border: 0 !important;
    }
}

@media only screen and (min-height: 1024px) and (min-width: 780px) {
    div.figura-bancop2 {
        height: 70px;
        width: 70px;
        margin: 12px 200px;
    }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
    div.figura-bancop2 {
        height: 70px;
        width: 70px;
        margin: 12px 240px;
    }
}


/*Ingresar Banco pt3*/

.box-banco-empresa {
    padding: 0 !important;
    width: 100%;
}

.col-banco-empresa {
    margin: 9px 0;
}

.btn-banco-empresa {
    margin-left: 15px;
}

.i-celuluar {
    font-size: 1.5em;
}


/*************************
*    Estilos Empresas    *                
*                        *
*************************/


/*Ingresar empresa*/

.col-empresa {
    margin: 9px 0;
}

.box-empresap1 {
    width: 90%;
}

.conten-empresasp1 {
    width: 90%;
}


/**Ingresar empresa p2*/

.col-empresap2 {
    margin-right: 170px;
}

.input-empresap2 {
    width: 210%;
    padding: 8px 8px;
    height: 40px;
}

.box-empresap2 {
    width: 75%;
}

.label-empresap2 {
    margin-bottom: 10px;
    margin-top: 10px;
}

@media only screen and (max-width: 991px) {
    .input-empresap2 {
        width: 100%;
    }
}

@media only screen and (max-width: 780px) {
    .box-empresap2 {
        width: 90%;
    }

    .label-empresap2 {
        margin-bottom: 2px;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 500px) {
    .input-empresap2 {
        width: 100%;
        margin-bottom: 10px;
    }

    .label-empresap2 {
        margin-bottom: 2px;
        margin-top: 10px;
    }

    .col-empresap2 {
        margin-right: 0px;
    }

    .form-empresap2 {
        margin-top: -25px;
    }
}

@media only screen and (min-width:992px) {
    .box-empresap2 {
        width: 75%;
    }
}


/*Ingresar empresas p3*/

.form-empresasp3 {
    margin-bottom: 30px;
}

.box-empresasp3 {
    width: 90%;
}


/*************************
*    Estilos Tareas      *                
*                        *
*************************/


/*Tareas-Ingresar*/

.box-ingresar {
    width: 80%;
}

.label-date {
    margin-left: -14px;
}

.input-date {
    margin-top: 10px;
    margin-left: -15px;
}

.input-date-left {
    margin-left: 0;
    margin-top: 35px
}

.tiempo-tarea {
    margin-bottom: 21px;
}

@media (max-width:992px) {
    .box-ingresar {
        width: 100%;
    }

    .box-body-ingresar {
        width: 100%;
    }

    .caja-date {
        margin: 10px 0 10px -14px;
        width: 70%;
    }

    .col-time {
        margin-right: -10px !important;
    }
}

@media (max-width: 600px) {
    .tiempo-tarea {
        margin-bottom: 118px;
    }

    .input-date-left {
        margin-left: -35px;
        /* margin-bottom: -14px; */
        margin-top: 55px;
    }
}

@media only screen and (max-width:768px) {
    .tiempo-tarea {
        margin-bottom: 115px;
    }
}

.lista-archivos {
    display: inline-block;
    list-style: none;
}


/*************************
*    Estilos Tareas      *                
*                        *
*************************/


/*Tareas*/

.input-files-tareas {
    border: 0px !important;
}

.col-textArea {
    display: inline-grid;
}

#Descripcion {
    width: 211% !important;
    height: 61px;
    border-radius: 5px;
}

#NotaTecnica {
    height: 87px;
    width: 211% !important;
    border-radius: 5px;
}

.btn-tareas {
    height: 39px;
    color: #ffffff;
    background: #2487c1;
    border-radius: 8px;
}

    .btn-tareas:hover {
        background: #0f73ad;
        color: #f4f4f4;
    }

.barra-progress {
    margin-top: 40px;
}

.progress {
    border-radius: 3px !important;
}

progress {
    background-color: #ffffff;
    border: 1px;
    height: 32px;
    width: 100%;
    border-radius: 1px;
    color: #000000;
    margin: -8px 0;
}


    /* Safari */

    progress::-webkit-progress-bar {
        background-color: #dddddd;
        border-radius: 9px;
    }


    /* Chrome */

    progress::-webkit-progress-value {
        background: #337ab7;
        border-radius: 9px;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }


    /* firefox */

    progress::-moz-progress-bar {
        background: #00a65a;
        border-radius: 9px;
    }

@media only screen and (min-width: 800px) {
    .horas {
        margin: 9px 0;
    }

    .minutos {
        margin: 9px -10px;
    }

    .input-minutos {
        margin-left: 19px;
    }
}


/*tareas archivos*/

.files {
    margin: 3px 0px;
    display: inline-block;
}

@media only screen and (max-width:825px) and (min-width: 425px) and (orientation: landscape) {
    .input-file {
        margin: 40px 145px;
        font-size: 15px;
        width: 55%;
        border: 0 !important;
    }
}


/*************************
*    Estilos Paquetes    *                
*                        *
*************************/

.btn-paquete {
    color: #383838;
    font-size: 14px;
}

    .btn-paquete:hover {
        color: rgb(0, 0, 0);
    }

.box-paquetes {
    width: 80%;
}

.header-paquetes {
    width: 80%;
}

@media only screen and (max-width: 600px) {
    .box-paquetes {
        width: 100%;
    }

    .header-paquetes {
        width: 100%;
    }
}


/* frames/paquetes */

.box-paquete {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    margin-bottom: 122px;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 15px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.frame-paquete {
    height: 340px;
    width: 100%;
    border-radius: 6px;
    border: 0px;
}

.frame-usuarios-paquete {
    height: 340px;
    width: 100%;
    border-radius: 6px;
    border: 0px;
}

.add-user {
    margin-left: 270px;
    margin-top: -60px;
    height: 28px;
    width: 28px;
    padding: 3px;
}

.add-tarea {
    margin-left: 215px;
    margin-top: -60px;
    width: 28px;
    height: 28px;
    padding: 3px;
}

.itemUser {
    padding: 2px;
    border: 1px solid #dad6d6;
    border-radius: 5px;
    background: #f3f3f3;
    width: 35%;
    text-align: justify;
}

.card-paquete {
    padding: 2px 5px;
    text-align: -webkit-center;
}

.itemUser2 {
    padding: 2px;
    border: 1px solid #dad6d6;
    border-radius: 5px;
    background: #f3f3f3;
}

.labelUsuer {
    font-weight: 400;
    color: #3c5a8f;
    padding-left: 2px;
    cursor: pointer;
}

.itemUser:hover {
    background: #dadada;
    padding: 5px;
    cursor: pointer;
}

.content-delateUser {
    text-align: center;
}


/*boton de la tabla tareas en paquete*/

.acciones-paquete {
    margin-left: 3px;
}

@media only screen and (max-width: 600px) {
    .itemUser {
        width: 85%;
    }
    /*boton de la tabla tareas en paquete*/
    .acciones-paquete {
        margin-bottom: 5px;
    }
}

@media only screen and (max-width: 1024px) and (max-height:1366px) {
    .col-acciones {
        display: inline-flex !important;
    }
}


/*AgregarTarea*/

.btn-addTareas:hover {
    background: #c2c2c2;
}

@media only screen and (max-width: 600px) {
    .btn-addTareas {
        margin-bottom: 5px;
    }
}


/*Detalles de tarea*/

.nav-tabs {
    border-bottom: 1px solid #f00 !important;
}

@media only screen and (max-width: 600px) {
    .min-navTareas {
        font-size: 11.5px;
        font-weight: 600;
    }

    .col-navTareas {
        margin-top: 10px;
    }
}


/*************************
*    Estilos Perfil      *                
*                        *
*************************/

.caja-perfil {
    margin-top: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 8px 0 #878383;
}

.caja-perfil-settings {
    background: #fff;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 0 8px 8px 0 #878383;
}

.perfil-form {
    margin: 20px 30px;
}

.informacion-usuario {
    margin-bottom: 20%;
}

.informacion-about {
    margin-top: 32%;
}

.btn-actualizar {
    margin-top: 35px;
}

.perfil-header {
    background: #055183;
    position: relative;
    margin: 0 120px;
    border-radius: 7px;
    width: 102%;
    height: 48px;
    margin-left: -14px;
}

.text-descripcion {
    max-width: 100%;
}

.text-config {
    padding: 10px 9px;
    color: #fff;
    font-size: 25px;
}

.profile-imagen {
    width: 40%;
    margin: -25px 120px;
}

.info-perfil {
    margin-top: 70px;
}

.profile-imagen:hover {
    transform: translate(-0%, -4%);
}

.descripcion-perfil {
    padding: 15px;
}

@media only screen and (max-width: 600px) {
    .caja-perfil-settings {
        margin-bottom: 45px;
    }

    .informacion-about {
        margin-top: -40px;
    }

    .perfil-header {
        width: 105%;
    }

    .profile-imagen {
        margin: -25px auto;
    }
}

@media only screen and (min-width: 760px) {
    .caja-perfil-settings {
        margin-bottom: 50px;
    }

    .profile-imagen {
        width: 30%;
        margin: -25px auto;
    }

    .informacion-contacto {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}


/*Estilos de nuevo usuario al correo*/

.titulo-ruta {
    color: #ffffff;
    font-size: 80px;
    text-align: center;
    padding: 10px;
}

@media only screen and (max-width: 600px) {
    .titulo-ruta {
        text-align: initial;
        /* margin: 0 55px; */
        padding: 10px 60px;
        font-size: 72px;
    }
}

.logo-ruta {
    /*width: 970px;*/
    /*height: 111px;*/
    background: -webkit-linear-gradient(90deg, rgb(219, 30, 30) 10%, rgb(255, 0, 0) 90%);
    background: -moz-linear-gradient(90deg, rgb(219, 30, 30) 10%, rgb(255, 0, 0) 90%);
    background: -ms-linear-gradient(90deg, rgb(219, 30, 30) 10%, rgb(255, 0, 0) 90%);
    background: -o-linear-gradient(90deg, rgb(219, 30, 30) 10%, rgb(255, 0, 0) 90%);
    /*background: linear-gradient(90deg, #df0505 10%, #8d0404 90%);*/
    background: linear-gradient(-30deg, rgb(204, 31, 31) 10%, rgb(56, 6, 6) 90%);
}


/*.img-ruta {
    width: 35%;
    padding: 15px 0;
    margin: 0 auto;
}
*/

.content-newuser {
    margin: 70px 0;
}

.name-newuser {
    text-align: center;
}

.welcome-newuser {
    text-align: center;
    margin-bottom: 50px;
}

.info-newuser {
    font-size: 18px;
    text-align: center;
}

.borde-newuser {
    margin: 25px;
    border: 1px solid #5a59593b;
}

.footer-newuser {
    text-align: center;
}


/*Informacion financiera */

@media only screen and (max-width: 600px) {
    #example1_length {
        margin-left: -135px !important;
        margin-top: 5px !important;
    }

    .tabla-fianciera {
        margin-top: 0;
    }
}

.box-title {
    font-size: 25px !important;
    font-family: sans-serif;
    margin: 0;
    line-height: 1;
}

.mt-5 {
    margin-top: 15px;
}

.mb-5 {
    margin-bottom: 15px;
}

@media (max-width: 764px) {
    .input-search-roles {
        margin-right: auto;
    }
}

@media (min-width: 765px) {
    .input-search-roles {
        margin-right: auto;
    }
}

@media (min-width: 1024px) {
    .input-search-roles {
        margin-right: -170px;
    }
}

.btn-crud {
    margin: 2px 4px;
}

.box-addTP {
    position: relative;
    border-radius: 3px;
    margin-bottom: 20px;
    width: 99%;
    background: #fdfdfd;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2), 0 2px 30px 0 rgba(0, 0, 0, 0.19) !important;
    border-top: 0 !important;
}

.nav-ruta {
    margin-right: 40px;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body {
    padding: 15px;
    border: 0 !important;
    background-color: #f3f3f3 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background-color: #f3f3f3 !important;
    padding: 10px;
}

.bg-grey {
    background-color: #b3b3b3 !important;
    color: #fff !important;
}

.progress-bar-green {
    background-color: #139458 !important;
}
/*PERFIL*/
@media (max-width: 768px) {
    .box-title-perfil {
        background: #00297b;
        color: #fff;
        border-radius: 5px;
        height: 40px;
        width: 112% !important;
        margin: 6px;
        padding: 8px;
        margin-left: -28px;
        margin-top: -10px;
        font-size: 25px !important;
        font-family: sans-serif;
    }
}

.box-perfil {
    position: relative;
    border-radius: 3px;
    margin-bottom: 20px;
    width: 99%;
    height: 430px;
    background: #ffffff;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2), 0 2px 30px 0 rgba(0, 0, 0, 0.19) !important;
    border-top: 0 !important;
}

.box-perfil-edit {
    position: relative;
    border-radius: 3px;
    margin-bottom: 20px;
    width: 99%;
    background: #ffffff;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2), 0 2px 30px 0 rgba(0, 0, 0, 0.19) !important;
    border-top: 0 !important;
}

.profile-user-img {
    margin: 0 auto !important;
    width: 135px !important;
    padding: 3px !important;
    border: 1px solid #032569 !important;
}

.profile-username {
    font-size: 21px;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.box-title-perfil {
    background: #00297b;
    color: #fff;
    border-radius: 5px;
    height: 40px;
    width: 105%;
    /* margin: 6px; */
    padding: 8px;
    margin-left: -22px;
    margin-top: -10px;
    font-size: 25px !important;
    font-family: sans-serif;
}

.detalle-banco {
    border-bottom: 1px solid #cbcbcb;
}

.icono-sesion {
    font-size: 100px !important;
    color: #8a8a8a;
}

/*Estilo de Sesion Caducada*/
@media (max-width: 768px) {
    .caja-forgotPass {
        width: 100% !important;
    }
}

/* Estilos agenda*/
.modal-agenda {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal-editEvent {
    height: 620px !important;
}
/**Proyectos*/
.btn-progress {
    color: black !important;
    background: #f4f4f4 !important;
    padding: 2px 8px !important;
    margin: 0 -5px !important;
    border: 1px solid #e2e2e2 !important;
}

.btn-date {
    color: black !important;
    background: #f4f4f4 !important;
    padding: 2px 8px !important;
    margin: 0 0 !important;
    border: 1px solid #e2e2e2 !important;
}

.btn-prioridad {
    color: black !important;
    background: #f4f4f4 !important;
    padding: 2px 8px !important;
    margin: 0 5px !important;
    border: 1px solid #e2e2e2 !important;
}

.btn-status {
    color: black !important;
    background: #f4f4f4 !important;
    padding: 2px 8px !important;
    margin: 0 0 !important;
    border: 1px solid #e2e2e2 !important;
}

/* comentarios**/
.MensajeC {
    color: #303030;
    font-size: 15px;
    font-weight: 400;
    text-align: right;
    background: #ffffff;
    margin: 0 0 15px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    border-radius: 2px 25px 25px 25px;
    padding: 10px 20px;
    box-shadow: 3px 8px 10px 0 #b7b7b7 !important;
}

.fecha-captura {
    text-align: right;
    font-size: x-small;
    margin-bottom: -5px;
    color: #656565;
}

.receptorC {
    text-align: left;
    font-size: 10px;
    color: #3e3e3e;
}

.remitenteC {
    text-align: left;
    color: #004683;
}

.comentario {
    margin: 10px;
    text-align: left;
}

.caja-estados {
    height: 820px;
    overflow: auto;
}

.caja-RG {
    overflow: auto;
    height: 820px;
}

/*Estilos de Administración*/

.input-adminIf {
    margin-right: 13px;
}