/* material component web - start */

.mdc-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    border: none;
    outline: none;
    line-height: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    overflow: visible;
    vertical-align: middle;
    background: transparent
}

.mdc-button .mdc-elevation-overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.mdc-button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mdc-button:active {
    outline: none
}

.mdc-button:hover {
    cursor: pointer
}

.mdc-button:disabled {
    cursor: default;
    pointer-events: none
}

.mdc-button .mdc-button__icon {
    margin-left: 0;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    vertical-align: top
}

[dir=rtl] .mdc-button .mdc-button__icon,.mdc-button .mdc-button__icon[dir=rtl] {
    margin-left: 8px;
    margin-right: 0
}

.mdc-button .mdc-button__label {
    position: relative
}

.mdc-button .mdc-button__focus-ring {
    display: none
}

@media screen and (forced-colors: active) {
    .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring {
        pointer-events: none;
        border: 2px solid transparent;
        border-radius: 6px;
        box-sizing: content-box;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: calc( 100% + 4px );
        width: calc( 100% + 4px );
        display: block
    }
}

@media screen and (forced-colors: active)and (forced-colors: active) {
    .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring {
        border-color: CanvasText
    }
}

@media screen and (forced-colors: active) {
    .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after {
        content: "";
        border: 2px solid transparent;
        border-radius: 8px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: calc(100% + 4px);
        width: calc(100% + 4px)
    }
}

@media screen and (forced-colors: active)and (forced-colors: active) {
    .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after {
        border-color: CanvasText
    }
}

.mdc-button .mdc-button__touch {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.mdc-button__label+.mdc-button__icon {
    margin-left: 8px;
    margin-right: 0
}

[dir=rtl] .mdc-button__label+.mdc-button__icon,.mdc-button__label+.mdc-button__icon[dir=rtl] {
    margin-left: 0;
    margin-right: 8px
}

svg.mdc-button__icon {
    fill: currentColor
}

.mdc-button--touch {
    margin-top: 6px;
    margin-bottom: 6px
}

.mdc-button {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
    text-decoration: none;
    -webkit-text-decoration: var(--mdc-typography-button-text-decoration, none);
    text-decoration: var(--mdc-typography-button-text-decoration, none)
}

.mdc-button {
    padding: 0 8px 0 8px
}

.mdc-button--unelevated {
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 16px 0 16px
}

.mdc-button--unelevated.mdc-button--icon-trailing {
    padding: 0 12px 0 16px
}

.mdc-button--unelevated.mdc-button--icon-leading {
    padding: 0 16px 0 12px
}

.mdc-button--raised {
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 16px 0 16px
}

.mdc-button--raised.mdc-button--icon-trailing {
    padding: 0 12px 0 16px
}

.mdc-button--raised.mdc-button--icon-leading {
    padding: 0 16px 0 12px
}

.mdc-button--outlined {
    border-style: solid;
    transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1)
}

.mdc-button--outlined .mdc-button__ripple {
    border-style: solid;
    border-color: transparent
}

@-webkit-keyframes mdc-ripple-fg-radius-in {
    from {
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
        transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)
    }

    to {
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))
    }
}

@keyframes mdc-ripple-fg-radius-in {
    from {
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
        transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)
    }

    to {
        -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
        transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))
    }
}

@-webkit-keyframes mdc-ripple-fg-opacity-in {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0
    }

    to {
        opacity: var(--mdc-ripple-fg-opacity, 0)
    }
}

@keyframes mdc-ripple-fg-opacity-in {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: 0
    }

    to {
        opacity: var(--mdc-ripple-fg-opacity, 0)
    }
}

@-webkit-keyframes mdc-ripple-fg-opacity-out {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0)
    }

    to {
        opacity: 0
    }
}

@keyframes mdc-ripple-fg-opacity-out {
    from {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        opacity: var(--mdc-ripple-fg-opacity, 0)
    }

    to {
        opacity: 0
    }
}

.mdc-button {
    --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: rgba(0,0,0,0);
    will-change: transform,opacity
}

.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: ""
}

.mdc-button .mdc-button__ripple::before {
    transition: opacity 15ms linear,background-color 15ms linear;
    z-index: 1;
    z-index: var(--mdc-ripple-z-index, 1)
}

.mdc-button .mdc-button__ripple::after {
    z-index: 0;
    z-index: var(--mdc-ripple-z-index, 0)
}

.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before {
    -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
    transform: scale(var(--mdc-ripple-fg-scale, 1))
}

.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
    top: 0;
    left: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after {
    top: var(--mdc-ripple-top, 0);
    left: var(--mdc-ripple-left, 0)
}

.mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after {
    -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;
    animation: mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards
}

.mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after {
    -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
    animation: mdc-ripple-fg-opacity-out 150ms;
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))
}

.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after {
    top: calc(50% - 100%);
    left: calc(50% - 100%);
    width: 200%;
    height: 200%
}

.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
    width: var(--mdc-ripple-fg-size, 100%);
    height: var(--mdc-ripple-fg-size, 100%)
}

.mdc-button__ripple {
    position: absolute;
    box-sizing: content-box;
    overflow: hidden;
    z-index: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.mdc-button {
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
    font-size: 0.875rem;
    font-size: var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
    letter-spacing: 0.0892857143em;
    letter-spacing: var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
    font-weight: 500;
    font-weight: var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
    text-transform: uppercase;
    text-transform: var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));
    height: 36px;
    height: var(--mdc-text-button-container-height, 36px);
    border-radius: 4px;
    border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))
}

.mdc-button:not(:disabled) {
    color: #6200ee;
    color: var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #6200ee))
}

.mdc-button:disabled {
    color: rgba(0, 0, 0, 0.38);
    color: var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mdc-button .mdc-button__icon {
    font-size: 1.125rem;
    font-size: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
    width: 1.125rem;
    width: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
    height: 1.125rem;
    height: var(--mdc-text-button-with-icon-icon-size, 1.125rem)
}

.mdc-button .mdc-button__ripple::before,.mdc-button .mdc-button__ripple::after {
    background-color: #6200ee;
    background-color: var(--mdc-text-button-hover-state-layer-color, var(--mdc-theme-primary, #6200ee))
}

.mdc-button:hover .mdc-button__ripple::before,.mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before {
    opacity: 0.04;
    opacity: var(--mdc-text-button-hover-state-layer-opacity, 0.04)
}

.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
    transition-duration: 75ms;
    opacity: 0.12;
    opacity: var(--mdc-text-button-focus-state-layer-opacity, 0.12)
}

.mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
    transition: opacity 150ms linear
}

.mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
    transition-duration: 75ms;
    opacity: 0.12;
    opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12)
}

.mdc-button.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12)
}

.mdc-button .mdc-button__ripple {
    border-radius: 4px;
    border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))
}

.mdc-button--unelevated {
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
    font-size: 0.875rem;
    font-size: var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
    letter-spacing: 0.0892857143em;
    letter-spacing: var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
    font-weight: 500;
    font-weight: var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
    text-transform: uppercase;
    text-transform: var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));
    height: 36px;
    height: var(--mdc-filled-button-container-height, 36px);
    border-radius: 4px;
    border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))
}

.mdc-button--unelevated:not(:disabled) {
    background-color: #6200ee;
    background-color: var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #6200ee))
}

.mdc-button--unelevated:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12))
}

.mdc-button--unelevated:not(:disabled) {
    color: #fff;
    color: var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #fff))
}

.mdc-button--unelevated:disabled {
    color: rgba(0, 0, 0, 0.38);
    color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mdc-button--unelevated .mdc-button__icon {
    font-size: 1.125rem;
    font-size: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
    width: 1.125rem;
    width: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
    height: 1.125rem;
    height: var(--mdc-filled-button-with-icon-icon-size, 1.125rem)
}

.mdc-button--unelevated .mdc-button__ripple::before,.mdc-button--unelevated .mdc-button__ripple::after {
    background-color: #fff;
    background-color: var(--mdc-filled-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff))
}

.mdc-button--unelevated:hover .mdc-button__ripple::before,.mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before {
    opacity: 0.08;
    opacity: var(--mdc-filled-button-hover-state-layer-opacity, 0.08)
}

.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
    transition-duration: 75ms;
    opacity: 0.24;
    opacity: var(--mdc-filled-button-focus-state-layer-opacity, 0.24)
}

.mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
    transition: opacity 150ms linear
}

.mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
    transition-duration: 75ms;
    opacity: 0.24;
    opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24)
}

.mdc-button--unelevated.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24)
}

.mdc-button--unelevated .mdc-button__ripple {
    border-radius: 4px;
    border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))
}

