@import url(../../fonts/Exo/exo.css);

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/material-design-icons/MaterialIcons-Regular.woff2) format('woff2');
}
@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/material-design-icons/MaterialIcons-Outlined.woff2) format('woff2');
}

:root {
    --color-1: #2196f3;
    --color-1a: #2196f380;
    --color-1b: #2196f300;
    --color-2: #000000;
    --color-2a: #00000010;
    --color-2b: #00000020;
    --color-3: #e91e63;
    --color-4: #ffffff;
    --color-4a: rgba(255, 255, 255, 0.9);
    --color-5: #f5f5f5;
    --shadow-1: 0 2rem 2rem 0 rgba(0, 0, 0, 0.14),0 1rem 5rem 0 rgba(0, 0, 0, 0.12),0 3rem 1rem -2rem rgba(0, 0, 0, 0.2);
    --shadow-2: 0 6rem 10rem 0 rgba(0, 0, 0, 0.14),0 1rem 18rem 0 rgba(0, 0, 0, 0.12),0 3rem 5rem -1rem rgba(0, 0, 0, 0.3);
    --size: 1px
}

.is-dark {
    --color-1: #ba68c8;
    --color-1a: #ba68c880;
    --color-1b: #ba68c800;
    --color-2: #ffffff;
    --color-2a: #ffffff10;
    --color-2b: #ffffff20;
    --color-3: #ff9800;
    --color-4: #37474f;
    --color-4a: rgba(55, 71, 79, 0.9);
    --color-5: #263238;
    --shadow-1: 0 2rem 2rem 0 rgba(0, 0, 0, 0.14),0 1rem 5rem 0 rgba(0, 0, 0, 0.12),0 3rem 1rem -2rem rgba(0, 0, 0, 0.2);
    --shadow-2: 0 6rem 10rem 0 rgba(0, 0, 0, 0.14),0 1rem 18rem 0 rgba(0, 0, 0, 0.12),0 3rem 5rem -1rem rgba(0, 0, 0, 0.3);
    --size: 1px
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-size: 10rem;
    text-transform: none;
    z-index: 1;
    padding: 0 6rem;
    background-color: var(--color-3);
    color: #fff;
    top: 0;
    left: auto;
    bottom: auto;
    right: 0;
    transform: translate(50%,-100%);
    width: 16rem;
    height: 16rem
}

    .badge.none {
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
        transform: none;
        position: relative;
        margin: 0 2rem
    }

    .badge.top {
        top: 0;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%,-100%)
    }

    .badge.bottom {
        top: auto;
        left: 50%;
        bottom: 0;
        right: auto;
        transform: translate(-50%,100%)
    }

    .badge.left {
        top: 50%;
        left: 0;
        bottom: auto;
        right: auto;
        transform: translate(-100%,-50%)
    }

    .badge.right {
        top: 50%;
        left: auto;
        bottom: auto;
        right: 0;
        transform: translate(100%,-50%)
    }

    .badge.top.left {
        top: 0;
        left: 0;
        bottom: auto;
        right: auto;
        transform: translate(-50%,-100%)
    }

    .badge.top.right {
        top: 0;
        left: auto;
        bottom: auto;
        right: 0;
        transform: translate(50%,-100%)
    }

    .badge.bottom.left {
        top: auto;
        left: 0;
        bottom: 0;
        right: auto;
        transform: translate(-50%,100%)
    }

    .badge.bottom.right {
        top: auto;
        left: auto;
        bottom: 0;
        right: 0;
        transform: translate(50%,100%)
    }

    .badge.border {
        border: 1rem solid var(--color-3);
        background-color: transparent;
        color: var(--color-3)
    }

    .badge.round {
        border-radius: 8rem
    }

    .badge.circle, .badge.square {
        padding: 0;
        text-align: center;
        width: 16rem;
        height: 16rem;
        min-width: auto;
        min-height: auto;
        max-width: none;
        max-height: none
    }

    .badge.circle {
        border-radius: 50%
    }

    .badge.square {
        border-radius: 0
    }

.button, button {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-1);
    min-height: 40rem;
    height: 40rem;
    font-size: 14rem;
    font-weight: 500;
    color: #fff;
    padding: 0 12rem;
    background-color: var(--color-1);
    margin: 0 8rem;
    text-transform: uppercase;
    border-radius: 4rem;
    transition: .3s transform,.3s border-radius,.3s padding
}

    .button > :not(.dropdown,.badge) + :not(.dropdown,.badge), button > :not(.dropdown,.badge) + :not(.dropdown,.badge) {
        margin-left: 6rem
    }

    .button > .responsive:first-child, button > .responsive:first-child {
        margin-left: -12rem
    }

    .button > .responsive:last-child, button > .responsive:last-child {
        margin-right: -12rem
    }

    .button.none, button.none {
        box-shadow: none;
        width: auto;
        min-width: auto;
        height: auto;
        min-height: auto;
        color: var(--color-1);
        padding: 0;
        background-color: transparent;
        margin: 0 8rem
    }

    .button.small, button.small {
        min-height: 32rem !important;
        height: 32rem
    }

    .button.medium, button.medium {
        min-height: 40rem !important;
        height: 40rem
    }

    .button.large, button.large {
        min-height: 48rem !important;
        height: 48rem
    }

    .button.extra, button.extra {
        min-height: 56rem !important;
        height: 56rem
    }

    .button.border, button.border {
        border: 1rem solid var(--color-1);
        background-color: transparent;
        color: var(--color-1);
        box-shadow: none
    }

    .button.round, button.round {
        transform: none;
        border-radius: 32rem
    }

    .button.top-round, button.top-round {
        border-radius: 32rem 32rem 4rem 4rem !important
    }

    .button.bottom-round, button.bottom-round {
        border-radius: 4rem 4rem 32rem 32rem !important
    }

    .button.left-round, button.left-round {
        border-radius: 32rem 4rem 4rem 32rem !important
    }

    .button.right-round, button.right-round {
        border-radius: 4rem 32rem 32rem 4rem !important
    }

    .button.top-round.left-round, button.top-round.left-round {
        border-radius: 32rem 32rem 4rem 32rem !important
    }

    .button.top-round.right-round, button.top-round.right-round {
        border-radius: 32rem 32rem 32rem 4rem !important
    }

    .button.bottom-round.left-round, button.bottom-round.left-round {
        border-radius: 32rem 4rem 32rem 32rem !important
    }

    .button.bottom-round.right-round, button.bottom-round.right-round {
        border-radius: 4rem 32rem 32rem 32rem !important
    }

    .button.circle, button.circle {
        transform: none;
        padding: 0;
        border-radius: 40rem;
        padding: 0
    }

    .button.square, button.square {
        transform: none;
        border-radius: 4rem;
        padding: 0
    }

.card, article {
    box-shadow: var(--shadow-1);
    background-color: var(--color-4);
    padding: 16rem;
    border-radius: 4rem;
    display: block;
    transition: .3s transform,.3s border-radius,.3s padding
}

    .card + .card, article + article {
        margin-top: 16rem
    }

.row.medium-space > .col > .card + .card, .row.medium-space > .col > article + article {
    margin-top: 24rem
}

.row.large-space > .col > .card + .card, .row.large-space > .col > article + article {
    margin-top: 32rem
}

.card.small, article.small {
    height: 192rem
}

.card.medium, article.medium {
    height: 320rem
}

.card.large, article.large {
    height: 512rem
}

.card.border, article.border {
    border: 1rem solid var(--color-2b);
    box-shadow: none
}

.card.round, article.round {
    border-radius: 24rem
}

.chip {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    min-height: 40rem;
    height: 40rem;
    font-size: 14rem;
    font-weight: 500;
    color: var(--color-2);
    padding: 0 12rem;
    background-color: var(--color-2a);
    margin: 0 8rem;
    text-transform: none;
    border-radius: 24rem;
    transition: .3s transform,.3s border-radius,.3s padding
}

    .chip > :not(.dropdown,.badge) + :not(.dropdown,.badge) {
        margin-left: 4rem
    }

    .chip > .responsive:first-child {
        margin-left: -12rem
    }

    .chip > .responsive:last-child {
        margin-right: -12rem
    }

    .chip.small {
        min-height: 32rem !important;
        height: 32rem
    }

    .chip.medium {
        min-height: 40rem !important;
        height: 40rem
    }

    .chip.large {
        min-height: 48rem !important;
        height: 48rem
    }

    .chip.border {
        border: 1rem solid var(--color-2b);
        background-color: transparent;
        color: inherit
    }

    .chip.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background-color: var(--color-2b)
    }

    .chip.circle {
        transform: none;
        padding: 0;
        border-radius: 40rem;
        padding: 0
    }

    .chip.square {
        transform: none;
        border-radius: 4rem;
        padding: 0
    }

.transparent {
    background-color: transparent !important
}

.transparent-border {
    border-color: transparent !important
}

