/*
 * Copyright 2016 Google Inc.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Roboto+Condensed&display=swap');


* {
  box-sizing: border-box; }

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  max-width:800px;
  /*font-family: "Open Sans", sans-serif;*/
  font-family: 'Didact Gothic', sans-serif;
  font-weight: 400;
/*  font-display: optional;*/
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

html {
  overflow: hidden; }

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  background: #ffffff; }
  
/* imagen input */
.image-upload > input
{
    display: none;
}
.image-upload img
{
    width: 50px;
    cursor: pointer;
}

.header {
  width: 100%;
  max-width:800px;
  height: 60px;
  color: #000000;
  background: #c5c5c5;
  position: fixed;
  font-size: 20px;
/*  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);*/
  padding: 13px 16px 0 16px;
  will-change: transform;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s, -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  z-index: 1000; }
  .header .headerButton {
    width: 15px;
    height: 15px;
    margin-top: 5px;
    margin-right: 16px;
    text-indent: -30000px;
    overflow: hidden;
    opacity: 0.54;
    -webkit-transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
    transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
    border: none;
    outline: none;
    cursor: pointer; }
  .header #butRefresh {
    background: url(/app/images/ic_refresh_white_24px.svg) center center no-repeat; }
  .header #butAdd {
    background: url(/app/images/ic_add_white_24px.svg) center center no-repeat; }
  .header #butAddMat {
    background: url(/app/images/ic_add_white_24px.svg) center center no-repeat; }

.header__title {
  font-weight: 400;
  font-size: 25px;
  margin: -5px;
  padding-left: 20px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1; }
.footer {
  width: 100%;
  max-width:800px;
  height: 50px;
  color: #FFF;
  background: #c5c5c5;
  position: fixed;
  font-size: 20px;
  left: 0;
  bottom: 0;
/*  box-shadow: 5px 4px 0 0 rgba(0, 0, 0, 0.14), 9px 2px 0 1px rgba(0, 0, 0, 0.12), 2px 4px 0 -2px rgba(0, 0, 0, 0.2);*/
  padding: .65em .6em .6em .6em;
  will-change: transform;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s, -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  z-index: 1000; }
  .footer .footerButton {
    width: 15px;
    height: 15px;
    margin-top: 5px;
    margin-left: 40%;
    text-indent: -30000px;
    overflow: hidden;
/*    opacity: 0.54;*/
    -webkit-transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
    transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
    border: none;
    outline: none;
    cursor: pointer; }
  .footer #butSendCancel, .footer #butSendMatCancel {
    background: url(/app/images/ic_back.svg) center center no-repeat; }
  .footer #butSend, .footer #butSendMat {
    background: url(/app/images/ic_send.svg) center center no-repeat; }
  .footer #butEnfOk {
    background: url(/app/images/ic_save.svg) center center no-repeat; }
  .footer #butEnfCancel {
    background: url(/app/images/ic_back.svg) center center no-repeat; }
    
.but-mas-menos{
  text-indent: -9999px;
  cursor: pointer;
  width: 16px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center 5px;}
  .but-mas-menos.mas{
  background-image: url(/app/images/ic_plus.svg);}
  .but-mas-menos.menos{
    background-image: url(/app/images/ic_minus.svg);}

.loader {
  left: 50%;
  top: 50%;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
  .loader #spinner {
    box-sizing: border-box;
    stroke: #000000;
    stroke-width: 3px;
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
            animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg); } }

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg); } }

@-webkit-keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0; }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

@keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0; }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

.main, .inicio, .material{
  padding-top: 50px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }

.dialog-container, .dialog-container-enf, .dialog-container-mat {
  background: rgba(0, 0, 0, 0);
  position: fixed;
  left: 0;
  top: 50px;
  /*bottom: 50px;*/
  width: 100%;
  max-width:800px;
  height: calc(100% - 50px);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  -webkit-transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
  transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1); }

.dialog-container--visible, .dialog-container-enf--visible {
  opacity: 1;
  pointer-events: auto; 
  overflow-x: hidden;
  overflow-y: auto;}

.dialog {
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.48);
  min-width: 100%;
  max-width:800px;
  min-height: 100%;
  position: absolute;
  /*margin: 5em 1em 0em 1em ;*/
  -webkit-transition: -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
  transition: -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
  transition: transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
  transition: transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s, -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s; }

.dialog > div {
  padding-left: 1em;
  padding-right: 1em; }

.dialog-title {
  padding-top: 1em;
  padding-bottom: 0.6em;
  font-size: 1.25em;
  font-weight: bold;
  }

