/*#f5a541  Orange*/
/*#7e7f81  grey*/
body {
  font-family: Oswald, Arial, sans-serif;
  background: rgba(245, 165, 65, 0.5);
  width: 100%;
  overflow-x: hidden;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.centered {
  width: auto;
  height: auto;
  margin: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.small {
  width: 300px;
}
.medium {
  width: 600px;
}
.large {
  width: 900px;
}
.extraLarge {
  width: 1100px;
}
.extraextraLarge {
  width: 1300px;
}
.column {
  margin: 12.5px;
}
.fullWidth {
  margin: 12.5px 0;
  width: 100%;
}

.whiteback {
  background: #fafafa;
}

.shadowed {
  box-shadow: 0 0px 9px 2px rgba(0, 0, 0, 0.08);
}

h1 {
  color: #f5a541;
  margin: 30px;
}
h2 {
  color: #424242;
  margin: 20px 40px;
}
h3 {
  color: #424242;
  padding: 10px;
}
a {
  text-decoration: none;
}
.hoverLink {
  width: 100%;
  text-align: center;
  padding: 15px 0;
  color: #7e7f81;
  transition: color 0.3s;
  display: inline-block;
  cursor: pointer;
}
.hoverLink:hover {
  color: #f5a541;
}
.centerText {
  text-align: center;
}
/* .option {
  width: 100px;
  margin: 10px;
} */
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.343a247227d7.eot?16m7xw");
  src: url("../fonts/icomoon.343a247227d7.eot?16m7xw#iefix") format('embedded-opentype'),
    url("../fonts/icomoon.a0ab552546a7.ttf?16m7xw") format('truetype'), url("../fonts/icomoon.60f4d02423c7.woff?16m7xw") format('woff'),
    url("../fonts/icomoon.b932e5c78161.svg?16m7xw#icomoon") format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cog:before {
  content: '\e994';
}

/************************/
/*      Form Stuff      */
/************************/

.errorlist {
  position: absolute;
  left: 0;
  top: 100%;
  list-style-type: none;
  width: 100%;

  margin: 0;
  padding: 0;
}
.errorlist li {
  padding: 10px;
  font-size: 15px;
  font-weight: 100;
  color: #fafafa;
  background: #f5a541;
  box-shadow: 0 7px 9px 2px rgba(0, 0, 0, 0.08);
}
.errorlist li:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

textarea,
input,
button {
  outline: none;
}

.form-page {
  position: relative;
  padding: 10px;
  margin-top: 100px;
  margin-bottom: 100px;
}
.form-page .flex-form {
  display: flex;
  flex-flow: column nowrap;
}
.form-page .centered {
  z-index: -1;
  position: fixed;
}
.form-page .input{
  padding: 0;
  margin: 0;
}
.form-page img {
  width: 100%;
}
.input {
  width: 100%;
  position: relative;
  min-height: 30px;
  margin: 10px 0;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.input input {
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  box-sizing: border-box;
  font-size: 15px;
  z-index: 2;
  border: none;
  border-bottom: 1px solid #7e7f81;
  background: none;
  position: relative;
  padding: 10px;
}
.input label {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  box-sizing: border-box;
  font-size: 15px;
  padding: 20px 10px 10px 10px;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: text;
  color: #7e7f81;
}
.input label span {
  display: block;
  position: absolute;
  margin-top: -5px;
}
.input select {
  position: relative;
  padding: 10px;
  margin: 40px 5px 10px 5px;
  z-index: 3;
}
.input.hidden {
  margin: 0;
  height: 0;
  min-height: 0;
  width: 0 !important;
  display: none;
}
.input.input--filled {
  margin-top: 20px;
}
.input.input--filled input + label span {
  -webkit-animation: anim-1 0.3s forwards;
  animation: anim-1 0.3s forwards;
}
.input.input--filled input {
  border-bottom: none;
}
.input label:after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  background: #f5a541;
  left: 0;
  top: calc(100% - 2px);
  transition: all 0.3s;
}
.input.input--filled input + label:after {
  width: 100%;
}
.input textarea {
  width: 100%;
  margin-top: 50px;
}
.help {
  padding-top: 10px;
}
button,
.button {
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  background: #f5a541;
  color: #fafafa;
  padding: 12.5px;
  font-size: 15px;
  /* height: 40px; */
  border-radius: 20px;
  cursor: pointer;
  margin: 20px auto;
  display: block;
  box-sizing: border-box;
  align-items: flex-start;
  text-align: center;
}
button.button--submitting {
  width: 40px !important;
  transition: all 0.3s;
  background-image: url("../images/loader.d850145e728f.gif");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.yes-no {
  /* margin: 20px; */
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.yes-no button,
.yes-no .button {
  width: 100px;
  margin: 10px;
}

/* .back {
  color: #f5a541;
  font-weight: bold;
  font-size: 20px;
  margin: 10px 30px;
  cursor: pointer;
}
.back::before {
  content: '';
  margin-left: -17px;
  margin-top: 8px;
  width: 15px;
  height: 15px;
  position: absolute;
  background-image: url("../images/arrow-left-orange.20515aae2517.png") !important;
  background-position: 0px 0px !important;
  background-size: contain;
} */

@-webkit-keyframes anim-1 {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(1em, 0, 0);
    transform: translate3d(1em, 0, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(-1em, -100%, 0);
    transform: translate3d(-1em, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes anim-1 {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(1em, 0, 0);
    transform: translate3d(1em, 0, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(-1em, -100%, 0);
    transform: translate3d(-1em, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/************************/
/*        Tables        */
/************************/
thead {
  color: #fafafa;
  font-weight: bold;
  background: #f5a541;
}
td {
  padding: 4px 20px;
}
thead td {
  margin: 5px 2px;
  border-bottom: solid 3px #f5a541;
}

/************************/
/*       Calender       */
/************************/
.ui-widget {
  font-family: inherit;
  background: none;
  border: none !important;
  width: 80%;
  left: 10%;
  position: relative;
  margin: 20px 0;
}
.ui-datepicker-header {
  background: #f5a541;
  border: none;
  border-radius: 0px;
  color: #fafafa;
}
.ui-widget tr {
  border: none;
}

.ui-widget td a {
  border: none !important;
  background: none !important;
  text-align: center;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  color: #fafafa;
  background: #f5a541;
  font-weight: bold;
  border: 1px solid #fafafa;
}
.ui-state-highlight a {
  color: #fafafa !important;
}
.ui-state-hover {
  top: 2px !important;
  right: 2px !important;
  background: inherit !important;
  border: none !important;
}
.ui-datepicker .ui-datepicker-prev-hover {
  left: 2px;
}
.ui-datepicker thead {
  background: #fafafa;
  color: #f5a541;
}
.ui-datepicker-prev span {
  cursor: pointer;
  background-image: url("../images/arrow-left.690b8e3f50ac.png") !important;
  background-position: 0px 0px !important;
  background-size: contain;
}

.ui-datepicker-next span {
  cursor: pointer;
  background-image: url("../images/arrow-right.7ea9ba3aacb3.png") !important;
  background-position: 0px 0px !important;
  background-size: contain;
}
.ui-datepicker-today .ui-state-default {
  color: #f5a541 !important;
}
.ui-state-highlight .ui-state-highlight {
  color: #fafafa !important;
}

#deleteUser button,
#deleteUser .button {
  display: inline-block;
}

/************************/
/*              Manage               */
/************************/
#manage {
  height: 100%;
  width: 903px;
}
#manage .centered {
  z-index: -1;
  position: fixed;
  width: 903px;
}
#manage table {
  width: 90%;
  border-collapse: collapse;
  margin: 20px 5%;
}
#manage table td {
  margin: 0;
}
#manage td {
  text-align: center;
}
#manage td:first-child {
  border-left: none;
}
#manage td:last-child {
  border-right: none;
}
#manage thead tr {
  border-bottom: none;
}
#manage h1 {
  text-align: center;
}

