/**
 * Applies styles for users in high contrast mode. Note that this only applies
 * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
 * attribute, however Chrome handles high contrast differently.
 * @param target Which kind of high contrast setting to target. Defaults to `active`, can be
 *    `white-on-black` or `black-on-white`.
 */
/* Theme for the ripple elements.*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/* to deprecate in 1.0 */
/**
  * Based on the natural height of the calendar in a month with 6 rows of dates
  * (largest the calendar will get).
  */
/**
  * Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
  * these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
  * the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
  * chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
  * scrollbars at smaller sizes.
  */
.mat-datepicker-content {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  display: block; }

.mat-calendar {
  display: flex; }

/**
  * .mat-datepicker-content:not(.mat-datepicker-content-touch) .mat-calendar {
  *   width: $mat-datepicker-non-touch-calendar-width;
  *   height: $mat-datepicker-non-touch-calendar-height;
  * }
  */
.mat-datepicker-content-touch {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  /* make sure the dialog scrolls rather than being cropped on ludicrously small screens */
  max-height: 90vh;
  overflow: auto;
  /* TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away from using dialog. */
  margin: -24px; }

@media all and (orientation: landscape) {
  .mat-calendar {
    width: 132vh;
    height: 90vh;
    max-width: 500px;
    max-height: 325px; }
    .mat-calendar .mat-calendar-header {
      width: 53vh;
      max-width: 150px; }
    .mat-calendar .mat-calendar-content {
      flex: 1 1 100%; } }

@media all and (orientation: portrait) {
  .mat-calendar {
    width: 80vw;
    height: 112vw;
    max-width: 275px;
    max-height: 390px;
    flex-direction: column;
    align-items: stretch; }
    .mat-calendar .mat-calendar-header {
      height: 33vw;
      max-height: 89px; }
    .mat-calendar .mat-calendar-content {
      flex: 1 1 100%; } }

.mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,
.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
  width: 1em; }

.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
  display: block;
  width: 1.5em;
  height: 1.5em; }

.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-datepicker-toggle-default-icon,
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon {
  margin: auto; }

/**
   * Values chosen to approximate https://material.io/icons/#ic_navigate_before and
   * https://material.io/icons/#ic_navigate_next as closely as possible.
   */