.mdc-button--raised {
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
    font-size: 0.875rem;
    font-size: var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
    letter-spacing: 0.0892857143em;
    letter-spacing: var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
    font-weight: 500;
    font-weight: var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
    text-transform: uppercase;
    text-transform: var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));
    height: 36px;
    height: var(--mdc-protected-button-container-height, 36px);
    border-radius: 4px;
    border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));
    --mdc-elevation-box-shadow-for-gss: 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);
    box-shadow: var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss))
}

.mdc-button--raised:not(:disabled) {
    background-color: #6200ee;
    background-color: var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #6200ee))
}

.mdc-button--raised:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    background-color: var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12))
}

.mdc-button--raised:not(:disabled) {
    color: #fff;
    color: var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #fff))
}

.mdc-button--raised:disabled {
    color: rgba(0, 0, 0, 0.38);
    color: var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mdc-button--raised .mdc-button__icon {
    font-size: 1.125rem;
    font-size: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
    width: 1.125rem;
    width: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
    height: 1.125rem;
    height: var(--mdc-protected-button-with-icon-icon-size, 1.125rem)
}

.mdc-button--raised .mdc-button__ripple::before,.mdc-button--raised .mdc-button__ripple::after {
    background-color: #fff;
    background-color: var(--mdc-protected-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff))
}

.mdc-button--raised:hover .mdc-button__ripple::before,.mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before {
    opacity: 0.08;
    opacity: var(--mdc-protected-button-hover-state-layer-opacity, 0.08)
}

.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
    transition-duration: 75ms;
    opacity: 0.24;
    opacity: var(--mdc-protected-button-focus-state-layer-opacity, 0.24)
}

.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
    transition: opacity 150ms linear
}

.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
    transition-duration: 75ms;
    opacity: 0.24;
    opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24)
}

.mdc-button--raised.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24)
}

.mdc-button--raised .mdc-button__ripple {
    border-radius: 4px;
    border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px))
}

.mdc-button--raised.mdc-ripple-upgraded--background-focused,.mdc-button--raised:not(.mdc-ripple-upgraded):focus {
    --mdc-elevation-box-shadow-for-gss: 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);
    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);
    box-shadow: var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss))
}

.mdc-button--raised:hover {
    --mdc-elevation-box-shadow-for-gss: 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);
    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);
    box-shadow: var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss))
}

.mdc-button--raised:not(:disabled):active {
    --mdc-elevation-box-shadow-for-gss: 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);
    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);
    box-shadow: var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss))
}

.mdc-button--raised:disabled {
    --mdc-elevation-box-shadow-for-gss: 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);
    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);
    box-shadow: var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss))
}

.mdc-button--outlined {
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
    font-size: 0.875rem;
    font-size: var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
    letter-spacing: 0.0892857143em;
    letter-spacing: var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
    font-weight: 500;
    font-weight: var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
    text-transform: uppercase;
    text-transform: var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase));
    height: 36px;
    height: var(--mdc-outlined-button-container-height, 36px);
    border-radius: 4px;
    border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));
    padding: 0 15px 0 15px;
    border-width: 1px;
    border-width: var(--mdc-outlined-button-outline-width, 1px)
}

.mdc-button--outlined:not(:disabled) {
    color: #6200ee;
    color: var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #6200ee))
}

.mdc-button--outlined:disabled {
    color: rgba(0, 0, 0, 0.38);
    color: var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mdc-button--outlined .mdc-button__icon {
    font-size: 1.125rem;
    font-size: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
    width: 1.125rem;
    width: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
    height: 1.125rem;
    height: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem)
}

.mdc-button--outlined .mdc-button__ripple::before,.mdc-button--outlined .mdc-button__ripple::after {
    background-color: #6200ee;
    background-color: var(--mdc-outlined-button-hover-state-layer-color, var(--mdc-theme-primary, #6200ee))
}

.mdc-button--outlined:hover .mdc-button__ripple::before,.mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before {
    opacity: 0.04;
    opacity: var(--mdc-outlined-button-hover-state-layer-opacity, 0.04)
}

.mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
    transition-duration: 75ms;
    opacity: 0.12;
    opacity: var(--mdc-outlined-button-focus-state-layer-opacity, 0.12)
}

.mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
    transition: opacity 150ms linear
}

.mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
    transition-duration: 75ms;
    opacity: 0.12;
    opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)
}

.mdc-button--outlined.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)
}

.mdc-button--outlined .mdc-button__ripple {
    border-radius: 4px;
    border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px))
}

.mdc-button--outlined:not(:disabled) {
    border-color: rgba(0, 0, 0, 0.12);
    border-color: var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12))
}

.mdc-button--outlined:disabled {
    border-color: rgba(0, 0, 0, 0.12);
    border-color: var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12))
}

.mdc-button--outlined.mdc-button--icon-trailing {
    padding: 0 11px 0 15px
}

.mdc-button--outlined.mdc-button--icon-leading {
    padding: 0 15px 0 11px
}

.mdc-button--outlined .mdc-button__ripple {
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-width: 1px;
    border-width: var(--mdc-outlined-button-outline-width, 1px)
}

.mdc-button--outlined .mdc-button__touch {
    left: calc(-1 * 1px);
    left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
    width: calc(100% + 2 * 1px);
    width: calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px))
}

.mdc-button--raised .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon,.mdc-button--outlined .mdc-button__icon {
    margin-left: -4px;
    margin-right: 8px
}

[dir=rtl] .mdc-button--raised .mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__icon,.mdc-button--raised .mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__icon[dir=rtl] {
    margin-left: 8px;
    margin-right: -4px
}

.mdc-button--raised .mdc-button__label+.mdc-button__icon,.mdc-button--unelevated .mdc-button__label+.mdc-button__icon,.mdc-button--outlined .mdc-button__label+.mdc-button__icon {
    margin-left: 8px;
    margin-right: -4px
}

[dir=rtl] .mdc-button--raised .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__label+.mdc-button__icon,.mdc-button--raised .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__label+.mdc-button__icon[dir=rtl] {
    margin-left: -4px;
    margin-right: 8px
}

.mdc-dialog {
    display: none;
    z-index: 7;
    z-index: var(--mdc-dialog-z-index, 7)
}
.mdc-dialog .mdc-dialog__content {
    padding: 20px 24px 20px 24px
}
.mdc-dialog__container {
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    height: 100%;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none;
}

.mdc-dialog .mdc-dialog__surface {
    border-radius: 4px;
    border-radius: var(--mdc-shape-medium, 4px);
}
.mdc-dialog .mdc-dialog__surface {
    background-color: #fff;
    background-color: var(--mdc-theme-surface, #fff);
}
.mdc-dialog__surface {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    pointer-events: auto;
    overflow-y: auto;
}
.mdc-dialog__surface {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
}
.mdc-dialog .mdc-dialog__surface {
    max-height: calc(100% - 32px);
}
@media (max-width: 592px) {
    .mdc-dialog .mdc-dialog__surface {
        max-width: calc(100vw - 32px);
    }
}
.mdc-dialog .mdc-dialog__surface {
    min-width: 280px;
}
.mdc-dialog__title {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family));
    font-size: 1.25rem;
    font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
    line-height: 2rem;
    line-height: var(--mdc-typography-headline6-line-height, 2rem);
    font-weight: 500;
    font-weight: var(--mdc-typography-headline6-font-weight, 500);
    letter-spacing: 0.0125em;
    letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
    text-decoration: inherit;
    -webkit-text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
    text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
    text-transform: inherit;
    text-transform: var(--mdc-typography-headline6-text-transform, inherit);
}

.mdc-dialog__title {
    display: block;
    margin-top: 0;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0 0 1px;
    padding: 0 24px 9px;
}
.mdc-dialog .mdc-dialog__title {
    color: rgba(0, 0, 0, .87);
}
.mdc-dialog .mdc-dialog__surface {
    min-width: 280px;
}
.mdc-dialog__title::before {
    display: inline-block;
    width: 0;
    height: 40px;
    content: "";
    vertical-align: 0;
}
.mdc-dialog__surface {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
}
@media (max-width: 592px) {
    .mdc-dialog .mdc-dialog__surface {
        max-width: calc(100vw - 32px);
    }
}
.mdc-dialog .mdc-dialog__surface {
    max-height: calc(100% - 32px);
}
.mdc-dialog__content {
    flex-grow: 1;
    box-sizing: border-box;
    margin: 0;
    overflow: auto;
}
.mdc-dialog__title+.mdc-dialog__content, .mdc-dialog__header+.mdc-dialog__content {
    padding-top: 0;
}
.mdc-dialog__content {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family));
    font-size: 1rem;
    font-size: var(--mdc-typography-body1-font-size, 1rem);
    line-height: 1.5rem;
    line-height: var(--mdc-typography-body1-line-height, 1.5rem);
    font-weight: 400;
    font-weight: var(--mdc-typography-body1-font-weight, 400);
    letter-spacing: 0.03125em;
    letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);
    text-decoration: inherit;
    -webkit-text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
    text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
    text-transform: inherit;
    text-transform: var(--mdc-typography-body1-text-transform, inherit);
}
.mdc-dialog .mdc-dialog__content {
    color: rgba(0, 0, 0, .6);
}
.mdc-dialog .mdc-dialog__content {
    padding: 20px 24px 20px 24px;
}
.mdc-dialog__actions {
    display: flex
;
    position: relative;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0;
    padding: 8px;
    border-top: 1px solid transparent;
}
.mdc-dialog__button {
    margin-left: 8px;
    margin-right: 0;
    max-width: 100%;
    text-align: right;
}
.mdc-dialog__scrim {
    opacity: 0;
    z-index: -1;
}
.mdc-dialog,.mdc-dialog__scrim {
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%
}
.mdc-dialog--open .mdc-dialog__scrim {
    opacity: 1;
}
.mdc-dialog .mdc-dialog__scrim {
    background-color: rgba(0, 0, 0, .32);
}