#addUser,
#addFarm {
  float: left;
  width: 49%;
  padding: 0px 40px;
  box-sizing: border-box;
}
#addUser {
  text-align: right;
}
#addFarm {
  text-align: left;
}

/************************/
/*     Submissions      */
/************************/
#submissions .day-table table{
  width: 90%;
}
#submissions .week-tables{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
#submissions .week-table {
  width: 30%;
}

/************************/
/*        Pages         */
/************************/
.page {
  position: relative;
  padding: 10px;
}
.page .centered {
  z-index: -1;
  position: fixed;
}
.page .flow {
  background: #f5a541;
  font-weight: bold;
  color: white;
  border-top: 3px solid #fafafa;
  cursor: pointer;
}
.page .flow img {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
  transition: all 0.3s;
}
.page h2 {
  margin-left: 20%;
}
.page .hoverLink {
  width: 49%;
}
.page .btn {
  display: block;
  margin: 2rem auto;
}
.page h1 {
  text-align: center;
}

/************************/
/*       Pig Entry      */
/************************/
#pickDate {
  height: 445px;
}
#pickDate .ui-datepicker {
  position: relative;
  margin-top: 25px;
}
#pig-entry .hoverLink {
  width: 49%;
}
#pickDate button {
  margin-top: 10px;
}
#dateError {
  visibility: hidden;
}

#navigator {
  width: 70%;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#pig-entry h3 {
  margin: 10px 40px;
  font-size: 30px;
}
#pig-entry .btn {
  width: 40%;
  font-weight: bold;
}
#pig-entry h1 {
  font-size: 45px;
  margin: 10px;
}
#pig-entry .form-container{
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
}
#week-forms{
  display: flex;
  flex-flow: column nowrap;
}

/****************************/
/*      Password Reset      */
/****************************/

/* #passwordReset {
  height: 235px;
}
#passwordReset p {
  padding: 0px 15px;
}
#passwordResetDone {
  height: 210px;
  padding: 15px;
} */

/*************************/
/*        Scaling        */
/*************************/

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
}
@media only screen and (max-width: 400px) {
  .centered.small {
    width: 95% !important;
    margin-top: 2.5% !important;
  }
}
@media only screen and (max-height: 1060px) {
  #pig-entry,
  .page {
    margin: 2.5% auto;
  }
}