.transparent-text {
    color: transparent !important
}

.black {
    background-color: #000 !important
}

.black-border {
    border-color: #000 !important
}

.black-text {
    color: #000 !important
}

.white {
    background-color: #fff !important
}

.white-border {
    border-color: #fff !important
}

.white-text {
    color: #fff !important
}

.red {
    background-color: #f44336 !important
}

.red-border {
    border-color: #f44336 !important
}

.red-text {
    color: #f44336 !important
}

.red-light-5 {
    background-color: #ffebee !important
}

.red-light-4 {
    background-color: #ffcdd2 !important
}

.red-light-3 {
    background-color: #ef9a9a !important
}

.red-light-2 {
    background-color: #e57373 !important
}

.red-light-1 {
    background-color: #ef5350 !important
}

.red-dark-1 {
    background-color: #e53935 !important
}

.red-dark-2 {
    background-color: #d32f2f !important
}

.red-dark-3 {
    background-color: #c62828 !important
}

.red-dark-4 {
    background-color: #b71c1c !important
}

.pink {
    background-color: #e91e63 !important
}

.pink-border {
    border-color: #e91e63 !important
}

.pink-text {
    color: #e91e63 !important
}

.pink-light-5 {
    background-color: #fce4ec !important
}

.pink-light-4 {
    background-color: #f8bbd0 !important
}

.pink-light-3 {
    background-color: #f48fb1 !important
}

.pink-light-2 {
    background-color: #f06292 !important
}

.pink-light-1 {
    background-color: #ec407a !important
}

.pink-dark-1 {
    background-color: #d81b60 !important
}

.pink-dark-2 {
    background-color: #c2185b !important
}

.pink-dark-3 {
    background-color: #ad1457 !important
}

.pink-dark-4 {
    background-color: #880e4f !important
}

.purple {
    background-color: #9c27b0 !important
}

.purple-border {
    border-color: #9c27b0 !important
}

.purple-text {
    color: #9c27b0 !important
}

.purple-light-5 {
    background-color: #f3e5f5 !important
}

.purple-light-4 {
    background-color: #e1bee7 !important
}

.purple-light-3 {
    background-color: #ce93d8 !important
}

.purple-light-2 {
    background-color: #ba68c8 !important
}

.purple-light-1 {
    background-color: #ab47bc !important
}

.purple-dark-1 {
    background-color: #8e24aa !important
}

.purple-dark-2 {
    background-color: #7b1fa2 !important
}

.purple-dark-3 {
    background-color: #6a1b9a !important
}

.purple-dark-4 {
    background-color: #4a148c !important
}

.deep-purple {
    background-color: #673ab7 !important
}

.deep-purple-border {
    border-color: #673ab7 !important
}

.deep-purple-text {
    color: #673ab7 !important
}

.deep-purple-light-5 {
    background-color: #ede7f6 !important
}

.deep-purple-light-4 {
    background-color: #d1c4e9 !important
}

.deep-purple-light-3 {
    background-color: #b39ddb !important
}

.deep-purple-light-2 {
    background-color: #9575cd !important
}

.deep-purple-light-1 {
    background-color: #7e57c2 !important
}

.deep-purple-dark-1 {
    background-color: #5e35b1 !important
}

.deep-purple-dark-2 {
    background-color: #512da8 !important
}

.deep-purple-dark-3 {
    background-color: #4527a0 !important
}

.deep-purple-dark-4 {
    background-color: #311b92 !important
}

.indigo {
    background-color: #3f51b5 !important
}

.indigo-border {
    border-color: #3f51b5 !important
}

.indigo-text {
    color: #3f51b5 !important
}

.indigo-light-5 {
    background-color: #e8eaf6 !important
}

.indigo-light-4 {
    background-color: #c5cae9 !important
}

.indigo-light-3 {
    background-color: #9fa8da !important
}

.indigo-light-2 {
    background-color: #7986cb !important
}

.indigo-light-1 {
    background-color: #5c6bc0 !important
}

.indigo-dark-1 {
    background-color: #3949ab !important
}

.indigo-dark-2 {
    background-color: #303f9f !important
}

.indigo-dark-3 {
    background-color: #283593 !important
}

.indigo-dark-4 {
    background-color: #1a237e !important
}

.blue {
    background-color: #2196f3 !important
}

.blue-border {
    border-color: #2196f3 !important
}

.blue-text {
    color: #2196f3 !important
}

.blue-light-5 {
    background-color: #e3f2fd !important
}

.blue-light-4 {
    background-color: #bbdefb !important
}

.blue-light-3 {
    background-color: #90caf9 !important
}

.blue-light-2 {
    background-color: #64b5f6 !important
}

.blue-light-1 {
    background-color: #42a5f5 !important
}

.blue-dark-1 {
    background-color: #1e88e5 !important
}

.blue-dark-2 {
    background-color: #1976d2 !important
}

.blue-dark-3 {
    background-color: #1565c0 !important
}

.blue-dark-4 {
    background-color: #0d47a1 !important
}

.light-blue {
    background-color: #03a9f4 !important
}

.light-blue-border {
    border-color: #03a9f4 !important
}

.light-blue-text {
    color: #03a9f4 !important
}

.light-blue-light-5 {
    background-color: #e1f5fe !important
}

.light-blue-light-4 {
    background-color: #b3e5fc !important
}

.light-blue-light-3 {
    background-color: #81d4fa !important
}

.light-blue-light-2 {
    background-color: #4fc3f7 !important
}

.light-blue-light-1 {
    background-color: #29b6f6 !important
}

.light-blue-dark-1 {
    background-color: #039be5 !important
}

.light-blue-dark-2 {
    background-color: #0288d1 !important
}

.light-blue-dark-3 {
    background-color: #0277bd !important
}

.light-blue-dark-4 {
    background-color: #01579b !important
}

.cyan {
    background-color: #00bcd4 !important
}

.cyan-border {
    border-color: #00bcd4 !important
}

.cyan-text {
    color: #00bcd4 !important
}

.cyan-light-5 {
    background-color: #e0f7fa !important
}

.cyan-light-4 {
    background-color: #b2ebf2 !important
}

.cyan-light-3 {
    background-color: #80deea !important
}

.cyan-light-2 {
    background-color: #4dd0e1 !important
}

.cyan-light-1 {
    background-color: #26c6da !important
}

.cyan-dark-1 {
    background-color: #00acc1 !important
}

.cyan-dark-2 {
    background-color: #0097a7 !important
}

.cyan-dark-3 {
    background-color: #00838f !important
}

.cyan-dark-4 {
    background-color: #006064 !important
}

.teal {
    background-color: #009688 !important
}

.teal-border {
    border-color: #009688 !important
}

.teal-text {
    color: #009688 !important
}

.teal-light-5 {
    background-color: #e0f2f1 !important
}

.teal-light-4 {
    background-color: #b2dfdb !important
}

.teal-light-3 {
    background-color: #80cbc4 !important
}

.teal-light-2 {
    background-color: #4db6ac !important
}

.teal-light-1 {
    background-color: #26a69a !important
}

.teal-dark-1 {
    background-color: #00897b !important
}

.teal-dark-2 {
    background-color: #00796b !important
}

.teal-dark-3 {
    background-color: #00695c !important
}

.teal-dark-4 {
    background-color: #004d40 !important
}

.green {
    background-color: #4caf50 !important
}

.green-border {
    border-color: #4caf50 !important
}

.green-text {
    color: #4caf50 !important
}

.green-light-5 {
    background-color: #e8f5e9 !important
}

.green-light-4 {
    background-color: #c8e6c9 !important
}

.green-light-3 {
    background-color: #a5d6a7 !important
}

.green-light-2 {
    background-color: #81c784 !important
}

.green-light-1 {
    background-color: #66bb6a !important
}

.green-dark-1 {
    background-color: #43a047 !important
}

.green-dark-2 {
    background-color: #388e3c !important
}

.green-dark-3 {
    background-color: #2e7d32 !important
}

.green-dark-4 {
    background-color: #1b5e20 !important
}

.light-green {
    background-color: #8bc34a !important
}

.light-green-border {
    border-color: #8bc34a !important
}

.light-green-text {
    color: #8bc34a !important
}

.light-green-light-5 {
    background-color: #f1f8e9 !important
}

.light-green-light-4 {
    background-color: #dcedc8 !important
}

.light-green-light-3 {
    background-color: #c5e1a5 !important
}

.light-green-light-2 {
    background-color: #aed581 !important
}

.light-green-light-1 {
    background-color: #9ccc65 !important
}

.light-green-dark-1 {
    background-color: #7cb342 !important
}

.light-green-dark-2 {
    background-color: #689f38 !important
}

.light-green-dark-3 {
    background-color: #558b2f !important
}

.light-green-dark-4 {
    background-color: #33691e !important
}

.lime {
    background-color: #cddc39 !important
}

