@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css);

.noPadding {
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    overflow-x: hidden
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.bgColors {
    background: #020632; /* AZUL OSCURO */
    background: #77A22D; /* VERDE */
    background: #1276bd; /* AZUL LINKS E ICONOS */
    background: #3597d4; /* AZUL LINKS SECUNDARIOS */
    background: #555555; /* GRIS OSCURO TXT */
    background: #eb7831; /* NARANJA */
    background: #f8f8f8; /* GRIS CLARO */
}

.txtGreen {
    color: #3F9A6F;
}

.txtBlue {
    color: #3597D4;
}

.txtWhite {
    color: #f0eeed;
}

.mg4 {
    margin-bottom: 4em;
}
/* LOGIN */
/* LOGIN */
.loginBody {
    background: url(../img/bg-login.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #f0eeed;
}

.loginBody, .loginHTML {
    height: 100%;
}

.loginLogo {
    text-align: center;
    margin-bottom: 2em;
}

    .loginLogo img {
        width: 80%;
        /*max-width: 15em;*/
    }

.linkWhite {
    color: #f0eeed;
    text-decoration: none;
}

    .linkWhite:hover {
        color: #f0eeed;
        text-decoration: underline;
    }

.formInput {
    display: block;
    width: 100%;
    height: auto;
    padding: .8rem 2.45rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #f0eeed !important;
    background: none !important;
    background-clip: padding-box;
    border: 0;
    border-bottom: 1px solid #ced4da;
    border-radius: none;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: relative;
}

    .formInput:focus {
        background: none;
    }

.btnLogin {
    background: #f0eeed;
    color: #000;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: 0;
}

    .btnLogin:hover {
        background: #77A22D; /* VERDE */
    }
/* FIX para mantener el transparent bg en autofill */
/*Change text in autofill textbox*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
}

.iconOk {
    position: absolute;
    right: 10px;
    top: 15px;
    width: 20px;
    height: 20px;
}

.iconOkOff {
    z-index: 9;
}

.inputNombre {
    background-image: url("../img/icon-mail-white.svg") !important;
    background-size: 25px !important;
    background-repeat: no-repeat !important;
    background-position: 5px 1rem !important;
}

.inputPassword {
    background-image: url("../img/icon-password-white.svg") !important;
    background-size: 25px !important;
    background-repeat: no-repeat !important;
    background-position: 5px 0.3rem !important;
}
/* Checkbox */
.checkbox {
    position: relative;
}

    /*    .checkbox label {
        padding-left: 0.7em;
        font-size: 0.88em;
    }*/

    .checkbox label:before {
        background: transparent;
        border: 1px solid #f0eeed;
        border-radius: 50%;
        cursor: pointer;
        content: '';
        height: 24px;
        width: 24px;
        left: -5px;
        position: absolute;
        top: 0;
    }

    .checkbox label:after {
        border: 3px solid #f0eeed;
        border-top: none;
        border-right: none;
        cursor: pointer;
        content: '';
        height: 10px;
        left: -1px;
        opacity: 0;
        position: absolute;
        top: 4px;
        transform: rotate(-45deg);
        width: 15px;
        transition: all 0.3s linear;
    }

    .checkbox input[type="checkbox"] {
        opacity: 0;
    }

        .checkbox input[type="checkbox"]:checked + label:before {
            background: #3F9A6F;
            border: #3F9A6F;
        }

        .checkbox input[type="checkbox"]:checked + label:after {
            opacity: 1;
        }


/* NAVBAR */
/* NAVBAR */
/* NAVBAR */
/* NAVBAR */
.bg-light {
    /*background: rgba(2,6,50,0.7) !important;*/ /* AZUL OSCURO */
    background: rgb(2,6,50) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
}

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: #77A22D;
    }

.noLink:hover {
    color: #fff !important;
}

.profileIcon {
    display: inline-block;
    padding-right: 2.1em !important;
    background-image: url("../img/icon-profile.svg") !important;
    background-size: 25px !important;
    background-repeat: no-repeat !important;
    background-position: right 4px !important;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler.navbar-toggler {
    border-color: #fff;
    margin-top: 0.4em;
}

/* HOME */
/* HOME */
/* HOME */

.logoNav {
    width: 4em;
}

.hero {
    background: #020632; /* AZUL OSCURO */
    min-height: 70vh;
    padding-top: 10em;
    color: #fff;
}

.hero {
    background: url(../img/bg-hero-01.jpg) no-repeat bottom right;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #f0eeed;
    border-bottom: 7px solid #3597D4;
}

.CourseNav {
    padding: 4em 0;
}

h2 {
    font-weight: 700;
}

.CourseNav h2 {
    display: inline-block;
    position: relative;
}

    .CourseNav h2:before {
        content: " ";
        position: absolute;
        bottom: -0.45em;
        left: 0;
        right: 0;
        background: #1276bd;
        height: 2px;
        width: 100%;
    }

.coursetitle {
    margin-top: 100px;
}

/* navMateriales */
/* CourseSelect */
.courseSelect {
    background: #f8f8f8;
    padding: 4em 0;
}

.courseNavDiv {
    padding: 4em 0 2em 0;
    text-align: center;
}

    .courseNavDiv ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .courseNavDiv ul li {
            display: inline-block;
            margin-right: 1em;
            margin-left: 1em;
            vertical-align: top;
        }

.courseNavLink {
    color: #555555;
    text-decoration: none;
    font-weight: 700;
}

    .courseNavLink:hover {
        color: #1276bd;
        text-decoration: none;
    }

    .courseNavLink img {
        width: 2.8em;
        display: inline-block;
        vertical-align: top;
        padding-top: 5px;
    }

    .courseNavLink p {
        padding-left: 0.8em;
        display: inline-block;
        text-align: left;
    }

.iconNavAzul {
    display: none !important;
}

.courseNavLink:hover .iconNavGris {
    display: none !important;
}

.courseNavLink:hover .iconNavAzul {
    display: inline-block !important;
}

.courseNavLink.active {
    color: #1276bd;
    text-decoration: none;
}

    .courseNavLink.active .iconNavGris {
        display: none !important;
    }

    .courseNavLink.active .iconNavAzul {
        display: inline-block !important;
    }
/* Cards */
.cardImg img {
    width: 100%;
}

.cardDiv {
    border: 1px solid #adadad;
    padding: 0;
    margin-bottom: 4em;
}

.cardTxt {
    padding: 1em;
}

    .cardTxt h3 {
        font-size: 1.1em;
        margin-top: 0.12em;
        font-weight: bold;
    }

.selectFavorite img {
    width: 24px;
}

.cardTxt p {
    font-size: 0.85em;
    margin-top: 1em;
}

.linkGris {
    color: #555555;
}

.page-link {
    color: #555555;
    background-color: #f8f8f8;
    border: 1px solid #adadad;
}

    .page-link:hover {
        color: #555555;
        background-color: #f8f8f8;
        border: 1px solid #adadad;
    }
/* Content */
.content {
    background-color: #555555;
    width: 100%;
    height: auto;
    margin: 10px 0;
    min-height: 500px;
}

.coursecontrol {
    margin-left: auto;
    margin-right: auto;
}

progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    width: 250px;
    height: 20px;
}

    progress[value]::-webkit-progress-bar {
        background-color: #eee;
        border-radius: 2px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }

    progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #006838, #8DC63F);
        border-radius: 2px;
        background-size: 35px 20px, 100% 100%, 100% 100%;
    }