.mdc-dialog--open, .mdc-dialog--opening, .mdc-dialog--closing {
    display: flex;
}
.mdc-dialog--open .mdc-dialog__container {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}
:root {
    --mdc-layout-grid-margin-desktop: 24px;
    --mdc-layout-grid-gutter-desktop: 24px;
    --mdc-layout-grid-column-width-desktop: 72px;
    --mdc-layout-grid-margin-tablet: 16px;
    --mdc-layout-grid-gutter-tablet: 16px;
    --mdc-layout-grid-column-width-tablet: 72px;
    --mdc-layout-grid-margin-phone: 16px;
    --mdc-layout-grid-gutter-phone: 16px;
    --mdc-layout-grid-column-width-phone: 72px
}
.mdc-snackbar {
    z-index: 8;
    margin: 8px;
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.mdc-snackbar__surface {
    background-color: #333333
}

.mdc-snackbar__label {
    color: rgba(255, 255, 255, 0.87)
}

.mdc-snackbar__surface {
    min-width: 344px
}

@media(max-width: 480px),(max-width: 344px) {
    .mdc-snackbar__surface {
        min-width:100%
    }
}

.mdc-snackbar__surface {
    max-width: 672px
}

.mdc-snackbar__surface {
    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,.12)
}

.mdc-snackbar__surface {
    border-radius: 4px;
    border-radius: var(--mdc-shape-small, 4px)
}

.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing {
    display: flex
}

.mdc-snackbar--open .mdc-snackbar__label,.mdc-snackbar--open .mdc-snackbar__actions {
    visibility: visible
}

.mdc-snackbar__surface {
    padding-left: 0;
    padding-right: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0
}

.mdc-snackbar__surface::before {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    content: "";
    pointer-events: none
}
.mdc-snackbar--open .mdc-snackbar__surface {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1),-webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1),transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1),-webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)
}

.mdc-snackbar--closing .mdc-snackbar__surface {
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1)
}

.mdc-snackbar__label {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto, sans-serif;
    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
    font-size: 0.875rem;
    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
    line-height: 1.25rem;
    line-height: var(--mdc-typography-body2-line-height, 1.25rem);
    font-weight: 400;
    font-weight: var(--mdc-typography-body2-font-weight, 400);
    letter-spacing: 0.0178571429em;
    letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
    text-decoration: inherit;
    -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
    text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
    text-transform: inherit;
    text-transform: var(--mdc-typography-body2-text-transform, inherit);
    padding-left: 16px;
    padding-right: 8px;
    width: 100%;
    flex-grow: 1;
    box-sizing: border-box;
    margin: 0;
    visibility: hidden;
    padding-top: 14px;
    padding-bottom: 14px
}
.mdc-snackbar__label::before {
    display: inline;
    content: attr(data-mdc-snackbar-label-text)
}

.mdc-snackbar__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    box-sizing: border-box;
    visibility: hidden
}

.mdc-snackbar__action:not(:disabled) {
    color: #bb86fc
}

.mdc-snackbar__action .mdc-button__ripple::before,.mdc-snackbar__action .mdc-button__ripple::after {
    background-color: #bb86fc;
    background-color: var(--mdc-ripple-color, #bb86fc)
}
.mdc-snackbar__action:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
    transition: opacity 150ms linear
}
:root {
    --mdc-theme-primary: #6200ee;
    --mdc-theme-secondary: #018786;
    --mdc-theme-background: #fff;
    --mdc-theme-surface: #fff;
    --mdc-theme-error: #b00020;
    --mdc-theme-on-primary: #fff;
    --mdc-theme-on-secondary: #fff;
    --mdc-theme-on-surface: #000;
    --mdc-theme-on-error: #fff;
    --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
    --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
    --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
    --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
    --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-primary-on-dark: white;
    --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
    --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
    --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
    --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5)
}

/* material component web - end */

/* Bootstrap  v5.2.0 -start */
:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg-rgb: 255,255,255;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd
}

*,::after,::before {
    box-sizing: border-box
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2
}
.h4,h4 {
    font-size: calc(1.275rem + .3vw)
}
.h5,h5 {
    font-size: 1.25rem
}

.h6,h6 {
    font-size: 1rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}
ol,ul {
    padding-left: 2rem
}

dl,ol,ul {
    margin-top: 0;
    margin-bottom: 1rem
}
a {
    color: var(--bs-link-color);
    text-decoration: underline
}

a:hover {
    color: var(--bs-link-hover-color)
}
img,svg {
    vertical-align: middle
}

table {
    caption-side: bottom;
    border-collapse: collapse
}
tbody,td,tfoot,th,thead,tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0
}
button {
    border-radius: 0
}
button,input,optgroup,select,textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,select {
    text-transform: none
}
[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button
}

[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled) {
    cursor: pointer
}
.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto
}
.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.dropdown-menu {
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: #212529;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: 0.375rem;
    --bs-dropdown-border-width: 1px;
    --bs-dropdown-inner-border-radius: calc(0.375rem - 1px);
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-color: #1e2125;
    --bs-dropdown-link-hover-bg: #e9ecef;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: #6c757d;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius)
}
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: var(--bs-dropdown-spacer)
}

.dropdown-menu-start {
    --bs-position: start
}

.dropdown-menu-start[data-bs-popper] {
    right: auto;
    left: 0
}

.dropdown-menu-end {
    --bs-position: end
}

.dropdown-menu-end[data-bs-popper] {
    right: 0;
    left: auto
}
.dropdown-divider {
    height: 0;
    margin: var(--bs-dropdown-divider-margin-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
    opacity: 1
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0
}

.dropdown-item:focus,.dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg)
}

.dropdown-item.active,.dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--bs-dropdown-link-active-bg)
}

.dropdown-item.disabled,.dropdown-item:disabled {
    color: var(--bs-dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent
}

.dropdown-menu.show {
    display: block
}

.dropdown-header {
    display: block;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--bs-dropdown-header-color);
    white-space: nowrap
}

.dropdown-item-text {
    display: block;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    color: var(--bs-dropdown-link-color)
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s 
			ease-in-out, box-shadow .15s 
			ease-in-out;
}
.form-control, .custom-select {
    height: 40px;
    color: #000;
    font-size: 16px;
    border: 0;
    border-bottom: 1px solid #C3C3C3;
    padding-left: 0;
    padding-bottom: 0;
    outline: 0;
}
/* Bootstrap  v5.2.0 - end */

/* animate.css 3.7.2 - start */
@-webkit-keyframes bounce {
    0%,20%,53%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0)
    }
}