.lime-border {
    border-color: #cddc39 !important
}

.lime-text {
    color: #cddc39 !important
}

.lime-light-5 {
    background-color: #f9fbe7 !important
}

.lime-light-4 {
    background-color: #f0f4c3 !important
}

.lime-light-3 {
    background-color: #e6ee9c !important
}

.lime-light-2 {
    background-color: #dce775 !important
}

.lime-light-1 {
    background-color: #d4e157 !important
}

.lime-dark-1 {
    background-color: #c0ca33 !important
}

.lime-dark-2 {
    background-color: #afb42b !important
}

.lime-dark-3 {
    background-color: #9e9d24 !important
}

.lime-dark-4 {
    background-color: #827717 !important
}

.yellow {
    background-color: #ffeb3b !important
}

.yellow-border {
    border-color: #ffeb3b !important
}

.yellow-text {
    color: #ffeb3b !important
}

.yellow-light-5 {
    background-color: #fffde7 !important
}

.yellow-light-4 {
    background-color: #fff9c4 !important
}

.yellow-light-3 {
    background-color: #fff59d !important
}

.yellow-light-2 {
    background-color: #fff176 !important
}

.yellow-light-1 {
    background-color: #ffee58 !important
}

.yellow-dark-1 {
    background-color: #fdd835 !important
}

.yellow-dark-2 {
    background-color: #fbc02d !important
}

.yellow-dark-3 {
    background-color: #f9a825 !important
}

.yellow-dark-4 {
    background-color: #f57f17 !important
}

.amber {
    background-color: #ffc107 !important
}

.amber-border {
    border-color: #ffc107 !important
}

.amber-text {
    color: #ffc107 !important
}

.amber-light-5 {
    background-color: #fff8e1 !important
}

.amber-light-4 {
    background-color: #ffecb3 !important
}

.amber-light-3 {
    background-color: #ffe082 !important
}

.amber-light-2 {
    background-color: #ffd54f !important
}

.amber-light-1 {
    background-color: #ffca28 !important
}

.amber-dark-1 {
    background-color: #ffb300 !important
}

.amber-dark-2 {
    background-color: #ffa000 !important
}

.amber-dark-3 {
    background-color: #ff8f00 !important
}

.amber-dark-4 {
    background-color: #ff6f00 !important
}

.orange {
    background-color: #ff9800 !important
}

.orange-border {
    border-color: #ff9800 !important
}

.orange-text {
    color: #ff9800 !important
}

.orange-light-5 {
    background-color: #fff3e0 !important
}

.orange-light-4 {
    background-color: #ffe0b2 !important
}

.orange-light-3 {
    background-color: #ffcc80 !important
}

.orange-light-2 {
    background-color: #ffb74d !important
}

.orange-light-1 {
    background-color: #ffa726 !important
}

.orange-dark-1 {
    background-color: #fb8c00 !important
}

.orange-dark-2 {
    background-color: #f57c00 !important
}

.orange-dark-3 {
    background-color: #ef6c00 !important
}

.orange-dark-4 {
    background-color: #e65100 !important
}

.deep-orange {
    background-color: #ff5722 !important
}

.deep-orange-border {
    border-color: #ff5722 !important
}

.deep-orange-text {
    color: #ff5722 !important
}

.deep-orange-light-5 {
    background-color: #fbe9e7 !important
}

.deep-orange-light-4 {
    background-color: #ffccbc !important
}

.deep-orange-light-3 {
    background-color: #ffab91 !important
}

.deep-orange-light-2 {
    background-color: #ff8a65 !important
}

.deep-orange-light-1 {
    background-color: #ff7043 !important
}

.deep-orange-dark-1 {
    background-color: #f4511e !important
}

.deep-orange-dark-2 {
    background-color: #e64a19 !important
}

.deep-orange-dark-3 {
    background-color: #d84315 !important
}

.deep-orange-dark-4 {
    background-color: #bf360c !important
}

.brown {
    background-color: #795548 !important
}

.brown-border {
    border-color: #795548 !important
}

.brown-text {
    color: #795548 !important
}

.brown-light-5 {
    background-color: #efebe9 !important
}

.brown-light-4 {
    background-color: #d7ccc8 !important
}

.brown-light-3 {
    background-color: #bcaaa4 !important
}

.brown-light-2 {
    background-color: #a1887f !important
}

.brown-light-1 {
    background-color: #8d6e63 !important
}

.brown-dark-1 {
    background-color: #6d4c41 !important
}

.brown-dark-2 {
    background-color: #5d4037 !important
}

.brown-dark-3 {
    background-color: #4e342e !important
}

.brown-dark-4 {
    background-color: #3e2723 !important
}

.blue-grey {
    background-color: #607d8b !important
}

.blue-grey-border {
    border-color: #607d8b !important
}

.blue-grey-text {
    color: #607d8b !important
}

.blue-grey-light-5 {
    background-color: #eceff1 !important
}

.blue-grey-light-4 {
    background-color: #cfd8dc !important
}

.blue-grey-light-3 {
    background-color: #b0bec5 !important
}

.blue-grey-light-2 {
    background-color: #90a4ae !important
}

.blue-grey-light-1 {
    background-color: #78909c !important
}

.blue-grey-dark-1 {
    background-color: #546e7a !important
}

.blue-grey-dark-2 {
    background-color: #455a64 !important
}

.blue-grey-dark-3 {
    background-color: #37474f !important
}

.blue-grey-dark-4 {
    background-color: #263238 !important
}

.grey {
    background-color: #9e9e9e !important
}

.grey-border {
    border-color: #9e9e9e !important
}

.grey-text {
    color: #9e9e9e !important
}

.grey-light-5 {
    background-color: #fafafa !important
}

.grey-light-4 {
    background-color: #f5f5f5 !important
}

.grey-light-3 {
    background-color: #eee !important
}

.grey-light-2 {
    background-color: #e0e0e0 !important
}

.grey-light-1 {
    background-color: #bdbdbd !important
}

.grey-dark-1 {
    background-color: #757575 !important
}

.grey-dark-2 {
    background-color: #616161 !important
}

.grey-dark-3 {
    background-color: #424242 !important
}

.grey-dark-4 {
    background-color: #212121 !important
}

.color-1 {
    background-color: var(--color-1) !important
}

.color-1-text {
    color: var(--color-1) !important
}

.color-1-border {
    border-color: var(--color-1) !important
}

.color-2 {
    background-color: var(--color-2) !important
}

.color-2-text {
    color: var(--color-2) !important
}

.color-2-border {
    border-color: var(--color-2) !important
}

.color-3 {
    background-color: var(--color-3) !important
}

.color-3-text {
    color: var(--color-3) !important
}

.color-3-border {
    border-color: var(--color-3) !important
}

.color-4 {
    background-color: var(--color-4) !important
}

.color-4-text {
    color: var(--color-4) !important
}

.color-4-border {
    border-color: var(--color-4) !important
}

.color-5 {
    background-color: var(--color-5) !important
}

.color-5-text {
    color: var(--color-5) !important
}

.color-5-border {
    border-color: var(--color-5) !important
}

.container, .container.min {
    margin: 0 auto;
    max-width: 992rem;
    padding: 80rem 88rem;
    overflow-x: hidden
}

    .container.max {
        max-width: 100%
    }

@media only screen and (max-width:600px) {
    .container, .container.min {
        padding: 80rem 8rem
    }
}

.dropdown {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    box-shadow: var(--shadow-2);
    background-color: var(--color-4);
    box-sizing: border-box;
    z-index: 2;
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    max-height: 320rem;
    transform: translateY(100%);
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 14rem;
    font-weight: 400;
    text-transform: none;
    color: var(--color-2);
    line-height: normal;
    text-align: left
}

    .dropdown.no-wrap {
        width: auto
    }

    .button:focus > .dropdown, .dropdown.active, .dropdown:active, .field > :focus ~ .dropdown, button:focus > .dropdown {
        opacity: 1;
        visibility: visible;
        max-width: none;
        animation: .1s dropdown-to-bottom
    }

    .dropdown.border {
        border: 1rem solid var(--color-2b);
        box-shadow: none
    }

    .dropdown.round {
        border-radius: 24rem
    }

    .dropdown.right {
        left: 0;
        right: auto
    }

    .dropdown.left {
        left: auto;
        right: 0
    }

    .dropdown > a {
        display: block;
        padding: 8rem 16rem
    }

        .dropdown > a.active, .dropdown > a:hover {
            background-color: var(--color-2a)
        }

    .dropdown.no-wrap > a {
        white-space: nowrap
    }

    .dropdown > a.row.no-wrap, .dropdown > a.row.no-wrap + a.row.no-wrap {
        margin: 0 -8rem
    }

@keyframes dropdown-to-bottom {
    from {
        opacity: 0;
        transform: translateY(75%)
    }

    to {
        opacity: 1;
        transform: translateY(100%)
    }
}

