/******* FORMULARIO DE AUTENTICACIÓN ******/

.white-space {
    padding: .4rem;
}

/*****************************************************/

html, body {
    line-height: 1.1;
}

#CabeceraCanal1_CabeceraCanal .cabeceraCanaltexto {
    line-height: 2.5;
}

    #CabeceraCanal1_CabeceraCanal .cabeceraCanaltexto a:hover {
        color: white;
    }

#cabeceramenuizquierdointerior {
    display: none;
}

.contenidos, .contenidosHome {
    min-height: 15em;
    margin: 0 0.75em 0 16em !important;
}

.cabeceraDerecha {
    display: none;
    visibility: hidden;
}

.card-header {
    padding: .65rem;
    color: white;
    background-color: #34659a;
}

.modal-header {
    font-size: 0.95rem;
    padding-left: 1.0rem;
    padding-bottom: 0.65rem;
    padding-top: 0.65rem;
    color: white;
    background-color: #34659a;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
}

.close {
    color: white;
}
.capaContenidos {
    font-size: 1em;
    /*min-height: 40em;*/
    float: left;
    width: 100%;
    background-color: white;
    padding: 0.5em 0 0.5em 0;
}

    .capaContenidos input {
        border-radius: 0.2rem !important;
    }

    .capaContenidos h1 {
        font-size: 1rem;
        color: black;
    }

    .capaContenidos h2 {
        font-size: 1.25rem;
    }

    .capaContenidos h3 {
        font-size: 1.20rem;
    }

    .capaContenidos h4 {
        font-size: 1.10rem;
    }

    .capaContenidos h5 {
        font-size: 0.95rem;
    }

    .capaContenidos div > ul > li > label,
    .capaContenidos div > ul > li > * > label,
    .capaContenidos li > ul > li > label {
        font-weight: 700;
    }

.card {
    padding: unset;
    margin-bottom: 0.75em;
}

.card-title {
    list-style-type: none;
}

.card-body {
    font-size: 0.85rem;
    padding: 1rem;
}

    .card-body > * > ul {
        list-style-type: none;
    }

.list-group {
    font-size: 0.85rem;
}

.list-group-item.active {
    background-color: rgb(198, 207, 216);
    border-color: rgb(198, 207, 216);
    color: #212529;
}

.list-group-item-action {
    color: #212529;
}

a {
    color: #3142DD;
}

h1 {
    font-size: 1rem;
    color: black;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.20rem;
}

h4 {
    font-size: 1.10rem;
}

h5 {
    font-size: 0.95rem;
}

.icon-input-btn {
    display: inline-block;
    position: relative;
    color: white;
}

    .icon-input-btn:hover {
        display: inline-block;
        position: relative;
        color: #316f99;
    }

    .icon-input-btn input[type="submit"] {
        padding-left: 2em;
    }

    .icon-input-btn .fa {
        display: inline-block;
        position: absolute;
        left: 0.65em;
        top: 30%;
    }

div.form-group > span > .btn-sm,
div.form-group > a.btn-sm {
    margin-right: 5px;
}

.table {
    overflow-x: auto;
    border: 0;
    border-color: none;
}

    .table th {
        vertical-align: middle !important;
        font-weight: 500;
        background-color: #e9ecef;
        white-space: nowrap;
    }

    .table td {
        vertical-align: middle;
    }

/*botones en cabecera tarjetas bootstrap*/
.btn-link-card-header {
    background-color: white;
    float: right;
    margin: 0 0 0 0;
    padding: 0 10px;
}

.bg-primary {
    background-color: #316f99 !important;
}

.btn-primary {
    background-color: #316f99 !important;
    border-color: #316f99 !important;
    font-size: .8rem !important;
}

    .btn-primary:hover {
        background-color: white !important;
        border-color: #316f99 !important;
        color: #316f99 !important;
        font-size: .8rem !important;
    }

.btn-danger {
    font-size: .8rem !important;
}

    .btn-danger:hover {
        background-color: white !important;
        border-color: #dc3545 !important;
        color: #dc3545 !important;
        font-size: .8rem !important;
    }

.btn-secondary {
    font-size: .8rem !important;
}

    .btn-secondary:hover {
        background-color: white !important;
        border-color: #6c757d !important;
        color: #6c757d !important;
        font-size: .8rem !important;
    }

.sm-auto {
    background-color: #ADC5D6 !important;
    border-color: #ADC5D6 !important;
}

.custom-control-label::before {
    top: 0 !important;
}

.custom-control-label::after {
    top: .005rem !important;
}

div > ul > li > label,
div > ul > li > * > label,
li > ul > li > label {
    font-weight: 700;
}

.confirm-hr {
    margin: 5px 0 5px;
}

.confirm-list {
    margin-left: 10px;
}

div.confirm-list > ul {
    list-style-type: none;
}

div.confirm-list label {
    margin-top: .5rem;
    margin-bottom: 0rem;
}

div.confirm-list span {
    display: inline-block;
    margin-top: .5rem;
}

div.confirm-table label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

div.confirm-table span strong {
    display: inline-block;
    margin-bottom: 0.5rem;
}

