:root {
    --primary-color: #003869;
    --primary-color-rgb: 74, 124, 210;
    --secondary-color: #dd3399;
    --secondary-color-light: #dd3399;
    --secondary-color-rgb: 59, 157, 31;
    --primary-color-light: #80abcd;
    --primary-color-lighter: #e5eef5;
    --gray-color: #868686;
    --gray-color-light: 3#e1e1e1;
    --light-color: #f7f7f7;
    /*Plantilla*/
    --heading-font-color: var(--primary-color);
    --logo-footer-width: 150px;
    --bs-border-radius: 3.375rem;
    --logo-width: 180px;
    --h3-line-height: 1em;
    --logo-footer-width: 250px;
}

h3 {
    line-height: 1em;
}

.w-70 {
    width: 70%;
}

section {
    padding: 20px 0 90px 0;
}

#subheader {

    padding: 40px 0 40px 0;
    background: #003869;
}

#subheader h1 {
    margin: 0;
    color: white;
}

.crumb li {
    color: white;
}

.crumb li.active {

    color: white;
}

.crumb a {
    color: #7faacc;
    text-decoration: none;
}

.crumb li:after {

    color: #dd3399;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: none;
}

.custom-checkbox p {
    margin: 0;
}

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 200;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 5px;
    background-color: #eee;
}

.custom-checkbox:hover input~.checkmark {
    background-color: #ccc;
}

.custom-checkbox input:checked~.checkmark {
    background-color: #d62991;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;


}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 9px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.custom-checkbox a {
    color: white;
    font-weight: 400;
}