details[open] > :not(summary) {
    animation: details-to-open .3s ease
}

summary.none {
    list-style-type: none
}

summary {
    cursor: pointer
}

@keyframes details-to-open {
    0% {
        opacity: 0;
        transform: translateY(-8rem)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.field {
    height: 48rem;
    margin-bottom: 8rem
}

    .field.small {
        height: 40rem
    }

    .field.medium {
        height: 48rem
    }

    .field.large {
        height: 56rem
    }

    .field.extra {
        height: 64rem
    }

    .field + .field {
        margin-top: 24rem
    }

.row.medium-space > .col > .field + .field {
    margin-top: 32rem
}

.row.large-space > .col > .field + .field {
    margin-top: 40rem
}

.field.round {
    border-radius: 32rem
}

.field > i, .field > img {
    position: absolute;
    top: 50%;
    left: auto;
    right: 10rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: #9e9e9e;
    z-index: 2;
}

.field.border > i, .field.border > img, .field.fill > i, .field.fill > img, .field.round > i, .field.round > img {
    left: auto;
    right: 10rem
}

.field > i:first-child, .field > img:first-child {
    left: 10rem;
    right: auto
}

.field.border > i:first-child, .field.border > img:first-child, .field.fill > i:first-child, .field.fill > img:first-child, .field.round > i:first-child, .field.round > img:first-child {
    left: 10rem;
    right: auto
}

input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    cursor: pointer
}

.field.small.textarea {
    height: 72rem
}

.field.medium.textarea, .field.textarea {
    height: 88rem
}

.field.large.textarea {
    height: 104rem
}

.field.extra.textarea {
    height: 120rem
}

.field > input, .field > textarea {
    border: 0;
    border-radius: 8rem 8rem 0 0;
    border-bottom: 2rem solid #9e9e9e50;
    padding: 4rem 8rem;
    font-family: Exo;
    font-size: 14rem;
    width: 100%;
    height: 100%;
    outline: 0;
    z-index: 1;
    color: var(--color-2);
    background-color: transparent;
    box-sizing: border-box;
    resize: none;
    color: inherit
}

    .field > input:focus, .field > textarea:focus {
        border-bottom: 2rem solid var(--color-1)
    }

.field.border > input, .field.border > textarea {
    border: 2rem solid #9e9e9e50;
    border-radius: 8rem;
    padding: 4rem 8rem
}

    .field.border > input:focus, .field.border > textarea:focus {
        border: 2rem solid var(--color-1)
    }

.field.fill > input, .field.fill > textarea {
    background-color: #9e9e9e10;
    padding: 4rem 8rem
}

.field.round > input, .field.round > textarea {
    border: 0;
    box-shadow: var(--shadow-1)
}

.field.round > input {
    border-radius: 32rem;
    padding: 4rem 16rem
}

.field.round > textarea {
    border-radius: 24rem;
    padding: 13rem 16rem
}

.field.round.border.fill > input, .field.round.border.fill > textarea, .field.round.border > input, .field.round.border > textarea {
    border: 2rem solid #9e9e9e50;
    box-shadow: none
}

    .field.round.border.fill > input:focus, .field.round.border.fill > textarea:focus, .field.round.border > input:focus, .field.round.border > textarea:focus {
        border: 2rem solid var(--color-1)
    }

.field.round.fill > input, .field.round.fill > textarea {
    border: 0;
    box-shadow: none
}

.field.flat > input, .field.flat > input::after, .field.flat > input::before {
    border: none !important;
    box-shadow: none !important
}

    .field.flat > input:focus, .field.flat > input:focus::after, .field.flat > input:focus::before {
        box-shadow: var(--shadow-1) !important
    }

.field.label > input, .field.label > textarea {
    padding-top: 20rem
}

.field.prefix > input, .field.prefix > textarea {
    padding-left: 40rem
}

.field.suffix > input, .field.suffix > textarea {
    padding-right: 40rem
}

.field.invalid > input, .field.invalid > textarea {
    border-bottom: 2rem solid var(--color-3)
}

.field.invalid.border.round.fill > input, .field.invalid.border.round.fill > textarea, .field.invalid.border.round > input, .field.invalid.border.round > textarea, .field.invalid.border > input, .field.invalid.border > textarea {
    border: 2rem solid var(--color-3)
}

.field.invalid.round > input, .field.invalid.round > textarea {
    border: inherit
}

.field > :disabled {
    background-color: #9e9e9e30 !important
}

.field.label > label {
    animation: .1s label-to-middle;
    position: absolute;
    top: 50%;
    left: 8rem;
    font-size: 14rem;
    transform: translateY(-50%);
    z-index: 0
}

.field.label.textarea.small > label {
    top: 20rem
}

.field.label.textarea.medium > label, .field.label.textarea > label {
    top: 24rem
}

.field.label.textarea.large > label {
    top: 28rem
}

.field.label.textarea.extra > label {
    top: 32rem
}

.field.label.textarea.small > textarea {
    padding-top: 20rem
}

.field.label.textarea.medium > textarea, .field.label.textarea > textarea {
    padding-top: 24rem
}

.field.label.textarea.large > textarea {
    padding-top: 28rem
}

.field.label.textarea.extra > textarea {
    padding-top: 32rem
}

.field.label.round > label {
    left: 16rem
}

.field.label.prefix > label {
    left: 40rem
}

.field.label > [placeholder]:focus ~ label, .field.label > [placeholder]:not(:placeholder-shown) ~ label, .field.label > label.active {
    animation: .1s label-to-top;
    font-size: 12rem;
    transform: translateY(-120%)
}

.field.invalid > label {
    color: var(--color-3)
}

.field.required > label:after, .field > label.required:after {
    content: " * "
}

.field > select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 8rem 8rem 0 0;
    border-bottom: 2rem solid #9e9e9e50;
    padding: 4rem 8rem;
    font-family: Exo;
    font-size: 14rem;
    width: 100%;
    height: 100%;
    outline: 0;
    cursor: pointer;
    color: var(--color-2);
    background-color: transparent;
    box-sizing: border-box;
    z-index: 1
}

    .field > select:focus {
        border-bottom: 2rem solid var(--color-1)
    }

.field.border > select {
    border: 2rem solid #9e9e9e50;
    border-radius: 8rem
}

    .field.border > select:focus {
        border: 2rem solid var(--color-1)
    }

.field.fill > select {
    background-color: #9e9e9e10;
    padding: 4rem 8rem 4rem 8rem
}

.field.round > select {
    border: 0;
    border-radius: 32rem;
    box-shadow: var(--shadow-1);
    padding: 4rem 16rem
}

.field.round.border.fill > select, .field.round.border > select {
    border: 2rem solid #9e9e9e50;
    border-radius: 32rem;
    box-shadow: none
}

    .field.round.border.fill > select:focus, .field.round.border > select:focus {
        border: 2rem solid var(--color-1)
    }

.field.round.fill > select {
    border: 0;
    border-radius: 32rem;
    box-shadow: none
}

.field.label > select {
    padding-top: 20rem
}

.field.prefix > select {
    padding-left: 40rem
}

.field.suffix > select {
    padding-right: 40rem
}

.field.invalid > select {
    border-bottom: 2rem solid var(--color-3)
}

.field.invalid.border.round.fill > select, .field.invalid.border.round > select, .field.invalid.border > select {
    border: 2rem solid var(--color-3)
}

.field.invalid.round > select {
    border: inherit
}

.field > select > option {
    background-color: var(--color-4)
}

.field > .error, .field > .helper {
    position: absolute;
    left: 8rem;
    bottom: 0;
    transform: translateY(100%);
    font-size: 12rem
}

a.helper {
    color: var(--color-1)
}

.field > .error {
    color: var(--color-3)
}

.field.round > .error, .field.round > .helper {
    left: 16rem
}

.field.invalid > .helper {
    display: none
}

