sdk3
/
livecodingspace-app


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888
							/*!
 Material Components for the web
 Copyright (c) 2017 Google Inc.
 License: Apache-2.0
*/
/**
 * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
 *
 * Usage Example:
 * ```scss
 * .mdc-foo {
 *   position: absolute;
 *   left: 0;
 *
 *   @include mdc-rtl {
 *     left: auto;
 *     right: 0;
 *   }
 *
 *   &__bar {
 *     margin-left: 4px;
 *     @include mdc-rtl(".mdc-foo") {
 *       margin-left: auto;
 *       margin-right: 4px;
 *     }
 *   }
 * }
 *
 * .mdc-foo--mod {
 *   padding-left: 4px;
 *
 *   @include mdc-rtl {
 *     padding-left: auto;
 *     padding-right: 4px;
 *   }
 * }
 * ```
 *
 * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
 * in most cases, it will in some cases lead to false negatives, e.g.
 *
 * ```html
 * <html dir="rtl">
 *   <!-- ... -->
 *   <div dir="ltr">
 *     <div class="mdc-foo">Styled incorrectly as RTL!</div>
 *   </div>
 * </html>
 * ```
 *
 * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
 */
/**
 * Takes a base box-model property - e.g. margin / border / padding - along with a default
 * direction and value, and emits rules which apply the value to the
 * "<base-property>-<default-direction>" property by default, but flips the direction
 * when within an RTL context.
 *
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, left, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 8px;
 *     margin-left: 0;
 *   }
 * }
 * ```
 * whereas:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, right, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-right: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 0;
 *     margin-left: 8px;
 *   }
 * }
 * ```
 *
 * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
 * e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
 *
 * Note that this function will always zero out the original value in an RTL context. If you're
 * trying to flip the values, use mdc-rtl-reflexive-property().
 */
/**
 * Takes a base property and emits rules that assign <base-property>-left to <left-value> and
 * <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-property(margin, auto, 12px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: auto;
 *   margin-right: 12px;
 *
 *   @include mdc-rtl {
 *     margin-left: 12px;
 *     margin-right: auto;
 *   }
 * }
 * ```
 *
 * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
 */
/**
 * Takes an argument specifying a horizontal position property (either "left" or "right") as well
 * as a value, and applies that value to the specified position in a LTR context, and flips it in a
 * RTL context. For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-position(left, 0);
 *   position: absolute;
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 *  .mdc-foo {
 *    position: absolute;
 *    left: 0;
 *    right: initial;
 *
 *    @include mdc-rtl {
 *      right: 0;
 *      left: initial;
 *    }
 *  }
 * ```
 * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
 */
/*
  Precomputed linear color channel values, for use in contrast calculations.
  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

  Algorithm, for c in 0 to 255:
  f(c) {
    c = c / 255;
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  }

  This lookup table is needed since there is no `pow` in SASS.
*/
/**
 * Calculate the luminance for a color.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Calculate the contrast ratio between two colors.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Determine whether to use dark or light text on top of given color.
 * Returns "dark" for dark text and "light" for light text.
 */
/*
  Main theme colors.
  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
*/
/* Indigo 500 */
/* Pink A200 */
/* White */
/* Which set of text colors to use for each main theme color (light or dark) */
/* Text colors according to light vs dark and text type */
/* Primary text colors for each of the theme colors */
/**
 * Applies the correct theme color style to the specified property.
 * $property is typically color or background-color, but can be any CSS property that accepts color values.
 * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 */
/**
 * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
 * Should provide the $root-selector option if applied to anything other than the root selector.
 * When used with a modifier class, provide a second argument of `true` for the $compound parameter
 * to specify that this should be attached as a compound class.
 *
 * Usage example:
 *
 * ```scss
 * .mdc-foo {
 *   color: black;
 *
 *   @include mdc-theme-dark {
 *     color: white;
 *   }
 *
 *   &__bar {
 *     background: black;
 *
 *     @include mdc-theme-dark(".mdc-foo") {
 *       background: white;
 *     }
 *   }
 * }
 *
 * .mdc-foo--disabled {
 *   opacity: .38;
 *
 *   @include mdc-theme-dark(".mdc-foo", true) {
 *     opacity: .5;
 *   }
 * }
 * ```
 */
/*
  Precomputed linear color channel values, for use in contrast calculations.
  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

  Algorithm, for c in 0 to 255:
  f(c) {
    c = c / 255;
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  }

  This lookup table is needed since there is no `pow` in SASS.
*/
/**
 * Calculate the luminance for a color.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Calculate the contrast ratio between two colors.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Determine whether to use dark or light text on top of given color.
 * Returns "dark" for dark text and "light" for light text.
 */
/*
  Main theme colors.
  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
*/
/* Indigo 500 */
/* Pink A200 */
/* White */
/* Which set of text colors to use for each main theme color (light or dark) */
/* Text colors according to light vs dark and text type */
/* Primary text colors for each of the theme colors */
/**
 * Applies the correct theme color style to the specified property.
 * $property is typically color or background-color, but can be any CSS property that accepts color values.
 * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 */
/**
 * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
 * Should provide the $root-selector option if applied to anything other than the root selector.
 * When used with a modifier class, provide a second argument of `true` for the $compound parameter
 * to specify that this should be attached as a compound class.
 *
 * Usage example:
 *
 * ```scss
 * .mdc-foo {
 *   color: black;
 *
 *   @include mdc-theme-dark {
 *     color: white;
 *   }
 *
 *   &__bar {
 *     background: black;
 *
 *     @include mdc-theme-dark(".mdc-foo") {
 *       background: white;
 *     }
 *   }
 * }
 *
 * .mdc-foo--disabled {
 *   opacity: .38;
 *
 *   @include mdc-theme-dark(".mdc-foo", true) {
 *     opacity: .5;
 *   }
 * }
 * ```
 */
/* TODO(sgomes): Figure out what to do about desktop font sizes. */
/* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */
/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
 * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
 *
 * Usage Example:
 * ```scss
 * .mdc-foo {
 *   position: absolute;
 *   left: 0;
 *
 *   @include mdc-rtl {
 *     left: auto;
 *     right: 0;
 *   }
 *
 *   &__bar {
 *     margin-left: 4px;
 *     @include mdc-rtl(".mdc-foo") {
 *       margin-left: auto;
 *       margin-right: 4px;
 *     }
 *   }
 * }
 *
 * .mdc-foo--mod {
 *   padding-left: 4px;
 *
 *   @include mdc-rtl {
 *     padding-left: auto;
 *     padding-right: 4px;
 *   }
 * }
 * ```
 *
 * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
 * in most cases, it will in some cases lead to false negatives, e.g.
 *
 * ```html
 * <html dir="rtl">
 *   <!-- ... -->
 *   <div dir="ltr">
 *     <div class="mdc-foo">Styled incorrectly as RTL!</div>
 *   </div>
 * </html>
 * ```
 *
 * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
 */
/**
 * Takes a base box-model property - e.g. margin / border / padding - along with a default
 * direction and value, and emits rules which apply the value to the
 * "<base-property>-<default-direction>" property by default, but flips the direction
 * when within an RTL context.
 *
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, left, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 8px;
 *     margin-left: 0;
 *   }
 * }
 * ```
 * whereas:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, right, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-right: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 0;
 *     margin-left: 8px;
 *   }
 * }
 * ```
 *
 * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
 * e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
 *
 * Note that this function will always zero out the original value in an RTL context. If you're
 * trying to flip the values, use mdc-rtl-reflexive-property().
 */
/**
 * Takes a base property and emits rules that assign <base-property>-left to <left-value> and
 * <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-property(margin, auto, 12px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: auto;
 *   margin-right: 12px;
 *
 *   @include mdc-rtl {
 *     margin-left: 12px;
 *     margin-right: auto;
 *   }
 * }
 * ```
 *
 * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
 */
/**
 * Takes an argument specifying a horizontal position property (either "left" or "right") as well
 * as a value, and applies that value to the specified position in a LTR context, and flips it in a
 * RTL context. For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-position(left, 0);
 *   position: absolute;
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 *  .mdc-foo {
 *    position: absolute;
 *    left: 0;
 *    right: initial;
 *
 *    @include mdc-rtl {
 *      right: 0;
 *      left: initial;
 *    }
 *  }
 * ```
 * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
 */
/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
:root {
  --mdc-persistent-drawer-dark-theme-bg-color: #212121; }

.mdc-persistent-drawer {
  /* Use aspect ratio trick to maintain 16:9 aspect ratio on the header */
  /* stylelint-disable selector-no-qualifying-type */
  /* stylelint-enable selector-no-qualifying-type */
  /* TODO(sgomes): Revisit when we have interactive lists. */
  width: 0; }
  .mdc-persistent-drawer__toolbar-spacer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-align: flex-center;
        -ms-flex-align: flex-center;
            align-items: flex-center;
    height: 56px;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* TODO(sgomes): replace with global breakpoints when we have them */ }
    .mdc-persistent-drawer__toolbar-spacer--theme-dark .mdc-persistent-drawer__toolbar-spacer,
    .mdc-theme--dark .mdc-persistent-drawer__toolbar-spacer {
      border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    @media (min-width: 600px) {
      .mdc-persistent-drawer__toolbar-spacer {
        height: 64px; } }
  .mdc-persistent-drawer__header {
    position: relative; }
  .mdc-persistent-drawer__header::before {
    display: block;
    padding-top: 56.25%;
    content: ""; }
  .mdc-persistent-drawer__header-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 16px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .mdc-persistent-drawer .mdc-list-group,
  .mdc-persistent-drawer .mdc-list {
    padding-right: 0;
    padding-left: 0; }
  .mdc-persistent-drawer .mdc-list-item {
    position: relative;
    padding: 0 16px;
    outline: none;
    color: inherit;
    text-decoration: none;
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5rem;
    text-decoration: inherit;
    text-transform: inherit; }
    .mdc-persistent-drawer .mdc-list-item.mdc-ripple-upgraded {
      left: 0; }
  .mdc-persistent-drawer .mdc-list-item__start-detail {
    color: rgba(0, 0, 0, 0.54); }
    .mdc-persistent-drawer .mdc-list-item__start-detail--theme-dark .mdc-persistent-drawer .mdc-list-item__start-detail,
    .mdc-theme--dark .mdc-persistent-drawer .mdc-list-item__start-detail {
      color: rgba(255, 255, 255, 0.54); }
  .mdc-persistent-drawer--selected.mdc-list-item,
  .mdc-persistent-drawer--selected.mdc-list-item .mdc-list-item__start-detail {
    /* @alternate */
    color: #3f51b5;
    color: var(--mdc-theme-primary, #3f51b5); }
  .mdc-persistent-drawer .mdc-list-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    border-radius: inherit;
    background: currentColor;
    content: "";
    opacity: 0; }
  .mdc-persistent-drawer .mdc-list-item:focus::before {
    -webkit-transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity: .12; }
  .mdc-persistent-drawer .mdc-list-item:active::before {
    /*
      Slightly darker value for visual distinction.
      This allows a full base that has distinct modes.
      Progressive enhancement with ripples will provide complete button spec alignment.
    */
    -webkit-transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity: .18; }
  .mdc-persistent-drawer .mdc-list-item:active:focus::before {
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .mdc-persistent-drawer__drawer {
    /* @alternate */
    background: #fff;
    background: var(--mdc-theme-background, #fff);
    border-left: 0;
    border-right: 1px solid #e4e4e4;
    left: 0;
    right: initial;
    height: 100%;
    -webkit-transform: translateX(-107%);
            transform: translateX(-107%);
    -webkit-transform: translateX(calc(-100% - 20px));
            transform: translateX(calc(-100% - 20px));
    will-change: transform;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 240px;
    overflow: hidden;
    -ms-touch-action: none;
        touch-action: none; }
    [dir="rtl"] .mdc-persistent-drawer__drawer, .mdc-persistent-drawer__drawer[dir="rtl"] {
      border-left: 1px solid #e4e4e4;
      border-right: 0; }
    [dir="rtl"] .mdc-persistent-drawer__drawer, .mdc-persistent-drawer__drawer[dir="rtl"] {
      left: initial;
      right: 0; }
    .mdc-persistent-drawer__drawer--theme-dark,
    .mdc-theme--dark .mdc-persistent-drawer__drawer {
      background-color: #212121;
      background-color: var(--mdc-persistent-drawer-dark-theme-bg-color, #212121);
      /* @alternate */
      color: white;
      color: var(--mdc-theme-text-primary-on-dark, white);
      border-left: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.12); }
      [dir="rtl"] .mdc-persistent-drawer__drawer--theme-dark, .mdc-persistent-drawer__drawer--theme-dark[dir="rtl"], [dir="rtl"]
      .mdc-theme--dark .mdc-persistent-drawer__drawer,
      .mdc-theme--dark .mdc-persistent-drawer__drawer[dir="rtl"] {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        border-right: 0; }
    [dir="rtl"] .mdc-persistent-drawer .mdc-persistent-drawer__drawer,
    .mdc-persistent-drawer[dir="rtl"] .mdc-persistent-drawer__drawer {
      -webkit-transform: translateX(107%);
              transform: translateX(107%);
      -webkit-transform: translateX(calc(100% + 20px));
              transform: translateX(calc(100% + 20px)); }
  .mdc-persistent-drawer--animating .mdc-persistent-drawer__drawer {
    -webkit-transition: -webkit-transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: -webkit-transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1); }
  .mdc-persistent-drawer--animating.mdc-persistent-drawer--open .mdc-persistent-drawer__drawer {
    -webkit-transition: -webkit-transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: -webkit-transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1); }
  .mdc-persistent-drawer--open {
    width: 240px;
    pointer-events: auto; }
    .mdc-persistent-drawer--open .mdc-persistent-drawer__drawer {
      -webkit-transform: none;
              transform: none; }
    [dir="rtl"] .mdc-persistent-drawer--open .mdc-persistent-drawer__drawer, .mdc-persistent-drawer--open[dir="rtl"] .mdc-persistent-drawer__drawer {
      -webkit-transform: none;
              transform: none; }

/**
 * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
 *
 * Usage Example:
 * ```scss
 * .mdc-foo {
 *   position: absolute;
 *   left: 0;
 *
 *   @include mdc-rtl {
 *     left: auto;
 *     right: 0;
 *   }
 *
 *   &__bar {
 *     margin-left: 4px;
 *     @include mdc-rtl(".mdc-foo") {
 *       margin-left: auto;
 *       margin-right: 4px;
 *     }
 *   }
 * }
 *
 * .mdc-foo--mod {
 *   padding-left: 4px;
 *
 *   @include mdc-rtl {
 *     padding-left: auto;
 *     padding-right: 4px;
 *   }
 * }
 * ```
 *
 * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
 * in most cases, it will in some cases lead to false negatives, e.g.
 *
 * ```html
 * <html dir="rtl">
 *   <!-- ... -->
 *   <div dir="ltr">
 *     <div class="mdc-foo">Styled incorrectly as RTL!</div>
 *   </div>
 * </html>
 * ```
 *
 * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
 */
/**
 * Takes a base box-model property - e.g. margin / border / padding - along with a default
 * direction and value, and emits rules which apply the value to the
 * "<base-property>-<default-direction>" property by default, but flips the direction
 * when within an RTL context.
 *
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, left, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 8px;
 *     margin-left: 0;
 *   }
 * }
 * ```
 * whereas:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, right, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-right: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 0;
 *     margin-left: 8px;
 *   }
 * }
 * ```
 *
 * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
 * e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
 *
 * Note that this function will always zero out the original value in an RTL context. If you're
 * trying to flip the values, use mdc-rtl-reflexive-property().
 */
/**
 * Takes a base property and emits rules that assign <base-property>-left to <left-value> and
 * <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-property(margin, auto, 12px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: auto;
 *   margin-right: 12px;
 *
 *   @include mdc-rtl {
 *     margin-left: 12px;
 *     margin-right: auto;
 *   }
 * }
 * ```
 *
 * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
 */
/**
 * Takes an argument specifying a horizontal position property (either "left" or "right") as well
 * as a value, and applies that value to the specified position in a LTR context, and flips it in a
 * RTL context. For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-position(left, 0);
 *   position: absolute;
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 *  .mdc-foo {
 *    position: absolute;
 *    left: 0;
 *    right: initial;
 *
 *    @include mdc-rtl {
 *      right: 0;
 *      left: initial;
 *    }
 *  }
 * ```
 * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
 */
/*
  Precomputed linear color channel values, for use in contrast calculations.
  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

  Algorithm, for c in 0 to 255:
  f(c) {
    c = c / 255;
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  }

  This lookup table is needed since there is no `pow` in SASS.
*/
/**
 * Calculate the luminance for a color.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Calculate the contrast ratio between two colors.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Determine whether to use dark or light text on top of given color.
 * Returns "dark" for dark text and "light" for light text.
 */
/*
  Main theme colors.
  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
*/
/* Indigo 500 */
/* Pink A200 */
/* White */
/* Which set of text colors to use for each main theme color (light or dark) */
/* Text colors according to light vs dark and text type */
/* Primary text colors for each of the theme colors */
/**
 * Applies the correct theme color style to the specified property.
 * $property is typically color or background-color, but can be any CSS property that accepts color values.
 * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 */
/**
 * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
 * Should provide the $root-selector option if applied to anything other than the root selector.
 * When used with a modifier class, provide a second argument of `true` for the $compound parameter
 * to specify that this should be attached as a compound class.
 *
 * Usage example:
 *
 * ```scss
 * .mdc-foo {
 *   color: black;
 *
 *   @include mdc-theme-dark {
 *     color: white;
 *   }
 *
 *   &__bar {
 *     background: black;
 *
 *     @include mdc-theme-dark(".mdc-foo") {
 *       background: white;
 *     }
 *   }
 * }
 *
 * .mdc-foo--disabled {
 *   opacity: .38;
 *
 *   @include mdc-theme-dark(".mdc-foo", true) {
 *     opacity: .5;
 *   }
 * }
 * ```
 */
/*
  Precomputed linear color channel values, for use in contrast calculations.
  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

  Algorithm, for c in 0 to 255:
  f(c) {
    c = c / 255;
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  }

  This lookup table is needed since there is no `pow` in SASS.
*/
/**
 * Calculate the luminance for a color.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Calculate the contrast ratio between two colors.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Determine whether to use dark or light text on top of given color.
 * Returns "dark" for dark text and "light" for light text.
 */
/*
  Main theme colors.
  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
*/
/* Indigo 500 */
/* Pink A200 */
/* White */
/* Which set of text colors to use for each main theme color (light or dark) */
/* Text colors according to light vs dark and text type */
/* Primary text colors for each of the theme colors */
/**
 * Applies the correct theme color style to the specified property.
 * $property is typically color or background-color, but can be any CSS property that accepts color values.
 * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 */
/**
 * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
 * Should provide the $root-selector option if applied to anything other than the root selector.
 * When used with a modifier class, provide a second argument of `true` for the $compound parameter
 * to specify that this should be attached as a compound class.
 *
 * Usage example:
 *
 * ```scss
 * .mdc-foo {
 *   color: black;
 *
 *   @include mdc-theme-dark {
 *     color: white;
 *   }
 *
 *   &__bar {
 *     background: black;
 *
 *     @include mdc-theme-dark(".mdc-foo") {
 *       background: white;
 *     }
 *   }
 * }
 *
 * .mdc-foo--disabled {
 *   opacity: .38;
 *
 *   @include mdc-theme-dark(".mdc-foo", true) {
 *     opacity: .5;
 *   }
 * }
 * ```
 */
/* TODO(sgomes): Figure out what to do about desktop font sizes. */
/* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */
:root {
  --mdc-permanent-drawer-dark-theme-bg-color: #212121; }

.mdc-permanent-drawer {
  /* Use aspect ratio trick to maintain 16:9 aspect ratio on the header */
  /* stylelint-disable selector-no-qualifying-type */
  /* stylelint-enable selector-no-qualifying-type */
  /* TODO(sgomes): Revisit when we have interactive lists. */
  /* @alternate */
  background: #fff;
  background: var(--mdc-theme-background, #fff);
  border-left: 0;
  border-right: 1px solid #e4e4e4;
  left: 0;
  right: initial;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 240px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden; }
  .mdc-permanent-drawer__toolbar-spacer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-align: flex-center;
        -ms-flex-align: flex-center;
            align-items: flex-center;
    height: 56px;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* TODO(sgomes): replace with global breakpoints when we have them */ }
    .mdc-permanent-drawer__toolbar-spacer--theme-dark .mdc-permanent-drawer__toolbar-spacer,
    .mdc-theme--dark .mdc-permanent-drawer__toolbar-spacer {
      border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    @media (min-width: 600px) {
      .mdc-permanent-drawer__toolbar-spacer {
        height: 64px; } }
  .mdc-permanent-drawer__header {
    position: relative; }
  .mdc-permanent-drawer__header::before {
    display: block;
    padding-top: 56.25%;
    content: ""; }
  .mdc-permanent-drawer__header-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 16px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .mdc-permanent-drawer .mdc-list-group,
  .mdc-permanent-drawer .mdc-list {
    padding-right: 0;
    padding-left: 0; }
  .mdc-permanent-drawer .mdc-list-item {
    position: relative;
    padding: 0 16px;
    outline: none;
    color: inherit;
    text-decoration: none;
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5rem;
    text-decoration: inherit;
    text-transform: inherit; }
    .mdc-permanent-drawer .mdc-list-item.mdc-ripple-upgraded {
      left: 0; }
  .mdc-permanent-drawer .mdc-list-item__start-detail {
    color: rgba(0, 0, 0, 0.54); }
    .mdc-permanent-drawer .mdc-list-item__start-detail--theme-dark .mdc-permanent-drawer .mdc-list-item__start-detail,
    .mdc-theme--dark .mdc-permanent-drawer .mdc-list-item__start-detail {
      color: rgba(255, 255, 255, 0.54); }
  .mdc-permanent-drawer--selected.mdc-list-item,
  .mdc-permanent-drawer--selected.mdc-list-item .mdc-list-item__start-detail {
    /* @alternate */
    color: #3f51b5;
    color: var(--mdc-theme-primary, #3f51b5); }
  .mdc-permanent-drawer .mdc-list-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    border-radius: inherit;
    background: currentColor;
    content: "";
    opacity: 0; }
  .mdc-permanent-drawer .mdc-list-item:focus::before {
    -webkit-transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity: .12; }
  .mdc-permanent-drawer .mdc-list-item:active::before {
    /*
      Slightly darker value for visual distinction.
      This allows a full base that has distinct modes.
      Progressive enhancement with ripples will provide complete button spec alignment.
    */
    -webkit-transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity: .18; }
  .mdc-permanent-drawer .mdc-list-item:active:focus::before {
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  [dir="rtl"] .mdc-permanent-drawer, .mdc-permanent-drawer[dir="rtl"] {
    border-left: 1px solid #e4e4e4;
    border-right: 0; }
  [dir="rtl"] .mdc-permanent-drawer, .mdc-permanent-drawer[dir="rtl"] {
    left: initial;
    right: 0; }
  .mdc-permanent-drawer--theme-dark,
  .mdc-theme--dark .mdc-permanent-drawer {
    background-color: #212121;
    background-color: var(--mdc-permanent-drawer-dark-theme-bg-color, #212121);
    /* @alternate */
    color: white;
    color: var(--mdc-theme-text-primary-on-dark, white);
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12); }
    [dir="rtl"] .mdc-permanent-drawer--theme-dark, .mdc-permanent-drawer--theme-dark[dir="rtl"], [dir="rtl"]
    .mdc-theme--dark .mdc-permanent-drawer,
    .mdc-theme--dark .mdc-permanent-drawer[dir="rtl"] {
      border-left: 1px solid rgba(255, 255, 255, 0.12);
      border-right: 0; }
  .mdc-permanent-drawer--floating {
    background: none;
    border-left: 0;
    border-right: none; }
    [dir="rtl"] .mdc-permanent-drawer--floating, .mdc-permanent-drawer--floating[dir="rtl"] {
      border-left: none;
      border-right: 0; }
    .mdc-permanent-drawer--floating--theme-dark,
    .mdc-theme--dark .mdc-permanent-drawer--floating {
      background: none;
      border-left: 0;
      border-right: none; }
      [dir="rtl"] .mdc-permanent-drawer--floating--theme-dark, .mdc-permanent-drawer--floating--theme-dark[dir="rtl"], [dir="rtl"]
      .mdc-theme--dark .mdc-permanent-drawer--floating,
      .mdc-theme--dark .mdc-permanent-drawer--floating[dir="rtl"] {
        border-left: none;
        border-right: 0; }

/**
 * The css property used for elevation. In most cases this should not be changed. It is exposed
 * as a variable for abstraction / easy use when needing to reference the property directly, for
 * example in a `will-change` rule.
 */
/**
 * The default duration value for elevation transitions.
 */
/**
 * The default easing value for elevation transitions.
 */
/**
 * Applies the correct css rules to an element to give it the elevation specified by $z-value.
 * The $z-value must be between 0 and 24.
 */
/**
 * Returns a string that can be used as the value for a `transition` property for elevation.
 * Calling this function directly is useful in situations where a component needs to transition
 * more than one property.
 *
 * ```scss
 * .foo {
 *   transition: mdc-elevation-transition-rule(), opacity 100ms ease;
 *   will-change: $mdc-elevation-property, opacity;
 * }
 * ```
 */
/**
 * Applies the correct css rules needed to have an element transition between elevations.
 * This mixin should be applied to elements whose elevation values will change depending on their
 * context (e.g. when active or disabled).
 */
/**
 * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
 *
 * Usage Example:
 * ```scss
 * .mdc-foo {
 *   position: absolute;
 *   left: 0;
 *
 *   @include mdc-rtl {
 *     left: auto;
 *     right: 0;
 *   }
 *
 *   &__bar {
 *     margin-left: 4px;
 *     @include mdc-rtl(".mdc-foo") {
 *       margin-left: auto;
 *       margin-right: 4px;
 *     }
 *   }
 * }
 *
 * .mdc-foo--mod {
 *   padding-left: 4px;
 *
 *   @include mdc-rtl {
 *     padding-left: auto;
 *     padding-right: 4px;
 *   }
 * }
 * ```
 *
 * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
 * in most cases, it will in some cases lead to false negatives, e.g.
 *
 * ```html
 * <html dir="rtl">
 *   <!-- ... -->
 *   <div dir="ltr">
 *     <div class="mdc-foo">Styled incorrectly as RTL!</div>
 *   </div>
 * </html>
 * ```
 *
 * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
 */
/**
 * Takes a base box-model property - e.g. margin / border / padding - along with a default
 * direction and value, and emits rules which apply the value to the
 * "<base-property>-<default-direction>" property by default, but flips the direction
 * when within an RTL context.
 *
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, left, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 8px;
 *     margin-left: 0;
 *   }
 * }
 * ```
 * whereas:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, right, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-right: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 0;
 *     margin-left: 8px;
 *   }
 * }
 * ```
 *
 * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
 * e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
 *
 * Note that this function will always zero out the original value in an RTL context. If you're
 * trying to flip the values, use mdc-rtl-reflexive-property().
 */
/**
 * Takes a base property and emits rules that assign <base-property>-left to <left-value> and
 * <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-property(margin, auto, 12px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: auto;
 *   margin-right: 12px;
 *
 *   @include mdc-rtl {
 *     margin-left: 12px;
 *     margin-right: auto;
 *   }
 * }
 * ```
 *
 * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
 */
/**
 * Takes an argument specifying a horizontal position property (either "left" or "right") as well
 * as a value, and applies that value to the specified position in a LTR context, and flips it in a
 * RTL context. For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-position(left, 0);
 *   position: absolute;
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 *  .mdc-foo {
 *    position: absolute;
 *    left: 0;
 *    right: initial;
 *
 *    @include mdc-rtl {
 *      right: 0;
 *      left: initial;
 *    }
 *  }
 * ```
 * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
 */
/*
  Precomputed linear color channel values, for use in contrast calculations.
  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

  Algorithm, for c in 0 to 255:
  f(c) {
    c = c / 255;
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  }

  This lookup table is needed since there is no `pow` in SASS.
*/
/**
 * Calculate the luminance for a color.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Calculate the contrast ratio between two colors.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Determine whether to use dark or light text on top of given color.
 * Returns "dark" for dark text and "light" for light text.
 */
/*
  Main theme colors.
  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
*/
/* Indigo 500 */
/* Pink A200 */
/* White */
/* Which set of text colors to use for each main theme color (light or dark) */
/* Text colors according to light vs dark and text type */
/* Primary text colors for each of the theme colors */
/**
 * Applies the correct theme color style to the specified property.
 * $property is typically color or background-color, but can be any CSS property that accepts color values.
 * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 */
/**
 * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
 * Should provide the $root-selector option if applied to anything other than the root selector.
 * When used with a modifier class, provide a second argument of `true` for the $compound parameter
 * to specify that this should be attached as a compound class.
 *
 * Usage example:
 *
 * ```scss
 * .mdc-foo {
 *   color: black;
 *
 *   @include mdc-theme-dark {
 *     color: white;
 *   }
 *
 *   &__bar {
 *     background: black;
 *
 *     @include mdc-theme-dark(".mdc-foo") {
 *       background: white;
 *     }
 *   }
 * }
 *
 * .mdc-foo--disabled {
 *   opacity: .38;
 *
 *   @include mdc-theme-dark(".mdc-foo", true) {
 *     opacity: .5;
 *   }
 * }
 * ```
 */
/*
  Precomputed linear color channel values, for use in contrast calculations.
  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

  Algorithm, for c in 0 to 255:
  f(c) {
    c = c / 255;
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  }

  This lookup table is needed since there is no `pow` in SASS.
*/
/**
 * Calculate the luminance for a color.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Calculate the contrast ratio between two colors.
 * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 */
/**
 * Determine whether to use dark or light text on top of given color.
 * Returns "dark" for dark text and "light" for light text.
 */
/*
  Main theme colors.
  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
*/
/* Indigo 500 */
/* Pink A200 */
/* White */
/* Which set of text colors to use for each main theme color (light or dark) */
/* Text colors according to light vs dark and text type */
/* Primary text colors for each of the theme colors */
/**
 * Applies the correct theme color style to the specified property.
 * $property is typically color or background-color, but can be any CSS property that accepts color values.
 * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 */
/**
 * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
 * Should provide the $root-selector option if applied to anything other than the root selector.
 * When used with a modifier class, provide a second argument of `true` for the $compound parameter
 * to specify that this should be attached as a compound class.
 *
 * Usage example:
 *
 * ```scss
 * .mdc-foo {
 *   color: black;
 *
 *   @include mdc-theme-dark {
 *     color: white;
 *   }
 *
 *   &__bar {
 *     background: black;
 *
 *     @include mdc-theme-dark(".mdc-foo") {
 *       background: white;
 *     }
 *   }
 * }
 *
 * .mdc-foo--disabled {
 *   opacity: .38;
 *
 *   @include mdc-theme-dark(".mdc-foo", true) {
 *     opacity: .5;
 *   }
 * }
 * ```
 */
/* TODO(sgomes): Figure out what to do about desktop font sizes. */
/* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */
/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
 * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
 *
 * Usage Example:
 * ```scss
 * .mdc-foo {
 *   position: absolute;
 *   left: 0;
 *
 *   @include mdc-rtl {
 *     left: auto;
 *     right: 0;
 *   }
 *
 *   &__bar {
 *     margin-left: 4px;
 *     @include mdc-rtl(".mdc-foo") {
 *       margin-left: auto;
 *       margin-right: 4px;
 *     }
 *   }
 * }
 *
 * .mdc-foo--mod {
 *   padding-left: 4px;
 *
 *   @include mdc-rtl {
 *     padding-left: auto;
 *     padding-right: 4px;
 *   }
 * }
 * ```
 *
 * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
 * in most cases, it will in some cases lead to false negatives, e.g.
 *
 * ```html
 * <html dir="rtl">
 *   <!-- ... -->
 *   <div dir="ltr">
 *     <div class="mdc-foo">Styled incorrectly as RTL!</div>
 *   </div>
 * </html>
 * ```
 *
 * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
 */
/**
 * Takes a base box-model property - e.g. margin / border / padding - along with a default
 * direction and value, and emits rules which apply the value to the
 * "<base-property>-<default-direction>" property by default, but flips the direction
 * when within an RTL context.
 *
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, left, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 8px;
 *     margin-left: 0;
 *   }
 * }
 * ```
 * whereas:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-box(margin, right, 8px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-right: 8px;
 *
 *   @include mdc-rtl {
 *     margin-right: 0;
 *     margin-left: 8px;
 *   }
 * }
 * ```
 *
 * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
 * e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
 *
 * Note that this function will always zero out the original value in an RTL context. If you're
 * trying to flip the values, use mdc-rtl-reflexive-property().
 */
/**
 * Takes a base property and emits rules that assign <base-property>-left to <left-value> and
 * <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
 * For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-property(margin, auto, 12px);
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 * .mdc-foo {
 *   margin-left: auto;
 *   margin-right: 12px;
 *
 *   @include mdc-rtl {
 *     margin-left: 12px;
 *     margin-right: auto;
 *   }
 * }
 * ```
 *
 * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
 */
/**
 * Takes an argument specifying a horizontal position property (either "left" or "right") as well
 * as a value, and applies that value to the specified position in a LTR context, and flips it in a
 * RTL context. For example:
 *
 * ```scss
 * .mdc-foo {
 *   @include mdc-rtl-reflexive-position(left, 0);
 *   position: absolute;
 * }
 * ```
 * is equivalent to:
 *
 * ```scss
 *  .mdc-foo {
 *    position: absolute;
 *    left: 0;
 *    right: initial;
 *
 *    @include mdc-rtl {
 *      right: 0;
 *      left: initial;
 *    }
 *  }
 * ```
 * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
 */
/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.mdc-temporary-drawer {
  /* Use aspect ratio trick to maintain 16:9 aspect ratio on the header */
  /* stylelint-disable selector-no-qualifying-type */
  /* stylelint-enable selector-no-qualifying-type */
  /* TODO(sgomes): Revisit when we have interactive lists. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  contain: strict;
  z-index: 5;
  /* Shaded background */ }
  .mdc-temporary-drawer__toolbar-spacer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-align: flex-center;
        -ms-flex-align: flex-center;
            align-items: flex-center;
    height: 56px;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* TODO(sgomes): replace with global breakpoints when we have them */ }
    .mdc-temporary-drawer__toolbar-spacer--theme-dark .mdc-temporary-drawer__toolbar-spacer,
    .mdc-theme--dark .mdc-temporary-drawer__toolbar-spacer {
      border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    @media (min-width: 600px) {
      .mdc-temporary-drawer__toolbar-spacer {
        height: 64px; } }
  .mdc-temporary-drawer__header {
    position: relative; }
  .mdc-temporary-drawer__header::before {
    display: block;
    padding-top: 56.25%;
    content: ""; }
  .mdc-temporary-drawer__header-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 16px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .mdc-temporary-drawer .mdc-list-group,
  .mdc-temporary-drawer .mdc-list {
    padding-right: 0;
    padding-left: 0; }
  .mdc-temporary-drawer .mdc-list-item {
    position: relative;
    padding: 0 16px;
    outline: none;
    color: inherit;
    text-decoration: none;
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5rem;
    text-decoration: inherit;
    text-transform: inherit; }
    .mdc-temporary-drawer .mdc-list-item.mdc-ripple-upgraded {
      left: 0; }
  .mdc-temporary-drawer .mdc-list-item__start-detail {
    color: rgba(0, 0, 0, 0.54); }
    .mdc-temporary-drawer .mdc-list-item__start-detail--theme-dark .mdc-temporary-drawer .mdc-list-item__start-detail,
    .mdc-theme--dark .mdc-temporary-drawer .mdc-list-item__start-detail {
      color: rgba(255, 255, 255, 0.54); }
  .mdc-temporary-drawer--selected.mdc-list-item,
  .mdc-temporary-drawer--selected.mdc-list-item .mdc-list-item__start-detail {
    /* @alternate */
    color: #3f51b5;
    color: var(--mdc-theme-primary, #3f51b5); }
  .mdc-temporary-drawer .mdc-list-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    border-radius: inherit;
    background: currentColor;
    content: "";
    opacity: 0; }
  .mdc-temporary-drawer .mdc-list-item:focus::before {
    -webkit-transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity: .12; }
  .mdc-temporary-drawer .mdc-list-item:active::before {
    /*
      Slightly darker value for visual distinction.
      This allows a full base that has distinct modes.
      Progressive enhancement with ripples will provide complete button spec alignment.
    */
    -webkit-transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity: .18; }
  .mdc-temporary-drawer .mdc-list-item:active:focus::before {
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .mdc-temporary-drawer::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    content: "";
    opacity: 0;
    opacity: var(--mdc-temporary-drawer-opacity, 0);
    will-change: opacity;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .mdc-temporary-drawer__drawer {
    /* @alternate */
    background: #fff;
    background: var(--mdc-theme-background, #fff);
    -webkit-box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
            box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
    left: 0;
    right: initial;
    height: 100%;
    -webkit-transform: translateX(-107%);
            transform: translateX(-107%);
    -webkit-transform: translateX(calc(-100% - 20px));
            transform: translateX(calc(-100% - 20px));
    will-change: transform;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: calc(100% - 56px);
    max-width: 280px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    -ms-touch-action: none;
        touch-action: none;
    /* TODO(sgomes): replace with global breakpoints when we have them */ }
    [dir="rtl"] .mdc-temporary-drawer__drawer, .mdc-temporary-drawer__drawer[dir="rtl"] {
      left: initial;
      right: 0; }
    .mdc-temporary-drawer--theme-dark .mdc-temporary-drawer__drawer,
    .mdc-theme--dark .mdc-temporary-drawer__drawer {
      background: #303030;
      /* @alternate */
      color: white;
      color: var(--mdc-theme-text-primary-on-dark, white); }
    [dir="rtl"] .mdc-temporary-drawer .mdc-temporary-drawer__drawer,
    .mdc-temporary-drawer[dir="rtl"] .mdc-temporary-drawer__drawer {
      -webkit-transform: translateX(107%);
              transform: translateX(107%);
      -webkit-transform: translateX(calc(100% + 20px));
              transform: translateX(calc(100% + 20px)); }
    @media (min-width: 600px) {
      .mdc-temporary-drawer__drawer {
        width: calc(100% - 64px);
        max-width: 320px; } }
  .mdc-temporary-drawer__content {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    -ms-touch-action: pan-y;
        touch-action: pan-y; }
  .mdc-temporary-drawer__footer {
    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
            box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    -ms-flex-negative: 0;
        flex-shrink: 0; }
  .mdc-temporary-drawer--animating::before {
    -webkit-transition: opacity 0.3s 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.3s 0ms cubic-bezier(0, 0, 0.2, 1); }
  .mdc-temporary-drawer--animating.mdc-temporary-drawer--open .mdc-temporary-drawer__drawer {
    -webkit-transition: -webkit-transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: -webkit-transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.225s 0ms cubic-bezier(0, 0, 0.2, 1); }
  .mdc-temporary-drawer--animating .mdc-temporary-drawer__drawer {
    -webkit-transition: -webkit-transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: -webkit-transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition: transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 0.195s 0ms cubic-bezier(0.4, 0, 0.6, 1); }
  .mdc-temporary-drawer--open {
    pointer-events: auto; }
    .mdc-temporary-drawer--open::before {
      opacity: 1;
      opacity: var(--mdc-temporary-drawer-opacity, 1); }
    .mdc-temporary-drawer--open .mdc-temporary-drawer__drawer {
      -webkit-transform: none;
              transform: none; }
    [dir="rtl"] .mdc-temporary-drawer--open .mdc-temporary-drawer__drawer, .mdc-temporary-drawer--open[dir="rtl"] .mdc-temporary-drawer__drawer {
      -webkit-transform: none;
              transform: none; }

.mdc-drawer-scroll-lock {
  height: 100vh;
  overflow: hidden; }