@keyframes bounce {
    0%,20%,53%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

@keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.animated.faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

/* animate.css 3.7.2 - end */

/* DreamsChat 1.1 customized - start */
:root{
	--mdc-theme-primary: rgba(0,0,0,0.9);
	--mdc-theme-error: #bb133e;
	--mdc-typography-font-family: 'Poppins', sans-serif;
	--primary: rgba(0,0,0,0.8);
	--secondary: rgba(0,0,0,0.9);
}
/*-----------------
	2. Basic CSS
-----------------------*/

html, body {
	height: 100%;
	color: #000000;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 300;
	overflow: hidden;
	background-color: transparent;
	margin:0;
}
* {
	box-sizing: border-box;
}
a:focus {
	outline: 0px solid;
}
img {
	max-width: 100%;
	height: auto;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 10px;
	font-weight: 500;
}

h4{
	font-size: 1.25em;
}

a {
	text-decoration: none;
	color: #777
}
a:hover {
	color: #86c232;
	text-decoration: none;
}
a:active, a:hover {
	outline: 0 none;
}
p {
	margin: 0 0 1em;
}
ul {
	list-style: none; 
	margin: 0;
	padding: 0;
}
.text-center {
	text-align: center;
}
.block {
	margin: 0;
}
/*-----------------
	3. Header
-----------------------*/
.header-wrapper{
	position: absolute;
	width:100%;
	z-index:10;
	pointer-events: none;
	top: 0;
}

.header {
	pointer-events: all;
	background-color: var(--primary);
	position: relative;
	width: 100%;
	height: 56px;
	overflow: initial;
	padding: 4px 0;
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 6px;
}
.top-profile {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	position: relative;
}
.avatar {
	width: 48px;
	height: 48px;
	display: inline-block;
}
.profile {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	color: rgba(255,255,255,0.75);
	font-size: 16px;
	line-height: 48px;
}
.search {
	display: flex;
	display: -webkit-flex;
	position: relative;
}
.search a {
	line-height: 0;
	padding: 12px;
	color: rgba(255,255,255,0.9);
}

.search a.progress-behind {
	color: #ff563c;
}

.search a:hover,
.search a.progress-behind:hover
{
	color: rgba(134,194,50,0.9);
}
.search .dropdown-menu {
	padding: 0;
}
.search .dropdown-item {
	line-height: normal;
	padding: 12px 60px 12px 20px;
	margin: 0;
	font-size: 14px;
}
.search .dropdown-item:hover:first-child {
	border-radius: .25rem .25rem 0 0;
}
.search .dropdown-item:hover:last-child {
	border-radius: 0 0 .25rem .25rem;
}
.dropdown-item:focus, 
.dropdown-item:hover {
	background-color: #e8e8e8;
}
/*-----------------
	4. Login
-----------------------*/
.login-form ul li {
	padding-bottom: 20px;
}
.login-form ul li {
	padding-bottom: 20px;
}
.login-form input,
.login-form select {
	width: 100%;
	padding-left: 30px;
	padding-bottom: 0;
	border-radius: 0;
}

.login-form input:focus-within{
	border:0;
	border-bottom: 2px solid #86c232;
}

.login-form #email-div,
.login-form #login-code-div{
	margin:20px 0 40px 0;
}
/*-----------------
	5. Chat
-----------------------*/
.container {
	max-width: 100%;
}
.messages-content .messages {
	padding: 0 10px 90px 10px;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.messages-content .messages .message-text {
	font-size: 16px;
	font-weight: 400;
	float: left;
	width: 100%;
	padding: 13px 15px;
}
.messages-content .message-sent,
.messages-content .message-received {
	margin-top: 7px;
	display: inline-block;
	width: 100%;
}
.message-received .message-bubble {
	background: rgba(255,255,255, 0.8);
	color: #000;
	border-radius: 25px 0 25px 25px;
	-webkit-mask-box-image: none !important;
	line-height: 1.5;
	width: 100%;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.25) 0 1px 3px;
}

.message-received .message-bubble:has(.four-wrapper),
.message-received .message-bubble:has(.single_img){
	background: rgba(255,255,255, 0.2);
}

.message-score, .message-vbsize{
	border-radius: 15px;
	padding: 1px 10px;
	font-size: 16px;
	color:#fff;
}

.good .message-vbsize{
	background-color: #86c232;
}

.bad .message-vbsize{
	background-color: #ff563c;
}

.message-vbsize .material-symbols-outlined{
	font-size: 16px;
}
.score-wrapper {
	float: right;
}

.score-wrapper .material-symbols-outlined{
	color: rgba(255, 255, 255, 0.75);
}

.review .material-symbols-outlined{
	color: #00a7ff;
}

.review.bad .material-symbols-outlined{
	color: #ff563c;
}

.tag{
	background: rgba(255,255,255,0.5);
	border-radius: 10px;
	padding: 1px 5px;
	font-size: 14px;
	color:rgba(0,0,0,0.5);
}

.message-sent .message-bubble {
	background: var(--primary);
	color: #ffffff;
	border-radius: 25px 25px 25px 0;
	-webkit-mask-box-image: none;
	line-height: 1.5;
	width: 100%;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.25) 0 1px 3px;
}
.message-sent {
	width: 100%;
}
.messages {
	padding-bottom: 67px;
	margin-top: -30px;
}
.messagebar.toolbar {
	position: fixed;
	bottom: 30px;
	left: 10px;
	right: 10px;
}
.person-list ul{
	margin: 10px auto 24px auto;
}

.person-list li {
	padding: 14px 20px;
	display: flex;
	display: -webkit-flex;
	cursor: pointer;
	border-radius: 5px;
	background-color: #fff;
	margin-bottom: 10px;
	border: 0;
	box-shadow: 0 3px 10px 0px rgba(123, 123, 123, 0.4);
	position: relative;
}

.person-list li:hover {
	box-shadow: 0 3px 10px 0px rgba(134, 194, 50, 0.75);
}

.person-list li  a {
	color: #000;
}

.person-list li > a,
.person-list li > div {
	align-items: center;
	-webkit-align-items: center;
	width: 100%;
}
.person-list li .avatar {
	margin-right: 1rem;
    display: inline-block;
    margin-bottom: 0;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    position: relative;
}
.person-list li .person-list-body {
	flex: 1;
	position: relative;
	min-width: 0px;
	display: flex;
	display: -webkit-flex;
}
.person-list li .person-list-body > div:first-child {
	min-width: 0px;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	flex: 1;
}
.person-list li .person-list-body h5 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: .2rem;
	color: #181C2F;
}
.person-list li.unread .person-list-body h5 {
	color: #ffa977;
}	
.person-list li .person-list-body p {
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0;
    color: #181C2F;
    font-size: 13px;
}
.person-list li .person-list-body p:before {
	content: "";
	background-image: url(../../assets/img/icons/gray-tick.png);
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 13px;
	height: 13px;
	vertical-align: middle;
	margin-right: 6px;
}
.person-list li .person-list-body p.no-read:before {
	background-image: none;
	width: 0px;
	margin: 0;
}
/*-----------------
	8. Settings
-----------------------*/

.settings-col {
	position: relative;
	margin-top: 15px;
	padding-bottom: 25px;
}
.settings-details ul li {
	font-weight: 500;
	display: inline-block;
	width: 100%;
	padding-left: 12px;
	margin-top: 20px;
}
.settings-details ul li a {
	color: #242424;
	border: 1px solid #c4c4c4;
	border-radius: 50px;
	padding: 13px 15px 13px 38px;
	display: inline-block;
	width: 100%;
	position: relative;
	background-color: rgba(255,255,255,0.75);
}
.settings-details ul li a span {
	width: 40px;
	height: 40px;
	position: absolute;
	left: -10px;
	top: 5px;
	border-radius: 50px;
	border:1px solid #c4c4c4;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	color: rgba(0,0,0,0.54);
	background-color: #ffffff;
}
.settings-details ul li a span img {
	border-radius: 50%;
}

li.exam a:after,
li.coverage h5:after,
li.day a:after,
li.skill a:after,
li.months:after,
li.user-lang.current a:after{
	content: "";
	font: normal normal normal 24px/1 'Material Symbols Outlined';
	float: right;
	color: #ccc;
}

li.exam.current a:after,
li.coverage.current h5:after,
li.day.current a:after,
li.skill.current a:after,
li.months.current:after,
li.user-lang.current a:after{
	content: "\e5ca"!important;
	color: var(--primary);
}

li.months:after{
	margin-top: -40px;
	margin-right: 20px;
}
/*-----------------
	11. Custom styles
-------------------*/
form .message {
	color: #ff563c;
	font-size: 0.85em;
}

form .message a {
	color: #ff563c;
	font-weight: 600;
	text-decoration: underline;
}

.daily-progress-percent{
	font-size: 12px;
	font-weight:100;
}

.space-holder{
	width: 100%;
	height: 60px;
}

.logo {
	width: 32px;
	height: 32px;
	margin: 0 16px;
}

.logo img{
	display: block;
}
.search a .material-symbols-outlined{
	text-align: center;
	max-width: 24px;
}

.dropdown-menu a{
	color: rgba(0,0,0,0.7);
}
.dropdown-menu a:hover{
	color: rgba(0,0,0,0.9);
}

a.dropdown-item .material-symbols-outlined{
	font-size: 24px;
	vertical-align: middle;
	margin-right: 10px;
}

.listening-button {
	display: inline-block;
	position: absolute;
	border-radius: 50%;
	padding: 14px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
}


.top-button{
	position: fixed;
	top: 150px;
}
.bottom-btn,
.speaking-btn {
	display: block;
	position: fixed;
	bottom: 30px;
	text-align: center;
	width: 100%;
	padding: 0 10px;
}

