body {
    font-size: 1em;
    line-height: 1.4rem;
    color: #ecf0f1;
    background-color: #073c5e;
    font-family: sans-serif;
}

.accessible-hide {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}

.flexy-center {
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.svg-icon {
    width: 1em;
    height: 1em;
    fill: #606060;
}

    .svg-icon:nth-of-type(1) {
        transform: translate(-0.55em);
    }

    .svg-icon:nth-of-type(2) {
        transform: translate(0.55em);
    }

.button {
    padding: 0.7rem 1.4rem;
    border-radius: 0.2em;
    background-color: #27ae60;
    margin: 0 1.4rem;
    transition: all 0.225s ease-in-out;
    cursor: pointer;
}

.button__container {
    display: flex;
}

.button--disabled {
    pointer-events: none;
    opacity: 0.2;
}

.container {
    font-size: 3em;
    height: 0.45em;
    width: 17em;
    margin-top: 7rem;
    perspective: 1200px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background-image: radial-gradient(#606060 0.015em, transparent 0.02em);
    background-size: 0.25em 0.25em;
    background-repeat: repeat-x;
    background-position: 0 bottom;
    transition: all 0.3s ease-in-out;
}

.container__title {
    margin-top: 1em;
    font-size: 2em;
    opacity: 0;
    transition: opacity 0.225s ease-in-out;
}

.container__title--anim {
    opacity: 1;
    color: #606060;
}

.container__anim {
    background-position: 200% bottom;
}

.container:before {
    /* content: '
    '
    ; */
    height: 1em;
    width: calc(100% + .15em);
    position: absolute;
    left: -0.075em;
    bottom: -0.48em;
    box-sizing: border-box;
    padding-bottom: 0.25em;
    border-radius: 0 0 0.25em 0.25em;
    border: 0.05em solid white;
    border-bottom-color: transparent;
    border-top-color: transparent;
    transform-style: preserve-3d;
    transform-origin: 50% 0;
    transform: rotateX(63deg);
}

.container__jump {
    background-image: radial-gradient(#e74c3c 0.015em, transparent 0.02em);
}

    .container__jump .response {
        animation: responseMove 1.125s ease-out forwards;
    }

        .container__jump .response .item {
            opacity: 1;
            animation: 0.9s linear forwards;
            animation-delay: 0.1125s;
        }

            .container__jump .response .item:nth-child(1) {
                animation-name: jump4;
            }

            .container__jump .response .item:nth-child(2) {
                animation-name: jump0;
            }

            .container__jump .response .item:nth-child(3) {
                animation-name: jump3;
            }

        .container__jump .response .sparks {
            transform: scale(2);
            opacity: 0;
            background-color: #e74c3c;
        }

    .container__jump .server {
        fill: #e74c3c;
    }

    .container__jump:before {
        border-right-color: #e74c3c;
    }

.container .svg-icon {
    position: absolute;
    bottom: 100%;
}

    .container .svg-icon:nth-of-type(1) {
        left: 0;
    }

    .container .svg-icon:nth-of-type(2) {
        right: 0;
    }

.response {
    position: absolute;
    right: -0.5em;
    top: -1em;
}

    .response .item {
        opacity: 0;
        line-height: 1em;
        /* font-family: '
    Bree Serif'
    , serif; */
    }

.sparks {
    width: 1em;
    height: 1em;
    border-radius: 1em;
    background-color: white;
    transform: scale(0);
    transition: all 0.225s ease-out;
}

.item {
    top: 0;
    right: 0;
    position: absolute;
    width: 0.7em;
    z-index: 2;
    text-align: center;
    transition: all 0.45s ease-out;
    display: flex;
    align-items: center;
    line-height: 0.87em;
    justify-content: center;
}

@keyframes responseMove {
    100% {
        transform: translate(-2.5em, 0.7em) scale(1.5);
    }
}

@keyframes jump4 {
    0% {
        transform: translateY(0) translateX(0) rotate(0);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);
        animation-timing-function: ease-in;
    }

    70% {
        transform: translateY(0) translateX(-0.45em) rotate(-360deg);
        animation-timing-function: ease-out;
    }

    80% {
        transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);
        animation-timing-function: ease-in;
    }

    90%, 100% {
        transform: translateY(0) translateX(-0.65em) rotate(-360deg);
        animation-timing-function: ease-out;
        color: #e74c3c;
    }
}

@keyframes jump0 {
    0% {
        transform: translateY(0) translateX(0) rotate(0);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);
        animation-timing-function: ease-in;
    }

    70% {
        transform: translateY(0) translateX(-0.1em) rotate(-720deg);
        animation-timing-function: ease-out;
    }

    80% {
        transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);
        animation-timing-function: ease-in;
    }

    90%, 100% {
        transform: translateY(0) translateX(-0.1em) rotate(-720deg);
        animation-timing-function: ease-out;
        color: #e74c3c;
    }
}

