/*
  Utility classes carried over from Vuetify 1.5 (values unchanged) so they keep working
  after vuetify.css is removed. Spacing helpers are a permanent part of our CSS; colors
  use --cosmic-* variables.
 */

/* Spacing */
.ma-auto {
  margin-top: auto !important;
  margin-right: auto !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.mt-auto {
  margin-top: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}
.mb-auto {
  margin-bottom: auto !important;
}
.ml-auto {
  margin-left: auto !important;
}
.ma-0 {
  margin: 0 0 !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.pa-0 {
  padding: 0 0 !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.ma-1 {
  margin: 4px 4px !important;
}
.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.mt-1 {
  margin-top: 4px !important;
}
.mr-1 {
  margin-right: 4px !important;
}
.mb-1 {
  margin-bottom: 4px !important;
}
.ml-1 {
  margin-left: 4px !important;
}
.pa-1 {
  padding: 4px 4px !important;
}
.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.pt-1 {
  padding-top: 4px !important;
}
.pr-1 {
  padding-right: 4px !important;
}
.pb-1 {
  padding-bottom: 4px !important;
}
.pl-1 {
  padding-left: 4px !important;
}
.ma-2 {
  margin: 8px 8px !important;
}
.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.mt-2 {
  margin-top: 8px !important;
}
.mr-2 {
  margin-right: 8px !important;
}
.mb-2 {
  margin-bottom: 8px !important;
}
.ml-2 {
  margin-left: 8px !important;
}
.pa-2 {
  padding: 8px 8px !important;
}
.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.pt-2 {
  padding-top: 8px !important;
}
.pr-2 {
  padding-right: 8px !important;
}
.pb-2 {
  padding-bottom: 8px !important;
}
.pl-2 {
  padding-left: 8px !important;
}
.ma-3 {
  margin: 16px 16px !important;
}
.my-3 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.mx-3 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.mt-3 {
  margin-top: 16px !important;
}
.mr-3 {
  margin-right: 16px !important;
}
.mb-3 {
  margin-bottom: 16px !important;
}
.ml-3 {
  margin-left: 16px !important;
}
.pa-3 {
  padding: 16px 16px !important;
}
.py-3 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.px-3 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.pt-3 {
  padding-top: 16px !important;
}
.pr-3 {
  padding-right: 16px !important;
}
.pb-3 {
  padding-bottom: 16px !important;
}
.pl-3 {
  padding-left: 16px !important;
}
.ma-4 {
  margin: 24px 24px !important;
}
.my-4 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.mx-4 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.mt-4 {
  margin-top: 24px !important;
}
.mr-4 {
  margin-right: 24px !important;
}
.mb-4 {
  margin-bottom: 24px !important;
}
.ml-4 {
  margin-left: 24px !important;
}
.pa-4 {
  padding: 24px 24px !important;
}
.py-4 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.px-4 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.pt-4 {
  padding-top: 24px !important;
}
.pr-4 {
  padding-right: 24px !important;
}
.pb-4 {
  padding-bottom: 24px !important;
}
.pl-4 {
  padding-left: 24px !important;
}
.ma-5 {
  margin: 48px 48px !important;
}
.my-5 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}
.mx-5 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}
.mt-5 {
  margin-top: 48px !important;
}
.mr-5 {
  margin-right: 48px !important;
}
.mb-5 {
  margin-bottom: 48px !important;
}
.ml-5 {
  margin-left: 48px !important;
}
.pa-5 {
  padding: 48px 48px !important;
}
.py-5 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.px-5 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
.pt-5 {
  padding-top: 48px !important;
}
.pr-5 {
  padding-right: 48px !important;
}
.pb-5 {
  padding-bottom: 48px !important;
}
.pl-5 {
  padding-left: 48px !important;
}

/* Text */
.text-capitalize {
  text-transform: capitalize !important;
}
.text-lowercase {
  text-transform: lowercase !important;
}
.text-no-wrap {
  white-space: nowrap !important;
}
.text-truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.1 !important;
}
.no-wrap {
  white-space: nowrap;
}
.text-xs-left {
  text-align: left !important;
}
.text-xs-center {
  text-align: center !important;
}
.text-xs-right {
  text-align: right !important;
}

/* Typography */
.blockquote {
  padding: 16px 0 16px 24px;
  font-size: 18px;
  font-weight: 300;
}
.display-1 {
  font-size: 34px !important;
  font-weight: 400;
  line-height: 40px !important;
  letter-spacing: normal !important;
  font-family: 'Roboto', sans-serif !important;
}
.headline {
  font-size: 24px !important;
  font-weight: 400;
  line-height: 32px !important;
  letter-spacing: normal !important;
  font-family: 'Roboto', sans-serif !important;
}
.title {
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  font-family: 'Roboto', sans-serif !important;
}
.subheading {
  font-size: 16px !important;
  font-weight: 400;
}
.body-1 {
  font-size: 14px !important;
  font-weight: 400;
}
.caption {
  font-size: 12px !important;
  font-weight: 400;
}
.font-weight-light {
  font-weight: 300 !important;
}
.font-weight-regular {
  font-weight: 400 !important;
}
.font-weight-bold {
  font-weight: 700 !important;
}
.font-italic {
  font-style: italic !important;
}