.bottom-sheet .speaking-btn{
	position: relative;
	bottom:0;
}

.bottom-btn a,
.primary-btn a{
	display: inline-block;
	background-color: var(--primary);
	text-align: center;
	width: 100%;
	padding: 12px;
	height: 48px;
	border-radius: 24px;
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 6px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
}

.bottom-btn a:hover,
.primary-btn a:hover {
	color: #86c232;
	box-shadow: rgba(134, 194, 50, 0.75) 0 4px 6px;
}

a.secondary-btn {
	display:inline-block;
	width:100%;
	font-weight: 500;
	text-align: center;
}

.speaking-btn-inner{
	overflow: hidden;
	border-radius: 24px;
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 6px;
}

.speaking-btn a{
	display: inline-block;
	background-color: var(--primary);
	text-align: center;
	width: 100%;
	padding: 12px;
	height: 48px;
	color: #fff;
}

.speaking-text{
	text-align: center;
	font-size: 16px;
	margin: 20px auto;
}

#speaking-play-btn-icon{
	border-radius: 50%;
}

.bottom-btn a.pressed,
.speaking-btn a.pressed{
	box-shadow: none;
}


.bottom-block {
	position: fixed;
	bottom: 60px;
	left: 10px;
	right: 10px;
	border-radius: 5px;
	padding: 20px;
	text-align: center;
	font-size: 16px;
}

.center {
	text-align: center;
}
i.center {
	display: block;
}

.central-block {
	position: fixed;
	border-radius: 5px;
	padding: 20px;
	background-color: #ffffff;
	text-align: center;
	font-size: 16px;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

#rating-stars, .session-grading-stars {
	font-size: 24px;
	color: #f1c40f;
}

.speaking .listening-button {
	background-color: var(--primary);
}

.speaking-button {
	display: block;
	border-radius: 50%;
	padding: 9px;
	background-color: var(--secondary);
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}

.red-ripple {
	animation: red-ripple-animation 2s linear infinite;
	color: #ff563c;
}
.blue-ripple {
	animation: blue-ripple-animation 2s linear infinite;
	color: #00a7ff;
}
.green-ripple {
	animation: green-ripple-animation 2s linear infinite;
	color: #61892f;
}
.white-ripple {
	animation: white-ripple-animation 2s linear infinite;
}

@keyframes red-ripple-animation {
	0% {
		box-shadow: 0 0 0 0 rgba(255,86, 60, 0.2),
		0 0 0 5px rgba(255,86, 60, 0.2),
		0 0 0 10px rgba(255,86, 60, 0.2),
		0 0 0 25px rgba(255,86, 60, 0.2);
	}
	100% {
		box-shadow: 0 0 0 5px rgba(255,86, 60, 0.2),
		0 0 0 10px rgba(255,86, 60, 0.2),
		0 0 0 25px rgba(255,86, 60, 0.2),
		0 0 0 40px rgba(255,86, 60, 0);
	}
}


@keyframes blue-ripple-animation {
	0% {
		box-shadow: 0 0 0 0 rgba(0,167,255, 0.2),
		0 0 0 5px rgba(0,167,255, 0.2),
		0 0 0 10px rgba(0,167,255, 0.2),
		0 0 0 25px rgba(0,167,255, 0.2);
	}
	100% {
		box-shadow: 0 0 0 5px rgba(0,167,255, 0.2),
		0 0 0 10px rgba(0,167,255, 0.2),
		0 0 0 25px rgba(0,167,255, 0.2),
		0 0 0 40px rgba(0,167,255, 0);
	}
}

@keyframes green-ripple-animation {
	0% {
		box-shadow: 0 0 0 0 rgba(134,194,50, 0.2),
		0 0 0 5px rgba(134,194,50, 0.2),
		0 0 0 10px rgba(134,194,50, 0.2),
		0 0 0 25px rgba(134,194,50, 0.2);
	}
	100% {
		box-shadow: 0 0 0 5px rgba(134,194,50, 0.2),
		0 0 0 10px rgba(134,194,50, 0.2),
		0 0 0 25px rgba(134,194,50, 0.2),
		0 0 0 40px rgba(134,194,50, 0);
	}
}

@keyframes white-ripple-animation {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
		0 0 0 5px rgba(255, 255, 255, 0.2),
		0 0 0 10px rgba(255, 255, 255, 0.2),
		0 0 0 25px rgba(255, 255, 255, 0.2);
	}
	100% {
		box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2),
		0 0 0 10px rgba(255, 255, 255, 0.2),
		0 0 0 25px rgba(255, 255, 255, 0.2),
		0 0 0 40px rgba(255, 255, 255, 0);
	}
}

/* Loading animation dots */
.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 12px;
}
.lds-ellipsis div {
	position: absolute;
	top: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}
/* End loading animation dots */

.shadow-2 {
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 6px;
}

.shadow-1 {
	box-shadow: rgba(0, 0, 0, 0.25) 0 1px 3px;
}
.shadow-1:hover {
	box-shadow: rgba(134, 194, 50, 0.75) 0 4px 6px;
}

/* Diff */
.diff {
	color: #000000;
}

.insertion{
	color: #00ff00;
	text-decoration: underline;
}

.deletion{
	color: #ff0000;
	text-decoration: line-through;
}

/* MDC customization */

.mdc-snackbar__action .mdc-button__label {
	color: #ffffff;
}

/* Multiple screens */
.wrapper {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}

.main-wrapper{
	width:100%;
	height:100%;
	background-color: #fff;
}

#primary-wrapper .main-wrapper{
	background-color: transparent;
}

#primary-wrapper{
	display: none;
	background-color: transparent;
}

.translations {
	font-size:16px;
	margin-bottom: 40px;
}

.original-text{
	margin-top: 10px;
	margin-bottom: 10px;
}

.person-list.response li{
	display: block;
}

.response-translation{
	margin-top: 10px;
}

/* Tips BTN */
.tips-btn {
	padding: 14px 15px;
}

.tips-btn .material-symbols-outlined {
	color: rgba(255, 255, 255, 0.25);
	text-align: center;
	width:24px;
}
.tips-btn .material-symbols-outlined:hover {
	color: rgba(255,255,255, 0.75);
}
#tips-btn {
	position: absolute;
	bottom: 11px;
	right: 0;
}

.message-loader {
	position: absolute;
	bottom: 28px;
	text-align: center;
	width: 100%;
}

.listening-button i.material-symbols-outlined{
	color:#000;
}
.speaking-btn i.material-symbols-outlined{
	color:#fff;
	font-size:24px;
	border-radius: 50%;
}
.bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.bg.secondary {
	background-image: url(/wgt/assets/img/bg2.jpg);
}

.blur {
	filter: blur(15px);
	-webkit-filter: blur(15px);
}

.header-icon-wrapper {
	height: 170px;
}
.header-icon-inner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(255,255,255,0.5);
	width: 120px;
	height: 120px;
}
.header-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding:10px;
	border-radius: 50%;
	color:#fff;
}

.primary-btn {
	margin-top: 20px;
	font-size: 16px;
}

.error input{
	border-bottom: 2px solid #ff563c;
}

.error .message{
	font-size: 14px;
	color: #ff563c;
}

.forgot{
	font-weight: 300;
}

.scroll-wrapper{
	position: absolute;
	top: 75px;
	right:0;
	bottom:0;
	padding-right: 15px;
	overflow-y: auto;
}

.bottom-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width:100%;
	background-color: var(--primary);
	color: rgba(255,255,255,0.8);
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	letter-spacing: 1px;
	line-height: 48px;
}

.name-plan{
	font-size:16px;
	line-height:16px;
}

/*
.profile .stars,
.stars .material-symbols-outlined{
	font-size:18px;
	line-height:22px;
	margin-right: -6px;
}
*/
.menu-divider {
	border-top: 1px solid #ddd;
}

.body-wrapper{
	padding: 20px;
}

.material-symbols-outlined{
	vertical-align: middle;
	overflow: hidden;
}

.material-symbols-outlined.check {
	color: #86c232;
}

table{
	width: 100%;
}

.earning-table, .grading-table{
	line-height: 28px;
	margin-bottom: 15px;
}

.amount{
	text-align: right;
}

.earning-table .balance {
	border-top: 1px solid #ccc;
	font-weight: 600;
}

.grading-stars{
	text-align: left;
}

.grading-bugs{
	text-align: right;
}

.grading-bugs .material-symbols-outlined{
	font-size: 18px;
}

.grading-table .overall{
	border-top: 1px solid #ccc;
	font-weight: 600;
}

.grading-score,
.grading-stars{
	text-align: right;
}

.grading-stars .material-symbols-outlined{
	font-size: 18px;
}

