



.sombrita{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px!important;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

.mAzulVerde{
    background-image: radial-gradient( circle 1292px at -13.6% 51.7%,  rgba(0,56,68,1) 0%, rgba(163,217,185,1) 51.5%, rgba(255,252,247,1) 88.6% );
    color:#fff;
}

.negroGrisAzulado {
    background-image: linear-gradient(to right, rgba(35, 65, 84, 1) 0%, rgba(46, 99, 114, 1) 50%, rgba(68, 84, 84, 1) 100%);
    color: #fff;
}
.negroGrisAzulado2{
    background-image: radial-gradient(circle at 20% 30%, rgba(26, 27, 44, 1) 0%, rgba(40, 82, 108, 1) 40%, rgba(68, 84, 84, 1) 100%);
    color: #fff;
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

.spanArbolito{
    background-image: linear-gradient(#f7f8fa ,#e7e9ec);
    border-color: #adb1b8 #a2a6ac #8d9096;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
    box-sizing: border-box;
    color: #333333;
    cursor: pointer;
    display:-webkit-box;
    font-family: "Amazon Ember",Arial,sans-serif;
    font-size: 14px;
    height: 29px;
    font-size: 13px;
    outline: 0;
    overflow: hidden;
    padding: 5px 11px;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

.fondoImportante {
    background-image: linear-gradient( 92.7deg,  rgba(245,212,212,1) 8.5%, rgba(252,251,224,1) 90.2% );
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
.fondoHombre{
    background-image: radial-gradient( circle 1292px at -13.6% 51.7%,  rgba(0,56,68,1) 0%, rgba(163,217,185,1) 51.5%, rgba(255,252,247,1) 88.6% );
    color:#fff;
}

.fondoMujer{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(178,0,184,1) 0%, rgba(71,0,159,1) 90% );
    color:#fff;
}
.general {
    background-image: linear-gradient( 109.6deg,  rgba(34,126,34,1) 11.2%, rgba(99,162,17,1) 91.1% );
    color: #fff!important;
}

.male {
    background-image: linear-gradient( 109.6deg,  rgba(223,234,247,1) 11.2%, rgba(244,248,252,1) 91.1% )!important;
    color: #000!important;
}


.female {
    background-image: radial-gradient(
            circle farthest-corner at 10% 20%,
            rgba(178,0,184,0.2) 0%,         /* Antes 1 */
            rgba(71,0,159,0.2) 90%
    );
    color: #000!important;
}


.junior{
    background-image: radial-gradient( circle 400px at 6.8% 8.3%,  rgba(255,244,169,1) 0%, rgba(255,244,234,1) 100.2% )!important;
    color: #000!important;
}

.master{
    background-image: linear-gradient( 110.3deg,  rgba(73,93,109,1) 4.3%, rgba(49,55,82,1) 96.7% )!important;
    color:#ffffff!important;
}
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
.fondoVacio{
    background-image: none;
}
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */

.fondoNegro{
    background-image: radial-gradient( circle farthest-corner at 60% 90%,  rgba(69,86,102,1) 10%, rgba(34,34,34,1) 60% )!important;
    color:#fff!important;
}
.fondoNegro2{
    background-image: radial-gradient( circle farthest-corner at 80% 90%,  rgba(69,86,102,1) 0%, rgba(34,34,34,1) 90% )!important;
    color:#fff!important;
}
.fondoNegro3{
    background-image: linear-gradient( 109.6deg,  rgba(20,30,48,1) 11.2%, rgba(36,59,85,1) 91.1% )!important;
    color:#fff!important;
}
/* ---------------------------------------------------------------------- */
.fondoTarjetaAvion{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(38,51,97,1) 0%, rgba(65,143,222,1) 79% ) !important;
}
/* ---------------------------------------------------------------------- */
.fondoAzul{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(38,51,97,1) 0%, rgba(65,143,222,1) 79% ) !important;
    color:#fff!important;
}
.fondoAzul2{
    background-image: radial-gradient( circle farthest-corner at 0.5% 97.2%,  rgba(62,134,211,1) 0%, rgba(147,196,255,1) 100.2% )!important;
    /*background-image: linear-gradient( 178.7deg,  rgba(126,184,253,1) 5.6%, rgba(2,71,157,1) 95.3% );*/
    color:#fff!important;

}
.fondoAzul3{
    background-image: linear-gradient( 89.5deg,  rgba(131,204,255,1) 0.4%, rgba(66,144,251,1) 100.3% )!important;
    color:#fff!important;
}
.fondoAzulClaro{
    background-image: linear-gradient( 109.6deg,  rgba(223,234,247,1) 11.2%, rgba(244,248,252,1) 91.1% )!important;
}
.fondoAzulOscuro{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(38,51,97,1) 0%, rgba(65,143,222,1) 79% )!important;
    color:#fff!important;
}
.fondoAzulClaro2{
    background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%)!important;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
.fondoBlanco{
    background-color: #ffffff;
    background-image: linear-gradient(179deg, #ffffff 0%, #ffffff 50%, #e3e3e3 100%);
}
.fondoGris{
    background-image: radial-gradient( circle 343px at 46.3% 47.5%,  rgba(242,242,242,1) 0%, rgba(241,241,241,1) 72.9% )!important;
    color:#333!important;
}
.fondoGris2{
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%)!important;
}
.fondoGris3{
    background-color: #CDDCDC!important;
    background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%)!important;
    background-blend-mode: screen, overlay;
}
.fondoGris4{
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%)!important;
}