.coursecontrol ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #f8f8f8;
}

.coursecontrol li {
    float: left;
}

    .coursecontrol li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

        .coursecontrol li a:hover {
            background-color: orange;
        }

.btnMov {
    background-color: orangered;
}

.btnRes {
    background-color: dodgerblue;
}

.btnMov li a:hover {
    background-color: orange;
}

.courseicon {
    display: inline;
    width: .9em;
    margin: 0 3px;
}

/* Objetivos */

.objetivos ol {
    list-style: none;
    counter-reset: my-awesome-counter;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

    .objetivos ol li {
        counter-increment: my-awesome-counter;
        display: flex;
        width: 50%;
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

        .objetivos ol li::before {
            content: "0" counter(my-awesome-counter);
            font-weight: bold;
            color: #1276BD;
            font-size: 3rem;
            margin-right: 0.5rem;
            font-family: 'Open Sans', sans-serif;
            line-height: 1;
        }

/* Actividades */

.actividades ol {
    list-style: none;
    counter-reset: my-awesome-counter;
}

    .actividades ol li {
        counter-increment: my-awesome-counter;
    }

        .actividades ol li::before {
            content: counter(my-awesome-counter) ". ";
            color: #1276BD;
            font-weight: bold;
        }



/* Footer */
.footer {
    /*position:fixed;
    bottom: 0;
    background: #fff;
    border-bottom: 10px solid #77A22D;
    width:100%;
    padding: 2em;*/
    background: #fff;
    border-bottom: 10px solid #77A22D;
    padding: 2em;
    position: absolute;
    width: 100%;
}

    .footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.columna {
    padding: 0;
}

    .columna li a {
        color: #555555;
        font-size: 0.8em;
    }

.columnaDiv {
    padding: 0;
    padding-bottom: 1em;
    position: relative;
    border-bottom: 1px solid #adadad;
}

    .columnaDiv:before {
        content: " ";
        position: absolute;
        width: 90;
    }

.selectorDiv {
    text-align: right;
    margin-top: 1em;
    margin-bottom: 1em;
}

.custom-select {
    width: 13em;
    padding-left: 2.5em;
    position: relative;
}

.legales ul li {
    display: inline-block;
    margin-right: 1em;
    margin-left: 1em;
    vertical-align: bottom;
}

.legales {
    padding-top: 2em;
}

    .legales img {
        width: 10em;
    }

.legalesLeft {
    text-align: left;
}

.legalesRight {
    text-align: right;
    padding-top: 0.35em;
}

/*  */
.form-icon {
    position: relative;
}

    .form-icon i {
        position: absolute;
        top: 50%;
        color: #333;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        pointer-events: none;
    }

        .form-icon i ~ .form-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

    .form-icon .left {
        left: 20px;
    }

    .form-icon .right {
        right: 20px;
    }

    .form-icon .left ~ .form-control {
        padding-left: 55px;
    }


    .form-icon .right ~ .form-control {
        padding-right: 55px;
    }

        .form-icon .right ~ .form-control.is-valid, .form-icon .right ~ .form-control.is-invalid {
            padding-right: 95px;
            background-position: center right calc(55px);
        }

.textarea {
    resize: none;
    height: 6em !important;
    padding: 0.5rem !important;
}

.m1 {
    margin-bottom: 1em;
}

.m2 {
    margin-bottom: 2em;
}

.btnGeneral {
    background: #77A22D; /* VERDE */
    color: #fff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: 0;
}

    .btnGeneral:hover {
        background: #668120;
        color: #fff;
    }

.b2, .b3, .b4, .b5 {
    display: none;
}

.pad1 {
    padding: 1em;
}
/* MEDIA QUERIES */
/* MEDIA QUERIES */
/* MEDIA QUERIES */
/* MEDIA QUERIES */
/* MEDIA QUERIES */
/* MEDIA QUERIES */

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    /* navbar */
    .navbar .text-right .nav-item {
        text-align: center !important;
    }

    .bg-light {
        background: rgba(2,6,50,0.8) !important; /* AZUL OSCURO */
    }
    /* home */
    .hero {
        padding-top: 8em;
        background: url(../img/bg-hero-01.jpg) no-repeat bottom left;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: #f0eeed;
        border-bottom: 7px solid #77A22D;
    }


    .courseNavDiv {
        padding: 4em 0;
        text-align: left;
    }
}

@media only screen and (max-width : 768px) {
    .hero {
        padding-top: 8em;
        background: url(../img/bg-hero-01.jpg) no-repeat bottom left;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: #f0eeed;
        border-bottom: 7px solid #77A22D;
    }

    .heroContent {
        background-color: rgba(2,7,50,0.5);
        padding: 10px;
    }

    .objetivos ol li {
        width: 100%;
    }
}


/******************ESTILOS NUEVOS**********************/
.modalBloqueo {
    position: fixed;
    z-index: 10000;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}

    .modalBloqueo div {
        z-index: 1000;
        margin: 25% auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
/*Altura de controles de curso*/
.divLineNombre {
    height: 3em;
}

.divLineDescripcion {
    height: 5em;
}

.HeaderStyleGrid {
    font-family: Noto Sans, Sans-Serif, Verdana;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF !important;
    background-color: #3597D4;
    height: 40px !important;
}

.AlternatingRowStyle {
    font-family: Noto Sans, Sans-Serif, Verdana;
    font-weight: normal;
    color: #000000;
    text-align: center;
    background-color: #EDEDED;
    padding: 5px 5px 5px 5px !important;
}

.RowStyle {
    font-family: Noto Sans, Sans-Serif, Verdana;
    font-weight: normal;
    color: #00547C;
    text-align: center;
    background-color: #FFFFFF;
    padding: 5px 5px 5px 5px !important;
}



.divFondo {
    background-color: white;
}


/*Inicia InfluenceID*/
.sPrincipal {
    /*float: left;*/
    height: 80px;
    margin-top: 30px;
    margin-right: 100px;
}

.sAccion {
    /*width:350px;*/
    border-radius: 10px;
    background-color: #EDF5Fa;
    height: fit-content;
}

.hAccion {
    text-align: center;
}

.wrap {
    width: 90%;
    max-width: 1000px;
    margin: 0 20px;
    /*margin: auto;*/
}

.formulario h2 {
    font-size: 16px;
    color: #001F3F;
    margin-bottom: 20px;
    margin-left: 20px;
}

.formulario > div {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}


/**/


.modal-body-ajust {
    height: 1000px;
    width: 100%;
    overflow-y: auto;
}


.modal-dialog {
    max-width: 2300px;
    margin: 2rem auto;
}


.modal-dialog-a {
    max-width: 1100px;
    margin: 2rem auto;
}

.modal-body-dd {
    height: 500px;
    width: 100%;
    overflow-y: auto;
}

.modal-body-se {
    height: 500px;
    width: 1000px;
}

.modal-dialog-sub {
    max-width: 1300px;
    margin: 2rem auto;
}

.mitabla {
   
}

.mitabla tbody tr {
    background: #F0F8FF !important;
    color: black !important;
}

    .mitabla tbody tr:nth-child(even) {
        background: #ADD8E6 !important;
        color: black !important;
    }

    .mitabla thead tr th {
        color: white;
        background: #3597D4 !important;
        text-align: center;
        padding: 10px;
        /*border: 3px solid;*/
    }

.mitabla tbody tr td {
    /*text-align: center;*/
    /*border: 3px solid;*/
    padding:5px;
}


/*.mitabla thead tr th#crojo {
        background: red !important;
    }

    .mitabla thead tr th#cblue {
        background: blue !important;
    }

    .mitabla thead tr th#cgray {
        background: gray !important;
    }

    .mitabla thead tr th#cblack {
        background: black !important;
    }*/

/*   .size  {
        width: 330px;
    }
*/

.formatoReporte .inputNombre {
    width: 300px;
    font-size: 30px;
    padding: 12px;
}

.label-large {
    vertical-align: super;
    font-size: large;
}

/*.multiselect.dropdown-toggle {
    background-color: #dbd8d8 !important;
    color: black !important;
    border: #c92727 !important;
    box-shadow: none !important;
    text-shadow: 0 -1px 0 #d8c8c8 !important;
    text-align: left;
}
*/
/*



.radiobtn:checked + span::before {
    content: '';
    border: 2px solid #fff;
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #c3e3fc;
}*/


/*.formulariochek .checkbox label {
    width: 17px;
    height: 17px;*/
/*    display: inline-block;
    position: relative;
    font-size: 1em;
    border-radius: 3px;
    cursor: pointer;*/
}
/*
.formulario .checkbox label:before{
    content: "";
    width:17px;
    height: 17px;

}*/



/*.checkbox label:before{*/
/*    color:blueviolet;
    background: rgba(0,0,0,.1);
    padding: 5px 15px;
    position: relative;
    font-size: 1em;
    border-radius: 3px;
    cursor: pointer;*/
/*content: "";
    width: 17px;
    height: 17px;
    display: inline-block;
    background: none;
    border: 3px solid #0774D9;
    border-radius:50%;
    position: absolute;
    left: 17px;
}*/

/*.modal .modal-body { 
    max-height: 550px;
    overflow-y: auto;
}

body .modal-dialog { 
    max-width: 95%;
    width: auto !important;
    display: inline-block;
}
.modal {
    z-index: -1;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.modal-open .modal {
    z-index: 1050;
}*/