table td > .field {
    max-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

@keyframes label-to-top {
    from {
        font-size: 14rem;
        transform: translateY(-50%)
    }

    to {
        font-size: 12rem;
        transform: translateY(-120%)
    }
}

@keyframes label-to-middle {
    from {
        font-size: 12rem;
        transform: translateY(-120%)
    }

    to {
        font-size: 14rem;
        transform: translateY(-50%)
    }
}

i {
    font-family: "Material Icons";
    font-weight: 400;
    font-style: normal;
    font-size: 24rem;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    width: 24rem;
    margin: 0 auto
}

    i.outlined {
        font-family: "Material Icons Outlined"
    }

    i.small {
        font-size: 16rem;
        width: 16rem
    }

    i.medium {
        font-size: 24rem;
        width: 24rem
    }

    i.large {
        font-size: 32rem;
        width: 32rem
    }

    i.extra {
        font-size: 48rem;
        width: 48rem
    }

.circle > i {
    vertical-align: unset
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.absolute, .fixed {
    border-radius: inherit;
    float: none
}

    .absolute.round, .fixed.round {
        border-radius: 24rem
    }

    .absolute.border, .fixed.border {
        border: 1rem solid var(--color-2b)
    }

    .absolute.center, .fixed.center {
        left: 50%;
        transform: translateX(-50%)
    }

    .absolute.middle, .fixed.middle {
        top: 50%;
        transform: translateY(-50%)
    }

        .absolute.middle.center, .fixed.middle.center {
            transform: translate(-50%,-50%)
        }

    .absolute.top, .fixed.top {
        top: 0
    }

    .absolute.left, .fixed.left {
        left: 0
    }

    .absolute.right, .fixed.right {
        right: 0
    }

    .absolute.bottom, .fixed.bottom {
        bottom: 0
    }

    .absolute.left.right, .fixed.left.right {
        width: auto
    }

        .absolute.left.right.small, .fixed.left.right.small {
            height: 320rem
        }

        .absolute.left.right.medium, .fixed.left.right.medium {
            height: 448rem
        }

        .absolute.left.right.large, .fixed.left.right.large {
            height: 704rem
        }

    .absolute.top.bottom.small, .fixed.top.bottom.small {
        width: 320rem
    }

    .absolute.top.bottom.medium, .fixed.top.bottom.medium {
        width: 448rem
    }

    .absolute.top.bottom.large, .fixed.top.bottom.large {
        width: 704rem
    }

.loader {
    display: inline-block;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4rem solid var(--color-1);
    clip-path: polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0,50% 0,50% 0);
    animation: 1.6s to-loader linear infinite;
    background: 0 0 !important
}

    .loader.small {
        width: 24rem;
        height: 24rem;
        border-width: 3rem
    }

    .loader.medium {
        width: 40rem;
        height: 40rem;
        border-width: 4rem
    }

    .loader.large {
        width: 56rem;
        height: 56rem;
        border-width: 5rem
    }

    .loader.red {
        border-color: #f44336 !important
    }

    .loader.pink {
        border-color: #e91e63 !important
    }

    .loader.purple {
        border-color: #9c27b0 !important
    }

    .loader.deep-purple {
        border-color: #673ab7 !important
    }

    .loader.indigo {
        border-color: #3f51b5 !important
    }

    .loader.blue {
        border-color: #2196f3 !important
    }

    .loader.light-blue {
        border-color: #03a9f4 !important
    }

    .loader.cyan {
        border-color: #00bcd4 !important
    }

    .loader.teal {
        border-color: #009688 !important
    }

    .loader.green {
        border-color: #4caf50 !important
    }

    .loader.light-green {
        border-color: #8bc34a !important
    }

    .loader.lime {
        border-color: #cddc39 !important
    }

    .loader.yellow {
        border-color: #ffeb3b !important
    }

    .loader.amber {
        border-color: #ffc107 !important
    }

    .loader.orange {
        border-color: #ff9800 !important
    }

    .loader.deep-orange {
        border-color: #ff5722 !important
    }

    .loader.brown {
        border-color: #795548 !important
    }

    .loader.blue-grey {
        border-color: #607d8b !important
    }

    .loader.grey {
        border-color: #9e9e9e !important
    }

    .loader.black {
        border-color: #000 !important
    }

    .loader.white {
        border-color: #fff !important
    }

@keyframes to-loader {
    0% {
        transform: rotate(0);
        clip-path: polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0,50% 0,50% 0)
    }

    20% {
        clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%)
    }

    30% {
        clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,50% 100%,50% 100%)
    }

    40% {
        clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%)
    }

    50% {
        clip-path: polygon(50% 50%,50% 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%)
    }

    60% {
        clip-path: polygon(50% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%,0 100%,0 50%)
    }

    70% {
        clip-path: polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%,0 50%)
    }

    80% {
        clip-path: polygon(50% 50%,0 100%,0 100%,0 100%,0 100%,0 100%,0 100%,0 100%,0 50%)
    }

    90% {
        transform: rotate(360deg);
        clip-path: polygon(50% 50%,0 50%,0 50%,0 50%,0 50%,0 50%,0 50%,0 50%,0 50%)
    }

    100% {
        clip-path: polygon(50% 50%,0 50%,0 50%,0 50%,0 50%,0 50%,0 50%,0 50%,0 50%)
    }
}

img, video {
    border-radius: inherit;
    margin: 0 auto
}

    i.right, img.right, video.right {
        position: absolute;
        right: 0
    }

    i.left, img.left, video.left {
        position: absolute;
        left: 0
    }

    img.border, img.circle, img.extra, img.large, img.medium, img.responsive, img.round, img.small, img.tiny, video.border, video.circle, video.extra, video.large, video.medium, video.responsive, video.round, video.small, video.tiny {
        object-fit: cover;
        object-position: center;
        transition: .3s transform,.3s border-radius,.3s padding
    }

    img.border, video.border {
        border: 1rem solid var(--color-2b)
    }

    img.round, video.round {
        border-radius: 8rem !important;
        height: 48rem !important;
        width: 48rem !important
    }

    img.circle, video.circle {
        border-radius: 50% !important;
        height: 48rem !important;
        width: 48rem !important
    }

    img.tiny, video.tiny {
        height: 32rem !important;
        width: 32rem !important
    }

    img.small, video.small {
        height: 40rem !important;
        width: 40rem !important
    }

    img.medium, video.medium {
        height: 48rem !important;
        width: 48rem !important
    }

    img.large, video.large {
        height: 56rem !important;
        width: 56rem !important
    }

    img.extra, video.extra {
        height: 64rem !important;
        width: 64rem !important
    }

    img.responsive, video.responsive {
        width: 100% !important;
        height: 100% !important
    }

.button > img.responsive, .chip > img.responsive, button > img.responsive {
    width: auto !important;
    border: 2rem solid transparent;
    box-sizing: border-box
}

img.responsive.tiny, video.responsive.tiny {
    width: 100% !important;
    height: 64rem !important
}

img.responsive.small, video.responsive.small {
    width: 100% !important;
    height: 128rem !important
}

img.responsive.medium, video.responsive.medium {
    width: 100% !important;
    height: 192rem !important
}

img.responsive.large, video.responsive.large {
    width: 100% !important;
    height: 256rem !important
}

img.responsive.extra, video.responsive.extra {
    width: 100% !important;
    height: 320rem !important
}

img.empty-state, video.empty-state {
    max-width: 100%;
    width: 384rem
}

.button > img:not(.responsive,.tiny,.small,.medium,.large,.extra), .chip > img:not(.responsive,.tiny,.small,.medium,.large,.extra), .field > img:not(.responsive,.tiny,.small,.medium,.large,.extra), .tabs > a > img:not(.responsive,.tiny,.small,.medium,.large,.extra), button > img:not(.responsive,.tiny,.small,.medium,.large,.extra), td img:not(.responsive,.tiny,.small,.medium,.large,.extra) {
    min-width: 24rem !important;
    max-width: 24rem !important;
    min-height: 24rem !important;
    max-height: 24rem !important
}

.button.circle > img, .button.diamond > img, .button.square > img, button.circle > img, button.diamond > img, button.square > img {
    margin: 0 !important;
    padding: 0 !important
}

.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 0;
    position: fixed;
    box-shadow: var(--shadow-2);
    background-color: var(--color-4);
    transform: none;
    box-sizing: border-box;
    z-index: 100;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    width: auto;
    text-align: center
}

    .menu.left, .menu.right {
        width: 72rem
    }

    .menu.bottom, .menu.top {
        height: 64rem
    }

    .menu::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: inherit;
        z-index: 1;
        top: 0;
        left: 0;
        border-radius: inherit
    }

    .menu.border {
        box-shadow: none;
        border: 1rem solid var(--color-2a)
    }

    .menu.left.border {
        border-top: none;
        border-bottom: none;
        border-left: none
    }

    .menu.right.border {
        border-top: none;
        border-bottom: none;
        border-right: none
    }

    .menu.top.border {
        border-top: none;
        border-right: none;
        border-left: none
    }

    .menu.bottom.border {
        border-bottom: none;
        border-right: none;
        border-left: none
    }

    .menu.round {
        border-radius: 40rem
    }

    .menu.left.round:not(.margin,.small-margin,.medium-margin,.large-margin) {
        border-radius: 0 24rem 24rem 0
    }

    .menu.right.round:not(.margin,.small-margin,.medium-margin,.large-margin) {
        border-radius: 24rem 0 0 24rem
    }

    .menu.bottom.round:not(.margin,.small-margin,.medium-margin,.large-margin) {
        border-radius: 24rem 24rem 0 0
    }

    .menu.top.round:not(.margin,.small-margin,.medium-margin,.large-margin) {
        border-radius: 0 0 24rem 24rem
    }

    .menu.active {
        box-shadow: none
    }

    .menu.top {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        justify-content: center;
        flex-direction: row
    }

    .menu.left {
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        justify-content: flex-start;
        flex-direction: column
    }

    .menu.right {
        top: 0;
        left: auto;
        right: 0;
        bottom: 0;
        justify-content: flex-start;
        flex-direction: column
    }

    .menu.bottom {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        flex-direction: row
    }

    .menu.left-align, .menu.top-align {
        align-items: center;
        justify-content: flex-start
    }

    .menu.bottom-align, .menu.right-align {
        align-items: center;
        justify-content: flex-end
    }

    .menu.center-align, .menu.middle-align {
        align-items: center;
        justify-content: center
    }

    .menu > .button, .menu > .chip, .menu > button, .menu > img, .menu > video {
        z-index: 1
    }

    .menu > a:not(.button,.chip) {
        border: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 12rem;
        padding: 0;
        margin: 4rem;
        text-decoration: none;
        color: inherit;
        text-align: center;
        z-index: 1;
        width: 56rem;
        height: auto;
        min-height: 56rem
    }

    .menu.no-space:not(.left,.right) > a:not(.button,.chip) {
        margin: 0
    }

    .menu.small-space:not(.left,.right) > a:not(.button,.chip), .menu:not(.left,.right) > a:not(.button,.chip) {
        margin: 0 8rem
    }

    .menu.medium-space:not(.left,.right) > a:not(.button,.chip) {
        margin: 0 12rem
    }

    .menu.large-space:not(.left,.right) > a:not(.button,.chip) {
        margin: 0 16rem
    }

    .menu.no-space:not(.top,.bottom) > a:not(.button,.chip) {
        margin: 0
    }

    .menu.small-space:not(.top,.bottom) > a:not(.button,.chip), .menu:not(.top,.bottom) > a:not(.button,.chip) {
        margin: 4rem 0
    }

    .menu.medium-space:not(.top,.bottom) > a:not(.button,.chip) {
        margin: 8rem 0
    }

    .menu.large-space:not(.top,.bottom) > a:not(.button,.chip) {
        margin: 12rem 0
    }

    .menu > a:not(.button,.chip):hover {
        color: var(--color-1)
    }

    .menu > a:not(.button,.chip).active {
        color: var(--color-1)
    }

    .menu > .row {
        z-index: 1
    }

@media only screen and (max-width:600px) {
    .menu.bottom {
        justify-content: space-around
    }

    .menu.top {
        justify-content: space-around
    }

        .menu.bottom > .button, .menu.bottom > .chip, .menu.bottom > button, .menu.bottom > img, .menu.bottom > video, .menu.top > .button, .menu.top > .chip, .menu.top > button, .menu.top > img, .menu.top > video {
            margin: 0
        }
}

.modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    box-shadow: var(--shadow-2);
    background-color: var(--color-4);
    padding: 16rem;
    box-sizing: border-box;
    z-index: 100;
    left: 50%;
    top: 10%;
    min-width: 320rem;
    max-width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto
}

    .modal.border {
        border: 1rem solid var(--color-2b);
        box-shadow: none
    }

    .modal.round {
        border-radius: 24rem
    }

    .modal.bottom.round {
        border-radius: 24rem 24rem 0 0
    }

    .modal.top.round {
        border-radius: 0 0 24rem 24rem
    }

    .modal.left.round {
        border-radius: 0 24rem 24rem 0
    }

    .modal.right.round {
        border-radius: 24rem 0 0 24rem
    }

    .modal.small {
        width: 25%;
        height: 25%
    }

    .modal.medium {
        width: 50%;
        height: 50%
    }

    .modal.large {
        width: 75%;
        height: 75%
    }

    .modal.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%,0);
        animation: .2s modal-to-center ease
    }

        .modal.active.left {
            transform: translate(0);
            animation: .2s modal-to-right ease
        }

        .modal.active.right {
            transform: translate(0);
            animation: .2s modal-to-left ease
        }

        .modal.active.top {
            transform: translate(0);
            animation: .2s modal-to-bottom ease
        }

        .modal.active.bottom {
            transform: translate(0);
            animation: .2s modal-to-top ease
        }

    .modal.top {
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        height: auto;
        width: 100%;
        min-width: auto
    }

    .modal.left {
        float: none;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        width: auto;
        height: 100%
    }

    .modal.right {
        float: none;
        top: 0;
        left: auto;
        right: 0;
        bottom: auto;
        width: auto;
        height: 100%
    }

    .modal.bottom {
        top: auto;
        left: 0;
        right: auto;
        bottom: 0;
        height: auto;
        width: 100%;
        min-width: auto
    }

    .modal.left.small, .modal.right.small {
        width: 320rem
    }

    .modal.left.medium, .modal.right.medium {
        width: 512rem
    }

    .modal.left.large, .modal.right.large {
        width: 704rem
    }

    .modal.bottom.small, .modal.top.small {
        height: 256rem
    }

    .modal.bottom.medium, .modal.top.medium {
        height: 384rem
    }

    .modal.bottom.large, .modal.top.large {
        height: 512rem
    }

.menu.left > .modal, .menu > .modal {
    z-index: 0;
    text-align: left;
    padding: 16rem 16rem 16rem 80rem;
    overflow-y: auto
}

.menu.right > .modal {
    padding: 16rem 80rem 16rem 16rem
}

.menu.top > .modal {
    padding: 80rem 48rem 16rem 48rem
}

.menu.bottom > .modal {
    padding: 16rem 48rem 80rem 48rem
}

