@media print {
  .hideprint {
    display: none !important;
  }

  .print {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

@media screen {
  .hidescreen {
    display: none;
  }
}

.body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
}

.cx-announcer {
  height: 0;
  overflow: hidden;
  width: 0;
}

.disableDialogNoScroll {
  overflow-y: auto !important;
  padding: 0 !important;
}

.fillPageHeight {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.screenReaderOnly {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
}

input::-ms-clear {
  display: none;
}

input::-ms-reveal {
  display: none;
}

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

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*
    Remove Chrome's auto-complete yellow background.
    The only other way I've found is using shadow to overlay the color, but
    that overlaps the icons in Material UI text fields.
    http://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs
*/
input:-webkit-autofill {
  -webkit-transition-delay: 99999s;
}

input:-webkit-autofill::first-line {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
}

@keyframes cx-ripple-enter {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

/* removes 'X' from search input */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}