* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;

}

body {
    font-size: 18px;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
}

/*****************************************
  DISE�O INPUTBOX
******************************************/

.formulario  {

  border: 3px solid #DBE1EB;
  font-size: 18px;
  font-family: Arial, Verdana;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 10px;
  border-radius: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: #FFFFFF;
  background: linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
  color: #000;
 }


/*****************************************
  BOTONES
******************************************/

.button {
    background-color: #B6B6B6;
    color: white;
    border: none;
    border-radius: 40px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
}

.button:hover {
    background-color: silver;
    color: #008080;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
}

.botonimagen{
  /*background-image:url(../img/clientes/btn1.jpg);*/
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center top;
  /*position: inherit;
/*  top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
/*  left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
/*  margin-top: -125px; /* Restamos la mitad de la altura del objeto con un margin-top */
/*  margin-left: -125px; /* Restamos la mitad de la anchura del objeto con un margin-left */
  height:150px;
  width:150px;
  box-shadow: 3px 3px 23px 10px rgba(0,0,0,0.75);
  cursor: pointer;
  border-radius: 30px;

}

.botonimagen:hover {
  /*margin-top: -130px; /* Restamos la mitad de la altura del objeto con un margin-top */
  /*margin-left: -130px; /* Restamos la mitad de la anchura del objeto con un margin-left */
  box-shadow: 3px 3px 23px 10px rgba(192,192,192,0.75);

    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

/* BOTON CERRAR SESION EN PANEL */
.close_sesion{
  position: absolute;
  border-radius: 50px;
  right: 20px;
  top: 20px;
  width: 100px;
  height: 100px;
  box-shadow: 3px 3px 23px 10px rgba(0,0,0,0.75);
}

.close_sesion:hover{
  box-shadow: 3px 3px 23px 10px rgba(192,192,192,0.75);
}

/* BOTON HOME */
.close_home{
  position: absolute;
  border-radius: 50px;
  right: 20px;
  top: 20px;
  width: 70px;
  height: 70px;
  box-shadow: 0px 3px 5px 5px rgba(0,0,0,0.75);
}

.close_home:hover{
  box-shadow: 0px 3px 5px 5px rgba(192,192,192,0.75);
}


/*****************************************
  CENTRAR DIV EN PANTALLA
******************************************/

.centrar_div {
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  position: absolute;
  top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
  left: 0; /* Buscamos el centro vertical (relativo) del navegador */
  width: 100%; /* Definimos el ancho del objeto a centrar */
  height: 300px; /* Definimos el alto del objeto a centrar */
  margin-top: -150px; /* Restamos la mitad de la altura del objeto con un margin-top */
  /*margin-left: -150px; /* Restamos la mitad de la anchura del objeto con un margin-left */

}

/*****************************************
  CUADRO DE RESUMEN
******************************************/
.resumen {
  color: white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  position: absolute;
  right: 0;
  margin-right: 10px;
  background-color: black;
  opacity: 0.5;
  padding: 10px 15px;
  width: 300px;
  height: 500px;

}

.resumen-cont {
  color: white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  position: absolute;
  right: 0px;
    margin-right: 10px;
  padding: 10px 15px;
  width: 300px;
  height: 500px;
}

.resumen-cont table {
  color: white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
}

/*****************************************
  input file
******************************************/
input[type=”file”]#file {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
 }

 label[for=" file"] {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #106BA0;
  display: inline-block;
  transition: all .5s;
  cursor: pointer;
  padding: 15px 40px !important;
  text-transform: uppercase;
  width: fit-content;
  text-align: center;
  }

  input[type=text], input[type=password] , Select{
    /*width: 100%;*/
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  /*****************************************
    PANTALLA CARGANDO...
  ******************************************/

  .loader {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url('img/loader.gif') 50% 50% no-repeat rgb(249,249,249);
      opacity: .8;
  }


  /*****************************************
    BOTON CODIGO
  ******************************************/
.botcod{
  background-image:url(../img/botones/botcod.jpg);
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.5);
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center top;
  color: white;
  height:150px;
  width:150px;
  cursor: pointer;
  border: 1px solid #008080;
  border-radius: 300px;
  font-size: 18px;
}

.botcod:hover{
  box-shadow: 2px 2px 10px 2px rgba(0,0,0,1);
  font-size: 24px;
}


/*****************************************
  formato de las tablas
******************************************/

#customers {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  border-collapse: collapse;
//  width: 60%;
}

#customers td, #customers th {
  border: 1px solid #008080;
  padding: 8px;
}

#customers tr:nth-child(even){
  background-color: #c0c0c0;
}

#customers tr:hover {
  background-color: #008080;
  color: white;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

/*****************************************
 TAMA�O DE FUENTE EN FORMULARIOS
******************************************/

.Estilo24

{
font-family: "Arial", Times, serif;
font-size: 20px;
border-radius: 10px;
padding-left: 15px;
}

.Estilo16
{
font-family: "Arial", Times, serif;
font-size: 20px;
}

 .Estilo30
{
font-family: "Arial", Times, serif;
font-size: 30px;
}

/*****************************************
  CHECKER EN TABLA
******************************************/

.demo input[type="checkbox"] {
	display: none;
}
.demo input[type="checkbox"] + label span {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: -1px 4px 0 0;
	vertical-align: middle;
	background: url(../../img/botones/checkbox-uncheck.png);
	background-size: cover;
	cursor: pointer;
}
.demo input[type="checkbox"]:checked + label span {
	background: url(../../img/botones/checkbox-check.png);
	background-size: cover;
}


/*****************************************
  DIV CON SCROLL
******************************************/


#global {
	height: 300px;
	width: 200px;
	border: 1px solid #ddd;
	background: #f1f1f1;
	overflow-y: scroll;
}
#mensajes {
	height: auto;
}
.texto {
	padding:4px;
	background:#fff;
}


/*****************************************
  RADIO BUTTONS
******************************************/

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  color: #008080;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
}

input[type=radio]:checked + label{
  color: #ffffff;
  background: #008080;
}

label + input[type=radio] + label {
  border-left: solid 3px lighten(#332f35,20%);
}
.radio-group {
  border: solid 3px #008080;
  display: inline-block;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}

@import url('https://fonts.googleapis.com/css?family=Roboto');