p i.material-symbols-outlined{
	font-size: 18px;
}

.anonymous-only, .logged-in-only{
	display:none;
}

body.anonymous .anonymous-only,
body.logged-in .logged-in-only{
	display:block;
}


/* Ripple effect */
[effect=ripple] {
	cursor: pointer;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[effect=ripple]:before {
	content: "";
	display: block;
	border-radius: 50%;
	position: absolute;
	pointer-events: none;
	transform-origin: center;
	top: calc(var(--y) * 1px);
	left: calc(var(--x) * 1px);
	width: calc(var(--d) * 1px);
	height: calc(var(--d) * 1px);
	background: var(--ripple-background, white);
	transform: translate(-50%, -50%) scale(var(--s, 1));
	opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
	transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
}
/* End ripple effect */

/* bottom sheet  */
.scrim{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
}

.scrim.white {
	background-color: rgba(255,255,255,0.5);
}

.bottom-sheet{
	position: absolute;
	left: 0;
	right:0;
	bottom: 0;
	background-color: #fff;
	padding:20px;
	border-radius: 20px 20px 0 0;
}

.listening-rating{
	text-align: center;
}
#listening-text{
	font-size: 16px;
}

.listening-input {
	margin-top: 20px;
}
.listening-input textarea{
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	height: 48px;
	padding: 10px 15px;
	border:none;
	border-bottom: 2px solid var(--primary);
	background-color: rgba(0,0,0,0.05);
	width: 100%;
	resize: none;
	vertical-align: middle;
	color: #000;
	border-radius: 5px 5px 0 0;
	outline:none;
}
.listening-input textarea::placeholder{
	color:rgba(0,0,0,0.5);
	font-weight:300;
}

.listening-input textarea:focus{
	border-bottom-width: 3px;
}

#listening-btn-icon{
	border-radius: 50%;
}

#play_icon_wrapper{
	text-align: center;
	cursor: pointer;
	padding: 13px 15px;
}
.message-bubble:has(#play_icon_wrapper):hover{
	box-shadow: rgba(0, 0, 0, 0.25) 0 4px 6px;
}
#play_icon_wrapper:hover .material-symbols-outlined{
	font-size: 26px;
	height: 24px;
}

#play_icon{
	border-radius: 50%;
}

.wheel-wrapper{
	text-align: center;
}

#wheel{
	margin: 15px auto;
}

#wheel-description{
	font-size: 16px;
}

#wheel-note .material-symbols-outlined{
	font-size: 14px;
}

.session-earning{
	margin-top: 15px;
}
.session-grading{
	margin-top: 25px;
}

.fs-16{
	font-size:16px;
}

.signup-intro{
	color: #777;
	margin:20px 0;
}

.badge {
	transform: rotate(270deg);
	font-size: 14px;
	line-height: 12px;
	color: #fff;
	padding: 2px;
	border-radius: 2px;
	border: 1px solid #fff;
	font-weight: 300;
}

.button {
	display: inline-block;
	border-radius: 24px;
	padding: 14px;
	background-color: var(--primary);
	width: 100%;
	text-align: center;
	color:#fff;
}

.button.signup {
	background-color: #fff;
	color: #000;
	line-height: 16px;
	padding: 8px 12px;
	margin: 8px 0;
}

.button.signup:hover {
	background-color: #bb133e;
	color: #fff;
}

.payment_intro{
	text-transform: uppercase;
	color: #000;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 5px;
}

.payment_intro_2{
	color:#777;
	margin-bottom: 30px;
}

.price{
	font-size: 64px;
	line-height: 64px;
}

.price sup{
	top:-2em;
	font-size: 16px;
}
.price sub{
	bottom: 0;
	font-size: 16px;
}

.product{
	font-size: 18px;
	margin-bottom: 30px;
}
.payment_note{
	color: #777;
}

#money_back-btn {
	text-decoration: underline;
}

#listening-next, #speaking-session-next{
	margin-top: 20px;
}

#listening-level, #speaking-level {
	margin: 20px auto;
}

.level-change, .level-change .material-symbols-outlined{
	font-size: 16px;
}

.level-new{
	font-size: 24px;
	font-weight: 700;
}

.session-level-text, #listening-session-next, #speaking-session-next {
	margin-top: 20px;
}

.session-level-number{
	font-size: 32px;
	font-weight: 700;
}

.green {
	color: #86c232;
}

.blue {
	color: #00a7ff;
}

.red {
	color: #ff563c;
}


.mt-10 {
	margin-top: 10px;
}

#acceptance {
	width: auto;
}
#acceptance-div .material-symbols-outlined{
	font-size: 18px;
	width:18px;
}
.select-language.acceptance,
.select-language.last{
	padding-bottom: 0;
}

.select-language.acceptance p{
	font-weight: 200;
	color:#777;
	font-size: 0.85em;
}
.select-language.acceptance a{
	text-decoration: underline;
}

.full-screen {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width:100%;
	text-align: center;
	pointer-events: none;
	z-index: 1;
}

.full-screen lottie-player{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.full-screen.bottom lottie-player{
	top: auto;
	bottom: 0;
	transform: translate(-50%, 0);
}

.full-screen canvas{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.full-screen.bottom canvas{
	top: auto;
	bottom: 0;
	transform: translate(-50%, 0);
}

#daily-confetti lottie-player {
	width:150%;
}
#daily-confetti canvas {
	width:150%;
}

.underline{
	text-decoration: underline;
}

.gray{
	color:#777;
}

.bg-navy{
	background-color: #000080!important;
	color: rgba(255,255,255,0.75)!important;
}
.bg-green{
	background-color: #008000!important;
	color: rgba(255,255,255,0.75)!important;
}
.bg-red{
	background-color: #bb133e!important;
	color: rgba(255,255,255,0.75)!important;
}

#lang-btn {
	text-align: right;
	color:#999;
}

#lang-icon, #trans-icon{
	cursor: pointer;
	padding: 12px;
	margin-top: -16px;
}

#lang-icon:hover, #trans-icon:hover{
	color:#000;
}

.input-icon{
	position: absolute;
	margin-top: 10px;
	color: #c3c3c3;
}

input::placeholder{
	font-size: 14px;
	font-weight: 300;
	color: #777;
}

.dynamic-bg {
	background-size: cover;
	background-position: center;
	animation-delay: 1.5s;
	animation-duration: 1.5s;
}

#portrait-img {
	width:32px;
	height:32px;
	border-radius: 50%;
}

.top_img {
	background:transparent url(/wgt/assets/img/Spinner-1.4s-98px.svg) center center no-repeat;
	min-height: 100px;
}
.top_img img {
	border-radius: 20px 0 0 0;
	margin-bottom: 15px;
}

.wt-example .material-symbols-outlined{
	color:#999;
}

.session-report {
	text-align: center;
	font-size: 36px;
	line-height: 36px;
}

.session-report .material-symbols-outlined {
	font-size: 36px;
}

.call2reg_intro_1 {
	margin:20px 0 0 0;
}

/* 4pics */
.four-row, .single_img {
	display: flex;
}

.four-row img {
	width: 100%;
	background-color: rgba(255,255,255, 0.8);
}

.four-1, .four-2, .four-3, .four-4{
	width:50%;
	display:inline-block;
	overflow: hidden;
}

.four-1, .four-3 {
	text-align: right;
}
.four-2, .four-4 {
	text-align: right;
}

.four-1 img, .four-2 img{
	vertical-align: bottom;
}

.four-3 img, .four-4 img{
	vertical-align: top;
}

.four-choices .four-1,
.four-choices .four-2,
.four-choices .four-3,
.four-choices .four-4{
	border-radius: 25px 0 25px 25px;
	box-shadow: rgba(0, 0, 0, 0.25) 0 1px 3px;
}

.four-choices .four-1:hover,
.four-choices .four-2:hover,
.four-choices .four-3:hover,
.four-choices .four-4:hover{
	transform: scale(1.02);
	box-shadow: rgba(0, 0, 0, 0.25) 0 4px 6px;
}


.four-choices .four-1 {
	margin:0 2px 2px 0;
}
.four-choices .four-2 {
	margin: 0 0 2px 2px;
}
.four-choices .four-3 {
	margin: 2px 2px 0 0;
}
.four-choices .four-4 {
	margin: 2px 0 0 2px;
}

.four-choices.message-received .message-bubble{
	background: none;
	box-shadow: none;
	overflow: visible;
	margin-bottom: 6px;
}
/* Progress chart */
.svg-item {
	width: 100%;
	margin: 0 auto;
	animation: donutfade 1s;
}

@keyframes donutfade {
	0% {
		opacity: .2;
	}
	100% {
		opacity: 1;
	}
}

@media (min-width: 992px) {
	.svg-item {
		width: 80%;
	}
}