div.card-header.collapsed {
    border-radius: calc(.25rem - 1px);
}

i.fa {
    font-size: .75rem;
}

.form-group:last-child,
.form-group:last-of-type {
    margin-bottom: 0;
}

.error-list {
    margin-bottom: 0;
}

div.form-group > div.justify-content-between > * > .fas {
    color: #34659a;
}

#CabeceraCanal1_CabeceraCanal .cabeceraCanaltexto {
    font-size: 1rem;
    font-weight: bold;
    line-height: 2;
}

.ui-autocomplete {
    z-index: 5000;
}

.button-column {
    min-width: 95px;
}

a.form-control.form-control-sm.disabled-anchor {
    background: #e9ecef;
}

#btnRepeaterSave {
    min-width: 80px;
}

.btn-loading-icon {
    max-width: 16px;
    margin-top: -3px;
}

.hidden {
    display: none;
}

/* Spinner vista enviar */
.sk-folding-cube {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

    .sk-folding-cube .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        .sk-folding-cube .sk-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #333;
            -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
            animation: sk-foldCubeAngle 2.4s infinite linear both;
            -webkit-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
        }

    .sk-folding-cube .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }

    .sk-folding-cube .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }

    .sk-folding-cube .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }

    .sk-folding-cube .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-folding-cube .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .sk-folding-cube .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

.breadcrumbProc {
    /*centering*/
    /*display: inline-block;*/
    /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
    overflow: hidden;
    border-radius: 5px;
    /*counter-reset: flag;*/
    background-color: white;
    padding: 0;
}

    .breadcrumbProc a {
        text-decoration: none;
        outline: none;
        display: block;
        float: left;
        /*font-size: 12px;*/
        line-height: 36px;
        color: white;
        /*need more margin on the left of links to accomodate the numbers*/
        padding: 0 10px 0 30px;
        background: #666;
        background: linear-gradient(#666, #333);
        position: relative;
        border: 1px solid #cbcbcb;
    }
        /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
        .breadcrumbProc a:first-child {
            padding-left: 20px;
            border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
        }

            .breadcrumbProc a:first-child:before {
                left: 14px;
            }

        .breadcrumbProc a:last-child {
            border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
            padding-right: 20px;
        }

        /*hover/active styles*/
        .breadcrumbProc a.active, .breadcrumbProc a:hover {
            background: #333;
            background: linear-gradient(#333, #000);
        }

            .breadcrumbProc a.active:after, .breadcrumbProc a:hover:after {
                background: #333;
                background: linear-gradient(135deg, #333, #000);
            }

        /*adding the arrows for the breadcrumbs using rotated pseudo elements*/
        .breadcrumbProc a:after {
            content: '';
            position: absolute;
            top: 0;
            right: -18px; /*half of square's length*/
            /*same dimension as the line-height of .breadcrumb a */
            width: 36px;
            height: 36px;
            /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
            transform: scale(0.707) rotate(45deg);
            /*we need to prevent the arrows from getting buried under the next link*/
            z-index: 1;
            /*background same as links but the gradient will be rotated to compensate with the transform applied*/
            background: #666;
            background: linear-gradient(135deg, #666, #333);
            /*stylish arrow design using box shadow*/
            box-shadow: 1px -1px 0 1px #cbcbcb, 1px -1px 0 1px #cbcbcb;
            /*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
            border-radius: 0 5px 0 50px;
        }
        /*we dont need an arrow after the last link*/
        .breadcrumbProc a:last-child:after {
            content: none;
        }
        /*we will use the :before element to show numbers*/
        .breadcrumbProc a:before {
            /*content: counter(flag);
	        counter-increment: flag;*/
            /*some styles now*/
            border-radius: 100%;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin: 8px 0;
            position: absolute;
            top: 0;
            left: 30px;
            background: #444;
            background: linear-gradient(#444, #222);
            font-weight: bold;
        }


.flat a, .flat a:after {
    background: white;
    color: black;
    transition: all 0.5s;
}

    .flat a:before {
        background: white;
        box-shadow: 0 0 0 1px #ccc;
    }

    .flat a:hover, .flat a.active,
    .flat a:hover:after, .flat a.active:after {
        background: #cce5ff;
    }

    /*Aqui se cambia el azul de los enlaces breadcrumb visitados*/
    .flat a.visited, .flat a.visited:after {
        background: #91c7ff;
    }

.fa-home {
    font-size: .9rem;
}

#procedureInfo a {
    font-weight: bolder;
}

input.custom-file-input {
    padding: .25rem 0.5rem;
}

.input-validation-error,
.input-validation-error ~ .custom-file-label {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.form-control.input-validation-error ~ .invalid-feedback {
    display: block;
}


.row-gap-3 {
    row-gap: 0.75rem;
}

/*capa para la columna de la izquierda*/
.menuIzquierdo {
    float: left;
    width: 15.875em;
    margin-left: -100%;
    min-height: 15em;
    padding: 0.5em 0.75em 0.5em 0.75em;
}

.page-header {
    margin-top: 0.5em;
}