@keyframes jump3 {
    0% {
        transform: translateY(0) translateX(0) rotate(0);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(-3em) translateX(0.1em) rotate(-340deg);
        animation-timing-function: ease-in;
    }

    70% {
        transform: translateY(0) translateX(0.2em) rotate(-360deg);
        animation-timing-function: ease-out;
    }

    80% {
        transform: translateY(-1em) translateX(0.3em) rotate(-360deg);
        animation-timing-function: ease-in;
    }

    90%, 100% {
        transform: translateY(0) translateX(0.4em) rotate(-360deg);
        animation-timing-function: ease-out;
        color: #e74c3c;
    }
}

.lock::before, .lock::after {
    /* content: '
    ' */
    position: absolute;
    border-left: 5px solid #333;
    height: 20px;
    width: 15px;
    left: calc(50% - 12.5px);
}

.lock::before {
    top: -30px;
    border: 5px solid #333;
    border-bottom-color: transparent;
    border-radius: 15px 15px 0 0;
    height: 30px;
    animation: lock 2s, spin 2s;
}

.lock::after {
    top: -10px;
    border-right: 5px solid transparent;
    animation: spin 2s;
}

@keyframes lock {
    0% {
        top: -45px;
    }

    65% {
        top: -45px;
    }

    100% {
        top: -30px;
    }
}

@keyframes spin {
    0% {
        transform: scaleX(-1);
        left: calc(50% - 30px);
    }

    65% {
        transform: scaleX(1);
        left: calc(50% - 12.5px);
    }
}

@keyframes dip {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
    }
}


:root {
    --main-color: #fff;
    --stroke-color: #073c5e;
    --link-color: #29abe2;
}
/**/
h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

.loading h1, .loading h2 {
    margin-top: 0px;
    opacity: 0;
}

.gears {
    position: relative;
    margin: 45px 0px 0px 0px;
    width: auto;
    height: 0;
}

.gear {
    position: relative;
    z-index: 0;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--stroke-color);
}

    .gear:before {
        position: absolute;
        left: 5px;
        top: 5px;
        right: 5px;
        bottom: 5px;
        z-index: 2;
        content: "";
        border-radius: 50%;
        background: var(--main-color);
    }

    .gear:after {
        position: absolute;
        left: 25px;
        top: 25px;
        z-index: 3;
        content: "";
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 5px solid var(--stroke-color);
        box-sizing: border-box;
        background: var(--main-color);
    }

    .gear.one {
        left: -130px;
    }

    .gear.two {
        top: -75px;
    }

    .gear.three {
        top: -235px;
        left: 130px;
    }

    .gear .bar {
        position: absolute;
        left: -15px;
        top: 50%;
        z-index: 0;
        width: 150px;
        height: 30px;
        margin-top: -15px;
        border-radius: 5px;
        background: var(--stroke-color);
    }

        .gear .bar:before {
            position: absolute;
            left: 5px;
            top: 5px;
            right: 5px;
            bottom: 5px;
            z-index: 1;
            content: "";
            border-radius: 2px;
            background: var(--main-color);
        }

        .gear .bar:nth-child(2) {
            transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
        }

        .gear .bar:nth-child(3) {
            transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
        }

@-webkit-keyframes clockwise {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes anticlockwise {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes clockwiseError {
    0% {
        -webkit-transform: rotate(0deg);
    }

    20% {
        -webkit-transform: rotate(30deg);
    }

    40% {
        -webkit-transform: rotate(25deg);
    }

    60% {
        -webkit-transform: rotate(30deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes anticlockwiseErrorStop {
    0% {
        -webkit-transform: rotate(0deg);
    }

    20% {
        -webkit-transform: rotate(-30deg);
    }

    60% {
        -webkit-transform: rotate(-30deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes anticlockwiseError {
    0% {
        -webkit-transform: rotate(0deg);
    }

    20% {
        -webkit-transform: rotate(-30deg);
    }

    40% {
        -webkit-transform: rotate(-25deg);
    }

    60% {
        -webkit-transform: rotate(-30deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

.gear.one {
    -webkit-animation: anticlockwiseErrorStop 2s linear infinite;
}

.gear.two {
    -webkit-animation: anticlockwiseError 2s linear infinite;
}

.gear.three {
    -webkit-animation: clockwiseError 2s linear infinite;
}

.loading .gear.one, .loading .gear.three {
    -webkit-animation: clockwise 3s linear infinite;
}

.loading .gear.two {
    -webkit-animation: anticlockwise 3s linear infinite;
}


/* Estilos botón regresar */
.buttonBack {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: 10rem;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-family: Inter,sans-serif;
    font-weight: 500;
    cursor: pointer;
    margin-top: 45px;
}

    .buttonBack:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #173970;
        border-radius: 10rem;
        z-index: -2;
    }

    .buttonBack:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: #008fb3;
        transition: all 0.3s;
        border-radius: 10rem;
        z-index: -1;
    }

    .buttonBack:hover {
        color: #fff;
    }

        .buttonBack:hover:before {
            width: 100%;
        }

.contBtnBack {
    position: absolute;
    top: 180px;
    left: calc(90% - 300px);
}

#tablaConsultarProceso thead {
    background-color: #add6fa;
}

#tablaConsultarProceso tbody tr:nth-child(even) {
    background: #e7e6e6;
    /*cursor: pointer;*/
}

#tablaConsultarProceso tbody tr:nth-child(odd) {
    background: #FFF;
    /*cursor: pointer;*/
}