.donut-ring {
	stroke: #00a7ff;
}

.donut-segment {
	transform-origin: center;
	stroke:  #86c232;
	animation: donut1 3s;
}

@keyframes donutfadelong {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.progress-percent, .progress-learned {
	font-size: 0.42em;
	line-height: 1;
	transform: translateY(0.5em);
	font-weight: bold;
	animation: donutfadelong 1s;
}

.progress-learned {
	font-size: 0.15em;
	fill:#00a7ff;
}

.progress {
	font-size: 0.12em;
	line-height: 1;
	transform: translateY(0.5em);
	text-align: center;
	text-anchor: middle;
	animation: donutfadelong 1s;
}

.progress-text, .progress-label, .progress-exam, .progress-goal, .progress-date  {
	line-height: 1;
	transform: translateY(0.5em);
	text-align: center;
	text-anchor: middle;
	animation: donutfadelong 1s;
	fill: #6b6e70;
}

.progress-text, .progress-label {
	font-size: 0.08em;
}
.progress-goal, .progress-date{
	font-size: 0.1em;
	text-transform: uppercase;
}

.progress-exam{
	font-size:0.13em;
	fill: #222629;
}

.goal-notes {
	color: #6b6e70;
}
.step-indicator {
	border-radius: 3px;
	overflow: hidden;
}

.step-indicator .step{
	float:left;
	width: 20%;
	height: 5px;
	border-right:1px solid #fff;
	background-color: #f3f5f6;
}

.step-indicator .step:last-child {
	 border-right: none;
 }

.step-indicator .step.step-done{
	background-color: #6b6e70;
}

/* goal progress misc */
 .goal-progress{
	 margin-bottom:20px;
	 color: #fff;
 }
.goal-progress-block{
	width:50%;
	display:inline-block;
	text-align:center;
	padding:0 10px
}
.goal-progress-value{
	font-size:28px;
	line-height:28px;
	border-bottom:solid 1px #fff;
}

.goal-progress-value.big {
	font-size:48px;
	line-height:48px;
}

.goal-progress-label{
	font-size:12px;
}

.goal-progress-inner {
	background-color: rgba(0,0,0,0.25);
	padding: 30px 0;
	white-space: nowrap;
}

.daily-progress {
	background: url(/wgt/assets/img/deco/mountain.jpg) center;
}
/* daily goal */

.daily-goal-bar{
	color: #000;
	background-color: #00a7ff;
	text-align: center;
}

.daily-goal-done {
	color: #fff;
	background-color: #86c232;
	text-align: center;
	line-height: 36px;
	animation: dailyDone 3s;
}

.daily-goal-wrapper{
	margin: 5px 0 15px 0;
}

/* two actions */
.two-actions .alt-action, .two-action .alt-action-right{
	width:50%;
}
.two-actions .alt-action{
	float:left;
}
.two-actions .alt-action-right{
	float:right;
	text-align: right;
}
/* About page */
.card-wrapper{
	margin: 0 0 1em;
	color: #ffff;
	text-align: center;
}

.card-inner {
	background-color: rgba(0, 0, 0, 0.35);
	padding: 30px 0;
}

.card-text-primary {
	font-size: 1.15em;
	font-weight: 500;
}

.card-text-minor {
	font-size:0.85em;
}

.card-url {
	font-size:0.85em;
	letter-spacing: 1px;
}


.card-about {
	background: url(/wgt/assets/img/deco/clouds.jpg) center;
}

.about-slogan, .about-brand {
	font-size: 21px;
	font-weight: 600;
	margin: 0;
}
.about-tagline {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 3px;
}
.about-url {
	font-size: 12px;
	font-weight: 200;
	margin: 0;
}
.copy{
	margin: 1em 0;
}

.card-signed-up {
	background: url(/wgt/assets/img/deco/beacon.jpg) center;
}

.card-signed-up .card-inner{
	background-color: rgba(0, 0, 0, 0.1);
	padding: 70px 0;
}

.card-start {
	background: url(/wgt/assets/img/deco/mountain-4.jpg) center;
	margin: 30px 0;
}

.card-start .card-inner {
	background-color: rgba(0, 0, 0, 0.2);
}
.card-speaker .card-inner {
	background-color: #fff;
	padding: 0;
}

.card-speaker .material-symbols-outlined {
	font-size: 128px;
	color: #86c232;
}

.card-good-answer {
	background: url(/wgt/assets/img/deco/man-1866559.jpg) center;
}

.card-good-answer .card-inner{
	background-color: rgba(0, 0, 0, 0.2);
	padding:70px 0;
}

.card-bad-answer {
	background: url(/wgt/assets/img/deco/lighthouse.jpg) center;
}

.card-word-learned {
	background: url(/wgt/assets/img/deco/valey.jpg) center;
}

.card-word-learned .card-inner {
	padding: 50px 0;
	background-color: rgba(0, 0, 0, 0.15);
}

.card-good-answer {
	background: url(/wgt/assets/img/deco/valley.jpg) center;
}

.card-good-answer .card-inner{
	background-color: rgba(0, 0, 0, 0.2);
	padding:50px 0;
}

.card-word-speaking {
	background: url(/wgt/assets/img/deco/mountaineer.jpg) center;
}

/* quiz tour */
img.quiz-tour {
	border-radius: 10px;
}

em{
	background: url("../../assets/img/sketch-line.png") bottom left no-repeat;
	background-size: 100.2% 10px;
	padding-bottom: 8px;
	font-style: normal;
}

/* modifications for desktop */
@media only screen and (min-width: 480px) {
	.messages-content .messages {
		padding: 0 30px 10px 30px;
	}
	.messagebar.toolbar {
		bottom: 30px;
		left: 30px;
		right: 30px;
	}
	.bottom-sheet{
		left: 20px;
		right: 20px;
	}
	.bottom-btn,
	.speaking-btn {
		padding: 0 30px;
	}

}

.candidate {
	line-height: 24px;
	font-weight: 400;
	border-bottom: 1px solid #ccc;
	padding: 12px 30px;
	cursor: pointer;
}

.candidate.last {
	border-bottom: none;
}

.candidate:hover, .candidate.chosen{
	background-color: rgba(255,255,255,0.95);
}

.nohover{
	pointer-events: none;
}

.unsure {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 12px;
	border-radius: 25px;
	cursor: pointer;
}

.unsure .material-symbols-outlined {
	color: rgba(107, 110, 112, 0.35);
}
.unsure .material-symbols-outlined:hover {
	color: #000;
}
/* misc */
.material-symbols-outlined.quiz-def {
	float: right;
	color: rgba(107, 110, 112, 0.35);
	font-size: 20px;
	cursor: pointer;
}

.material-symbols-outlined.quiz-def:hover {
	color: #000;
}

/* New quiz UI */
.answered .user_answer {
	color: #000;
}

.answered .material-symbols-outlined {
	font-size: 22px;
}

.good .material-symbols-outlined {
	color: #86c232;
}
.good.review .material-symbols-outlined{
	color: #00a7ff;
}
.bad .material-symbols-outlined{
	color: #ff563c;
}
/* vocab size */
.coverage .avatar {
	background-color: #86c232;
  color: #fff;
}

.coverage .material-symbols-outlined {
  font-size: 24px;
  margin: 12px;
}

.coverage .material-symbols-outlined.mode_heat{
	font-size: 20px;
	margin: 0;
}

.material-symbols-outlined.mode_heat {
	display: inline;
	position: relative;
	background: none !important;
	border: none !important;
	color: #ff563c !important;
	left: auto;
	top: auto;
}
/* Goal */
.words-ahead{
	color: #86c232;
	fill: #86c232;
}

.words-behind {
	color: #ff563c;
	fill: #ff563c;
}

/* months */
.settings-details ul li.months {
	width: 32%;
}
.settings-details ul li.months a {
	padding: 13px 15px;
	text-align: center;
}

/* word tree */

ul.word-level-1 {
	margin: 10px 0 25px 0;
	padding: 5px 0 10px 0;
	max-height: 500px;
	overflow-y: auto;
}

.word-tree .word-base {
	color:#fff;
	background-color: #86c232;
	border-radius: 5px;
}

ul.word-tree li {
	position: relative;
  list-style: none;
	padding: 15px 0 0 35px;
}

ul.word-tree li span {
	padding: 0 5px;
	border-bottom: 1px solid #999;
}

ul.word-tree li span.word-bad {
	color: #fff;
	background-color: #00a7ff;
	border-radius: 5px 5px 0 0;
}
ul.word-tree li span.word-bad:last-of-type {
	border-radius: 5px 5px 5px 0;
}

ul.word-child li::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 19px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 25px;
	height: 20px;
	border-bottom-left-radius: 10px;
}