.mat-calendar {
  font-size: 15px;
  user-select: none; }
  .mat-calendar .mat-calendar-control {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    opacity: 0.6;
    outline: none;
    padding: 0; }
  .mat-calendar .mat-calendar-control-active {
    opacity: 1; }
  .mat-calendar .mat-calendar-header {
    background-color: var(--primary, #673ab7);
    color: var(--primary-contrast, white);
    display: flex; }
    .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-year {
      display: block;
      font-weight: 500;
      font-size: 16px;
      line-height: 16px; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-year.mat-calendar-control-active {
        font-weight: bold; }
    .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-month {
      font-weight: 500;
      text-align: left; }
    .mat-calendar .mat-calendar-header .mat-calendar-header-time {
      display: flex; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-hour {
        display: flex;
        font-size: 56px;
        line-height: 56px; }
        .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-hour span {
          opacity: 0.6; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-ampm {
        display: flex;
        flex-direction: column;
        align-items: center;
        place-content: center; }
        .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-ampm button {
          display: block;
          font-size: 17px;
          font-weight: 500;
          line-height: 22px; }
  .mat-calendar .mat-calendar-content {
    background: var(--bg-dialog, white);
    overflow: hidden;
    padding: 8px; }
    .mat-calendar .mat-calendar-content .mat-calendar-main {
      height: calc(100% - 37px);
      outline: none !important; }
    .mat-calendar .mat-calendar-content.mat-calendar-view-clock .mat-calendar-main {
      height: calc(100% - 46px); }
    .mat-calendar .mat-calendar-content.mat-calendar-view-month .mat-calendar-main, .mat-calendar .mat-calendar-content.mat-calendar-view-year .mat-calendar-main {
      height: calc(100% - 44px - 38px); }
  .mat-calendar .mat-calendar-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 7px 0 0;
    text-align: end; }
    .mat-calendar .mat-calendar-footer .mat-button {
      line-height: 32px;
      margin-left: 8px;
      min-width: 60px;
      text-transform: uppercase; }
      .mat-calendar .mat-calendar-footer .mat-button:first-child {
        margin-left: 0; }

@media all and (orientation: portrait) {
  .mat-calendar .mat-calendar-header {
    align-items: flex-start;
    place-content: flex-start space-between;
    padding: 0 6%; }
    .mat-calendar .mat-calendar-header .mat-calendar-header-date {
      height: 100%; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-year {
        margin-bottom: 3px;
        margin-top: 18px; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-month {
        font-size: 36px;
        line-height: 36px; }
    .mat-calendar .mat-calendar-header .mat-calendar-header-time {
      height: 100%;
      flex-direction: row;
      align-items: flex-end;
      place-content: flex-end; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-hour {
        flex-direction: row;
        align-items: flex-end;
        place-content: flex-end;
        margin-bottom: 16px; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-ampm {
        margin-bottom: 18px;
        margin-left: 5px; }
        .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-ampm button {
          line-height: 18px; }
    .mat-calendar .mat-calendar-header.mat-calendar-type-datetime .mat-calendar-header-date-dayname {
      display: none; }
    .mat-calendar .mat-calendar-header.mat-calendar-type-datetime .mat-calendar-header-time-hour,
    .mat-calendar .mat-calendar-header.mat-calendar-type-datetime .mat-calendar-header-time-hour > button {
      font-size: 36px;
      line-height: 42px; }
  .mat-calendar .mat-calendar-type-time {
    align-items: center;
    place-content: center; } }

@media all and (orientation: landscape) {
  .mat-calendar .mat-calendar-header {
    align-items: stretch;
    flex-direction: column;
    place-content: stretch flex-start;
    padding: 16px 0; }
    .mat-calendar .mat-calendar-header .mat-calendar-header-date {
      padding: 0 16px; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-year {
        margin-bottom: 3px; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-month {
        font-size: 30px;
        line-height: 32px; }
        .mat-calendar .mat-calendar-header .mat-calendar-header-date .mat-calendar-header-date-month span {
          display: block; }
    .mat-calendar .mat-calendar-header .mat-calendar-header-time {
      align-items: center;
      place-content: center flex-start;
      padding: 0 16px; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-hour,
      .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-hour > button {
        font-size: 32px;
        line-height: 40px; }
      .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-ampm {
        padding-left: 5px;
        width: 30px; }
        .mat-calendar .mat-calendar-header .mat-calendar-header-time .mat-calendar-header-time-ampm button {
          font-size: 15px;
          line-height: 16px; }
  .mat-calendar .mat-calendar-type-time {
    align-items: center;
    place-content: center; }
    .mat-calendar .mat-calendar-type-time .mat-calendar-header-time {
      flex-direction: column;
      place-content: center;
      align-items: center; } }

/* Caledar types customizations */
.mat-calendar-type-date .mat-calendar-header-time {
  display: none !important; }

.mat-calendar-type-time .mat-calendar-header-date {
  display: none !important; }

/* Heading controls */
.mat-calendar-heading {
  display: flex;
  align-items: center;
  place-content: center space-between;
  padding: 7px 0; }
  .mat-calendar-heading .mat-calendar-heading-period {
    flex: 1 1 100%;
    overflow: hidden;
    text-align: center; }
  .mat-calendar-heading .mat-icon-button {
    line-height: 30px;
    height: 30px;
    width: 30px; }

.mat-calendar-previous-button,
.mat-calendar-next-button {
  position: relative; }
  .mat-calendar-previous-button::after,
  .mat-calendar-next-button::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    content: '';
    margin: 10.5px;
    border: 0 solid currentColor;
    border-top-width: 2px; }
  [dir='rtl'] .mat-calendar-previous-button, [dir='rtl']
  .mat-calendar-next-button {
    transform: rotate(180deg); }

.mat-calendar-previous-button::after {
  border-left-width: 2px;
  transform: translateX(2px) rotate(-45deg); }

.mat-calendar-next-button::after {
  border-right-width: 2px;
  transform: translateX(-2px) rotate(45deg); }

/* Years view */
mat-years-view {
  display: block;
  height: 100%;
  line-height: 35px;
  overflow-y: scroll;
  position: relative; }

.mat-calendar-years {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%; }
  .mat-calendar-years-item {
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin: 0 auto; }
    .mat-calendar-years-item-disabled {
      color: rgba(0, 0, 0, 0.38); }
    .mat-calendar-years-item-active {
      color: var(--primary, #673ab7);
      font-size: 26px;
      font-weight: 500; }
    .mat-calendar-years-item-diff1 {
      font-size: 18px; }
    .mat-calendar-years-item-diff2 {
      font-size: 16px; }

/* Month view */
.mat-calendar-table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%; }

.mat-calendar-table-header th {
  text-align: center;
  padding: 9px 0 5px; }

/* Clock view */
.mat-horary-hour-button,
.mat-horary-minute-button {
  font-size: 36px;
  min-width: auto;
  padding: 0;
  position: relative; }
  [dir='rtl'] .mat-horary-hour-button, [dir='rtl']
  .mat-horary-minute-button {
    transform: rotate(180deg); }

/**
   * We don't want the label to jump around when we switch between month and year views, so we use
   * the same amount of padding regardless of the number of columns. We align the header label with
   * the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
   * roughly like the mock. Half way is too far since the cell text is center aligned.
   */
.mat-calendar-body {
  min-width: 224px; }

.mat-calendar-body-label {
  height: 0;
  line-height: 0;
  text-align: left;
  padding-left: 4.71429%;
  padding-right: 4.71429%; }

[dir='rtl'] .mat-calendar-body-label {
  text-align: right; }

.mat-calendar-body-cell {
  position: relative;
  height: 0;
  line-height: 0;
  text-align: center;
  outline: none;
  cursor: pointer; }

.mat-calendar-body-disabled {
  cursor: default; }

.mat-calendar-body-cell-background {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
  border-width: 1px;
  border-style: solid;
  transform: scale(0);
  transition: all 150ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  /* Choosing a value clearly larger than the height ensures we get the correct capsule shape. */
  border-radius: 999px; }

/* Square background */
@media all and (orientation: portrait) {
  .mat-calendar-body-cell-background {
    top: 5%;
    left: 50%;
    margin-left: -37.66667%;
    padding-left: 35.66667%;
    padding-right: 35.66667%;
    height: 90%; } }

@media all and (orientation: landscape) {
  .mat-calendar-body-cell-background {
    top: 7%;
    left: 50%;
    margin-left: -34.66667%;
    padding-left: 32.66667%;
    padding-right: 32.66667%;
    height: 88%; } }

.mat-calendar-body-cell:hover:not(.mat-calendar-body-disabled) .mat-calendar-body-cell-background {
  background: var(--primary-a60, rgba(103, 58, 183, 0.5));
  color: var(--primary-a60, rgba(103, 58, 183, 0.5));
  opacity: 1;
  transform: scale(1); }

.mat-calendar-body-active .mat-calendar-body-cell-background,
.mat-calendar-body-selected,
.mat-calendar-body-today {
  opacity: 1;
  transform: scale(1); }

.mat-calendar-body-today {
  color: var(--primary-a60, rgba(103, 58, 183, 0.5)); }

.mat-calendar-body-active:not(.mat-calendar-body-today) {
  color: var(--primary-a80, rgba(103, 58, 183, 0.8)); }

.mat-calendar-body-selected {
  background: var(--primary-a80, rgba(103, 58, 183, 0.8));
  color: var(--primary, #673ab7); }

.mat-calendar-body-selected + span {
  color: var(--primary-contrast, rgba(255, 255, 255, 0.8)); }

.mat-calendar-body-disabled {
  cursor: default; }

.mat-calendar-body-cell-content {
  font-weight: 400;
  position: relative;
  /* Prevents text being off-center on Android. */
  line-height: 1; }

mat-clock-view {
  position: relative;
  display: block;
  height: 100%;
  min-width: 224px;
  margin: 8px;
  font-size: 14px;
  box-sizing: border-box;
  user-select: none; }

.mat-clock {
  position: relative;
  background-color: #f0f0f0;
  border-radius: 50%; }

@media all and (orientation: portrait) {
  .mat-clock {
    height: 0;
    width: 100%;
    padding-top: 100%; } }

@media all and (orientation: landscape) {
  .mat-clock {
    height: 100%;
    width: 0;
    margin-left: 10%;
    padding-right: 80%; } }

.mat-clock-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2%;
  height: 2%;
  margin: -1%;
  border-radius: 50%;
  background-color: var(--primary, #673ab7); }

.mat-clock-hand {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  /*height: $clock-hand-size;*/
  margin: 0 auto;
  background-color: var(--primary, #673ab7);
  transform-origin: bottom; }
  .mat-clock-hand::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary, #673ab7); }

.mat-clock-hours,
.mat-clock-minutes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 350ms;
  transform: scale(1.2); }
  .mat-clock-hours.active,
  .mat-clock-minutes.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1); }

.mat-clock-minutes {
  transform: scale(0.8); }

.mat-clock-cell {
  position: absolute;
  display: flex;
  width: 14.1666%;
  height: 14.1666%;
  color: rgba(0, 0, 0, 0.87);
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  align-items: center;
  cursor: pointer; }
  .mat-clock-cell:not(.mat-clock-cell-selected):not(.mat-clock-cell-disabled):hover {
    background-color: rgba(0, 0, 0, 0.1); }
  .mat-clock-cell.mat-clock-cell-disabled {
    color: rgba(0, 0, 0, 0.38);
    pointer-events: none; }
  .mat-clock-cell.mat-clock-cell-selected {
    color: white;
    background-color: var(--primary-a80, #7446c4); }