/* DEFAULTS
----------------------------------------------------------*/
 
  /*  Set the Style for parent CSS Class 
    of Calendar control 
    Parent [CssClass] = myCalendar */
.myCalendar {  
    background-color: #efefef; 
}    
/* 
    Common style declaration for hyper linked text 
*/  
.myCalendar a {  
    text-decoration: none;  
}    
/* 
    Styles declaration for top title 
    [TitleStyle] [CssClass] = myCalendarTitle 
*/  
.myCalendar .myCalendarTitle {  
    font-weight: bold;  
}    
/* 
    Styles declaration for date cells 
    [DayStyle] [CssClass] = myCalendarDay 
*/  
.myCalendar td.myCalendarDay {  
    border: solid 2px #fff;  
    border-left: 0;  
    border-top: 0;  
    padding: 0;
    height:50px;
    width:62px !important;
    }    
/* 
    Styles declaration for next/previous month links 
    [NextPrevStyle] [CssClass] = myCalendarNextPrev 
*/  
.myCalendar .myCalendarNextPrev {  
    text-align: center;  
}    
/* 
    Styles declaration for Week/Month selector links cells 
    [SelectorStyle] [CssClass] = myCalendarSelector 
*/  
.myCalendar td.myCalendarSelector {  
    background-color: #dddddd;  
}    
.myCalendar .myCalendarDay a,   
.myCalendar .myCalendarSelector a,  
.myCalendar .myCalendarNextPrev a {  
    display: block;  
    line-height: 18px; 
    height:100%;
    width:100%;
    line-height: 48px; 
} 
.myCalendar .myCalendarNextPrev a {
    padding: 0;
    line-height:18px; 
}   
.myCalendar .myCalendarDay a:hover,   
.myCalendar .myCalendarSelector a:hover {  
    background-color: #cccccc;  
}    
.myCalendar .myCalendarNextPrev a:hover {  
    color:#fff !important;  
}
.myCalendarTitle td {
    padding: 6px 0;
} 

/*--------------------------------------------------------------------------------*/
/*                                  CSS PRINCIPALES                               */
/*--------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, center, dl, dt, dd, ul, li, fieldset, form, label, legend, caption, tfoot, thead {
    background: transparent;
    border: 0;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    outline: 0;
    vertical-align: baseline;
    }
html, form {height:100%}
*{box-sizing:border-box;}
body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    background-color: #f7f7f4;
    height:100%;
    padding-top:10px; 
    color: #535353;   
    }
.contenedor-citas {    
    margin: 0px auto;
    max-width: 980px;
    width:100%;
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
    height:calc(100% - 20px);
    overflow:auto;
    padding:20px;
    }
.contenido {position:relative;}
.logo-adn {
    margin-bottom:40px;
    }
.social-adn {
    position:absolute;
    top:30px;
    right:20px;
    }
.formulario-citas {
    width:100%;
    padding-right:20px;
}
.formulario-citas table {
    width:100%;
    border-collapse:separate;
    border-spacing:0 9px;
    margin-top:-9px;
}
.formulario-citas tr {vertical-align:top; }
.formulario-citas tr td {vertical-align:top;}
.formulario-citas tr td:first-child {
    margin:0;
    margin-bottom:19px;
    font-weight:bold;
    padding-top:6px;
    width:170px;
    margin-bottom:9px;
    }
.msgError {color:Red; font-size:10px; font-weight:bold;}


.formulario-citas input, .formulario-citas textarea {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;    
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    vertical-align: middle;
    width:100%;
    resize: none;
    }
.campos input:focus, .campos textarea:focus {
    border-color: #e9322d;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
    outline:0;
    }
.izquierda {
    float:left;
    width:50%;
    }
.derecha {
    float:left;
    width:50%;
    }
.tabla-servicios {
    width:100%;
    margin-top:10px;
    }
.tabla-servicios table {
    width:100%;
    }
.tabla-servicios table td, .tabla-servicios table th {
    padding:6px 16px;
    }
.tabla-servicios .th-principal {
    background-color:#ee1c25;
    color:#fff;
}
.enviar {
    float:right;
    margin-top:5px;
    
}
.enviar a {
    display: inline-block;
    padding: 12px 38px;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #ffffff;
    background-color: #18bc3f;  
    border: 1px solid #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    text-decoration:none;
}
.enviar a:hover {
    background-color: #ee1c25; 
    color:#fff;
    }
.check-aceptar {
    color: #666;
    text-decoration: none;
    font-size:12px;
    float:right    
    }
.check-aceptar input {
    vertical-align:bottom;
    }
.check-aceptar a {
    color: #666;
    text-decoration: none;
    font-size:12px;
    }
.check-aceptar a:hover {
    color:#000;
    }
.alerta-check {
    color:Red;
    font-weight:bold;
    font-size:12px;
    float:right;  
    }
.alerta-check a {
    color:Red;
    font-weight:bold;
    font-size:12px;
    text-decoration: none;
    }
.alerta-check a:hover {color:#000;}
.direccion-tabla {
    background-color:#ddd;
}
.direccion-tabla td div {
    float:left;
    padding-right:12px;
    }
.direccion-tabla td div p {
    margin:0;
    margin-bottom:2px;
    }
.direccion-tabla td div input {
    width:100%;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    padding: 4px 10px;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    vertical-align: middle;
    width:100%;
    }
.direccion-tabla td div input:focus {
    border-color: #e9322d;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
    outline:0;
    }
.direccion-tabla td .dir-1 {width:50%;}
.direccion-tabla td .dir-2 {width:20%;}
.direccion-tabla td .dir-3 {width:10%;}
.direccion-tabla td .dir-4 {width:20%; padding-right:0px;}
.direccion-tabla td .dir-4 input {background-color: #eee;}
.alerta {
    width:100%;
    background-color:#ee1c25;
    color:#fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align:center;
    font-size:16px;
    line-height:16px;
    padding:10px;
    margin-bottom:20px;
    }

@media (max-width: 898px) {
    .izquierda {
        width:40%;
    }
    .derecha {
        width:60%;
    }   
} 
 
@media (max-width: 755px) {
    .izquierda {
        width:100%;
    }
    .derecha {
        width:100%;
        text-align:center;
    } 
    .derecha > div > table {margin:0 auto;}  
    .nombres {width:18%;}
    .campos {width:67%;}
     .tabla-servicios {width:100%; margin-bottom:20px;}
     .enviar {
     position:relative;
     width:100%;
     text-align:right;
     margin-bottom:60px;
     right:0;
     }
}

@media (max-width: 610px) {    
    .nombres {width:30%;}
    .campos {width:60%; padding-right:0;}
} 
@media (max-width: 490px) {    
    .nombres {width:30%;}
    .campos {width:70%; padding-right:0;}
}    

.leyendaDias 
{
    display:inline-block;
    width:10px;
    height:10px;     
    }


/* ESTILOS PANEL DE ALERTA Y CONFIRMACIÓN*/

