html, body {

	font:normal 16px verdana;

	margin:0;

	padding:0;

	border:0 none;

	overflow:auto;

	height:100%;

    background: #f2f4f8;

}

/*#divDatePicker .ui-datepicker tbody td.highlight a{ background-color: red; border-bottom: 3px blue solid; }*/

#divDatePicker .ui-datepicker .highlight a{ background: red; border-bottom: 3px blue solid; }
.smallTitleStuff { box-shadow: 0px 0px 10px rgb(0 0 0 / 20%); }
.smallTitleStuff .ui-dialog-titlebar { background: none; border: none; }
.ui-widget-overlay {
    background: #000000;
    opacity: .8;
    filter: Alpha(Opacity=80);
}
.clsTitle{
    width: 100%;
    height: auto;
    color:#ffffff;
    display: inline-block;
    margin-bottom: 5px;
    padding: 8px;
    background: rgb(137 80 238);
    background: linear-gradient(180deg, rgb(163 86 240) 2%, rgb(137 80 238) 93%);
}

.clsButton{
    color:#ffffff;
    display: inline-block;
    margin: 0 1px 0 1px;
    padding: 4px 8px 4px 8px;
    border:0; border-radius:4px;
    font-size: 14px;

    background: rgb(137 80 238);
    background: linear-gradient(180deg, rgb(163 86 240) 2%, rgb(137 80 238) 93%);

}
.clsButton:hover{
    background: rgb(163 86 240);
    background: linear-gradient(180deg, rgb(137 80 238) 2%, rgb(163 86 240) 93%);
}
.clsTarjetaMedico{
    width:24%; 
    float:left; 
    height:auto;
    min-height: 180px;
    background:#f2f0f0 ;  display:table-cell; border:1px solid #ccc; border-radius: 4px;
    padding:6px 6px 6px 6px; margin:8px; box-sizing:border-box;
    /*text-transform: lowercase;*/
    box-shadow: 2px 8px 2px -6px gray;
}
.clsTarjetaMedico:hover{
    background:#FFFFFF; 
}
.clsBtnLupa{

    float:right;

    color:#ffffff;

    padding: 4px 8px 4px 8px;

    background: rgb(29,7,95); background: linear-gradient(180deg, rgba(29,7,95,1) 18%, rgba(39,24,218,1) 100%);

    border:0; border-radius:4px;

    font-size: 15px;

    margin: 0px 5px 4px 0px; 

}



.x-grid3-cell-inner{

    font-size:18px;

}

.x-grid3 table {

    height: 30px;

}



/*-------------- Login --------------*/

#divForm label{

	font-family:Arial, Verdana;

	font-size:22px;

}

#divLoginForm{

	background:url(images/bgrayadaClara.jpg) repeat #1089CB;



	width:auto;

	height:100%;

	border-radius:8px;

	color:#000;

	

	padding:5px;

	border:1px solid #999;

}

#divLoginForm table{

	width:100%;

	height:229px;

}

#divLoginForm table th{

	border-bottom:1px #6A7386 solid;

	text-align:left;

	letter-spacing:1px;

	font-size:15px;

	font-weight:normal;

	font-family:Verdana, Geneva, sans-serif;

}

.clsFormulario{

	margin-bottom:10px;

}

.clsFormulario h1{

	font-size:14px;

	margin:0px;

	margin-top:10px;

}

.clsTextFormulario{

	width:90%;

	padding:6px;

	border:1px solid #7C7A7A;

	border-radius:4px;

	font-size:14px;

	background:#F1EDED;	

}

.custom-buttonBuscar{

	width:94%;

	margin-top:5px;

	padding:6px;

	border:1px solid #999;

	border-radius:4px;

	background:#FFF;

	font-size:14px;

	cursor:pointer;

}

.custom-buttonBuscar:hover{

	background:#9C0;

}



.custom-combobox2{

    width: 98%;

	padding: 6px;

	box-sizing:border-box;

	border:1px solid #CCC;

	border-radius:4px;

	background:#F4F4F4;/*#EFEFEF*/

	

}

.clsBgColor1{

	background-color:#F4F1D2;

}

.clsBgColor2{

	background-color:#B1C4E7;

}



.custom-button2{

	/*width:20px;*/

	padding:4px;

	border:1px solid #CCC;

	background: url(css/expand2.gif) center center no-repeat #EFEFEF;

	margin-left:-1px;

	border-radius:4px;

	cursor:pointer;

}

.custom-button{

	/*width:20px;*/

	padding:4px 6px 4px 6px;

	border:1px solid #CCC;

	background:url(images/bgBotonOn.png) repeat #EFEFEF;

	margin-left:-1px;

	border-radius:4px;

	cursor:pointer;

}

.custom-button:hover{

	background:#E8DFAE;

	background:url(images/bgBotonOver.png) repeat #EFEFEF;

}

.clsBtnGuardar{

	background:url(images/bgBotonGuardarOn.png) repeat #B4D205;

}

.clsBtnGuardar:hover{

	background:url(images/bgBotonGuardarOver.png) repeat #E8DFAE;

}

.clsBtnEliminar{

	background:url(images/bgBotonEliminarOn.png) repeat #F30;

}

.clsBtnEliminar:hover{

	background:url(images/bgBotonEliminarOver.png) repeat #E8DFAE;

}



.clsFormAutentificar {

    position: relative;

    margin-left: auto;

    margin-right: auto;

    height: auto;

}



@media (max-width: 320px) {

	.clsFormAutentificar{

		width:90%;

	}

	

    .clsNombre{

      width:100%;

    }

    .clsSexo{

      width:48%;

    }

    .clsFecNac{

      width:48%;

    }

    .clsDiv2{

        width: 100%;

    }

    .clsIcoMenu{

        display:inline;

    }

    .clsMenu{

        /*display:none;*/

        position:fixed;

        left:-180px;

    }

    .clsContGeneral{

        width: 100%;

    }

    .clsLiExpediente{

        display: list-item;

        border-radius:0px;

    }

    .clsDivTab{

        margin: 0px;

    }

}



@media (min-width: 350px) {

	.clsFormAutentificar{

		width:90%;

	}

    .clsNombre{

      width:100%;

    }

    .clsSexo{

      width:48%;

    }

    .clsFecNac{

      width:48%;

    }

    .clsDiv2{

        width: 100%;

    }

    .clsIcoMenu{

        display:inline;

    }

    .clsMenu{

        /*display:none;*/

        position:fixed;

        left:-180px;

    }

    .clsContGeneral{

        width: 100%;

    }

    .clsLiExpediente{

        display: list-item;

        border-radius:0px;



    }

    .clsDivTab{

        margin: 0px;

    }

}



@media (min-width: 558px) {

	.clsFormAutentificar{

		width:60%;

	}

    .clsNombre{

      width:100%;

    }

    .clsSexo{

      width:48%;

    }

    .clsFecNac{

      width:48%;

    }

    .clsDiv2{

        width: 100%;

    }

    .clsIcoMenu{

        display:inline;

    }

    .clsMenu{

        /*display:none;*/

        position:fixed;

        left:-180px;

    }

    .clsContGeneral{

        width: 100%;

    }

    .clsLiExpediente{

        display: list-item;

        border-radius:0px;

    }

    .clsDivTab{

        margin: 0px;

    }

}



@media (min-width: 768px) {

	.clsFormAutentificar{

		width:50%;

	}

    .clsNombre{

      width:100%;

    }

    .clsSexo{

      width:48%;

    }

    .clsFecNac{

      width:48%;

    }

    .clsDiv2{

        width: 100%;

    }

    .clsIcoMenu{

        display:none;

    }

    .clsMenu{

        /*display:block;*/

        position:fixed;

        left:-180px;

    }

    .clsContGeneral{

        width: 78%;

    }

    .clsLiExpediente{

        display: inline-block;

        border-top-left-radius:4px;

        border-top-right-radius:4px;

    }

    .clsDivTab{

        margin: 0px 5px 0px 5px;

    }

}



@media (min-width: 990px) {

	.clsFormAutentificar{

		width:45%;

	}

    .clsNombre{

      width:300px;

    }

    .clsSexo{

      width:120px;

    }

    .clsFecNac{

      width:220px;

    }

    .clsDiv2{

        width: calc(100% - 200px);

    }



    .clsIcoMenu{

        display:none;

    }

    .clsMenu{

        /*display:block;*/

        left:0px;

        position:inherit;



    }

    .clsContGeneral{

        width: calc(100% - 180px);

    }

    .clsLiExpediente{

        display: inline-block;

        border-top-left-radius:4px;

        border-top-right-radius:4px;

    }

    .clsDivTab{

        margin: 0px 5px 0px 5px;

    }

}



@media (min-width: 1300px) {

	.clsFormAutentificar{

		width:30%;

	}

    

    .clsNombre{

      width:300px;

    }

    .clsSexo{

      width:120px; 

    }

    .clsFecNac{

      width:220px;

    }

    .clsDiv2{

        width: calc(100% - 200px);

    }



    .clsIcoMenu{

        display:none;

    }

    .clsMenu{

        /*display:block;*/

        left:0px;

        position:inherit;

    }

    .clsContGeneral{

        width: calc(100% - 180px);

    }

    .clsLiExpediente{

        display: inline-block;

        border-top-left-radius:4px;

        border-top-right-radius:4px;

    }

    .clsDivTab{

        margin: 0px 5px 0px 5px;

    }

}