@keyframes modal-to-right {
    from {
        opacity: 0;
        transform: translate(-50%,0)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-left {
    from {
        opacity: 0;
        transform: translate(50%,0)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-bottom {
    from {
        opacity: 0;
        transform: translate(0,-50%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-top {
    from {
        opacity: 0;
        transform: translate(0,50%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes modal-to-center {
    from {
        opacity: 0;
        transform: translate(-50%,-64rem)
    }

    to {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

nav {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin: 0 -8rem
}

* + nav {
    margin-top: 16rem
}

nav > :not(.dropdown,.badge) {
    margin: 0 8rem
}

nav.wrap {
    display: block;
    white-space: normal
}

* + nav.wrap {
    margin: 8rem -8rem
}

nav.wrap > :not(.dropdown,.badge) {
    margin: 8rem
}

.field.label > nav {
    margin-top: 20rem
}

.overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    z-index: 100
}

    .overlay.light {
        color: var(--color-2);
        background-color: var(--color-4a)
    }

.menu > .overlay {
    z-index: 0
}

.overlay.active {
    opacity: 1;
    visibility: visible;
    animation: .3s overlay-to-active
}

    .overlay.active.bottom-align, .overlay.active.middle-align, .overlay.active.top-align {
        display: flex
    }

@keyframes overlay-to-active {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.page {
    opacity: 0;
    position: absolute;
    visibility: hidden;
    display: block
}

    .page.active {
        opacity: 1;
        position: inherit;
        visibility: visible
    }

    .page.top.active {
        animation: .4s page-to-bottom ease
    }

    .page.bottom.active {
        animation: .4s page-to-top ease
    }

    .page.left.active {
        animation: .4s page-to-right ease
    }

    .page.right.active {
        animation: .4s page-to-left ease
    }

@keyframes page-to-bottom {
    from {
        opacity: 0;
        transform: translateY(-64rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes page-to-top {
    from {
        opacity: 0;
        transform: translateY(64rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes page-to-left {
    from {
        opacity: 0;
        transform: translateX(64rem)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes page-to-right {
    from {
        opacity: 0;
        transform: translateX(-64rem)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.row {
    margin: 0 -8rem;
    color: inherit;
    min-width: 100%
}

    .row .row:not(.no-wrap) {
        margin-top: -8rem
    }

    .row .row .row:not(.no-wrap) {
        margin-top: 8rem
    }

    .row .row + .row, .row + .row {
        margin-top: 16rem
    }

    .row:after {
        content: "";
        display: table;
        clear: both
    }

    .row.no-space {
        height: auto;
        margin: 0
    }

    .row.small-space, .row.space {
        height: auto;
        margin: 0 -8rem
    }

    .row.medium-space {
        height: auto;
        margin: 0 -12rem
    }

    .row.large-space {
        height: auto;
        margin: 0 -16rem
    }

    .row > .col {
        float: left;
        text-align: left;
        box-sizing: border-box;
        width: min-content;
        padding: 8rem
    }

    .row.no-space > .col {
        padding: 0
    }

    .row.small-space > .col, .row.space > .col {
        padding: 8rem
    }

    .row.medium-space > .col {
        padding: 12rem
    }

    .row.large-space > .col {
        padding: 16rem
    }

    .row.no-wrap {
        margin-top: 0;
        margin-bottom: 0;
        display: flex
    }

.modal > .row.no-wrap:only-child {
    min-height: 100%;
    height: max-content
}

.row + .row {
    margin-top: 16rem
}

.row.no-wrap > .col {
    float: none;
    flex: 1;
    padding-top: 0;
    padding-bottom: 0
}

    .row.no-wrap > .col.min {
        flex: 0
    }

.row .col.s1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto
}

@media only screen and (min-width:601px) {
    .row .col.m1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
}

@media only screen and (min-width:993px) {
    .row .col.l1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
}

.checkbox, .radio, .switch {
    width: auto;
    height: auto;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer
}

    .checkbox > *, .radio > *, .switch > * {
        margin: 0;
        padding: 0
    }

    .checkbox > input, .radio > input {
        width: 24rem;
        height: 24rem;
        opacity: 0
    }

    .checkbox > span, .radio > span, .switch > span {
        display: inline-flex;
        align-items: center;
        color: var(--color-2);
        font-size: 14rem
    }

    .checkbox > span, .radio > span {
        padding-left: 4rem
    }

    .checkbox > input + span::before, .radio > input + span::before {
        font-family: "Material Icons";
        font-weight: 400;
        font-style: normal;
        font-size: 24rem;
        line-height: inherit;
        letter-spacing: normal;
        text-transform: none;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: "liga";
        -webkit-font-smoothing: antialiased;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
        width: 24rem;
        height: 24rem;
        margin: 0 auto;
        padding: 0;
        outline: 0;
        cursor: pointer;
        color: #9e9e9e;
        position: absolute;
        left: -24rem;
        background-color: transparent;
        border-radius: 50%
    }

    .checkbox > input + span::before {
        content: "check_box_outline_blank"
    }

    .radio > input + span::before {
        content: "radio_button_unchecked"
    }

    .checkbox > input:focus + span::before, .radio > input:focus + span::before {
        background-color: var(--color-2a);
        box-shadow: 0 0 0 8rem var(--color-2a);
        animation: .1s to-checked ease-out
    }

    .checkbox > input:checked + span::before {
        color: var(--color-1);
        content: "check_box"
    }

    .radio > input:checked + span::before {
        color: var(--color-1);
        content: "radio_button_checked"
    }

    .checkbox + .checkbox, .radio + .radio, .switch + .switch {
        margin-left: 8rem
    }

.field > .checkbox, .field > .radio, .field > .switch {
    margin: 0 12rem 0 4rem
}

.field > nav > .checkbox, .field > nav > .radio, .field > nav > .switch {
    margin: 0 4rem 0 12rem
}

.checkbox > span:empty, .radio > span:empty, .switch > span:empty {
    padding: 0
}

.switch > input {
    width: 40rem;
    height: 24rem;
    opacity: 0
}

    .switch > input + span::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        background-color: #9e9e9e;
        width: 32rem;
        height: 14rem;
        border-radius: 8rem;
        animation: none;
        cursor: pointer;
        transform: translate(-40rem,-50%)
    }

    .switch > input:checked + span::before {
        background-color: var(--color-1a)
    }

    .switch > input + span::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        width: 20rem;
        height: 20rem;
        background-color: #fff;
        box-shadow: var(--shadow-1);
        left: 0;
        top: 50%;
        transition: .1s transform,.1s background-color;
        transform: translate(-44rem,-50%)
    }

    .switch > input:checked + span::after {
        background-color: var(--color-1);
        transform: translate(-24rem,-50%)
    }

    .switch > input:focus + span::after {
        box-shadow: 0 0 0 8rem var(--color-2a)
    }

    .checkbox > input:disabled + span, .radio > input:disabled + span, .switch > input:disabled + span {
        opacity: .5
    }

@keyframes to-checked {
    from {
        box-shadow: 0 0 0 0 var(--color-2a)
    }

    to {
        box-shadow: 0 0 0 8rem var(--color-2a)
    }
}

table {
    width: 100%;
    border-spacing: 0;
    font-size: 14rem
}

    table th {
        width: 1%;
        font-weight: 500;
        text-align: left;
        padding: 8rem 4rem;
        margin: 0
    }

    table td {
        width: 1%;
        text-align: left;
        padding: 8rem 4rem;
        margin: 0
    }

    table.border td, table.border th {
        border-bottom: 1rem solid var(--color-2b)
    }

    table.small td, table.small th {
        padding: 4rem 4rem
    }

    table.medium td, table.medium th {
        padding: 8rem 4rem
    }

    table.large td, table.large th {
        padding: 12rem 4rem
    }

    table.center-align td, table.center-align th {
        text-align: center
    }

    table.left-align td, table.left-align th {
        text-align: left
    }

    table.right-align td, table.right-align th {
        text-align: right
    }

td > .button, td > .chip, td > .none, td > button, td > nav > .button, td > nav > .chip, td > nav > .none, td > nav > button {
    min-height: 24rem;
    max-height: 24rem;
    box-sizing: border-box
}

td > .circle:not(.tiny,.small,.medium,.large,.extra), td > .diamond:not(.tiny,.small,.medium,.large,.extra), td > .square:not(.tiny,.small,.medium,.large,.extra), td > nav > .circle:not(.tiny,.small,.medium,.large,.extra), td > nav > .diamond:not(.tiny,.small,.medium,.large,.extra), td > nav > .square:not(.tiny,.small,.medium,.large,.extra) {
    min-width: 24rem;
    max-width: 24rem;
    min-height: 24rem;
    max-height: 24rem;
    box-sizing: border-box
}

.tabs {
    margin-top: 16rem;
    white-space: nowrap;
    border-bottom: 1rem solid var(--color-2b)
}

* > .tabs:first-child {
    margin-top: 0
}

.tabs > a {
    display: inline-flex;
    align-items: center;
    font-size: 14rem;
    font-weight: 500;
    color: var(--color-2);
    padding: 0 16rem;
    text-transform: uppercase;
    border-bottom: 2rem solid transparent;
    text-align: center;
    min-height: 40rem
}

    .tabs > a > span {
        margin: 4rem
    }

.tabs.small > a {
    min-height: 32rem
}

.tabs.medium > a {
    min-height: 40rem
}

.tabs.large > a {
    min-height: 48rem
}

.tabs > a.active {
    border-bottom: 2rem solid var(--color-2)
}

.toast {
    position: fixed;
    top: auto;
    bottom: 72rem;
    left: 50%;
    right: auto;
    width: 80%;
    height: auto;
    z-index: 200;
    visibility: hidden;
    display: inline-block;
    box-shadow: var(--shadow-2);
    background-color: var(--color-4);
    padding: 16rem;
    opacity: 1;
    margin: 0;
    cursor: pointer;
    transform: translate(-50%,0);
    text-align: left;
    vertical-align: middle
}

    .toast.top {
        top: 72rem;
        bottom: auto
    }

    .toast.bottom {
        top: auto;
        bottom: 72rem
    }

    .toast.active {
        visibility: visible;
        animation: .2s toast-to-top
    }

        .toast.active.top {
            visibility: visible;
            animation: .2s toast-to-bottom
        }

    .toast.small {
        padding: 8rem
    }

    .toast.medium {
        padding: 16rem
    }

    .toast.large {
        padding: 24rem
    }

    .toast.round {
        border-radius: 24rem
    }

    .toast > * + * {
        margin-left: 8rem
    }

@keyframes toast-to-top {
    0% {
        opacity: 0;
        transform: translate(-50%,16rem)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

@keyframes toast-to-bottom {
    0% {
        opacity: 0;
        transform: translate(-50%,-16rem)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

@media only screen and (min-width:993px) {
    .toast {
        width: 40%
    }
}

.tooltip {
    display: none;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    font-size: 12rem;
    text-align: center;
    border-radius: 4rem;
    padding: 8rem;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%,-100%);
    width: auto;
    white-space: nowrap;
    line-height: normal;
    text-transform: none;
    font-weight: 500
}

    .tooltip.round {
        border-radius: 64rem
    }

    .tooltip.border {
        border: 1rem solid var(--color-4)
    }

    .tooltip.left {
        left: 0;
        top: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-100%,-50%)
    }

    .tooltip.right {
        right: 0;
        top: 50%;
        bottom: auto;
        left: auto;
        transform: translate(100%,-50%)
    }

    .tooltip.top {
        top: 0;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%,-100%)
    }

    .tooltip.bottom {
        bottom: 0;
        left: 50%;
        top: auto;
        right: auto;
        transform: translate(-50%,100%)
    }

    .tooltip.small {
        width: 128rem;
        white-space: normal
    }

    .tooltip.medium {
        width: 192rem;
        white-space: normal
    }

    .tooltip.large {
        width: 256rem;
        white-space: normal
    }

:hover > .tooltip {
    display: initial
}

.tooltip.large-margin, .tooltip.margin, .tooltip.medium-margin, .tooltip.small-margin {
    max-width: none;
    max-height: none
}

.tooltip.small-margin {
    margin: -8rem 0 !important
}

.tooltip.margin, .tooltip.medium-margin {
    margin: -16rem 0 !important
}

.tooltip.large-margin {
    margin: -24rem 0 !important
}

.tooltip.left.small-margin, .tooltip.right.small-margin {
    margin: 0 -8rem !important
}

.tooltip.left.margin, .tooltip.left.medium-margin, .tooltip.right.margin, .tooltip.right.medium-margin {
    margin: 0 -16rem !important
}

.tooltip.left.large-margin, .tooltip.right.large-margin {
    margin: 0 -24rem !important
}

.button:focus > .dropdown ~ .tooltip, .dropdown:active ~ .tooltip, .field > :focus ~ .dropdown ~ .tooltip, button:focus > .dropdown ~ .tooltip {
    display: none
}

html {
    font-size: var(--size)
}

body {
    font-family: Exo,BlinkMacSystemFont,-apple-system,"Segoe UI",Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14rem
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    margin: 8rem 0
}

* > h1:first-child, * > h2:first-child, * > h3:first-child, * > h4:first-child, * > h5:first-child, * > h6:first-child {
    margin: 0 0 8rem 0
}

h1 {
    font-size: 96rem
}

h2 {
    font-size: 60rem
}

h3 {
    font-size: 48rem
}

h4 {
    font-size: 34rem
}

h5 {
    font-size: 24rem
}

h6 {
    font-size: 20rem
}

.link {
    color: var(--color-1)
}

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.small-text {
    font-size: 12rem
}

.medium-text {
    font-size: 14rem
}

.large-text {
    font-size: 16rem
}

.upper {
    text-transform: uppercase
}

.lower {
    text-transform: lowercase
}

.capitalize {
    text-transform: capitalize
}

.bold {
    font-weight: 700
}

.overline {
    text-decoration: line-through
}

.underline {
    text-decoration: underline
}

.italic {
    font-style: italic
}

p {
    margin: 8rem 0
}

.button::after, .chip::after, .wave.light::after, .wave::after, button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    background-position: center;
    background-image: radial-gradient(circle,rgba(255,255,255,.4) 1%,transparent 1%);
    opacity: 0;
    transition: none;
    will-change: background-size
}

.button.border::after, .button.none::after, .chip.border::after, .wave.dark::after, button.border::after, button.none::after {
    background-image: radial-gradient(circle,rgba(150,150,150,.2) 1%,transparent 1%)
}

.button.none::after, .wave.none::after, button.none::after {
    top: 0;
    left: -4rem;
    padding: 0 4rem
}

.button.none:not(.small,.medium,.large,.extra)::after, .wave.none:not(.small,.medium,.large,.extra)::after, button.none:not(.small,.medium,.large,.extra)::after {
    top: -4rem;
    left: -4rem;
    padding: 4rem
}

.button:focus::after, .button:hover::after, .chip:focus::after, .chip:hover::after, .wave:focus::after, .wave:hover::after, button:focus::after, button:hover::after {
    background-size: 15000%;
    opacity: 1;
    transition: .2s background-size linear
}

.button:active::after, .chip:active::after, .wave:active::after, button:active::after {
    background-size: 5000%;
    opacity: 0;
    transition: none
}

.no-wave::after, .no-wave:active::after, .no-wave:hover::after {
    display: none
}

body {
    color: var(--color-2);
    background-color: var(--color-5);
    margin: 0;
    overflow-x: hidden
}

* {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    vertical-align: middle;
    color: var(--color-2)
}

    * > * {
        color: inherit
    }

.button, a, button {
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: none;
    font-family: inherit;
    outline: inherit;
    justify-content: center
}

label {
    font-size: 12rem;
    color: #9e9e9e
}

.small-space:not(.menu,nav,.row), .space:not(.menu,nav,.row) {
    height: 16rem;
    display: block
}

.medium-space:not(.menu,nav,.row) {
    height: 32rem;
    display: block
}

.large-space:not(.menu,nav,.row) {
    height: 48rem;
    display: block
}

.divider, .small-divider {
    border-bottom: 1rem solid #9e9e9e50;
    display: block;
    margin: 8rem 0
}

.medium-divider {
    border-bottom: 1rem solid #9e9e9e50;
    display: block;
    margin: 16rem 0
}

.large-divider {
    border-bottom: 1rem solid #9e9e9e50;
    display: block;
    margin: 24rem 0
}

.row.divider, .row.small-divider {
    margin: 0 -8rem !important;
    padding: 8rem 0
}

.row.medium-divider {
    margin: 0 -8rem !important;
    padding: 16rem 0
}

.row.large-divider {
    margin: 0 -8rem !important;
    padding: 24rem 0
}

.no-padding {
    padding: 0 !important
}

.small-padding {
    padding: 8rem !important
}

.medium-padding, .padding {
    padding: 16rem !important
}

.large-padding {
    padding: 24rem !important
}

.no-margin {
    margin: 0 !important
}

.small-margin {
    margin: 8rem !important
}

.margin, .medium-margin {
    margin: 16rem !important
}

.large-margin {
    margin: 24rem !important
}

.shadow {
    background-color: #00000050 !important;
    box-shadow: none !important
}

.left-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to right,#000,transparent) !important
}

.right-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to left,#000,transparent) !important
}

.bottom-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to top,#000,transparent) !important
}

.top-shadow {
    background-color: transparent !important;
    box-shadow: none !important;
    background-image: linear-gradient(to bottom,#000,transparent) !important
}

.middle-align {
    display: flex !important;
    align-items: center
}

.bottom-align {
    display: flex !important;
    align-items: flex-end
}

.top-align {
    display: flex !important;
    align-items: flex-start
}

.left-align {
    text-align: left !important;
    justify-content: flex-start
}

.right-align {
    text-align: right !important;
    justify-content: flex-end
}

.center-align {
    text-align: center !important;
    justify-content: center
}

.wrap {
    display: block
}

.front {
    z-index: 10 !important
}

.back {
    z-index: -10 !important
}

.flat {
    box-shadow: none
}

.scroll {
    overflow: auto
}

.no-scroll {
    overflow: hidden
}

.small-width {
    width: 192rem !important;
    max-width: 100%
}

.medium-width {
    width: 384rem !important;
    max-width: 100%
}

.large-width {
    width: 576rem !important;
    max-width: 100%
}

.small-height {
    height: 192rem !important
}

.medium-height {
    height: 384rem !important
}

.large-height {
    height: 576rem !important
}

.top-round {
    border-radius: 24rem 24rem 4rem 4rem !important
}

.bottom-round {
    border-radius: 4rem 4rem 24rem 24rem !important
}

.left-round {
    border-radius: 24rem 4rem 4rem 24rem !important
}

.right-round {
    border-radius: 4rem 24rem 24rem 4rem !important
}

.top-round.left-round {
    border-radius: 24rem 24rem 4rem 24rem !important
}

.top-round.right-round {
    border-radius: 24rem 24rem 24rem 4rem !important
}

.bottom-round.left-round {
    border-radius: 24rem 4rem 24rem 24rem !important
}

.bottom-round.right-round {
    border-radius: 4rem 24rem 24rem 24rem !important
}

.circle, .diamond, .square {
    min-width: 40rem;
    min-height: 40rem;
    max-width: 40rem;
    max-height: 40rem;
    height: 40rem
}

    .circle > span, .diamond > span, .square > span {
        display: none
    }

    .circle.small, .diamond.small, .square.small {
        min-width: 32rem;
        min-height: 32rem;
        max-width: 32rem;
        max-height: 32rem;
        height: 32rem
    }

    .circle.large, .diamond.large, .square.large {
        min-width: 48rem;
        min-height: 48rem;
        max-width: 48rem;
        max-height: 48rem;
        height: 48rem
    }

    .circle.extra, .diamond.extra, .square.extra {
        min-width: 56rem;
        min-height: 56rem;
        max-width: 56rem;
        max-height: 56rem;
        height: 56rem
    }

.diamond {
    transform: rotate(45deg);
    border-radius: 4rem;
    padding: 0
}

    .diamond > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(-45deg);
        margin: 0;
        padding: 0
    }

.responsive {
    margin: 0;
    width: -webkit-fill-available;
    width: -moz-available
}

    .responsive > :not(.dropdown,.badge) {
        margin: 0
    }

@media only screen and (max-width:600px) {
    .l:not(.s), .large-device:not(.small-device), .m.l:not(.s), .m:not(.s), .medium-device.large-device:not(.small-device), .medium-device:not(.small-device) {
        display: none !important
    }
}

@media only screen and (min-width:601px) and (max-width:992px) {
    .l:not(.m), .large-device:not(.medium-device), .s.l:not(.m), .s:not(.m), .small-device.large-device:not(.medium-device), .small-device:not(.medium-device) {
        display: none !important
    }
}

@media only screen and (min-width:993px) {
    .m.s:not(.l), .m:not(.l), .medium-device.small-device:not(.large-device), .medium-device:not(.large-device), .s:not(.l), .small-device:not(.large-device) {
        display: none !important
    }
}