@charset "utf-8";
/* CSS Document */
/*SALUD 3.0*/
/* HOJA DE ESTILOS CSS para el desarrollo del proyecto SALUD 3.0 Desarrollado por:ADDENTRA INTERNET Fecha inicio:01/02/2016*/
/*** ESTILOS ***/

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color: #4c4c4c;
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
    padding: 0;
    margin: 0
}

h3 {
    margin-top: 65px;
    margin-bottom: 15px;
    color: #7e7e7e
}

h4 {
    font-size: 20px;
    color: #595959;
    font-weight: bold;
    text-align: center;
}

a {
    font-size: 13px;
    color: #407ca7;
    text-decoration: underline;
    transition: all ease .3s
}

/***HEADERRIGHT***/
headerright button {
    border-radius: 30px;
    padding: 7px 9px;
}

    headerright button icon {
        padding-right: 0
    }

/**MENU**/
nav ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

nav input[type=checkbox] {
    display: none;
}

    nav input[type=checkbox]:checked ~ #menu {
        display: block;
    }

nav label {
    display: none;
}

main nav {
    background: #f0f0f0;
}

    main nav ul {
        list-style: none;
        margin-top: 0;
        padding: 0;
    }

        main nav ul li {
        }

            main nav ul li:first-of-type {
                border-top: none
            }

            main nav ul li:last-of-type {
                display: none
            }

            main nav ul li a icon {
                display: inline-block;
                padding-right: 2%;
                font-size: 2em;
                width: 18%;
            }

            main nav ul li a {
                display: block;
                font-size: 1em;
                text-decoration: none;
                width: 90%;
                padding: 10px 5% 5px 5%;
                cursor: pointer;
                color: #595959;
                box-shadow: 0 1px 0 #cdcdcd;
                border-bottom: 1px solid #fff
            }

                main nav ul li a:hover {
                    background-image: linear-gradient(#CCCCCC, #F5F5F5);
                    text-shadow: 1px 1px 0 #fff;
                }

            main nav ul li span {
                display: inline-block;
                overflow: hidden;
                vertical-align: 15px;
            }

/**TITULOS**/
hgroup {
    float: right;
    text-align: right;
    width: 93%;
    padding: 5px 15px;
    background-color: #f0f0f0;
    font-weight: normal;
    border-right: 10px solid
}

    hgroup > h3 {
        font-size: 1.5em;
        margin: 0
    }

    hgroup > h4 {
        font-size: 1em;
    }

h3 {
    margin: 10px 0 5px 0;
    color: #495770;
    font-size: 18px
}

/**FORMULARIO**/
button {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #b8b8b8;
    font-size: 18px;
    text-transform: uppercase;
    transition: all ease .3s
}

    button:hover,
    button.active {
        background: #7ba4cb;
        text-shadow: -1px 1px 0 #30689c;
        border: 1px solid #c6d8ea;
    }

    button.acciones {
        padding: 3px !important;
        align-self: center;
    }

        button.acciones > icon {
            margin: 0 0 0 -1px;
            padding: 0;
            vertical-align: middle;
        }

    button.botonCentral {
        float: none;
        display: block;
        margin: 30px auto
    }

    button.enlace {
        background: transparent;
        border-color: transparent;
        text-shadow: none;
        color: #2e807c;
        text-transform: capitalize;
        text-decoration: underline;
    }

        button.enlace:hover {
            border-color: transparent;
            text-decoration: none;
        }

form button {
    float: right;
    margin-top: 25px;
}

form h3 strong {
    background-color: #336699;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    color: #fff;
    margin-right: 10px;
}

textarea {
    font-family: "Open Sans";
    padding: 1%;
    min-height: 60px;
    border: 1px solid #979797;
}

inputlabeled {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5px 10px 20px 10px;
    min-height: 0;
    min-width: 0;
    justify-content: space-between;
}

    inputlabeled label {
        margin: 5px 0;
    }

    inputlabeled input {
        padding: 8px 1%;
        width: calc(98% - 4px);
        border: 1px solid #979797;
        font-size: .95em;
        color: #4c4c4c
    }

    inputlabeled select {
        padding: 8px;
        text-align: left;
        border: 1px solid #979797;
        font-size: .95em;
        color: #4c4c4c;
        width: 100%
    }
 

labeltittle {
    display: block;
    padding: 5px 5px 5px 10px;
}

layererror {
    position: relative;
}

    layererror error {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 22px;
        padding: 2px 0;
    }

        layererror error icon {
            display: none;
        }

error {
    font-size: 12px !important;
    color: #dc3545;
}

.error input, .error select, .error textarea {
    border: 1px solid #dc3545 !important;
}

icon.validador {
    vertical-align: middle
}

inputlabeled.errorSolo {
    position: relative;
}

    inputlabeled.errorSolo error {
        right: 0;
        left: 0;
        padding: 10px 20px;
        background: linear-gradient(to bottom, #c92815, #e84a41);
        margin-bottom: 10px;
        box-shadow: inset 0 1px 0 #e6baab;
        text-shadow: -1px 1px 0 #43070b;
        color: #fffae7;
        border: 1px solid #ac0a20;
    }

        inputlabeled.errorSolo error i {
            font-size: 1.5em
        }

.button-yes-no button {
    background: #e2e2e2;
    color: #797979;
    border-radius: 5px;
    padding: 8px 16px;
    border: 1px solid #ccc;
    min-width: 60px;
    text-shadow: none;
}

    .button-yes-no button.elegido {
        background: #508bc3;
        color: #fcfcfc;
        text-shadow: 0 1px 1px #30689c;
    }

.alert {
    display: block;
    overflow: hidden;
    clear: both;
    padding: 18px;
    border-radius: 5px;
    border: 1px solid;
    font-size: 12px;
    width: auto;
}

    .alert.alert-error {
         position: initial;
         color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }


        warning, info {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 5px 10px;
            background: linear-gradient(to bottom, #ffa700, #ffd103);
            border-radius: 3px;
            box-shadow: inset 0px 1px 0 #e6dbcb;
            text-shadow: -1px 1px 0 #ffdc9c;
            color: #964e05;
            font-weight: bold;
            border: 1px solid #ffa244;
            font-size: 13px;
            width: 90%;
            margin: 0 auto;
        }

info {
    background: linear-gradient(to bottom, #70c95d, #b2e88b);
    margin-bottom: 10px;
    box-shadow: inset 0 1px 0 #c5e69b;
    text-shadow: -1px 1px 0 #ceefa4;
    color: #12431b;
    border: 1px solid #48AC32;
}

    info icon, warning icon {
        min-width: 20px;
    }


.privado .listados form button {
    align-self: flex-end;
    margin: 0 !important;
}



/***CUERPO*/
.listados labeltittle {
    padding-bottom: 0;
    font-size: 18px;
    padding-left: 0;
}

.listados p {
    margin: 0;
}

.listados button {
    height: 100%;
    margin: auto;
}

/**PIE**/
footer {
    border-top: 4px solid #00b300;
    font-size: 0.8em;
}

    footer a {
        font-size: 12px;
        color: #037B03;
        text-decoration: none;
    }

/**POPUP**/
contentpopup {
    background-color: rgba(115, 115, 115, 0.6);
}

popup {
    background-color: #f9f9f9;
    color: #4c4c4c;
    border-radius: 5px;
    box-shadow: 0 0 15px #4c4c4c;
}

    popup headerpopup {
        background-color: #595959;
        padding: 15px 4%;
        color: #f2f2f2;
        width: 92%;
        border-radius: 5px 5px 0 0;
    }

        popup headerpopup button {
            border-radius: 20px;
            color: #6699ff;
            background: #fff;
            padding: 0;
            height: 31px;
            position: absolute;
            top: -15px;
            right: -18px;
            width: 30px;
        }

            popup headerpopup button:focus, popup headerpopup button:active {
                outline: none;
            }

            popup headerpopup button i {
                margin-top: -6px;
                margin-left: -5px;
                border: 4px solid rgba(255, 255, 255, 0.5);
                border-radius: 20px;
                height: 31px;
            }

    popup bodypopup {
        padding: 15px 4%;
    }

    popup footpopup {
        padding: 15px 4%;
        display: flex;
        justify-content: flex-end;
        width: 92%;
    }

.popupAgenda {
    background-color: #f9f9f9;
    color: #4c4c4c;
    border-radius: 5px;
    box-shadow: 0 0 15px #4c4c4c;
}

    .popupAgenda headerpopup {
        background-color: #595959;
        padding: 15px 4%;
        color: #f2f2f2;
        width: 92%;
        border-radius: 5px 5px 0 0;
    }

        .popupAgenda headerpopup button {
            border-radius: 20px;
            color: #6699ff;
            background: #fff;
            padding: 0;
            height: 31px;
            position: absolute;
            top: -15px;
            right: -18px;
            width: 30px;
        }

            .popupAgenda headerpopup button:focus, popup headerpopup button:active {
                outline: none;
            }

            .popupAgenda headerpopup button i {
                margin-top: -6px;
                margin-left: -5px;
                border: 4px solid rgba(255, 255, 255, 0.5);
                border-radius: 20px;
                height: 31px;
            }

    .popupAgenda bodypopup {
        padding: 15px 4%;
    }

    .popupAgenda footpopup {
        padding: 15px 4%;
        display: flex;
        justify-content: flex-end;
        width: 92%;
    }
/**ESTILOS PARA CADA PANTALLA**/

/**LOGIN**/

/*PEDIR CITA*****/

.seleccionaDia inputlabeled {
    width: auto;
    padding: 0;
}

.seleccionaDia row:last-of-type column:first-of-type {
    margin-right: 10px
}

.diaopcion button {
    padding: 2px;
    font-size: 0.8em;
}

.diaopcion day {
    text-align: center;
    font-size: 0.9em;
}

.diaopcion row {
    align-self: center;
}

    .diaopcion row button {
        margin-right: 3px;
    }

.identificacion step a {
    cursor: pointer;
    text-decoration: none;
    background: #7ba4cb;
    color: #fcfcfc;
    min-width: 175px;
    border-radius: 2px;
    padding: 10px 5px;
    box-shadow: inset 1px 1px 4px #d7e6f5;
    border: 1px solid #6999c5;
}

    .identificacion step a:hover {
        background: #30689c;
    }

    .identificacion step a span {
        font-size: 16px;
    }

    .identificacion step a strong {
        font-size: 22px;
    }

    .identificacion step a strong,
    .identificacion step a span {
        text-align: center;
    }

    .identificacion step a label,
    .identificacion step p label {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-shadow: 0 1px 1px #04304c;
    }

    .identificacion step a icon {
        display: block;
        margin: auto;
        filter: drop-shadow(-1px 1px 1px #000);
    }

        .identificacion step a icon.xxl {
            height: 85px;
        }

.identificacion step p {
    text-align: center;
    font-size: 18px;
}

.identificacion row > i {
    display: flex;
    font-size: 45px;
    text-align: left;
    margin-right: 10px;
    align-self: flex-start
}

.identificacion:first-of-type column:nth-of-type(2) {
    border: 5px solid #2f81b0;
    align-items: center;
}

.identificacion center,
.identificacion column {
    padding: 1%;
}

    .identificacion column line {
        align-items: center;
        padding: 0;
    }

    .identificacion column inputlabeled {
        display: flex !important;
        margin: auto;
        padding: 0;
        min-width: 70%;
        align-items: stretch;
    }

        .identificacion column inputlabeled label {
            width: 100%;
        }

    .identificacion column input {
        text-align: center !important;
        border: 2px solid #9dd5f5;
        font-size: 17px;
    }

.identificacion .loginSSP {
    border: 5px solid #92bed8;
    padding-bottom: 20px;
}

    .identificacion .loginSSP i.fa.fa-key {
        color: #508fb3;
    }

.identificacion center {
    font-size: 18px;
    font-weight: bold;
}

.identificacion errorSSP {
    display: block;
    opacity: 0;
    color: #fff;
    text-align: center;
    background: #ff8600;
    padding: 5px;
    font-size: 14px;
}

    .identificacion errorSSP.visible {
        opacity: 1;
    }


/*CONSULTA DE CITAS   ***AZUL***/
.azul hgroup {
    border-color: #336699;
    color: #336699
}

    .azul hgroup h3 {
        color: #336699
    }

.listados labeltittle {
    color: #336699;
}

.listados line {
    border-top: 1px solid #999;
    margin: 5px 0px 5px 5%;
}

.listados block line:first-of-type {
    border: none
}

.listados column {
    justify-content: center
}

/*NOTIFICACIONES   ****NARANJA*****/
notification {
    display: block;
    padding: 10px;
}

    notification icon {
        display: block;
        margin: auto;
        width: 200px !important;
        height: 200px !important;
    }

        notification icon:before {
            transform: scale(2) !important;
        }

    notification p {
        text-align: center;
    }

.naranja hgroup {
    border-color: #e68a00;
    color: #e68a00
}

.naranja input {
    border-color: #e68a00;
}

.naranja small {
    color: #e68a00
}


.sinnotificaciones img {
    display: block;
    margin: 30px auto;
    opacity: .7;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.sinnotificaciones p {
    text-align: center;
    font-size: 1.5em;
}

    .sinnotificaciones p strong {
        color: #e68a00
    }

/*JUSTIFICANTES   ****PURPURA*****/
.purpura hgroup {
    border-color: #732673;
    color: #732673
}

.purpura labeltittle {
    color: #732673
}

/*ERROR*/
.pagerror {
    width: 70%;
    display: block;
    margin: 0 auto;
}

    .pagerror strong {
        display: block;
        font-size: 35px
    }

    .pagerror p {
        font-size: 25px
    }

    .pagerror row icon {
        padding-left: 6px;
        position: relative;
    }

    .pagerror column {
        justify-content: center;
        padding-left: 30px;
    }

    .pagerror row icon:before {
        content: '';
        left: -5px;
        top: 300px;
        width: 280px;
        height: 5px;
        background: #aaa;
        position: absolute;
        border-radius: 140px / 2px;
        box-shadow: 0 0 5px #aaa, 0 0 10px #888, 0 0 15px #666;
    }

    .pagerror row icon:after {
        content: '';
        left: 8px;
        top: 300px;
        width: 255px;
        height: 2px;
        background: #666;
        position: absolute;
        border-radius: 125px / 1px;
        box-shadow: 0 0 5px #444, 0 0 8px #333, 0 0 10px #666;
    }

/**CARGANDO**/
contentscreen {
    display: block;
    position: absolute;
    z-index: 19;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
}

.cssload-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 50%;
    margin: auto;
}

    .cssload-loading .cssload-dot {
        position: absolute;
        border-radius: 50%;
        left: 1px;
        top: 1px;
        width: 18px;
        height: 18px;
        background: rgb(31,31,31);
        animation: cssload-spin 2.88s 0s infinite both;
        -o-animation: cssload-spin 2.88s 0s infinite both;
        -ms-animation: cssload-spin 2.88s 0s infinite both;
        -webkit-animation: cssload-spin 2.88s 0s infinite both;
        -moz-animation: cssload-spin 2.88s 0s infinite both;
    }

    .cssload-loading .cssload-dot2 {
        position: absolute;
        border-radius: 50%;
        width: 19px;
        height: 19px;
        background: rgb(31,31,31);
        animation: cssload-spin2 2.88s 0s infinite both;
        -o-animation: cssload-spin2 2.88s 0s infinite both;
        -ms-animation: cssload-spin2 2.88s 0s infinite both;
        -webkit-animation: cssload-spin2 2.88s 0s infinite both;
        -moz-animation: cssload-spin2 2.88s 0s infinite both;
    }

@keyframes cssload-spin {
    0%, 100% {
        box-shadow: 0 0 0 rgb(31,31,31), 0 0 0 rgb(31,31,31), 0 0 0 rgb(43,42,43), 0 0 0 rgb(43,42,43), 0 0 0 rgba(66,65,66,0.98), 0 0 0 rgb(66,65,66), 0 0 0 rgba(92,92,92,0.98), 0 0 0 rgb(92,92,92);
    }

    50% {
        transform: rotate(180deg);
    }

    25%, 75% {
        box-shadow: 27px 0 0 rgb(120,120,120), -27px 0 0 rgb(120,120,120), 0 27px 0 rgb(148,148,148), 0 -27px 0 rgb(148,148,148), 19px -19px 0 rgba(214,214,214,0.73), 19px 19px 0 rgb(214,214,214), -19px -19px 0 #000, -19px 19px 0 #000;
    }

    100% {
        transform: rotate(360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-o-keyframes cssload-spin {
    0%, 100% {
        box-shadow: 0 0 0 rgb(31,31,31), 0 0 0 rgb(31,31,31), 0 0 0 rgb(43,42,43), 0 0 0 rgb(43,42,43), 0 0 0 rgba(66,65,66,0.98), 0 0 0 rgb(66,65,66), 0 0 0 rgba(92,92,92,0.98), 0 0 0 rgb(92,92,92);
    }

    50% {
        -o-transform: rotate(180deg);
    }

    25%, 75% {
        box-shadow: 27px 0 0 rgb(120,120,120), -27px 0 0 rgb(120,120,120), 0 27px 0 rgb(148,148,148), 0 -27px 0 rgb(148,148,148), 19px -19px 0 rgba(214,214,214,0.73), 19px 19px 0 rgb(214,214,214), -19px -19px 0 #000, -19px 19px 0 #000;
    }

    100% {
        -o-transform: rotate(360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-ms-keyframes cssload-spin {
    0%, 100% {
        box-shadow: 0 0 0 rgb(31,31,31), 0 0 0 rgb(31,31,31), 0 0 0 rgb(43,42,43), 0 0 0 rgb(43,42,43), 0 0 0 rgba(66,65,66,0.98), 0 0 0 rgb(66,65,66), 0 0 0 rgba(92,92,92,0.98), 0 0 0 rgb(92,92,92);
    }

    50% {
        -ms-transform: rotate(180deg);
    }

    25%, 75% {
        box-shadow: 27px 0 0 rgb(120,120,120), -27px 0 0 rgb(120,120,120), 0 27px 0 rgb(148,148,148), 0 -27px 0 rgb(148,148,148), 19px -19px 0 rgba(214,214,214,0.73), 19px 19px 0 rgb(214,214,214), -19px -19px 0 #000, -19px 19px 0 #000;
    }

    100% {
        -ms-transform: rotate(360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-webkit-keyframes cssload-spin {
    0%, 100% {
        box-shadow: 0 0 0 rgb(31,31,31), 0 0 0 rgb(31,31,31), 0 0 0 rgb(43,42,43), 0 0 0 rgb(43,42,43), 0 0 0 rgba(66,65,66,0.98), 0 0 0 rgb(66,65,66), 0 0 0 rgba(92,92,92,0.98), 0 0 0 rgb(92,92,92);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    25%, 75% {
        box-shadow: 27px 0 0 rgb(120,120,120), -27px 0 0 rgb(120,120,120), 0 27px 0 rgb(148,148,148), 0 -27px 0 rgb(148,148,148), 19px -19px 0 rgba(214,214,214,0.73), 19px 19px 0 rgb(214,214,214), -19px -19px 0 #000, -19px 19px 0 #000;
    }

    100% {
        -webkit-transform: rotate(360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-moz-keyframes cssload-spin {
    0%, 100% {
        box-shadow: 0 0 0 rgb(31,31,31), 0 0 0 rgb(31,31,31), 0 0 0 rgb(43,42,43), 0 0 0 rgb(43,42,43), 0 0 0 rgba(66,65,66,0.98), 0 0 0 rgb(66,65,66), 0 0 0 rgba(92,92,92,0.98), 0 0 0 rgb(92,92,92);
    }

    50% {
        -moz-transform: rotate(180deg);
    }

    25%, 75% {
        box-shadow: 27px 0 0 rgb(120,120,120), -27px 0 0 rgb(120,120,120), 0 27px 0 rgb(148,148,148), 0 -27px 0 rgb(148,148,148), 19px -19px 0 rgba(214,214,214,0.73), 19px 19px 0 rgb(214,214,214), -19px -19px 0 #000, -19px 19px 0 #000;
    }

    100% {
        -moz-transform: rotate(360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@keyframes cssload-spin2 {
    0%, 100% {
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }

    50% {
        transform: rotate(-180deg);
    }

    25%, 75% {
        box-shadow: 51px 0 0 #000, -51px 0 0 #000, 0 51px 0 #000, 0 -51px 0 #000, 37px -37px 0 #000, 37px 37px 0 #000, -37px -37px 0 #000, -37px 37px 0 #000;
        background: transparent;
    }

    100% {
        transform: rotate(-360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-o-keyframes cssload-spin2 {
    0%, 100% {
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }

    50% {
        -o-transform: rotate(-180deg);
    }

    25%, 75% {
        box-shadow: 51px 0 0 #000, -51px 0 0 #000, 0 51px 0 #000, 0 -51px 0 #000, 37px -37px 0 #000, 37px 37px 0 #000, -37px -37px 0 #000, -37px 37px 0 #000;
        background: transparent;
    }

    100% {
        -o-transform: rotate(-360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-ms-keyframes cssload-spin2 {
    0%, 100% {
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }

    50% {
        -ms-transform: rotate(-180deg);
    }

    25%, 75% {
        box-shadow: 51px 0 0 #000, -51px 0 0 #000, 0 51px 0 #000, 0 -51px 0 #000, 37px -37px 0 #000, 37px 37px 0 #000, -37px -37px 0 #000, -37px 37px 0 #000;
        background: transparent;
    }

    100% {
        -ms-transform: rotate(-360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-webkit-keyframes cssload-spin2 {
    0%, 100% {
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }

    50% {
        -webkit-transform: rotate(-180deg);
    }

    25%, 75% {
        box-shadow: 51px 0 0 #000, -51px 0 0 #000, 0 51px 0 #000, 0 -51px 0 #000, 37px -37px 0 #000, 37px 37px 0 #000, -37px -37px 0 #000, -37px 37px 0 #000;
        background: transparent;
    }

    100% {
        -webkit-transform: rotate(-360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

@-moz-keyframes cssload-spin2 {
    0%, 100% {
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }

    50% {
        -moz-transform: rotate(-180deg);
    }

    25%, 75% {
        box-shadow: 51px 0 0 #000, -51px 0 0 #000, 0 51px 0 #000, 0 -51px 0 #000, 37px -37px 0 #000, 37px 37px 0 #000, -37px -37px 0 #000, -37px 37px 0 #000;
        background: transparent;
    }

    100% {
        -moz-transform: rotate(-360deg);
        box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
    }
}

/***TERMINOS Y CONDICIONES***/
terms {
    display: block;
    overflow: hidden;
    font-size: 13px;
    padding: 20px;
}

    terms h2 {
        border-bottom: 5px solid #dcdcdc;
        padding-bottom: 5px;
    }

    terms h3 {
        color: #336699;
    }

    terms a:visited {
        color: #AF58C5;
    }

    terms p {
        margin: 0px
    }


/*region ****** BARRA DE FORTALEZA DE LA CONTRASEÑA ****/
.progress {
    box-shadow: inset 1px 1px 5px #353535;
    border-radius: 13px;
}

password-strength {
    min-width: 215px;
}

.progress-bar {
    width: auto;
    -webkit-transition: width 1.5s ease-in-out;
    -moz-transition: width 1.5s ease-in-out;
    -o-transition: width 1.5s ease-in-out;
    transition: width 1.5s ease-in-out;
}

.progress, .progress-bar {
    height: 25px;
    width: 100%;
    display: inline-block;
    background: #BCD2FD;
}

    .progress-bar.progress-bar-danger {
        background: linear-gradient(to bottom, #EB7878, #B00606);
        border-radius: 12px 0 0 12px;
    }

    .progress-bar.progress-bar-warning {
        background: linear-gradient(to bottom, #F8D34F, #B05D17);
    }

    .progress-bar.progress-bar-success {
        background: linear-gradient(to bottom, #3DD522, #00530A);
        border-radius: 0 12px 12px 0;
    }

/*endregion ******/

@media screen and (min-width:0\0) {
    footer {
        position: fixed;
        bottom: 45px;
        left: 0;
        right: 0;
    }

    login {
        overflow: inherit;
        width: 40%;
    }

        login column {
            display: block;
            clear: both;
            flex: inherit
        }

    main {
        display: inline;
        flex: auto;
    }

    form {
        display: block;
    }

    header controllerdiv column patient {
        margin-top: 30px;
    }

    contentstep {
        flex: auto;
    }

    step {
        display: block;
        flex: auto;
        margin-bottom: 30px;
    }

    .grupo-horas grouphours {
        flex: auto;
        display: block !important;
    }

        .grupo-horas grouphours column {
            width: 130px;
            display: inline-block;
            overflow: hidden;
            float: left;
        }

    zonebutton {
        margin-bottom: 40px;
    }

    .grupo-horas grouphours column buttongroup button {
        float: none;
    }

    .grupo-horas a {
        margin: 5px auto 0;
        width: 80%;
    }

    main > nav {
        width: 30%;
        float: left;
    }

    .progress {
        display: none;
    }
}
/* region********************ANIMACIONES ANGULAR**********************/
.animate:focus {
    -webkit-transition: height 100ms ease-in-out;
    -moz-transition: height 100ms ease-in-out;
    -o-transition: height 100ms ease-in-out;
    transition: height 100ms ease-in-out;
}

.animated03 {
    animation-duration: .3s;
    animation-fill-mode: forwards;
}

.animated05 {
    animation-duration: .5s;
}

@keyframes unrollDown {
    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: 0 0
    }

    20% {
        opacity: .2;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        transform-origin: 0 0
    }
}

.unrollDown {
    animation-name: unrollDown;
}

@keyframes rollUp {
    0% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: 0 0
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: .2;
    }

    100% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: 0 0
    }
}

.rollUp {
    animation-name: rollUp;
}

@keyframes unrollLeft {
    0% {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: 0 0
    }

    20% {
        opacity: .2;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        transform-origin: 0 0
    }
}

.unrollLeft {
    animation-name: unrollLeft;
}

.barraDerecha .unrollLeft {
    animation-name: unrollRight;
}

@keyframes rollRight {
    0% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: 0 0
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: .2;
    }

    100% {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: 0 0
    }
}

.rollRight {
    animation-name: rollRight;
}

.barraDerecha .rollRight {
    animation-name: rollLeft;
}

@keyframes unrollRight {
    0% {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: 100% 0
    }

    20% {
        opacity: .2;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        transform-origin: 100% 0
    }
}

.unrollRight {
    animation-name: unrollRight;
}

@keyframes rollLeft {
    0% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: 100% 0
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: .2;
    }

    100% {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: 100% 0
    }
}

.rollLeft {
    animation-name: rollLeft;
}

@keyframes moveUp {
    from {
        transform: translate(0, 100%);
        transform-origin: 0 0
    }

    to {
        transform: translate(0, 0);
        transform-origin: 0 0
    }
}

@keyframes moveDown {
    from {
        transform: translate(0, 0);
        transform-origin: 0 0
    }

    to {
        transform: translate(0, 100%);
        transform-origin: 0 0
    }
}

.fadeIn navlower {
    animation-name: moveUp;
}

.fadeOut navlower {
    animation-name: moveDown;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        visibility: hidden
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        visibility: hidden
    }
}

.fadeOut {
    animation-name: fadeOut;
}

inputlabeled.ng-hide-remove {
    animation: 1s fadeInInputLabeledAngularAnimation;
}

@keyframes fadeInInputLabeledAngularAnimation {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

inputlabeled.ng-hide-add {
    animation: 1s fadeOutInputLabeledAngularAnimation;
}

@keyframes fadeOutInputLabeledAngularAnimation {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}




form.ng-hide-remove {
    animation: 1s fadeInFormAngularAnimation;
    display: block;
}

@keyframes fadeInFormAngularAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1
    }
}

form.ng-hide-add {
    animation: .15s fadeOutFormAngularAnimation;
    display: none;
}

@keyframes fadeOutFormAngularAnimation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0
    }
}

/* endregion********************ANIMACIONES ANGULAR**********************/