/*-----------------------------------------------------------------------*/
/* This stylesheets holds all the general styles that applies to all the */
/* different views.                                                      */
/*-----------------------------------------------------------------------*/

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  font-family: 'Helvetica', Helvetica, Arial, Lucida, sans-serif;
  font-family: 'Lato', sans-serif;
  font-family: 'Franklin Gothic', sans-serif;
  /* letter-spacing: 0.02rem; */
  font-size: 16px;
  background-color: #FFFFFF;
  background-color: #F5F5F5;
  background-color: rgb(238,238,238);
}

/*------------------------------*/
/* Vertical aligns any element. */
/*------------------------------*/

/** Container element that holds the items to be vertically aligned */
.vertical-center-container {
  height: 100%;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

/** Ghost element that nudges the elements alignement */
.vertical-center-container:before {
  content: '';
  height: 100%;
  width: 0;
  margin-left: -0.25rem;  /* adjusts for its size */
  display: inline-block;
  vertical-align: middle;
}

/** The element to be vertically aligned */
.vertical-center {
  display: inline-block;
  vertical-align: middle;
}

/*----------------------*/
/* Element manipulation */
/*----------------------*/

.display-none {
  display: none;
}

/*--------------------------------------*/
/* Change Autocomplete styles in Chrome */
/*--------------------------------------*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: black;
}

/** Removes yellow background that appears after an autofill in */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0rem 0rem 3.2px 0.016px black !important;
}

/** Removes the arrow spinners for date picking from type date of input */
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/** Makes the whole input a button for getting the calendar to show */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-right: 1rem;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

input[type="date"] {
    position: relative;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 input[type="date"]::-webkit-clear-button {
    margin-right: 1rem;
    z-index: 1;
 }

/** Rmoves the arrow spinners for the number picking from type number of input */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

@media only screen and (min-width: 300px) {
  html, body {
    font-size: 6px;
  }
}

@media only screen and (min-width: 600px) {
  html, body {
    font-size: 6px;
  }
}

@media only screen and (min-width: 900px) {
  html, body {
    font-size: 8px;
  }

  .mobile-show {
    display: none!important;
  }
}

@media only screen and (min-width: 1200px) {
  html, body {
    font-size: 11px;
  }

  .mobile-show {
    display: none!important;
  }
}

@media only screen and (min-width: 1800px) {
  html, body {
    font-size: 14px;
  }

  .mobile-show {
    display: none!important;
  }
}

/*-----------------------------------------------------------*/
/* Remove placeholder text on focus and puts it back on blur */
/*-----------------------------------------------------------*/
input:focus::placeholder{ color:transparent; }
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */