.btn_precio_min {
    transition: background 375ms;
    background: #80CBC4 !important;
}

.btn_cart_back {
    transition: all 375ms;
    background-color: #f57b00 !important;
}

button {
    outline: 0px;
}

.btn:not(.btn-outline-primary) {
    border: none;
    /*Quita los bordes asperos que tienen los botones por defecto*/
    background-color: #0d47a1;
    margin: .5rem;
    position: relative;
    transform: rotateZ(360deg);
    transition: all .2s ease;
    overflow: hidden;
    cursor: pointer;
}

.btn-circle {
    border-radius: 50%;
    /*Redondear bordes*/
    width: 50px;
    /*Ancho del botÃ³n*/
    height: 50px;
    /*Alto del botÃ³n*/
    font-size: 26px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .4);
}

.btn-circle:hover,
.btn-circle:active {
    box-shadow: 0 4px 7px rgba(0, 0, 0, .4);
}

.btn-rectangle {
    border-radius: 2px;
    /*Leve redondeo*/
    padding: .5rem 1.5rem;
    /*Espaciado interno*/
}

.btn-circle,
.btn-raised {
    color: #FFF;
}

.btn-raised {
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    /*Sombra leve*/
}

.btn-raised:hover,
.btn-raised:active {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
}

.btn-flat {
    font-weight: 700;
    /*Negrilla*/
    color: #2196F3;
    background-color: transparent;
}

.block {
    position: relative;
    width: 270px;
    height: 178px;
    margin: 20px auto;
}

.ripple-container {
    /*Con los siguientes valores de position, top, left, width y height aseguramos que el div tome todo el tamaÃ±o de su padre*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

.ripple-effect {
    position: absolute;
    /*En javascript colocaremos el top y left de este span en el punto donde hizo click el usuario. Por eso es necesario trasladarlo en -50% en ambos ejes, para que el centro del efecto coincida con el click*/
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.btn-flat .ripple-effect {
    background: rgba(33, 150, 243, 0.4);
}

.ripple-container.ripple-effect-animation .ripple-effect {
    /*Aplicamos la animaciÃ³n que mas adelante definiremos con @keyframes*/
    -webkit-animation: ripple .4s ease-in;
    animation: ripple .4s ease-in;
}

@-webkit-keyframes ripple {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        padding-bottom: 200%;
        width: 200%;
    }
}

@-webkit-keyframes ripple {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        padding-bottom: 200%;
        width: 200%;
    }
}

@keyframes mdc-ripple-fg-radius-in {
    from {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }
    to {
        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }
}

@keyframes mdc-ripple-fg-opacity-in {
    from {
        animation-timing-function: linear;
        opacity: 0;
    }
    to {
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
}

@keyframes mdc-ripple-fg-opacity-out {
    from {
        animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
    to {
        opacity: 0;
    }
}

.mdc-ripple-surface--test-edge-var-bug {
    --mdc-ripple-surface-test-edge-var: 1px solid #000;
    visibility: hidden;
}

.mdc-ripple-surface--test-edge-var-bug::before {
    border: var(--mdc-ripple-surface-test-edge-var);
}

@keyframes mdc-ripple-fg-radius-in {
    from {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }
    to {
        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    }
}

@keyframes mdc-ripple-fg-opacity-in {
    from {
        animation-timing-function: linear;
        opacity: 0;
    }
    to {
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
}

@keyframes mdc-ripple-fg-opacity-out {
    from {
        animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0);
    }
    to {
        opacity: 0;
    }
}

.mdc-ripple-surface--test-edge-var-bug {
    --mdc-ripple-surface-test-edge-var: 1px solid #000;
    visibility: hidden;
}

.mdc-ripple-surface--test-edge-var-bug::before {
    border: var(--mdc-ripple-surface-test-edge-var);
}
/**
* 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.
* If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
* $opacity-boost.
*/
/**
* 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-value(), opacity 100ms ease;
*   will-change: $mdc-elevation-property, opacity;
* }
* ```
*/
/**
* 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`.
*/
/* TODO(sgomes): Figure out what to do about desktop font sizes. */
/* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */

.mdc-button {
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    /*min-width: 64px;*/
    height: 36px;
    padding: 0 16px;
    border: none;
    outline: none;
    text-align: center;
    user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 2px;
}

.mdc-button::before,
.mdc-button::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
}

.mdc-button::before {
    transition: opacity 15ms linear;
    z-index: 1;
}

.mdc-button.mdc-ripple-upgraded::before {
    transform: scale(var(--mdc-ripple-fg-scale, 1));
}

.mdc-button.mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    transform: scale(0);
    transform-origin: center center;
}

.mdc-button.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0);
}

.mdc-button.mdc-ripple-upgraded--foreground-activation::after {
    animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;
}

.mdc-button.mdc-ripple-upgraded--foreground-deactivation::after {
    animation: 150ms mdc-ripple-fg-opacity-out;
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}

.mdc-button::before,
.mdc-button::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%;
}

.mdc-button.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%);
}

.mdc-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mdc-button:active {
    outline: none;
}

.mdc-button:hover {
    cursor: pointer;
}

.mdc-button:disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.38);
    /* @alternate */
    color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
    cursor: default;
    pointer-events: none;
}

.mdc-button:not(:disabled) {
    background-color: transparent;
}

.mdc-button:not(:disabled) {
    color: #6200ee;
    /* @alternate */
    color: var(--mdc-theme-primary, #6200ee);
}

.mdc-button::before,
.mdc-button::after {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    .mdc-button::before,
    .mdc-button::after {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

.mdc-button:hover::before {
    opacity: 0.04;
}

.mdc-button:not(.mdc-ripple-upgraded):focus::before,
.mdc-button.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

.mdc-button:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

.mdc-button:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.16;
}

.mdc-button.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: $opacity;
}

.mdc-button .mdc-button__icon {
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: 8px;
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: inherit;
    vertical-align: top;
}

[dir="rtl"] .mdc-button .mdc-button__icon,
.mdc-button .mdc-button__icon[dir="rtl"] {
    /* @noflip */
    margin-left: 8px;
    /* @noflip */
    margin-right: 0;
}

.mdc-button svg.mdc-button__icon {
    /* @noflip */
    margin-left: 0;
    /* @noflip */
    margin-right: 8px;
    margin-top: -2px;
    fill: currentColor;
    vertical-align: middle;
}

[dir="rtl"] .mdc-button svg.mdc-button__icon,
.mdc-button svg.mdc-button__icon[dir="rtl"] {
    /* @noflip */
    margin-left: 8px;
    /* @noflip */
    margin-right: 0;
}

.mdc-button--raised:disabled,
.mdc-button--unelevated:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.38);
    /* @alternate */
    color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
}

.mdc-button--raised:not(:disabled),
.mdc-button--unelevated:not(:disabled) {
    background-color: #6200ee;
}

@supports not (-ms-ime-align: auto) {
    .mdc-button--raised:not(:disabled),
    .mdc-button--unelevated:not(:disabled) {
        /* @alternate */
        background-color: var(--mdc-theme-primary, #6200ee);
    }
}

.mdc-button--raised:not(:disabled),
.mdc-button--unelevated:not(:disabled) {
    color: white;
    /* @alternate */
    color: var(--mdc-theme-text-primary-on-primary, white);
}

.mdc-button--raised::before,
.mdc-button--raised::after,
.mdc-button--unelevated::before,
.mdc-button--unelevated::after {
    background-color: white;
}

@supports not (-ms-ime-align: auto) {
    .mdc-button--raised::before,
    .mdc-button--raised::after,
    .mdc-button--unelevated::before,
    .mdc-button--unelevated::after {
        /* @alternate */
        background-color: var(--mdc-theme-text-primary-on-primary, white);
    }
}

.mdc-button--raised:hover::before,
.mdc-button--unelevated:hover::before {
    opacity: 0.08;
}

.mdc-button--raised:not(.mdc-ripple-upgraded):focus::before,
.mdc-button--raised.mdc-ripple-upgraded--background-focused::before,
.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus::before,
.mdc-button--unelevated.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.24;
}

.mdc-button--raised:not(.mdc-ripple-upgraded)::after,
.mdc-button--unelevated:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

.mdc-button--raised:not(.mdc-ripple-upgraded):active::after,
.mdc-button--unelevated:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.32;
}

.mdc-button--raised.mdc-ripple-upgraded,
.mdc-button--unelevated.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: $opacity;
}

.mdc-button--raised {
    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);
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-button--raised:hover,
.mdc-button--raised:focus {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mdc-button--raised:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mdc-button--raised:disabled {
    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);
}

.mdc-button--stroked {
    border-style: solid;
    padding-right: 14px;
    padding-left: 14px;
    border-width: 2px;
    line-height: 32px;
}

.mdc-button--stroked:disabled {
    border-color: rgba(0, 0, 0, 0.38);
    /* @alternate */
    border-color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
}

.mdc-button--stroked.mdc-button--dense {
    line-height: 27px;
}

.mdc-button--stroked:not(:disabled) {
    border-color: #6200ee;
    /* @alternate */
    border-color: var(--mdc-theme-primary, #6200ee);
}

.mdc-button--dense {
    height: 32px;
    font-size: .8125rem;
    line-height: 32px;
}
/**
* 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.
* If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
* $opacity-boost.
*/
/**
* 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-value(), opacity 100ms ease;
*   will-change: $mdc-elevation-property, opacity;
* }
* ```
*/
/**
* 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.
*/

.mdc-fab {
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    position: relative;
    justify-content: center;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    padding: 0;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
    border: none;
    border-radius: 50%;
    fill: currentColor;
    cursor: pointer;
    user-select: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    background-color: #018786;
    color: white;
    /* @alternate */
    color: var(--mdc-theme-text-primary-on-secondary, white);
}

.mdc-fab::before,
.mdc-fab::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
}

.mdc-fab::before {
    transition: opacity 15ms linear;
    z-index: 1;
}

.mdc-fab.mdc-ripple-upgraded::before {
    transform: scale(var(--mdc-ripple-fg-scale, 1));
}

.mdc-fab.mdc-ripple-upgraded::after {
    top: 0;
    /* @noflip */
    left: 0;
    transform: scale(0);
    transform-origin: center center;
}

.mdc-fab.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);
    /* @noflip */
    left: var(--mdc-ripple-left, 0);
}

.mdc-fab.mdc-ripple-upgraded--foreground-activation::after {
    animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;
}

.mdc-fab.mdc-ripple-upgraded--foreground-deactivation::after {
    animation: 150ms mdc-ripple-fg-opacity-out;
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}

.mdc-fab::before,
.mdc-fab::after {
    top: calc(50% - 100%);
    /* @noflip */
    left: calc(50% - 100%);
    width: 200%;
    height: 200%;
}

.mdc-fab.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%);
}

.mdc-fab::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mdc-fab:hover,
.mdc-fab:focus {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mdc-fab:active {
    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.mdc-fab:active,
.mdc-fab:focus {
    outline: none;
}

.mdc-fab:hover {
    cursor: pointer;
}

.mdc-fab>svg {
    width: 100%;
}

@supports not (-ms-ime-align: auto) {
    .mdc-fab {
        /* @alternate */
        background-color: var(--mdc-theme-secondary, #018786);
    }
}

.mdc-fab::before,
.mdc-fab::after {
    background-color: white;
}

@supports not (-ms-ime-align: auto) {
    .mdc-fab::before,
    .mdc-fab::after {
        /* @alternate */
        background-color: var(--mdc-theme-text-primary-on-secondary, white);
    }
}

.mdc-fab:hover::before {
    opacity: 0.08;
}

.mdc-fab:not(.mdc-ripple-upgraded):focus::before,
.mdc-fab.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.24;
}

.mdc-fab:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

.mdc-fab:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.32;
}

.mdc-fab.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: $opacity;
}

.mdc-fab--mini {
    width: 40px;
    height: 40px;
}

.mdc-fab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
}

.mdc-fab--exited {
    transform: scale(0);
    transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);
    opacity: 0;
}

.mdc-fab--exited .mdc-fab__icon {
    transform: scale(0);
    transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
}

.mdc-button.secondary-text-button:not(:disabled) {
    color: #018786;
}

.mdc-button.secondary-text-button::before,
.mdc-button.secondary-text-button::after {
    background-color: #018786;
}

@supports not (-ms-ime-align: auto) {
    .mdc-button.secondary-text-button::before,
    .mdc-button.secondary-text-button::after {
        /* @alternate */
        background-color: var(--mdc-theme-secondary, #018786);
    }
}

.mdc-button.secondary-text-button:hover::before {
    opacity: 0.04;
}

.mdc-button.secondary-text-button:not(.mdc-ripple-upgraded):focus::before,
.mdc-button.secondary-text-button.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.12;
}

.mdc-button.secondary-text-button:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

.mdc-button.secondary-text-button:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.16;
}

.mdc-button.secondary-text-button.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: $opacity;
}

.mdc-button.secondary-filled-button:not(:disabled) {
    background-color: #018786;
}

.mdc-button.secondary-filled-button:not(:disabled) {
    color: white;
    /* @alternate */
    color: var(--mdc-theme-text-primary-on-dark, white);
}

.mdc-button.secondary-filled-button::before,
.mdc-button.secondary-filled-button::after {
    background-color: white;
}

@supports not (-ms-ime-align: auto) {
    .mdc-button.secondary-filled-button::before,
    .mdc-button.secondary-filled-button::after {
        /* @alternate */
        background-color: var(--mdc-theme-text-primary-on-dark, white);
    }
}

.mdc-button.secondary-filled-button:hover::before {
    opacity: 0.08;
}

.mdc-button.secondary-filled-button:not(.mdc-ripple-upgraded):focus::before,
.mdc-button.secondary-filled-button.mdc-ripple-upgraded--background-focused::before {
    transition-duration: 75ms;
    opacity: 0.24;
}

.mdc-button.secondary-filled-button:not(.mdc-ripple-upgraded)::after {
    transition: opacity 150ms linear;
}

.mdc-button.secondary-filled-button:not(.mdc-ripple-upgraded):active::after {
    transition-duration: 75ms;
    opacity: 0.32;
}

.mdc-button.secondary-filled-button.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: $opacity;
}

.mdc-button.secondary-stroked-button:not(:disabled) {
    color: #018786;
}

.mdc-button.secondary-stroked-button:not(:disabled) {
    border-color: #018786;
}