input:-webkit-autofill {
    background: linear-gradient(332deg, #ffffff0f, transparent);
    color: #var(--primary-color) !important;
    /* Quita el fondo amarillo */
    -webkit-box-shadow: 0 0 0 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

p.small {
    line-height: 1.3em;
    font-weight: 300;
    font-size: 80%;
}

.d-flex {
    white-space: normal;
}

.de-loader {
    background: var(--primary-color);
}

.text-white {
    color: white !important;
}

html,
body,
form {
    height: 100vh !important;
    display: flex;
    flex-direction: column;

}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

h4 {
    color: var(--gray-color);
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.3;
}

.fw-300 {
    font-weight: 300;

}

@media(max-width: 767px) {
    .p-40 {
        padding: 20px;
    }
}

a {
    color: var(--secondary-color);
}

.color-secondary {
    color: var(--secondary-color);
}

.bg-light {
    background: var(--light-color);
}


.bg-lighter {
    background: var(--primary-color-lighter);
}

.bg-secondary {
    background: var(--light-color);
}

.btn-outline-red {
    border: 2px solid #d75454;
    color: #d75454;
    text-transform: uppercase;
    padding: 15px 50px;
}

.alert {
    text-align: center;
    font-weight: 300;
    text-wrap: auto;
    line-height: 1.3;
}

/* botones */
.btn-secondary {
    background: linear-gradient(180deg, var(--secondary-color), #bc0071);
    color: white;
    border-radius: 60px;
    border: 2px solid var(--secondary-color);
    text-transform: uppercase;
    padding: 15px 50px;


    font-size: 13px;


    /*  box-shadow: 0 0 5px #000000cc;*/
}

.btn-secondary:hover {
    color: white;
    background: linear-gradient(0deg, var(--secondary-color), #bc0071);
    border: 2px solid var(--secondary-color);
}

a.btn-main:hover,
.btn-main:hover,
a.btn-main.btn-line:hover {
    color: #fff;
    background: #dd3399;
}

.fw-200 {
    font-weight: 200 !important;
}

/* Formularios */
.login-page .form-control {
    background: linear-gradient(332deg, #ffffff0f, transparent);
    border: 1px solid #ffffff30;
    border-radius: 8px;
    height: 52px;
    color: white;
    padding: 0px 20px;
    margin: 8px 0;
    position: relative;
}

.login-page .form-control:focus {
    color: white !important;
    background-color: #ffffff21;
    border-color: #34455d59;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid #34455d59;
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff21 inset;
    transition: background-color 5000s ease-in-out 0s;
}



.form-control {
    background: white;
}

main {

    margin-top: 115px;
}



.wrapper {
    flex: 1;
    display: flex;
    width: 100vw;
    flex-direction: column;
}

@media(max-width: 992px) {
    main {

        margin-top: 69px;
    }
}

.gap-12 {
    gap: 12px;
}

.gap-8 {
    gap: 8px;
}

.bg-color-cfc {

    background: #679a32;

}

.bloque-disabled {
    position: relative;
}

.bloque-disabled:before {
    content: '';
    font-size: 19px;
    color: #10244b;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    align-items: center;
    top: 0;
    z-index: 99;
    font-weight: 600;
    display: flex;
    text-align: center;
    justify-content: center;
    background: #f1f1f1a3;
}

.bloque-disabled:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #d2d2d233;
    position: absolute;
    left: 0;
    bottom: 0;
    backdrop-filter: blur(2px);
}

/* header */
header.global {
    background: linear-gradient(354deg, #175d9aeb, #063b68eb);
    backdrop-filter: blur(6px);
    -webkit-box-shadow: 0 10px 30px rgb(0 19 87 / 6%);
    -moz-box-shadow: 0 10px 30px rgb(0 19 87 / 6%);
    box-shadow: 0 10px 30px rgb(0 19 87 / 6%);
    border-radius: 0;
    margin: 0;
    width: 100%;
}

.bg-hero {
    filter: hue-rotate(186deg) blur(16px);
}

.login-page {

    flex: 1;
    background: url(../images/bg_login.jpg) no-repeat center center;
    background-size: cover;

    justify-content: center;
    display: flex;
    flex-direction: column;



}

.title-selector {
    font-size: 23px;
    line-height: 1.1em;
}

@media(min-width: 768px) {
    .login-container {
        padding: 40px 30px;
    }

    .title-selector {
        font-size: var(--h3-font-size);
        line-height: 1.1em;
    }

    .btn-secondary {
        font-size: 18px;
    }
}

.login-container {

    padding: 0;
    /*max-width: 460px;*/
    margin: 0 15px;
    border-radius: 12px;
}

.gradient-bg-1 {

    background-size: cover;
    background-repeat: no-repeat;
    background: linear-gradient(89deg, #003767e6, #2e89c5d6);

    backdrop-filter: blur(4px);
    box-shadow: 0 0 16px #0303033d, inset 0 -2px 0 #0000002b;
}

footer {
    padding: 50px 0 0 0;
    background: var(--primary-color);
}


.subfooter {
    font-size: 80%;
}

/*ponentes*/
.filiacion-ponente {}

.datos-ponente h4 {
    color: var(--primary-color-light) !important;
    font-weight: 600;
}

.datos-ponente h4+p {
    font-weight: 300;
    font-size: 80%;
    line-height: 1.3;
}

/* Temario */
.box-tema p {
    flex: 1;
}

.marca-progreso {
    position: absolute;
    top: 24px;
    right: 24px;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #92978914;
    color: #c8d3e6;
    box-shadow: 0 0 0px 5px #cdcdcd91;
}

.marca-progreso i:before {
    content: "\f017";
}


.progreso-completado .marca-progreso {
    background: #0080008f;
    color: #ffffff;
    box-shadow: 0 0 0px 5px #77d57791;
}



.progreso-completado .marca-progreso i:before {
    content: "\f00c";
}

.ico-box {
    width: 36px;
    height: 36px;
    border-radius: 60px;
    background: #ddd;
    padding: 0;
    box-shadow: 0 0 0px 4px #f1f1f1;
    font-size: 15px;
    line-height: 36px;
    text-align: center;

}

/* Unidad */
.sidebar-unidad .titulo-tema {
    width: calc(100% - 12px);
    margin-left: 12px;
    display: block;
    font-size: 87%;
    text-wrap: initial;
    line-height: 1.3;
    color: #193752;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-weight: 300;
}

.listado-interior-unidad li p {
    text-wrap: initial;
    line-height: 1.3em;
    padding-right: 20px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 300;
}

.listado-interior-unidad li {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.listado-interior-unidad li i {
    color: #ddd;

}

.listado-interior-unidad li i.fa.fa-check {

    color: #5dac61;
}

.listado-interior-unidad li a>i {
    width: 20px;
}

.listado-interior-unidad .ico-progreso-tema i {
    width: 24px;
    height: 24px;
    border-radius: 60px;
    background: #ddd;
    padding: 5px;
    box-shadow: 0 0 0px 4px #f1f1f1;
    font-size: 15px;


}


.listado-interior-unidad .ico-progreso-tema i:before {
    content: "\f017";
    color: white;
}


.listado-interior-unidad .progreso-completado .ico-progreso-tema i:before {
    content: "\f00c";
    color: green;
}




.progreso-completado i,
.progreso-completado p.titulo-tema {
    color: green;
}

.btn-navegacion {
    display: flex;
    height: 100%;
}

.btn-navegacion>div {
    gap: 20px;
}

.btn-navegacion h4,
.btn-navegacion i {
    transition: all 0.3s ease;
}

.btn-navegacion i {
    border-radius: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #92978914;
    color: #c8d3e6;
    box-shadow: 0 0 0px 5px #cdcdcd91;
    flex: 0 0 40px;
}

.btn-navegacion:hover h4 {
    color: var(--secondary-color);
}

.btn-navegacion:hover i {
    box-shadow: 0 0 0px 10px #cdcdcd91;
    background: white;
    color: var(--secondary-color);
}

.full-height {
    height: calc(100vh - 300px);
}

.imgCurso {
    width: 100%;
}


.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
    background-color: #0a4372;
    /* border: 0px; */
}

iframe {
    width: 100%;
    /* height: 100vh;*/
    border: none;
}