.fondoGris5{
    background-image: radial-gradient( circle farthest-corner at 18.7% 37.8%,  rgba(250,250,250,1) 0%, rgba(225,234,238,1) 90% )!important;
    color:#333!important;
}
.fondoGrisOscuro{
    background-image: linear-gradient( 110.3deg,  rgba(73,93,109,1) 4.3%, rgba(49,55,82,1) 96.7% )!important;
    color:#fff!important;
}

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
.fondoMarronClaro{
    background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%)!important;
    background-blend-mode: screen;
}
.fondoMarronClaro2{
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%)!important;
}
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */

.fondoVerde{
    background-image: radial-gradient( circle 935px at 3.1% 5.8%,  rgba(182,255,139,1) 0%, rgba(8,88,127,1) 100.2% )!important;
}
.fondoVerde2{
    background-image: radial-gradient( circle 931px at 7.5% 99.5%,  rgba(49,98,122,1) 0%, rgba(25,161,185,1) 60.7%, rgba(42,174,195,1) 100.2% )!important;
    color:#fff!important;
}
.fondoVerde3{
    background-image: linear-gradient( 109.6deg,  rgba(34,126,34,1) 11.2%, rgba(99,162,17,1) 91.1% );
    color:#fff!important;
}
.fondoVerdeClaro{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(234,249,249,0.67) 0.1%, rgba(239,249,251,0.63) 90.1% )!important;
}
.fondoAmarillo{
    background-image: radial-gradient( circle 400px at 6.8% 8.3%,  rgba(255,244,169,1) 0%, rgba(255,244,234,1) 100.2% )!important;
}
.fondoRojo{
    background-image: radial-gradient( circle farthest-corner at 81.9% 53.5%,  rgba(173,53,53,1) 16.3%, rgba(240,60,60,1) 100.2% )!important;
    color:#fff!important;
}
.fondoRojo2{
    background-image: linear-gradient(to right, #E44D26 0%, #F16529 51%, #E44D26 100%)
    color:#fff!important;
}
.fondoRojo3 {
    background-image: linear-gradient(
            to right,
            rgba(228, 77, 38, 0.2) 0%,   /* #E44D26 con 20% opacidad */
            rgba(241, 101, 41, 0.2) 51%, /* #F16529 con 20% opacidad */
            rgba(228, 77, 38, 0.2) 100%  /* #E44D26 con 20% opacidad */
    );
    color: #000 !important;
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
.fondoNaranja{
    background-color: #ffcb59;
    background-image: linear-gradient(352deg, #ffcb59 0%, #be8e00 100%)!important;
    color:#fff!important;
}

.fondoNaranja2, .fondoModificar{
    background-color: #FBAB7E;
    background-image: linear-gradient(254deg, #FBAB7E 0%, #f6eccf 50%, #ffffff 100%);
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/


.fondoVioleta{
    background-image: radial-gradient( circle 705px at 3.8% 26.2%,  rgba(227,229,255,1) 0%, rgba(135,145,255,1) 100.2% )!important;
}
.fondoVioleta2, .fondoDuplicar{
    background-color: #4158D0;
    background-image: linear-gradient(238deg, #4158D0 0%, #eed1eb 46%, #ffffff 100%);
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

.arbolito {
    --spacing: 1.5rem;
    --radius: 10px;
}

.arbolito li {
    display: block;
    position: relative;
    padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.arbolito ul {
    margin-left: calc(var(--radius) - var(--spacing));
    padding-left: 0;
}

.arbolito ul li {
    border-left: 2px solid #ddd;
}

.arbolito ul li span {
    font-size: 0.9em;
}

.arbolito ul li:last-child {
    border-color: transparent;
}

.arbolito ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -2);
    left: -2px;
    width: calc(var(--spacing) + 2px);
    height: calc(var(--spacing) + 1px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
}


.arbolito summary {
    display: block;
    cursor: pointer;
}

.arbolito summary::marker,
.arbolito summary::-webkit-details-marker {
    display: none;
}

.arbolito summary:focus {
    outline: none;
}

.arbolito summary:focus-visible {
    outline: 1px dotted #000;
}

/*
.arbolito li::after,
.arbolito summary::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / 2 - var(--radius));
    left: calc(var(--spacing) - var(--radius) - 1px);
    width: calc(2 * var(--radius));
    height: calc(2 * var(--radius));
    border-radius: 50%;
    background: #ddd;
}/**/

.arbolito li::after,
.arbolito summary::before {
    content: '';
    display: block;
    position: absolute;
    background: #ddd;
}



.arbolito summary::before {
    z-index: 1;
    background: #696 url('expand-collapse.svg') 0 0;
}

.arbolito details[open] > summary::before {
    background-position: calc(-2 * var(--radius)) 0;
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

ol.material-chart,
ol.material-chart ol,
ol.material-chart li,
ol.material-chart li > div {
    position: relative;
}

ol.material-chart,
ol.material-chart ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

ol.material-chart {
    text-align: center;
}

ol.material-chart ol {
    padding-top: 1em;
}

ol.material-chart ol:before,
ol.material-chart ol:after,
ol.material-chart li:before,
ol.material-chart li:after,
ol.material-chart > li > div:before,
ol.material-chart > li > div:after {
    background-color: #b7a6aa;
    content: '';
    position: absolute;
}

ol.material-chart ol > li {
    padding: 1em 0 0 1em;
}

ol.material-chart > li ol:before {
    height: 1em;
    left: 50%;
    top: 0;
    width: 3px;
}

ol.material-chart > li ol:after {
    height: 3px;
    left: 3px;
    top: 1em;
    width: 50%;
}

ol.material-chart > li ol > li:not(:last-of-type):before {
    height: 3px;
    left: 0;
    top: 2em;
    width: 1em;
}

ol.material-chart > li ol > li:not(:last-of-type):after {
    height: 100%;
    left: 0;
    top: 0;
    width: 3px;
}

ol.material-chart > li ol > li:last-of-type:before {
    height: 3px;
    left: 0;
    top: 2em;
    width: 1em;
}

ol.material-chart > li ol > li:last-of-type:after {
    height: 2em;
    left: 0;
    top: 0;
    width: 3px;
}

ol.material-chart li > div {
    background-color: #fff;
    border-radius: 3px;
    min-height: 2em;
    padding: 0.5em;
}

/*** PRIMARY ***/
ol.material-chart > li > div {
    background-color: #1a2035;
    color: #fff;
    margin-right: 1em;
    font-size:1em;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}

ol.material-chart > li > div:before {
    bottom: 2em;
    height: 3px;
    right: -1em;
    width: 1em;
}

ol.material-chart > li > div:first-of-type:after {
    bottom: 0;
    height: 2em;
    right: -1em;
    width: 3px;
}

ol.material-chart > li > div + div {
    margin-top: 1em;
}

ol.material-chart > li > div + div:after {
    height: calc(100% + 1em);
    right: -1em;
    top: -1em;
    width: 3px;
}

/*** SECONDARY ***/
ol.material-chart > li > ol:before {
    left: inherit;
    right: 0;
}

ol.material-chart > li > ol:after {
    left: 0;
    width: 100%;
}

/**-----------------------------* SECONDARY *-----------------------------**/
ol.material-chart > li > ol > li > div {
    /*background-color: #48ABF7;*/

    background: rgb(195,195,195);
    background: linear-gradient(153deg, rgba(195,195,195,0.43017629415047265) 7%, rgba(255,255,255,1) 47%, rgba(229,227,227,0.4665908599768033) 98%);

    padding-top: 15px;
    width: 95%;
    color:#000;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    &:before {
        content: '';
        position: absolute;
        background: url(../assets/img/img-shadow.png);
        background-size: cover;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}

/*** TERTIARY ***/
ol.material-chart > li > ol > li > ol > li > div {
    width: 90%;

    background: rgb(86,160,222);
    background: linear-gradient(153deg, rgba(86,160,222,0.16126873112526263) 7%, rgba(201,231,237,0.5534255938703607) 47%, rgba(86,160,222,0.12205304485075286) 98%);
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;

}

/*** QUATERNARY ***/
ol.material-chart > li > ol > li > ol > li > ol > li > div {
    background: rgb(222,192,86);
    background: linear-gradient(153deg, rgba(222,192,86,0.5926412801448704) 7%, rgba(237,226,201,0.5534255938703607) 47%, rgba(222,181,86,0.4777953417695203) 98%);

    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

/*** QUINARY ***/
ol.material-chart > li > ol > li > ol > li > ol > li > ol > li > div {
    background: rgb(99,222,86);
    background: linear-gradient(153deg, rgba(99,222,86,0.5926412801448704) 7%, rgba(211,237,201,0.5534255938703607) 47%, rgba(103,222,86,0.4777953417695203) 98%);

}

/*** MEDIA QUERIES ***/
@media only screen and ( min-width: 64em ) {

    ol.material-chart {
        margin-left: -1em;
        margin-right: -1em;
    }

    /* PRIMARY */
    ol.material-chart > li > div {
        display: inline-block;
        float: none;
        margin: 0 1em 1em 1em;
        vertical-align: bottom;
    }

    ol.material-chart > li > div:only-of-type {
        margin-bottom: 0;
        width: calc((100% / 1) - 2em - 4px);
    }

    ol.material-chart > li > div:first-of-type:nth-last-of-type(2),
    ol.material-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
        width: calc((100% / 2) - 2em - 4px);
    }

    ol.material-chart > li > div:first-of-type:nth-last-of-type(3),
    ol.material-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
        width: calc((100% / 3) - 2em - 4px);
    }

    ol.material-chart > li > div:first-of-type:nth-last-of-type(4),
    ol.material-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
        width: calc((100% / 4) - 2em - 4px);
    }

    ol.material-chart > li > div:first-of-type:nth-last-of-type(5),
    ol.material-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
        width: calc((100% / 5) - 2em - 4px);
    }

    ol.material-chart > li > div:before,
    ol.material-chart > li > div:after {
        bottom: -1em!important;
        top: inherit!important;
    }

    ol.material-chart > li > div:before {
        height: 1em!important;
        left: 50%!important;
        width: 3px!important;
    }

    ol.material-chart > li > div:only-of-type:after {
        display: none;
    }

    ol.material-chart > li > div:first-of-type:not(:only-of-type):after,
    ol.material-chart > li > div:last-of-type:not(:only-of-type):after {
        bottom: -1em;
        height: 3px;
        width: calc(50% + 1em + 3px);
    }

    ol.material-chart > li > div:first-of-type:not(:only-of-type):after {
        left: calc(50% + 3px);
    }

    ol.material-chart > li > div:last-of-type:not(:only-of-type):after {
        left: calc(-1em - 3px);
    }

    ol.material-chart > li > div + div:not(:last-of-type):after {
        height: 3px;
        left: -2em;
        width: calc(100% + 4em);
    }

    /* SECONDARY */
    ol.material-chart > li > ol {
        display: flex;
        flex-wrap: nowrap;
    }

    ol.material-chart > li > ol:before,
    ol.material-chart > li > ol > li:before {
        height: 1em!important;
        left: 50%!important;
        top: 0!important;
        width: 3px!important;
    }

    ol.material-chart > li > ol:after {
        display: none;
    }

    ol.material-chart > li > ol > li {
        flex-grow: 1;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
    }

    ol.material-chart > li > ol > li:only-of-type {
        padding-top: 0;
    }

    ol.material-chart > li > ol > li:only-of-type:before,
    ol.material-chart > li > ol > li:only-of-type:after {
        display: none;
    }

    ol.material-chart > li > ol > li:first-of-type:not(:only-of-type):after,
    ol.material-chart > li > ol > li:last-of-type:not(:only-of-type):after {
        height: 3px;
        top: 0;
        width: 50%;
    }

    ol.material-chart > li > ol > li:first-of-type:not(:only-of-type):after {
        left: 50%;
    }

    ol.material-chart > li > ol > li:last-of-type:not(:only-of-type):after {
        left: 0;
    }

    ol.material-chart > li > ol > li + li:not(:last-of-type):after {
        height: 3px;
        left: 0;
        top: 0;
        width: 100%;
    }

}
/* â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“ */
/* â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“ */
/* â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“â€“ */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */


#wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 80em;
}

ol.departamentos-chart,
ol.departamentos-chart ol,
ol.departamentos-chart li,
ol.departamentos-chart li > div {
    position: relative;
}

ol.departamentos-chart,
ol.departamentos-chart ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

ol.departamentos-chart {
    text-align: center;
}

ol.departamentos-chart ol {
    padding-top: 1em;
}

ol.departamentos-chart ol:before,
ol.departamentos-chart ol:after,
ol.departamentos-chart li:before,
ol.departamentos-chart li:after,
ol.departamentos-chart > li > div:before,
ol.departamentos-chart > li > div:after {
    background-color: #b7a6aa;
    content: '';
    position: absolute;
}

ol.departamentos-chart ol > li {
    padding: 1em 0 0 1em;
}

ol.departamentos-chart > li ol:before {
    height: 1em;
    left: 50%;
    top: 0;
    width: 3px;
}

ol.departamentos-chart > li ol:after {
    height: 3px;
    left: 3px;
    top: 1em;
    width: 50%;
}

ol.departamentos-chart > li ol > li:not(:last-of-type):before {
    height: 3px;
    left: 0;
    top: 2em;
    width: 1em;
}

ol.departamentos-chart > li ol > li:not(:last-of-type):after {
    height: 100%;
    left: 0;
    top: 0;
    width: 3px;
}

ol.departamentos-chart > li ol > li:last-of-type:before {
    height: 3px;
    left: 0;
    top: 2em;
    width: 1em;
}

ol.departamentos-chart > li ol > li:last-of-type:after {
    height: 2em;
    left: 0;
    top: 0;
    width: 3px;
}

ol.departamentos-chart li > div {
    background-color: #fff;
    border-radius: 3px;
    min-height: 2em;
    padding: 0.5em;
}

/*** PRIMARY ***/
ol.departamentos-chart > li > div {
    background-color: #1572E8;
    color: #fff;
    margin-right: 1em;
    font-size:1em;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

    &:before {
        position: absolute;
        top: -10%;
        right: -140px;
        width: 300px;
        height: 300px;
        content: "";
        border-radius: 50%;
        background: rgba(255,255,255,.05);
    }
    &:after {
        position: absolute;
        top: -65px;
        right: 80px;
        width: 150px;
        height: 150px;
        content: "";
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
    }
}

ol.departamentos-chart > li > div:before {
    bottom: 2em;
    height: 3px;
    right: -1em;
    width: 1em;
}

ol.departamentos-chart > li > div:first-of-type:after {
    bottom: 0;
    height: 2em;
    right: -1em;
    width: 3px;
}

ol.departamentos-chart > li > div + div {
    margin-top: 1em;
}

ol.departamentos-chart > li > div + div:after {
    height: calc(100% + 1em);
    right: -1em;
    top: -1em;
    width: 3px;
}

/*** SECONDARY ***/
ol.departamentos-chart > li > ol:before {
    left: inherit;
    right: 0;
}

ol.departamentos-chart > li > ol:after {
    left: 0;
    width: 100%;
}

ol.departamentos-chart > li > ol > li > div {
    /* background-color: #1a2035;*/
    background-color: #12090e;
    color: #fff;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    padding: 5px 0;
    &:before {
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        width: 50%;
        min-width: 150px;
        height: 100%;
        top: 0;
        right: -25%;
        transform: skewX(-32.5deg);
    }
}

org-grey{
    background-color: #f1f1f1 !important;
    color:#333 !important;
}

org-white{
    background-color: #fff!important;
    color:#333 !important;
}

/*** TERTIARY ***/
ol.departamentos-chart > li > ol > li > ol > li > div {
    /*background-color: #48ABF7;*/
    background-color: #12223a;
    width: 80%;
    color:#f1f1f1;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

    &:before {
        content: '';
        position: absolute;
        background: url(../assets/img/img-shadow.png);
        background-size: cover;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}

/*** QUATERNARY ***/
ol.departamentos-chart > li > ol > li > ol > li > ol > li > div {
    background-color: #20a5d8;
    width: 70%;
    color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

    &:before {
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        width: 50%;
        min-width: 150px;
        height: 100%;
        top: 0;
        right: -25%;
        transform: skewX(-32.5deg);
    }
}

/*** QUINARY ***/
ol.departamentos-chart > li > ol > li > ol > li > ol > li > ol > li > div {
    width: 60%;
    background: rgb(195,195,195);
    background: linear-gradient(153deg, rgba(195,195,195,0.43017629415047265) 7%, rgba(255,255,255,1) 47%, rgba(229,227,227,0.4665908599768033) 98%);

    color:#333;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* PALETA
.color1 {color: #12090e;}
.color2 {color: #122d45;}
.color3 {color: #14648c;}
.color4 {color: #20a5d8;}
.color5 {color: #20dad8;}
/**/


/*** MEDIA QUERIES ***/
@media only screen and ( min-width: 64em ) {

    ol.departamentos-chart {
        margin-left: -1em;
        margin-right: -1em;
    }

    /* PRIMARY */
    ol.departamentos-chart > li > div {
        display: inline-block;
        float: none;
        margin: 0 1em 1em 1em;
        vertical-align: bottom;
    }

    ol.departamentos-chart > li > div:only-of-type {
        margin-bottom: 0;
        width: calc((100% / 1) - 2em - 4px);
    }

    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(2),
    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
        width: calc((100% / 2) - 2em - 4px);
    }

    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(3),
    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
        width: calc((100% / 3) - 2em - 4px);
    }

    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(4),
    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
        width: calc((100% / 4) - 2em - 4px);
    }

    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(5),
    ol.departamentos-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
        width: calc((100% / 5) - 2em - 4px);
    }

    ol.departamentos-chart > li > div:before,
    ol.departamentos-chart > li > div:after {
        bottom: -1em!important;
        top: inherit!important;
    }

    ol.departamentos-chart > li > div:before {
        height: 1em!important;
        left: 50%!important;
        width: 3px!important;
    }

    ol.departamentos-chart > li > div:only-of-type:after {
        display: none;
    }

    ol.departamentos-chart > li > div:first-of-type:not(:only-of-type):after,
    ol.departamentos-chart > li > div:last-of-type:not(:only-of-type):after {
        bottom: -1em;
        height: 3px;
        width: calc(50% + 1em + 3px);
    }

    ol.departamentos-chart > li > div:first-of-type:not(:only-of-type):after {
        left: calc(50% + 3px);
    }

    ol.departamentos-chart > li > div:last-of-type:not(:only-of-type):after {
        left: calc(-1em - 3px);
    }

    ol.departamentos-chart > li > div + div:not(:last-of-type):after {
        height: 3px;
        left: -2em;
        width: calc(100% + 4em);
    }

    /* SECONDARY */
    ol.departamentos-chart > li > ol {
        display: flex;
        flex-wrap: nowrap;
    }

    ol.departamentos-chart > li > ol:before,
    ol.departamentos-chart > li > ol > li:before {
        height: 1em!important;
        left: 50%!important;
        top: 0!important;
        width: 3px!important;
    }

    ol.departamentos-chart > li > ol:after {
        display: none;
    }

    ol.departamentos-chart > li > ol > li {
        flex-grow: 1;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
    }

    ol.departamentos-chart > li > ol > li:only-of-type {
        padding-top: 0;
    }

    ol.departamentos-chart > li > ol > li:only-of-type:before,
    ol.departamentos-chart > li > ol > li:only-of-type:after {
        display: none;
    }

    ol.departamentos-chart > li > ol > li:first-of-type:not(:only-of-type):after,
    ol.departamentos-chart > li > ol > li:last-of-type:not(:only-of-type):after {
        height: 3px;
        top: 0;
        width: 50%;
    }

    ol.departamentos-chart > li > ol > li:first-of-type:not(:only-of-type):after {
        left: 50%;
    }

    ol.departamentos-chart > li > ol > li:last-of-type:not(:only-of-type):after {
        left: 0;
    }

    ol.departamentos-chart > li > ol > li + li:not(:last-of-type):after {
        height: 3px;
        left: 0;
        top: 0;
        width: 100%;
    }

}
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Bootstrap 4.1 doesn't ship .modal-xl; add it for wide modals. */
@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1140px;
    }

    /* Modal form base with fixed width */
    #modalFormBase .modal-dialog {
        max-width: 1100px !important;
    }
}
