@import url("https://fonts.googleapis.com/css?family=Dosis:300,400,700,800");

@media screen and (min-width: 550px) {
  .div_bloque_base{
    padding-top: 45px;
  }
}

@media screen and (max-width: 550px) {
  .div_bloque_base{
    padding-top: 0px;
  }
}


#detalle_cuenta{
  background-color: #FBFCFC;
  margin: 0;
  padding: 2px 0px 2px 3px;
  box-shadow: 7px 7px 4px #797D7F;
  border:1px solid #BFC9CA;
}


#detalle_solicitud{
  background-color: #FBFCFC;
  margin: 0;
  padding: 2px 0px 2px 3px;
  box-shadow: 7px 7px 4px #797D7F;
  border:1px solid #BFC9CA;
}

#titulo_empresa{
  text-align: center;
  color:#252424;
  font-family: "Dosis", sans-serif;
  font-size: 60px;
  font-weight: 750;
}

#a_sucursal{
  color:#21618C;
  text-decoration: none;
}


#login{
    margin: 0 auto !important; 
    margin-top: 10% !important;
    width: 400px;
}

#div_login{
  border-radius: 10px;
	background-color: #3b4652;
	opacity: .85;
	padding: 10px 20px 0px 20px;
  box-shadow: 0px 0px 3px #848484;
}

.user-img{
	margin-bottom: 15px;
}
.user-img img{
	width: 100px;
	height: 100px;
	box-shadow: 0px 0px 3px #848484;
	border-radius: 50%;
}


#click_empresa{
  text-align: center;
  color:#252424;
  font-family: "Dosis", sans-serif;
  font-size: 17px;
  font-weight: 700;
}


div.modal-header{
  background-color: #21618C !important;
}
h5.modal-title{
  color: white;
  font-size: 17px;
}


#menu-opciones {
  counter-reset: li; 
  list-style: none; 
  *list-style: decimal; 
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#menu-opciones ol {
  margin: 0 0 0 2em; 
}

#menu-opciones li{
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;  
}

#menu-opciones li:hover{
  background: #eee;
}

#menu-opciones li:hover:before{
  transform: rotate(360deg);  
}

#menu-opciones li:before{
  content: counter(li);
  counter-increment: li;
  position: absolute; 
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #87ceeb;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

.content-header h1{
  font-family: Tahoma, sans-serif;
  font-weight: bold;
}

.titulo_info_empresa{
  font-family: Tahoma, sans-serif; 
  font-size: 20px;
  font-weight: bold; 
  text-align: center;
}

.texto_info_empresa{
  font-family: Tahoma, sans-serif; 
  font-size: 16px;
  text-align: justify !important
}


/*CSS de las imágenes del cliente o empleado en el área de préstamo*/
.thumbnail .image {
  height: 300px;
  overflow: hidden
}

.thumbnail {
  background-color: #E5E7E9 !important;
  height: 312px;
  overflow: hidden;
}

.view {
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.view .mask{
  position: absolute;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0
}


.view .tools {
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 16px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.35);
  margin: 227px 0 0 0
}

.view .tools a {
  color: #FFF;
  font-weight: 700;
  text-decoration: none !important;
}
.view p {
  font-family: Georgia, serif;
  font-style: italic;
  color: #fff;
  padding-top: 10px;
  text-align: center
}

.view-first img {
  transition: all 0.2s linear
}
.view-first .mask {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease-in-out
}
.view-first .tools {
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out
}
.view-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear
}
.view-first:hover img {
  transform: scale(1.05);
  transition: 1s ease;
  z-index: 2;
}
.view-first:hover .mask {
  opacity: 1
}

.view-first:hover .tools,
.view-first:hover p {
  opacity: 1;
  transform: translateY(0px)
}

.view-first:hover p {
  transition-delay: 0.1s
}

/*CSS de las Etiquetas "a" en los formularios que son obligatorios*/
.a_obligatorio{
  cursor: pointer;
  font-size: 10px;
  text-decoration: none !important;
}


.reloj_negro{
  padding: 6px 3px 6px 4px; 
  color: white; 
  font-size: 24px; 
  background-color: #212F3D !important; 
  font-weight: 200;
}

.alerta_peligro{
  background-color: #f2dede; 
  border-color: #ebccd1; 
  color: #a94442;
}

.alerta_informacion{
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.panel-title{
  font-weight: bold !important;
}

#seguridad_caja{
    margin: 0 auto !important; 
}

#div_seguridad_caja{
  border-radius: 10px;
  opacity: .85;
  padding: 10px 20px 0px 20px;
  box-shadow: 0px 0px 3px #848484;
}

#imagen_usuario_caja img{
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 3px #848484;
  border-radius: 50%;
}


.panel_azul {
  border: 1.5px solid #1F618D;
}
.panel_azul > .panel-heading {
  color: #fff;
  background-color: #1F618D;
  border: 1.5px solid #1F618D;
}


.panel_azul_billetes {
  border: 1.5px solid #2874A6;
}
.panel_azul_billetes > .panel-heading {
  background-color: #2874A6;
  border: 1.5px solid #2874A6;
  color: #fff;
  text-align: center !important;
}

.span_billete {
  background-color: #2874A6 !important;
  color: #fff;
  font-size: 16px;
}

.panel_rojo_monedas {
  border: 1.5px solid #d9534f;
}
.panel_rojo_monedas > .panel-heading {
  background-color: #d9534f;
  border: 1.5px solid #d9534f;
  color: #fff;
  text-align: center !important;
}

.panel_naranja {
  border: 1.5px solid #4da8fc;
}
.panel_naranja > .panel-heading {
  background-color: #4da8fc;
  border: 1.5px solid #4da8fc;
  color: #fff;
  text-align: center !important;
}


.span_moneda {
  background-color: #d9534f !important;
  color: #fff;
  font-size: 16px;
}

.panel_verde {
  border: 1.5px solid #148F77;
}
.panel_verde > .panel-heading {
  background-color: #148F77;
  border: 1.5px solid #148F77;
  color: #fff;
  text-align: center !important;
}

.senalador_a a:hover{
	cursor: pointer !important;
}