.dialog-body {
  line-height: 2em; }
	.dialog-body select {
		width: 95%;
		margin-left: 5%;
        font-family: 'Didact Gothic', sans-serif;
		font-size: 1em;}
	.dialog-body input {
		width: 95%;
		margin-left: 5%;
		font-size: 1em;
        font-family: 'Didact Gothic', sans-serif;
		padding: 0px 3px 1px;}
	.dialog-body input[type='checkbox'] {
		width: auto;}
.dialog-container-mat .row input{
		width: 100%;
    max-width:800px;
		font-size: 1.2em;
		border: 0px;}
.dialog-buttons {
  padding: 8px !important;
  float: right; }
.fondo-permanente {
  background-color: #c5c5c5; }
  
  .fondo-permanente input{
    margin-left: 0%;}

.card, .cardMat{
  padding: .5em .5em 1em 1em;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  border-radius: 2px;
  margin: 1em; }

.weather-forecast .label {
  font-size: 1.1em;}

.weather-forecast .date, .weather-forecast .referencia, .weather-forecast .especie, .weather-forecast .tipo_muestra, .weather-forecast .servicio {
  font-size: 0.9em; 
  display: inline;}

/*@media (max-width: 450px) {
  .weather-forecast .date, .weather-forecast .referencia, .weather-forecast .especie, .weather-forecast .tipo_muestra, .weather-forecast .servicio {
	font-size: 0.9em; }
  }*/
  
/*@media screen and (orientation:portrait) {

}
@media screen and (orientation:landscape) {
	.main { padding-top: 8%;}
	.dialog-container, .dialog-container-enf {
		top: 3em;;
		bottom: 3em;}
}*/

.mdl-button {
  background: transparent;
  border: none;
  border-radius: 2px;
  color: black;
  position: relative;
  height: 20px;
  margin: 0;
  min-width: 64px;
  padding: 0 16px;
  display: inline-block;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
/*
  will-change: box-shadow;
  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
*/
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle; }
  .mdl-button::-moz-focus-inner {
    border: 0; }
  .mdl-button:hover {
    background-color: rgba(158, 158, 158, 0.2); }
  .mdl-button:focus:not(:active) {
    background-color: rgba(0, 0, 0, 0.12); }
  .mdl-button:active {
    background-color: rgba(158, 158, 158, 0.4); }
  .mdl-button.mdl-button--colored {
    color: #000000; }
    .mdl-button.mdl-button--colored:focus:not(:active) {
      background-color: rgba(0, 0, 0, 0.12); }

.mdl-button--primary {
  color: #000000;
  font-family: 'Didact Gothic', sans-serif;
  border-radius: 8px;}
.w75{
	 width: 70%;
	 margin: 10px 1em 1em 15%;
	 padding: 0.5em;
   line-height: 1.2;
}
.weather-forecast .icon {
  background-repeat: no-repeat;
  background-size: contain; 
  background-position: center top;
  margin-left:-.3em;
  width: 3em;
  height: 3em; }
  .weather-forecast .icon.ovino {
    background-image: url("/app/images/ovino.jpg"); }
  .weather-forecast .icon.caprino {
    background-image: url("/app/images/caprino.jpg"); }
  .weather-forecast .icon.bovino {
    background-image: url("/app/images/bovino.jpg"); }
  .weather-forecast .icon.porcino {
    background-image: url("/app/images/porcino.jpg"); }
  .weather-forecast .icon.conejos {
    background-image: url("/app/images/conejos.jpg"); }
  .weather-forecast .icon.aves {
    background-image: url("/app/images/aves.jpg"); }
  .weather-forecast .icon.equino {
    background-image: url("/app/images/equino.jpg"); }
  .weather-forecast .icon.canino {
    background-image: url("/app/images/canino.jpg"); }
  .weather-forecast .icon.felino {
    background-image: url("/app/images/felino.jpg"); }
  .weather-forecast .icon.otros {
    background-image: url("/app/images/otros.jpg"); }
	.weather-forecast .iconpdf.pdf {
    background-image: url("/app/images/otros.jpg"); }
.pdf {
	margin-left:.2em;
	width: 2em;
	height: 2em;
	background-color: #61a59b; 
	-webkit-mask: url("/app/images/doc.svg") no-repeat center top;
	mask: url("/app/images/doc.svg") no-repeat center top;
}
    
.delete {
	margin-left:.2em;
	width: 2em;
	height: 2em;
	background-color: #61a59b; 
	-webkit-mask: url("/app/images/icons8-basura.svg") no-repeat center top;
	mask: url("/app/images/icons8-basura.svg") no-repeat center top;
	cursor: pointer;
}
    
.semaforo1, .semaforo2, .semaforo3 {
  background-repeat: no-repeat;
  background-size: contain; 
  width: .7em;
  height: .7em; }
.apagado {
	background-color: #61a59b; 
	-webkit-mask: url("/app/images/ic_no_checked.svg") no-repeat center top;
	mask: url("/app/images/ic_no_checked.svg") no-repeat center top;
    }
.encendido {
	background-color: #61a59b; 
	-webkit-mask: url("/app/images/ic_checked.svg") no-repeat center top;
	mask: url("/app/images/ic_checked.svg") no-repeat center top;
    }
		
@media (max-width: 450px) {
  .weather-forecast .date, .weather-forecast .description {
    font-size: 1em; }
  .weather-forecast .current .icon {
    width: 96px;
    height: 96px; }	
	
	.iconEspecie{
	float:right;
}
	
/*margins y paddings */
/*Margin and Padding helpers*/

.p-xs { padding: .25em; }
.p-x-xs { padding: 0 .25em; }
.p-y-xs { padding: .25em 0 ; }
.p-t-xs { padding-top: .25em; }
.p-r-xs { padding-right: .25em; }
.p-b-xs { padding-bottom: .25em; }
.p-l-xs { padding-left: .25em; }
.m-xs { margin: .25em; }
.m-x-xs { margin: 0 .25em; }
.m-y-xs { margin: .25em 0 ; }
.m-r-xs { margin-right: .25em; }
.m-l-xs { margin-left: .25em; }
.m-t-xs { margin-top: .25em; }
.m-b-xs { margin-bottom: .25em; }

.p-sm { padding: .5em; }
.p-x-sm { padding: 0 .5em; }
.p-y-sm { padding: .5em 0 ; }
.p-t-sm { padding-top: .5em; }
.p-r-sm { padding-right: .5em; }
.p-b-sm { padding-bottom: .5em; }
.p-l-sm { padding-left: .5em; }
.m-sm { margin: .5em; }
.m-x-sm { margin: 0 .5em; }
.m-y-sm { margin: .5em 0 ; }
.m-t-sm { margin-top: .5em; }
.m-r-sm { margin-right: .5em; }
.m-b-sm { margin-bottom: .5em; }
.m-l-sm { margin-left: .5em; }

.p-md { padding: 1em; }
.p-x-md { padding: 0 1em; }
.p-y-md { padding: 1em 0; }
.p-t-md { padding-top: 1em; }
.p-r-md { padding-right: 1em; }
.p-b-md { padding-bottom: 1em; }
.p-l-md { padding-left: 1em; }
.m-md { margin: 1em; }
.m-x-md { margin: 0 1em; }
.m-y-md { margin: 1em 0 ; }
.m-t-md { margin-top: 1em; }
.m-r-md { margin-right: 1em; }
.m-b-md { margin-bottom: 1em; }
.m-l-md { margin-left: 1em; }
}


.p-lg { padding: 1.5em; }
.p-x-lg { padding: 0 1.5em; }
.p-y-lg { padding: 1.5em 0; }
.p-t-lg { padding-top: 1.5em; }
.p-r-lg { padding-right: 1.5em; }
.p-b-lg { padding-bottom: 1.5em; }
.p-l-lg { padding-left: 1.5em; }
.m-lg { margin: 1.5em; }
.m-x-lg { margin: 0 1.5em; }
.m-y-lg { margin: 1.5em 0; }
.m-t-lg { margin-top: 1.5em; }
.m-r-lg { margin-right: 1.5em; }
.m-b-lg { margin-bottom: 1.5em; }
.m-l-lg { margin-left: 1.5em; }

.p-xl { padding: 3em; }
.p-x-xl { padding: 0 3em; }
.p-y-xl { padding: 3em 0 ; }
.p-t-xl { padding-top: 3em; }
.p-r-xl { padding-right: 3em; }
.p-b-xl { padding-bottom: 3em; }
.p-l-xl { padding-left: 3em; }
.m-xl { margin: 3em; }
.m-x-xl { margin: 0 3em; }
.m-y-xl { margin: 3em 0; }
.m-t-xl { margin-top: 3em; }
.m-r-xl { margin-right: 3em; }
.m-b-xl { margin-bottom: 3em; }
.m-l-xl { margin-left: 3em; }


/* tooltip para descripción panaeles*/

	/* contenedor de cada ítem */
	.item-enf {
		display: block;
	}

	/* bloque de descripción debajo del ítem */
	.item-enf .desc {
		display: none;               /* oculto por defecto */
		margin-left: 24px;           /* indentado */
		padding: 8px 10px;
		border-left: 3px solid #ccc;
		white-space: pre-line;       /* respeta saltos de línea del texto */
		font-size: 14px;
		line-height: 1.35;
	}

	/* botón de ayuda */
	.help-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		border: 2px solid #333;
		background-color: white;
		color: #333;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		margin-left: 6px;
		padding: 0;
		line-height: 1;
	}

	.help-btn:hover {
		background-color: #f0f0f0;
	}