﻿
/*NUEVAS CLASES PARA UNA LINEA DEL TIEMPO MAS RESPONSIVA*/

.lineTime {
    margin-top: 3rem;
    padding: 1rem;
}

    .lineTime ul {
        position: relative;
    }

        .lineTime ul:before {
            position: absolute;
            content: ' ';
            width: 0.1rem;
            height: 100%;
            background-color: #69a9ea;
            left: 9.8rem;
        }

    .lineTime li {
        clear: both;
        overflow: hidden;
        margin-bottom: 1.5rem;
        position: relative;
    }

        .lineTime li .fechaEvento {
            text-align: left;
            float: left;
            color: #1b6ec2;
            font-family: Poppins, sans-serif;
            font-weight: 400;
            line-height: 2.8rem;
            min-width: 96px;
        }

        .lineTime li .circulo {
            width: 3.5rem;
            height: 1rem;
            float: left;
        }

            .lineTime li .circulo:before {
                position: absolute;
                content: " ";
                left: 6.88rem;
                top: 0.8rem;
                height: 15px;
                width: 15px;
                background-color: #579fe8;
                border-radius: 50%;
            }

        .lineTime li:first-child .circulo::before,
        .lineTime li:last-child .circulo::before {
            background-repeat: no-repeat;
            background-color: #1b6ec2;
        }

        .lineTime li .texto {
            font-family: Poppins, sans-serif;
            /*font-size: 1rem;
            line-height: 2rem;*/
            overflow: hidden;
            margin-top: 0.4rem;
            border:2.8px solid lightgray;
            border-radius:5px;
            padding:5px;
        }
            .lineTime li .texto::after {
                content: '';
                position: absolute;
                right: -10px;
                top: calc(0% + 13px);
                height: 0;
                width: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 12px solid lightgray;
            }

            .lineTime li .texto::after {
                left: calc(8.10rem + 10px);
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 12px solid lightgray;
                border-left: none;
            }

            .lineTime li .texto .sub-text {
                font-family: Poppins, sans-serif;
                font-size: small;
                line-height: 1rem;
                overflow: hidden;
                margin-top: 0.2rem;
                padding: 5px;
                display:none;
            }

            .lineTime li .texto p {
                margin-bottom: 0rem;
                display: inline-block;
                font-size: smaller;
                color: gray;
                font-weight: 600;
            }

.toggle-input {
    display: none;
}
.toggle-label{
    margin:0px;
}

.icon-arrow + .toggle-label {
    cursor: pointer;
    color: black;
    font-weight:normal;
}

.toggle-input:checked + .toggle-label + .sub-text {
    display: block;
}

.toggle-input:checked + .toggle-label .icon-arrow:after {
    font-family: 'FontAwesome';
    content: "\f105";
}

.icon-arrow:after {
    font-family: 'FontAwesome';
    content: "\f107";
}

.icon-arrow {
    color: #69a9ea;
}