/* Fondo */
.fondopopup 
{
	background-color: rgb(0, 0, 0); 
	position: fixed; 
	top: 0px; 
	right: 0px; 
	bottom: 0px; 
	left: 0px; 
	opacity: 0.4; 
	z-index: 9000; 
	display:none;
	}
/* panel */
.popupAlert, .popupConfirm, .popupBienvenida, .popupPedirDato, .popupPedirFactura, .popUp3Opciones
	{
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	    border-radius: 10px;
	        
		-webkit-box-shadow: 0 0 25px 5px #999;
		-moz-box-shadow: 0 0 25px 5px #999;
	    box-shadow: 0 0 25px 5px #999;

		color: #1D1D1A;
		position: absolute; 
		display: none;
		max-width:350px;	
		padding: 25px;		
		left: 50% !important; 				
		top: 50% !important;
		margin-left:-175px !important;
		margin-top:-200px !important;
		z-index: 9999;
		background-color:#fff;
	}
.popupBienvenida { background:#FFF url("../Images/Bienvenida/fotoportada4.jpg") no-repeat;}

/* boton cerrar X */
.lbtXConfirm, .lbtXAlert, .lbtX3Opciones
{
		background-color: #777;
		border: 1px solid #AAA !important;		
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
	    border-radius: 7px;	        
		color: #fff !important;
		cursor: pointer;
		display: inline-block;
		padding: 5px 8px 5px 8px;
		text-align: center;
		text-decoration: none;		
		font: bold 131% sans-serif;
		
		position: absolute;
		
		right: -7px;
		top: -7px;
	}
	
.lbtXConfirm:hover, .lbtXAlert:hover, .lbtXBienvenida:hover, .lbtX3Opciones:hover
	{
	   border-color: #777 !important;
	   background: #fff !important;
	   color: #AAA !important;
	   text-decoration:none;
	}
	
/* botones Aceptar y cancelar  */
.lbtAceptarConfirm,	.lbtCancelarConfirm, .lbtAceptarAlert, .lbtAceptar3Opciones
	  {
		padding:5px 5px;
	   border: 1px solid #AAA !important;	   
	   background: #FFF !important;
	   color: #1D1D1A !important;	
	   	-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	    border-radius: 5px;
	   } 
	   
.lbtAceptarConfirm:hover, .lbtCancelarConfirm:hover, .lbtAceptarAlert:hover, .lbtAceptar3Opciones:hover
	{
	   border-color: #777 !important;
	   background: #AAA !important;
	   color: #FFF !important;
	   } 
	 
/* TextBox para recibir el dato  */  
.txtRespuesta
    {
        height:10px;
        font-size:9px;
        font-family:Arial;
    }