/* Display and flex alignment */
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-self-center {
  align-self: center;
}
.align-content-center {
  align-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-space-around {
  justify-content: space-around;
}
.justify-space-between {
  justify-content: space-between;
}
.justify-self-end {
  justify-self: flex-end;
}
.fill-height {
  height: 100%;
}
.d-flex {
  display: flex !important;
}
.d-inline-flex {
  display: inline-flex !important;
}
.d-block {
  display: block !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-inline {
  display: inline !important;
}
.d-none {
  display: none !important;
}

/* Visibility */
@media only screen and (max-width: 599px) {
  .hidden-xs-only {
    display: none !important;
  }
}
@media only screen and (max-width: 959px) {
  .hidden-sm-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 960px) {
  .hidden-md-and-up {
    display: none !important;
  }
}

/* Elevation */
.elevation-1 {
  box-shadow: 0px 2px 1px -1px var(--cosmic-shadow-umbra), 0px 1px 1px 0px var(--cosmic-shadow-penumbra),
    0px 1px 3px 0px var(--cosmic-shadow-ambient) !important;
}
.elevation-2 {
  box-shadow: 0px 3px 1px -2px var(--cosmic-shadow-umbra), 0px 2px 2px 0px var(--cosmic-shadow-penumbra),
    0px 1px 5px 0px var(--cosmic-shadow-ambient) !important;
}
.elevation-10 {
  box-shadow: 0px 6px 6px -3px var(--cosmic-shadow-umbra), 0px 10px 14px 1px var(--cosmic-shadow-penumbra),
    0px 4px 18px 3px var(--cosmic-shadow-ambient) !important;
}

/* Colors */
.red {
  background-color: var(--cosmic-red-base) !important;
  border-color: var(--cosmic-red-base) !important;
}
.white {
  background-color: var(--cosmic-white) !important;
  border-color: var(--cosmic-white) !important;
}
.black {
  background-color: var(--cosmic-black) !important;
  border-color: var(--cosmic-black) !important;
}
.black--text {
  color: var(--cosmic-black) !important;
  caret-color: var(--cosmic-black) !important;
}
.white--text {
  color: var(--cosmic-white) !important;
  caret-color: var(--cosmic-white) !important;
}
.transparent {
  background-color: transparent !important;
  border-color: transparent !important;
}
.red--text {
  color: var(--cosmic-red-base) !important;
  caret-color: var(--cosmic-red-base) !important;
}
.red--text.text--darken-1 {
  color: var(--cosmic-red-darken-1) !important;
  caret-color: var(--cosmic-red-darken-1) !important;
}
.red--text.text--darken-2 {
  color: var(--cosmic-red-darken-2) !important;
  caret-color: var(--cosmic-red-darken-2) !important;
}
.red--text.text--darken-3 {
  color: var(--cosmic-red-darken-3) !important;
  caret-color: var(--cosmic-red-darken-3) !important;
}
.red--text.text--darken-4 {
  color: var(--cosmic-red-darken-4) !important;
  caret-color: var(--cosmic-red-darken-4) !important;
}
.green--text {
  color: var(--cosmic-green-base) !important;
  caret-color: var(--cosmic-green-base) !important;
}
.green--text.text--darken-1 {
  color: var(--cosmic-green-darken-1) !important;
  caret-color: var(--cosmic-green-darken-1) !important;
}
.green--text.text--darken-2 {
  color: var(--cosmic-green-darken-2) !important;
  caret-color: var(--cosmic-green-darken-2) !important;
}
.green--text.text--darken-3 {
  color: var(--cosmic-green-darken-3) !important;
  caret-color: var(--cosmic-green-darken-3) !important;
}
.green--text.text--darken-4 {
  color: var(--cosmic-green-darken-4) !important;
  caret-color: var(--cosmic-green-darken-4) !important;
}
.grey {
  background-color: var(--cosmic-gray-base) !important;
  border-color: var(--cosmic-gray-base) !important;
}
.grey--text {
  color: var(--cosmic-gray-base) !important;
  caret-color: var(--cosmic-gray-base) !important;
}
.grey.lighten-2 {
  background-color: var(--cosmic-gray-lighten-2) !important;
  border-color: var(--cosmic-gray-lighten-2) !important;
}
.grey--text.text--darken-1 {
  color: var(--cosmic-gray-darken-1) !important;
  caret-color: var(--cosmic-gray-darken-1) !important;
}
.grey--text.text--darken-2 {
  color: var(--cosmic-gray-darken-2) !important;
  caret-color: var(--cosmic-gray-darken-2) !important;
}
.grey--text.text--darken-3 {
  color: var(--cosmic-gray-darken-3) !important;
  caret-color: var(--cosmic-gray-darken-3) !important;
}
.grey--text.text--darken-4 {
  color: var(--cosmic-gray-darken-4) !important;
  caret-color: var(--cosmic-gray-darken-4) !important;
}