html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
}
.custom-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.custom-layout .mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
  margin-bottom: 16px;
}
.custom-drawer {
  border: none;
}
/* iOS Safari specific workaround */
.custom-drawer .mdl-menu__container {
  z-index: -1;
}
.custom-drawer .custom-navigation {
  z-index: -2;
}

/* END iOS Safari specific workaround */
.custom-drawer .mdl-menu .mdl-menu__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.custom-drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 16px;
  height: 125px;
}
.custom-logo {
    background: #fff;
    text-align: center;
    margin: 15px -16px;
}
.custom-avatar-dropdown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.custom-navigation {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.custom-layout .custom-navigation .mdl-navigation__link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.custom-layout .custom-navigation .mdl-navigation__link:hover {
  background-color: #00BCD4;
  color: #37474F;
}
.custom-navigation .mdl-navigation__link .material-icons {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 32px;
}

.custom-content {
  max-width: 1080px;
  padding: 10px;
}

.custom-charts {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.custom-chart:nth-child(1) {
  color: #ACEC00;
}
.custom-chart:nth-child(2) {
  color: #00BBD6;
}
.custom-chart:nth-child(3) {
  color: #BA65C9;
}
.custom-chart:nth-child(4) {
  color: #EF3C79;
}
.custom-graphs {
  padding: 16px 32px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */
_:-ms-input-placeholder, :root .custom-graphs {
  min-height: 664px;
}
_:-ms-input-placeholder, :root .custom-graph {
  max-height: 300px;
}
/* TODO end */
.custom-graph:nth-child(1) {
  color: #00b9d8;
}
.custom-graph:nth-child(2) {
  color: #d9006e;
}

.custom-cards {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}
.custom-cards .custom-separator {
  height: 32px;
}
.custom-cards .mdl-card__title.mdl-card__title {
  color: white;
  font-size: 24px;
  font-weight: 400;
}
.custom-cards ul {
  padding: 0;
}
.custom-cards h3 {
  font-size: 1em;
}
.custom-updates .mdl-card__title {
  min-height: 200px;
  background-image: url('images/dog.png');
  background-position: 90% 100%;
  background-repeat: no-repeat;
}
.custom-cards .mdl-card__actions a {
  color: #00BCD4;
  text-decoration: none;
}

.custom-options h3 {
  margin: 0;
}
.custom-options .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 0.89);
}
.custom-options ul {
  margin: 0;
  list-style-type: none;
}
.custom-options li {
  margin: 4px 0;
}
.custom-options .material-icons {
  color: rgba(255, 255, 255, 0.89);
}
.custom-options .mdl-card__actions {
  height: 64px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

/*CRUD Table and buttons*/
.demo-content{
    display:inline-block;
}

.demo-content .new-button{
    margin: 15px;
    float: right;
}

/*planner gui*/
.wide-page {
	padding: 10px;
}

.month-btn {
	display: inline-block;
    cursor: pointer;
    margin: 3px;
    background-color: #778896;
    color: #fff;
    padding: 3px;
    font-size: 0.8em;
    border-radius: 2px;
    width: 30px;
}

#planner {
	margin-top: 5px;
}

#planneruser {
	width: 90%;
	margin-top: 30px; 
}

.client-row {

}

.client-row-header {
	color: #43a239;
    padding-left: 10px;
    min-width: 220px;
    background-color: #F5F5F5;
    font-size: 1em;
}

.total-row-header {
    color: #778896;
    padding-left: 10px;
    min-width: 220px;
    background-color: #F5F5F5;
    font-size: 1.2em;
}

