@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*/
/*** ESTRUCTURA ***/

@import url(https://fonts.googleapis.com/css?family=Overlock:900);
@import url(https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,500,600);

html {height: 100%}
body{ margin: 0; width: 100%; height:100%; position: relative;    background: #ddd; }
body.kk_body {background: #f3fbfa; font-family: 'Muli', sans-serif; }
contentbody { max-width:880px;  /*  padding-top: 135px; */ display: flex; min-height: calc(100% - 45px);  flex-direction: column; flex: 1; margin: auto; background: #fff;}
.kk_body contentbody { background: #f9f9f9 }
header{position: fixed; top: 0; z-index: 10; min-width: 860px; padding: 0 10px; max-width: 880px; height: 70px; display: block; margin:0 auto; background-color: #fff;}
main{display: -webkit-flex; display: flex; flex: 1;  -webkit-flex-flow: column;  flex-flow: column;  min-width: 100%; padding-top: 120px; }
main > nav { min-width: 15%; -webkit-order: 1; order: 1; flex: 1}
main > aside { -webkit-flex: 1 6 40%; flex: 1 6 40%; -webkit-order: 1; order: 1; height: 100%;}
footer {display: block; background-color: #f2f2f2; font-size: 10px!important;   height: 30px; transform: translateY(100%); }

/**CABECERA**/
logo img {max-height: 80px; max-width: 150px; }
header nav {display: none;}
header controllerdiv{display: block; overflow: hidden;clear: both;}
.kk_body header controllerdiv {margin-top: 12px}
header controllerdiv headcenter { display: inline-block; overflow: hidden; width: 60%; text-align: center;}
header controllerdiv headcenter name {display: none;}
.kk_body header controllerdiv headcenter name {color: #009688 }
header controllerdiv column {display: inline-flex; width: 20%; float: right}
header controllerdiv column button{ font-size: 20px;  padding: 6px 10px; margin-top: -7px; height: 36px;  }
header controllerdiv column row{justify-content: flex-end}
header controllerdiv headcenter {text-align: center;}
header controllerdiv headcenter tittlehead { font-size: 22px; color: #30689c; text-transform: uppercase; }
.kk_body header controllerdiv headcenter tittlehead { color: #6b6f82; text-transform: initial }
.kk_body header controllerdiv headcenter tittlehead .section { color: #333; text-transform: initial }
header controllerdiv headcenter section {
    color: #000;
    text-transform: uppercase;
}
header controllerdiv column patient { max-width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
header controllerdiv phone {display: none}

/**CUERPO**/
fixed {position: fixed; left: 0; right: 0; height: 0; top: 70px; z-index: 1; }
article {font-size: 14px; height: 100%; overflow: hidden; min-width: 0; order:2; flex:2}
aside content{height:97%;}
content{ display: block; padding: 1% 25px; height: 79%; overflow: auto}
form {  margin: 0 auto; display: flex; flex-direction: column; height: 100%; }
form h3 {position: relative; display: flex;margin: 0 auto; max-width: 880px; background-color: #90b2d2; color: #fff;box-shadow: inset 0 -5px 0 #30689c; padding: 10px 0 10px 0; flex-direction: row; justify-content: space-between;}
.kk_body form h3 { background-color: #26a69a; box-shadow: none; }
.kk_body form h3 icon { display: none; }
form h3 l { flex: 1; max-width: 68%; margin: auto; }
form h3 i.fa.fa-chevron-left { position: absolute; top: 20px; left: 20px; text-shadow: -1px 0 1px #38526c; cursor: pointer }
.kk_body form h3 i.fa.fa-chevron-left { top: 12px; }
form h3 i.fa.fa-calendar { font-size: 30px; color: rgb(213, 230, 246); margin-right: 10px;}
form h3 strong {padding: 7px 15px!important; border-radius: 20px!important;}
column{display: flex; flex-direction: column; flex: 1; margin-bottom: 5px; min-width: 0; }
row{display: flex; flex-direction: row; flex: 1; justify-content: space-around;  min-height: 0; flex-wrap: wrap;}
step{display: flex; flex-direction: column; flex: 1; justify-content: space-between; width: 60%; min-height: 0; flex-wrap: wrap; margin: 0 auto; box-shadow: 0 0 10px #5c5c5c; background: white; padding: 20px;}
.kk_body step { box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%) }
line {flex-direction: row; display: flex; justify-content: space-between; margin-bottom: 5px; padding: 5px 10px; align-items: center;}
icon{margin-right: 5px;}
button { background: #30689c; color: #fff; text-shadow: 0 1px 1px #30689c; border: none;}
button:active {background-color: #20568b78;}
label{font-weight:normal!important;}
/**LOGIN**/
login{ display: block; height: 100%;   min-width: 60%; }
login h3 {background-color: transparent; box-shadow: none;}
login column {background: #fff;  padding: 45px 10% 26px 10%; border-radius: 1px; box-shadow: 0 0 5px #4e4e4e;}
login button { margin: 10px auto; min-width: 94%; border-radius: 0; }
/*POPUP*/
contentpopup{position: fixed; top: 0;  z-index: 2;  width: 100%; height: 100%;}
popup, .popupAgenda{position: absolute!important; top: 20%; left: 0; width: 45%; right: 0;  z-index: 1; margin: 0 auto; display: flex; flex-direction: column; align-items: center;}

/**PIE**/
footer { text-align: center; padding: 5px; border-top: 2px solid #00b300;}
footer div {display: flex; flex-direction: column;}
footer small, footer strong{width: 100%; display: inline-block}
footer a {font-size: 10px!important}

footer.kk_footer { background-color: #009688 !important; border-top: none !important; color: #fff; font-size: 15px !important }
footer.kk_footer strong { font-weight: normal; }
footer.kk_footer a { color: #fff; }


nombreclinicapopuperror{width: 100%; float:left; text-align: center;}
telefonoclinicapopuperror{width: 100%;float: left;margin-top: 15px;text-align: center;font-size: 26px;}

/** ZONA PRIVADA **/
contentbody.privado main {padding-top: 70px; flex-direction: row;}
contentbody.privado main form {min-width: 80%;}

.kk_body .identificacion step a { background: #fff; color: #009688; border:none; box-shadow: none;   }
.kk_body .identificacion step a:hover { background: #e0f2f1; cursor: pointer; }
.kk_body .identificacion step a label { text-shadow: none; pointer-events: none;  }
.kk_body .identificacion step a label span { text-transform:uppercase; }
.kk_body .identificacion step a.buscarDia { color: #009688; text-decoration: none; font-size:14px;}
.kk_body .identificacion column input {
    line-height: 1.15;
    overflow: visible;
    font-size: 1rem;
    box-sizing: content-box;
    width: 100%;
    height: 3rem;
    margin: 0 0 8px 0;
    padding: 0;
    -webkit-transition: box-shadow .3s, border .3s;
    transition: box-shadow .3s, border .3s;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    text-align: left !important;
}
.kk_body .identificacion column input::placeholder {
    color: #aaa;
}

.kk_body .identificacion column zonebutton button {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    display: inline-block;
    padding: 0 2rem;
    vertical-align: middle;
    text-transform: capitalize;
    border: none;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
    outline: 0;
    cursor: pointer;
    transition: background-color .2s ease-out;
    text-align: center;
    text-decoration: none;
    letter-spacing: .5px;
    color: #fff;
    font-size: 1rem;
    line-height: 32.4px;
    height: 32.4px;
    background-color: #009688 !important;
}

i.material-icons {
    display: none;
}

.kk_body i.material-icons {
    display: inline;
}

.kk_body column.citaConfirmada {
    padding: 10px 20px;
    border-radius: 0 0 2px 2px;
    background: #00bcd4 !important;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    color: #fff;
}

.kk_body column.citaConfirmada line {
    padding: 0;
    display: block;
    line-height: 32px;
    font-weight: 400;
    font-size: 18px;
    margin: 0;
    margin-bottom: 8px;
}

.kk_body column.citaConfirmada line p {
    margin: 0;
}

.kk_body column.citaConfirmada line p b {
    font-weight: 400;
}

.kk_body column.citaConfirmada line h4 {
    color: #fff;
    font-weight: 400;
    text-align: left;
}

.kk_body column.citaConfirmada line icon.informacion {
    display: none;
}

.kk_body column.citaConfirmada line column p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}