ul.word-child li::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 0;
	border-left: 1px solid #999;
	height: 100%;
	width: 20px;
}

ul.word-child li:last-child::before {
	height: 20px;
}

.word-child-group{
	text-wrap: nowrap;
}

ul.word-tree li span.thesaurus {
	border: none;
}

.word-leaf.word-leaf-first {
	padding-left: 0;
}

.word-tree-full ul.word-level-1{
	overflow: hidden;
}
.word-tree-full {
	display: block;
	position: relative;
}

.fade-right {
	display: block;
	position: absolute;
	z-index: 1;
	width: 50px;
	bottom: 0;
	top: 0;
	right: 0;
	background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}
.fade-bottom {
	display: block;
	position: absolute;
	z-index: 1;
	height: 50px;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0),rgb(255, 255, 255));
}
/* My days */
.settings-details ul li.day a span,
.settings-details ul li.skill a span{
	border:1px solid #86c232;
	color: #fff;
	background-color: #86c232;
}

/* word-ladder */

table.word-ladder{
	width: 100%;
	border-collapse: collapse;
	color: #00a7ff;
}
.word-ladder td{
	border: none;
	text-align: center;
	width:25%;
	height:40px;
}

.step-value {
	font-weight: 600;
	font-size:24px;
}

.step-label, .step-day {
	color: #fff;
	background-color: #00a7ff;
}

.notes{
	color:#777;
}

.notes td.inprogress{
	border-bottom: 2px solid #00a7ff;
	color: #00a7ff;
}

.notes td.step-last{
	border-bottom: 2px solid #86c232;
	color: #86c232;
}

.step-last{
	color: #86c232;
}

.step-label.step-last{
	color:#fff;
	background-color: #86c232;
}

.step-up {
	color:#86c232;
	font-weight:500;
}

.step-down {
	color: #ff563c;
	font-weight:500;
}

.step-up .material-symbols-outlined,
.step-down .material-symbols-outlined{
	font-size: 16px;
}

table.word-ladder.review-intro{
	width:75%;
	margin: auto;
}

/* End word ladder */

#keypress-placeholder{
	background: transparent;
	border: none;
	width:1px;
	height:1px;
}

.material-symbols-outlined.img-action {
	color: rgba(255,255,255,0.75);
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	margin-top: -70px;
	margin-right: 10px;
	visibility: hidden;
}

.material-symbols-outlined.img-close{
	color: rgba(255,255,255,0.25);
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	position: absolute;
	top: 5px;
	right: 5px;
	z-index:1;
}

.message-bubble:has(.img-action),
.four-wrapper:has(.img-close){
	cursor: pointer;
}

.four-wrapper:has(.img-close):hover,
.message-bubble:has(#c-confirm):hover{
	box-shadow: rgba(0, 0, 0, 0.25) 0 4px 6px;
}

.four-wrapper:has(.img-close):hover .img-close{
	color: rgba(255,255,255,0.75);
	background-color: rgba(0, 0, 0, 0.5);
}

#c1:has(.img-action):hover .material-symbols-outlined.img-action,
#c2:has(.img-action):hover .material-symbols-outlined.img-action,
#c3:has(.img-action):hover .material-symbols-outlined.img-action,
#c4:has(.img-action):hover .material-symbols-outlined.img-action{
	visibility: visible;
}

#c-confirm{
	text-align: center;
	cursor: pointer;
	padding: 13px 15px;
}

#c-confirm:hover .material-symbols-outlined {
	font-size: 26px;
	height: 24px;
}

.material-symbols-outlined.play-this{
	float: right;
	color: rgba(107, 110, 112, 0.35);
}

#c-def-text {
	background-color: rgba(255,255,255, 0.8);
	cursor: pointer;
}

.material-symbols-outlined.play-this:hover,
#c-def-text:hover .material-symbols-outlined.quiz-def{
	color:rgba(0, 0, 0, 0.95);
}

.audio-candidates .candidate {
	padding: 0;
	cursor: default;
	position: relative;
}

.candidate-label {
	padding: 12px 12px 12px 25px;
	display: inline-block;
	width: 100%;
	cursor:pointer;
}

.play-this{
	position: absolute;
	top:0;
	right:0;
	color: rgba(107, 110, 112, 0.35);
	padding:12px;
	cursor:pointer;
}

.play-this .material-symbols-outlined{
	border-radius: 12px;
}

.audio-candidates .candidate:hover .play-this{
	visibility: hidden;
}

.audio-candidates .candidate:hover .play-this:hover{
	visibility: visible;
	color: rgba(0, 0, 0, 0.95);
}

.audio-candidates .candidate.playing {
	background-color: rgba(255,255,255,0.95);
}

/* blocks2 */
.blocks2{
	width:100%;
	display:block;
	overflow:hidden;
	padding: 10px;
}

.blocks2 .block{
	display: block;
	float:left;
	padding: 10px;
	width: 50%;
}

.block-left,
.block-left h6,
.block-left span{
	text-align: right;
}

.blocks2 .block-right{
	border-left: 2px solid #86c232;
}

.upgrade.blocks2 .block-right::after{
	content: 'keyboard_arrow_down';
	font-family: 'Material Symbols Outlined';
	font-size: 24px;
	color:#86c232;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -11px;
	margin-top: -8px;
}

.upgrade .material-symbols-outlined {
	font-size: 64px;
}

.audio-tips h6 .material-symbols-outlined{
	font-size: 64px;
}


/* Tooltip*/
.tips {
	background-color: rgba(0,0,0,0.75);
	color: rgba(255,255,255,0.75);
	text-align: center;
	padding: 10px 5px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	width: 60%;
	bottom: 100%;
	left: 50%;
	margin-left: -30%;
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
}

.tips .material-symbols-outlined {
	font-size: 18px;
}

.tips::after {
	content: " ";
	position: absolute;
	top: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: rgba(0,0,0,0.75) transparent transparent transparent;
}

/* thesaurus summary */

.thesaurus-words span {
	padding: 5px;
}

.thesaurus-words .word-good {
	color: #777;
}

.thesaurus-words .word-bad {
	background-color: #00a7ff;
	color: #fff;
	border-radius: 5px;
}

/* thesaurus summary 2 */

.thesaurus-tree {
	margin: 20px auto;
}

.thesaurus-base .label {
	color:#fff;
	background-color:#86c232;
	border-radius: 5px;
	left: 55%;
	transform: translateX(-100%);
	margin-left: -80px;
}

.branch {
	position: relative;
	margin-left: 55%;
}

.branch:before {
	content: "";
	width: 40px;
	border-top: 1px solid #999;
	position: absolute;
	left: -80px;
	top: 50%;
	margin-top: 1px;
}

.entry {
	position: relative;
	min-height: 35px;
}

.entry:before {
	content: "";
	height: 100%;
	position: absolute;
	border-left: 1px solid #999;
	left: -40px;
}

.entry:after {
	content: "";
	width: 40px;
	border-top: 1px solid #999;
	position: absolute;
	left: -40px;
	top: 50%;
	margin-top: 1px;
}

.entry:first-child:before{
	width: 10px;
	height: 50%;
	top: 50%;
	margin-top: 1px;
	border-radius: 10px 0 0 0;
}


.entry:first-child:after{
	height: 10px;
	border-radius: 10px 0 0 0;
}

.entry:last-child:before
{
	width: 10px;
	height: 50%;
	border-radius: 0 0 0 10px;
}

.entry:last-child:after{
	height: 10px;
	border-top: none;
	border-bottom: 1px solid #999;
	border-radius: 0 0 0 10px;
	margin-top: -10px;
}


.sole .thesaurus-base .label{
	margin-left: -40px;
}

.sole .branch::before{
	width:0;
}
.sole .entry:after {
	width: 40px;
	height: 0px;
	margin-top: 1px;
	border-radius: 0px
}

.sole .entry:before {
	display: none;
}

.label {
	display: block;
	line-height: 20px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -15px;
	overflow-wrap: break-word;
	padding: 5px 10px;
}

.label.word-bad{
	color: #fff;
	background-color: #00a7ff;
	border-radius: 5px;
}

/* --- */
.word-parent-of-parent{
	color:#777;
}

.email-to-verify{
	color:#777;
	text-align: center;
	cursor: pointer;
}

.email-to-verify .material-symbols-outlined{
	color:#999;
}

.email-to-verify:hover {
	color:#333;
}

.email-to-verify:hover .material-symbols-outlined{
	color:#333;
}

.close-icon {
	float: right;
	color: #999;
	padding: 12px;
	margin-top: -18px;
	margin-right: -18px;
	cursor: pointer;
}

.close-icon:hover{
	color: #333;
}


/* DreamsChat 1.1 customized - end */