.calendar-row {


}
.overcap {
	color:red;
	font-weight: bold;
}    
.ccell {
    cursor: pointer;
    width: 80px;
    height: 20px;
    text-align: right;
    padding: 3px;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #7d848e;
    text-align: center;
    background-color: #778896;
    color: #fff;
    font-size: 0.85em;
}
.tcell {
	background-color: #fff;
    color: #778896;
}
.monday-cell{
    border-left: 2px solid #efa039;
}
.pcell{
    cursor: pointer;
    min-width: 80px;
    height: 20px;
    padding: 3px;
    background-color: #FFF;
    font-size: 0.90em;
    text-align: right;
}
.pcellTotal{
    cursor: pointer;
    width: 80px;
    height: 20px;
    padding: 3px;
    background-color: #FFF;
    font-size: 1.1em;
    text-align: right;
}
.loadcell{
    cursor: pointer;
    width: 80px;
    height: 20px;
    padding: 3px;
    background-color: #FFF;
    font-size: 0.9em;
    text-align: center;
}
.boldTotal{
	font-weight: bold;
}
.pcellDate{
    cursor: pointer;
    width: 80px;
    height: 20px;
    padding: 3px;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #dedede;
    text-align: right;
    background-color: #FEFEFE;
    font-size: 0.90em;
}
#month-bar {
	background-color: rgba(3, 169, 244, 0.27);
    width: 550px;
    margin-top: 10px;
    position: absolute;
    text-align: center;
    padding: 5px;
}
#nav-bar {
	background-color: rgba(3, 169, 244, 0.27);
    width: 300px;
    margin-top: 10px;
    position: absolute;
    text-align: center;
    padding: 5px;
}
#options{
    position: absolute;
    right: 15px;
    margin-top: 10px;
}
.form-element-production{
    display: inline-block;
    margin-right: 2%;
    width: 120px;
    margin-bottom: 15px;
}
/*pedidos status*/
.st-0 { /* empty cell */
	color: #fff;
	background-color: #fff;
}
.st-1 { /* por confirmar */
    background-color: #f8fb71;
	color: #333;
    padding-right: 3px;


}
.st-2 { /* en proceso */
    background-color: #98c9ea;
	color: #333;
    padding-right: 3px;


}
.st-9 { /* entregado */
    background-color: #82e0aa;
	color: #333;
    padding-right: 3px;


}
.color-blue {
	color: #5454bf;
}
.color-red {
	color: #ce4309;
}
.pedido-hl {border: 1px dotted #ef5416;}

.pedido-card {
	margin-bottom: 10px;
    border-bottom: 1px solid #f7f7fb;
    padding-bottom: 5px;
    padding-left: 10px;
    overflow: hidden;
    cursor: pointer;
}

.pedido-card-header {
    color: #333;
    font-weight: bold;
    font-size: 1.1em;
}
.pedido-card-dets {
	-webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    -ms-transition: max-height 1s;
    transition: max-height 1s;
    max-height: 500px;
}
.dets-collapsed {
    max-height: 0.1em;
}
/*Pedido modal*/

.pedido-modal{
    width: 90% !important;
}
.pedido-modal-body{
    width: 100% !important;
}
.pedido-modal-body .container{
    width: 100% !important;
}
.full-width{
    width: 100% !important;
}
.input-text-vacc{
    float:left;
    width: 250px;
    margin-right: 15px;
}
.button-add{
    float: left;
}

.form-row{
    width: 100%;
    margin-bottom: 35px;
}
.form-element {
    display: inline-block;
    margin-right: 16px;
    margin-top: 16px;
    width: 30%;
}
.form-elemento {
    display: inline-block;
    margin-right: 16px;
    margin-top: 16px;
    padding: 3px;
}
.form-element-right{
  display: inline-block;
  width: 235px;
  float: right;
  margin-right: 16px;
}

.form-element-full{
  display: inline-block;
  width: 100%;
}
.form-element-full table{
    width: 100%;
}
.form-element input{
    display: inline-block!important;
}

#box-total{
    margin: 5px;
    font-size: 25px !important;
}
#chickens-total{
    margin: 5px;
    font-size: 25px !important;
}
#dispatched-qty{
    margin: 5px;
    font-size: 25px !important;
}

.paddding-chips{
    padding: 3px;
}

.loader {
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#distributions-table {
	font-size: 0.8em;
}
#distributions-table tr td {
	vertical-align: top;
}
#transports-table {
	font-size: 0.8em;
}
#transports-table tr td {
	vertical-align: top;
}

.unconfirmed {
	border-left: 5px solid red;	
}

.confirmed-user {
	border-left: 5px solid #131552;	
}

.confirm-link {
	color: #40408e;
    text-decoration: underline;
    font-size: 0.8em;
    cursor: pointer;
}

/*Reports*/
.planner-report {
	background-color: white;
    padding: 5px;
    margin-top: 10px;
}

.planner-report thead tr td {
	padding: 3px 6px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #bfbebe;
}
.planner-report tr td {
	padding: 3px 6px;
    border-bottom: 1px solid #DEDEDE;
}

.planner-report tr:nth-child(even) {background: #f5f5f7}

.is-number {
    text-align: right;
}
.is-total {
	font-size: 1.1em;
    font-weight: bold;
}

#infoBox {
    padding: 20px;
    background-color: #333;
    height: 100%;
}

#appFooter {
	text-align: center;
    padding: 10px 0px;
    color: #707070;	
}

#appFooter a {
	color: #3f51b5;	
}