/**
---------------------
| TABLE OF CONTENTS |
---------------------
 # CONFIG
    1. RESET
        1.1 General
        1.2 Base
        1.3 Links
        1.4 Typography
        1.5 Lists
        1.6 Embedded Content
        1.7 Forms
        1.8 Tables
        1.9 Chrome Frame Prompt
    2. VARIABLES
        2.1 Colors
        2.2 Typography
        2.3 Layout
 # ABSTRACT
    1. MIXINS
    2. FUNCTIONS
 # LAYOUT
    1. BASE
        1.1 General
        1.1.1 Classes
        1.1.2 Text
        1.1.3 Title
        1.1.4 Float
        1.1.5 Gap
        1.1.6 Flex
        1.1.7 SVG
        1.1.8 Math
        1.1.9 Square
    2. HEADER
    3. FOOTER
    4. LEFT SIDEBAR
    5. RIGHT SIDEBAR
    6. GRID
        6.1 General
    7. TABLE
        7.1 General
        7.1.1 Table Summary
        7.1.2 Table Classes Viewer
        7.6 Table List
        7.7 Table Wrapper
    8. DASHBOARD
        8.1 Dashboard 
    9. MISC
        9.1 Sidebar
        9.2 Side By Side
        9.3 Builder
    10. PAGE
        10.1 Page Dashboard
        10.1.1 Page Dashboard Version 0
        10.1.2 Page Dashboard Version MVP
        10.2 Page Class Builder
        10.4 Page Evaluate
        10.5 Page Open Class
 # VIEWS
    1. BUTTONS
        1.1 Base
        1.1.1 Primary
        1.1.2 Secondary
        1.1.3 Ternary
        1.1.4 Modifiers 
        1.2 Button Split
        1.3 Button Counter
        1.4 Button Sidebar
        1.5 Button Tile
        1.6 Button Filter
        1.7 Button Sort
        1.8 Button Progress
    2. FORM
        2.1 General
        2.1.1 Radio, Checkbox, File
        2.1.2 Field Checkbox
        2.1.3 Field File
        2.1.4 Date, Time
        2.1.5 Field Readonly
        2.1.6 Field Renge
        2.1.7 Field Letter
        2.1.8 Field True False
        2.1.9 Field Evaluate
        2.1.10 Input Blank
        2.2 Dropdown Menu
        2.2.1 More Options
        2.2.2 Select Options
        2.2.3 Filter Options
        2.2.4 Calendar Options
        2.2.5 Date Picker
        2.2.6 Menu Dropdown Small
        2.3 Field Switch
        2.4 Search
        2.4.1 Search Small
        2.4.2 Search Filed Live
        2.4.3 Search Filed Dropdown
        2.5 Field Week Days
        2.6 Field Color Picker
        2.7 Field Checklist Creator
        2.8 Field Timeslot Picker
        2.9 Field Month Weeks
    3. MENUS
        3.1 Calendar
        3.1.1 Calendar Navigation
        3.1.2 Date Picker
        3.2 Dropdown
        3.2.1 Dropdown Expendable
        3.3 Menu Context
        3.4 Color Picker
    4. TABLES
    5. CARDS
        5.1 General
        5.1.1 Card Profile
        5.1.2 Card Scroll
        5.1.3 Card Meta
        5.1.4 Card Learnig Premesis
        5.2 Panel
        5.2.1 Panel Card 
        5.2.2 Panel Dropdown
        5.2.3 Panel Feedback
        5.2.4 Panel Learning Premises
        5.3 Quick Start
        5.3.1 Quick Start School Year
    6. GRAPHS
        6.1 Progress Bar
        6.5 Time Schedule 
    7. SLIDERS
    8. MEDIA
        8.1 Canvas
        8.1.1 Canvas HTML
    9. NAVIGATION
        9.1 Navigation Sidebar
    10. USER
        10.1 General
        10.2 Avatar
    11. HEADERS
        11.1 Heading
    12. LISTS
        12.1 General
        12.2 Breadcrumbs
        12.3 Rating Stars
        12.4 List Learnig Premises Rooms
    13. MISC
        13.1 Timeline Daily
        13.2 Label
        13.3 Meta
        13.4 Tile
        13.4.1 Tile Class Item
        13.4.2 Tile Class
        13.4.3 Tile Calendar Build
        13.4.4 Tile Class Item Supplementary
        13.5 Dialog
        13.5.1 Dialog Class Item
        13.5.2 Dialog Standard
        13.5.3 Dialog Class
        13.6 Loaders
        13.6.1 Loader Spinner
        13.6.2 Loader Moving
        13.6.3 Loader Typing
        13.7 Widnow
        13.7.1 Window Side by Side
        13.8 Modal
        13.9 Timetrack
        13.10 Room
        13.11 Scroll
        13.12 Slider
        13.13 List Classes
        13.14 Summary Class
        13.15 Tag
        13.16 Mark
        13.17 Checklist
        13.17.1 Checklist Evaluate
        13.17.2 Checklist Checkbox
        13.17.3 Checklist Question
        13.17.4 Checklist Create
        13.17.5 Checklist Question Creator
        13.17.6 Checklist Readonly
        13.18 Activity
        13.18.1 Activity Question
        13.18.2 Activity Question Types
        13.19 Tabs
        13.19.1 Tabs Builder
        13.20 Document
        13.21 Clock
        13.21.1 Stopwatch
        13.22 Icons
        13.22.1 Icon Maximize
        13.23 Counter
        13.24 Class Actions
        13.25 Relevant Actions
        13.26 Drag & Drop
        13.27 Evaluate Empty
        13.28 Activity Create
        13.29 Dialog Activity Question
        13.30 Creator List
        13.31 List Choice

/* --------
# CONFIG
--------- */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

:root {
    --grey-light-1: #f6f6f6;
    --grey-light-2: #f1f1f1;
    --grey-light-3: #e1e1e1;
    --grey-light-4: #dddddd;
    --grey-1: #bcbcbc;
    --grey-2: #a4a4a4;
    --grey-3: #888888;
    --grey-dark-1: #515151;
    --grey-dark-2: #414141;
    --grey-dark-3: #323232;
    --grey-dark-4: #272727;
    --grey-dark-5: #1F1F1F;
    --grey-dark-6: #1C1C1C;
    --green-yellow: #73BF27;
    --green: #27BF81;
    --yellow: #E4CA39;
    --orange: #EB8D2A;
    --red: #E5283C;
    --pink: #CD1A89;
    --purple: #9138E6;
    --blue: #1789CB;
    --black: #000000;
    --grey: #a4a4a4;
    --alpha-light-1: rgba(255,255,255, 0.05);
    --alpha-light-2: rgba(255,255,255, 0.1);
    --alpha-light-3: rgba(255,255,255, 0.2);
    --alpha-dark-1: rgba(0,0,0, 0.05);
    --alpha-dark-2: rgba(0,0,0, 0.1);
    --alpha-green-1: rgba(39, 191, 129, 0.05);
    --alpha-green-2: rgba(39, 191, 129, 0.1);
    --alpha-green-3: rgba(39, 191, 129, 0.3);
    --alpha-red-1: rgba(229, 40, 60, 0.05);
    --alpha-red-2: rgba(229, 40, 60, 0.1);
    --alpha-red-3: rgba(229, 40, 60, 0.3);
    --alpha-orange-1: rgba(235, 141, 42, 0.05);
    --alpha-purple-1: rgba(145, 56, 230, 0.05);
    --alpha-blue-1: rgba(23, 137, 203, 0.05);
    --alpha-yellow-1: rgba(228, 202, 57, 0.05);
    --alpha-yellow-2: rgba(228, 202, 57, 0.10);
    --alpha-activity-1: rgba(136, 136, 136, 0.1);
    --alpha-supplementary-1: rgba(115, 191, 39, 0.1);
    --alpha-lesson-1: rgba(39, 191, 129, 0.1);
    --alpha-test-1: rgba(229, 40, 60, 0.1);
    --alpha-quiz-1: rgba(235, 141, 42, 0.1);
    --alpha-project-1: rgba(145, 56, 230, 0.1);
    --alpha-field-trip-1: rgba(23, 137, 203, 0.1);
    --alpha-lab-1: rgba(228, 202, 57, 0.1);
    --font-family: "Open Sans";
    --font-size: 16px;
    --font-weight: 400;
    --line-height: 1.6;
    --letter-spacing: 0;
    --min-equal-pix: 1.15px;
    --transition-duration: 0.3s;
    --table-col-width: 66px;
    --graph-axis-bar-size: 36;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 1.1 General */
* {
    box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--grey-dark-3);
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

    audio:not([controls]) {
        display: none;
    }

[hidden] {
    display: none;
}

/** 1.2 Base */

html, button, input, select, textarea {
    font-family: sans-serif;
    color: #222;
}

body {
    margin: 0;
    font-size: var(--font-size);
    line-height: 1.4;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}

/** 1.3 Links */
a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

    a:hover {
        text-decoration: none;
    }

    a:focus, a:hover, a:active {
        outline: none;
    }

/** 1.4 Typography */
abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

blockquote {
    margin: 0;
}

dfn {
    font-style: italic;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
    border-color: var(--grey-light-3);
}

ins {
    background: #ff9;
    color: #000;
    text-decoration: none;
}

pre, code, kbd, samp {
    font-family: monospace, serif;
    _font-family: "courier new", monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

    q::before, q::after {
        content: "";
        content: none;
    }

small {
    font-size: 85%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/** 1.5 Lists */
nav ul,
nav ol,
ul,
li {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

/** 1.6 Embedded Content */
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

/** 1.7 Forms */
figure {
    margin: 0;
}

form {
    margin: 0;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

legend {
    border: 0;
    *margin-left: -7px;
    padding: 0;
    white-space: normal;
}

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}

button, input {
    line-height: normal;
}

    button, input[type=button], input[type=reset], input[type=submit] {
        cursor: pointer;
        -webkit-appearance: button;
        *overflow: visible;
    }

        button[disabled], input[disabled] {
            cursor: default;
        }

input, textarea {
    -webkit-box-shadow: none;
}

    input[type=checkbox], input[type=radio] {
        box-sizing: border-box;
        padding: 0;
        *width: 13px;
        *height: 13px;
    }

    input[type=search] {
        -webkit-appearance: textfield;
        box-sizing: border-box;
    }

        input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }

    button::-moz-focus-inner, input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

input, textarea, select {
    outline: none;
}

/** 1.8 Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    vertical-align: top;
}

/** 1.9 Chrome Frame Prompt */
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: black;
    padding: 0.2em 0;
}

/** 1.1 General */

body, button {
    font-family: var(--font-family), Helvetica, Arial, sans-serif;
    font-weight: var(--font-weight);
    color: var(--grey-dark-4);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    box-sizing: border-box;
}

p {
    font-size: 0.875em;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.4;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}

a.link, a.link-arrow {
    position: relative;
    color: var(--green);
}

    a.link:hover::before, a.link:focus::before, a.link:active::before {
        opacity: 1;
    }

    a.link::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background-color: var(--green);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

    a.link.link--underlined::before {
        opacity: 1;
    }

    a.link.link--underlined:hover::before, a.link.link--underlined:focus::before, a.link.link--underlined:active::before {
        opacity: 0;
    }

a.link-arrow {
    display: inline-block;
}

    a.link-arrow .icon {
        position: relative;
        width: 1em;
        fill: currentColor;
        transition: all var(--transition-duration) ease 0s;
    }

    a.link-arrow:hover .icon, a.link-arrow:focus .icon, a.link-arrow:active .icon {
        margin-left: 0.375em;
    }

label {
    font-weight: 600;
    color: var(--grey-3);
}

u {
    font-weight: 600;
}

/** Layout Theme */
.layout--dark h1, .layout--dark h2, .layout--dark h3, .layout--dark h4, .layout--dark h5, .layout--dark h6 {
    color: var(--grey-light-4);
}

.layout--dark hr {
    border-color: var(--alpha-light-2);
}

/** 1.1.1 Classes */
.primary-color {
    color: var(--green) !important;
}

.primary-background-color {
    background: var(--green);
}

.primary-border-color {
    border-color: var(--green) !important;
}

.primary-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .primary-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
    }

.success-color {
    color: var(--green) !important;
}

.success-background-color {
    background: var(--green);
}

.success-border-color {
    border-color: var(--green) !important;
}

.success-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .success-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
    }

.error-color {
    color: var(--red) !important;
}

.error-background-color {
    background: var(--red);
}

.error-border-color {
    border-color: var(--red) !important;
}

.error-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .error-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--red);
    }

.activity-color {
    color: var(--grey-3) !important;
}

.activity-background-color {
    background: var(--grey-3);
}

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

.activity-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .activity-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--grey-3);
    }

.lesson-color {
    color: var(--green) !important;
}

.lesson-background-color {
    background: var(--green);
}

.lesson-border-color {
    border-color: var(--green) !important;
}

.lesson-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .lesson-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
    }

.test-color {
    color: var(--red) !important;
}

.test-background-color {
    background: var(--red);
}

.test-border-color {
    border-color: var(--red) !important;
}

.test-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .test-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--red);
    }

.quiz-color {
    color: var(--orange) !important;
}

.quiz-background-color {
    background: var(--orange);
}

.quiz-border-color {
    border-color: var(--orange) !important;
}

.quiz-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .quiz-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--orange);
    }

.project-color {
    color: var(--purple) !important;
}

.project-background-color {
    background: var(--purple);
}

.project-border-color {
    border-color: var(--purple) !important;
}

.project-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .project-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--purple);
    }

.supplementary-color {
    color: var(--green-yellow) !important;
}

.supplementary-background-color {
    background: var(--green-yellow);
}

.supplementary-border-color {
    border-color: var(--green-yellow) !important;
}

.supplementary-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .supplementary-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green-yellow);
    }

.field-trip-color {
    color: var(--blue) !important;
}

.field-trip-background-color {
    background: var(--blue);
}

.field-trip-border-color {
    border-color: var(--blue) !important;
}

.field-trip-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .field-trip-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
    }

.lab-color {
    color: var(--yellow) !important;
}

.lab-background-color {
    background: var(--yellow);
}

.lab-border-color {
    border-color: var(--yellow) !important;
}

.lab-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .lab-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--yellow);
    }

.student-color {
    color: var(--green) !important;
}

.student-background-color {
    background: var(--green);
}

.student-border-color {
    border-color: var(--green) !important;
}

.student-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .student-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
    }

.teacher-color {
    color: var(--red) !important;
}

.teacher-background-color {
    background: var(--red);
}

.teacher-border-color {
    border-color: var(--red) !important;
}

.teacher-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .teacher-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--red);
    }

.parent-color {
    color: var(--purple) !important;
}

.parent-background-color {
    background: var(--purple);
}

.parent-border-color {
    border-color: var(--purple) !important;
}

.parent-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .parent-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--purple);
    }

.admin-color {
    color: var(--orange) !important;
}

.admin-background-color {
    background: var(--orange);
}

.admin-border-color {
    border-color: var(--orange) !important;
}

.admin-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .admin-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--orange);
    }

.audit-color {
    color: var(--blue) !important;
}

.audit-background-color {
    background: var(--blue);
}

.audit-border-color {
    border-color: var(--blue) !important;
}

.audit-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .audit-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
    }

.meta-color {
    color: var(--grey-1) !important;
}

.meta-background-color {
    background: var(--grey-1);
}

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

.meta-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .meta-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--grey-1);
    }

.green-color {
    color: var(--green) !important;
}

.green-background-color {
    background: var(--green);
}

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

.green-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .green-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
    }

.blue-color {
    color: var(--blue) !important;
}

.blue-background-color {
    background: var(--blue);
}

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

.blue-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .blue-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
    }

.red-color {
    color: var(--red) !important;
}

.red-background-color {
    background: var(--red);
}

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

.red-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .red-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--red);
    }

.orange-color {
    color: var(--orange) !important;
}

.orange-background-color {
    background: var(--orange);
}

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

.orange-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .orange-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--orange);
    }

.yellow-color {
    color: var(--yellow) !important;
}

.yellow-background-color {
    background: var(--yellow);
}

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

.yellow-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .yellow-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--yellow);
    }

.purple-color {
    color: var(--purple) !important;
}

.purple-background-color {
    background: var(--purple);
}

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

.purple-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .purple-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--purple);
    }

.pink-color {
    color: var(--pink) !important;
}

.pink-background-color {
    background: var(--pink);
}

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

.pink-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .pink-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--pink);
    }

.transparent-background-color {
    background: transparent !important;
}

.layout-background-color {
    background-color: #ffffff !important;
}

.layout--light .layout-background-color {
    background-color: var(--grey-light-1) !important;
}

.layout--dark .layout-background-color {
    background-color: var(--grey-dark-4) !important;
}

.max-width-default {
    max-width: !important;
}

.max-width-xs {
    max-width: 442px !important;
}

.max-width-sm {
    max-width: 576px !important;
}

.max-width-md {
    max-width: 768px !important;
}

.max-width-lg {
    max-width: 992px !important;
}

.max-width-xl {
    max-width: 1200px !important;
}

.max-width-xxl {
    max-width: 1600px !important;
}

.max-width-auto {
    max-width: initial !important;
}

.placeholder-prefix {
    position: relative;
    padding-left: 12px !important;
}

    .placeholder-prefix:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        border: 1px solid var(--grey-1);
    }

.checked-sufix {
    position: relative;
    padding-right: 30px !important;
}

    .checked-sufix.option--checked:after {
        opacity: 1;
    }

    .checked-sufix:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 12px;
        height: 9px;
        background-size: 100%;
        background-image: url("../icons/icon-checkmark.svg");
        filter: invert(62%) sepia(45%) saturate(662%) hue-rotate(104deg) brightness(91%) contrast(89%);
        transition: all var(--transition-duration) ease 0s;
        opacity: 0;
    }

svg.icon {
    fill: currentColor;
}

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

.absolute-right {
    position: absolute !important;
    top: 8px;
    right: 4px;
}

.pull-center {
    margin: auto;
}

.pull-right {
    margin-left: auto;
}

.transparent {
    opacity: 0;
}

.hidden {
    display: none !important;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-scroll {
    overflow: hidden;
}

.no-border {
    border: none !important;
}

.no-background {
    background: none !important;
}

.no-line-height {
    line-height: 0;
}

.v-sep {
    display: inline-block;
    margin: 0 4px;
    color: rgba(0, 0, 0, 0.2);
}

.h-sep {
    display: inline-block;
    margin: 0 20px;
}

.slash-sep {
    display: inline-block;
    margin: 2px;
    color: rgba(0, 0, 0, 0.2);
}

    .slash-sep::before {
        content: "/";
    }

.height-100 {
    height: 100%;
}

.width-100 {
    width: 100%;
}

/** 1.1.2 Text */
.text-left {
    text-align: left;
}

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

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

span.text-overflow {
    display: inline-block;
}

.text-overflow {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .text-overflow[title] {
        pointer-events: all !important;
    }

.text-line-clamp-2 {
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.text-normal {
    font-weight: 400 !important;
}

.text-strong {
    font-weight: 600 !important;
}

.text-spacing-normal {
    letter-spacing: var(--letter-spacing) !important;
}

.text-spacing-spaced {
    letter-spacing: 0.125em;
}

.text-lg {
    font-size: 1.25em !important;
    line-height: 1.2;
}

.text-md {
    font-size: 1em !important;
}

.text-sm {
    font-size: 0.875em !important;
}

.text-xs {
    font-size: 0.75em !important;
}

.text-xxs {
    font-size: 0.625em !important;
}

.text-nowrap {
    white-space: nowrap;
}

/** 1.1.3 Title */
.title-group {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.4em;
}

    .title-group .title {
        position: relative;
        margin: 0 0 0 15px;
        padding-left: 15px;
        border-left: 1px solid var(--grey-light-3);
    }

.title {
    margin-bottom: 0.4em;
}

.layout--dark .title-group .title {
    border-color: var(--alpha-light-2);
}

/** 1.1.4 Float */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

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

/** 1.1.5 Gap */
.gap {
    margin: 10px !important;
}

    .gap.gap--v {
        margin: 10px 0 !important;
    }

    .gap.gap--h {
        margin: 0 10px !important;
    }

.gap-x2 {
    margin: 20px !important;
}

.gap-top {
    margin-top: 10px !important;
}

.gap-right {
    margin-right: 10px !important;
}

.gap-bottom {
    margin-bottom: 10px !important;
}

.gap-left {
    margin-left: 10px !important;
}

/** 1.1.6 Flex */
.flex,
.flex-inline {
    display: flex;
    max-height: 100%;
}

    .flex.flex--column,
    .flex-inline.flex--column {
        width: 100%;
        flex-direction: column;
    }

        .flex.flex--column.flex--gutter,
        .flex-inline.flex--column.flex--gutter {
            margin: -10px 0;
        }

            .flex.flex--column.flex--gutter > *,
            .flex-inline.flex--column.flex--gutter > * {
                margin: 10px 0;
            }

        .flex.flex--column.flex--gutter-half,
        .flex-inline.flex--column.flex--gutter-half {
            margin: -5px 0;
        }

            .flex.flex--column.flex--gutter-half > *,
            .flex-inline.flex--column.flex--gutter-half > * {
                margin: 5px 0;
            }

    .flex.flex--gutter,
    .flex-inline.flex--gutter {
        margin: 0 -10px;
    }

        .flex.flex--gutter > *,
        .flex-inline.flex--gutter > * {
            margin: 0 10px;
        }

    .flex.flex--gutter-half,
    .flex-inline.flex--gutter-half {
        margin: 0 -5px;
    }

        .flex.flex--gutter-half > *,
        .flex-inline.flex--gutter-half > * {
            margin: 0 5px;
        }

    .flex.flex--no-shrink > *,
    .flex-inline.flex--no-shrink > * {
        flex-shrink: 0;
    }

    .flex.flex--wrap,
    .flex-inline.flex--wrap {
        flex-wrap: wrap;
        margin: 0 -0.625rem;
    }

        .flex.flex--wrap > *,
        .flex-inline.flex--wrap > * {
            margin: 0.625rem;
        }

    .flex.flex--basis-0,
    .flex-inline.flex--basis-0 {
        flex-basis: 0;
    }

    .flex.flex--middle,
    .flex-inline.flex--middle {
        justify-content: center;
    }

    .flex.flex--spaced,
    .flex-inline.flex--spaced {
        justify-content: space-between;
    }

    .flex.flex--right,
    .flex-inline.flex--right {
        justify-content: flex-end;
    }

    .flex.flex--center,
    .flex-inline.flex--center {
        align-items: center;
    }

    .flex.flex--end,
    .flex-inline.flex--end {
        align-items: flex-end;
    }

    .flex.flex-gap-half.flex--wrap, .flex.flex-gap.flex--wrap, .flex.flex-gap-x2.flex--wrap,
    .flex-inline.flex-gap-half.flex--wrap,
    .flex-inline.flex-gap.flex--wrap,
    .flex-inline.flex-gap-x2.flex--wrap {
        margin: 0;
    }

        .flex.flex-gap-half.flex--wrap > *, .flex.flex-gap.flex--wrap > *, .flex.flex-gap-x2.flex--wrap > *,
        .flex-inline.flex-gap-half.flex--wrap > *,
        .flex-inline.flex-gap.flex--wrap > *,
        .flex-inline.flex-gap-x2.flex--wrap > * {
            margin: 0;
        }

    .flex.flex-gap-half,
    .flex-inline.flex-gap-half {
        gap: 5px;
    }

    .flex.flex-gap,
    .flex-inline.flex-gap {
        gap: 10px;
    }

    .flex.flex-gap-x2,
    .flex-inline.flex-gap-x2 {
        gap: 20px;
    }

    .flex .flex-no-shrink,
    .flex-inline .flex-no-shrink {
        flex-shrink: 0;
    }

    .flex .flex-auto,
    .flex-inline .flex-auto {
        flex: 1 1 0;
    }

.flex {
    display: flex;
    max-height: 100%;
}

.flex-inline {
    display: inline-flex;
}

/** 1.1.7 SVG */
svg.effect {
    display: none;
}

/** 1.1.8 Math */
.math.math--sqroot {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding-left: 0.825em;
    margin-bottom: -0.5em;
}

    .math.math--sqroot .symbol {
        position: absolute;
        top: 0;
        left: 0;
        fill: currentColor;
        width: auto;
        height: 1.2em;
    }

/** 1.1.9 Square */
.square-group {
    display: inline-flex;
    align-items: center;
    text-align: left;
}

    .square-group .square {
        margin-right: 10px;
    }

.square {
    position: relative;
    width: 40px;
    height: 40px;
    text-align: center;
    border: none;
    border-radius: 6px;
    background: var(--grey-light-3);
}

    .square.square--label {
        width: 48px;
        height: 48px;
    }

        .square.square--label .square-number {
            position: absolute;
            top: 15%;
            left: 0;
            width: 100%;
            transform: none;
        }

        .square.square--label .square-label {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 4px;
            font-size: 10px;
            letter-spacing: 0;
        }

    .square::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

    .square .square-number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.875em;
        font-weight: 600;
        line-height: 1;
    }

.layout--dark .square {
    background: var(--grey-dark-5);
}

    .layout--dark .square::before {
        background: var(--grey-dark-3);
    }

.layout--dark .meta-prefix::before {
    background: rgba(255, 255, 255, 0.15);
}

/** 6.1 General */
.container {
    display: block;
    width: 100%;
    max-width: 1556px;
    margin-left: auto;
    margin-right: auto;
}

    .container.gutter-half .row > *.no-gutter, .container.gutter .row > *.no-gutter {
        padding: 0;
    }

        .container.gutter-half .row > *.no-gutter:nth-child(1), .container.gutter .row > *.no-gutter:nth-child(1) {
            padding-left: 0.625rem;
        }

        .container.gutter-half .row > *.no-gutter:last-child, .container.gutter .row > *.no-gutter:last-child {
            padding-right: 0.625rem;
        }

    .container.gutter-half .row.no-gutter, .container.gutter .row.no-gutter {
        margin: 0;
    }

        .container.gutter-half .row.no-gutter > *, .container.gutter .row.no-gutter > * {
            padding: 0;
        }

    .container.gutter {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

        .container.gutter .row {
            margin-left: -0.625rem;
            margin-right: -0.625rem;
        }

            .container.gutter .row > * {
                padding: 0.625rem;
            }

    .container.gutter-half {
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
    }

        .container.gutter-half .row {
            margin-left: -0.3125rem;
            margin-right: -0.3125rem;
        }

            .container.gutter-half .row > * {
                padding: 0.3125rem;
            }

    .container .row.gutter-half {
        margin-left: -0.3125rem;
        margin-right: -0.3125rem;
    }

        .container .row.gutter-half > * {
            padding: 0.3125rem;
        }

    .container .row.gutter {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

        .container .row.gutter > * {
            padding: 0.625rem;
        }

.row {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
}

    .row.row--float {
        display: block;
    }

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

        .row.row--float > * {
            float: left;
        }

    .row.row--center {
        align-items: center;
    }

    .row > * {
        width: 100%;
    }

@media all and (min-width: 442px) {
    .row.row-xs--nowrap {
        flex-wrap: nowrap;
    }
}

@media all and (min-width: 576px) {
    .row.row-sm--nowrap {
        flex-wrap: nowrap;
    }
}

@media all and (min-width: 768px) {
    .row.row-md--nowrap {
        flex-wrap: nowrap;
    }
}

@media all and (min-width: 992px) {
    .row.row-lg--nowrap {
        flex-wrap: nowrap;
    }
}

@media all and (min-width: 1200px) {
    .row.row-xl--nowrap {
        flex-wrap: nowrap;
    }
}

@media all and (min-width: 1600px) {
    .row.row-xxl--nowrap {
        flex-wrap: nowrap;
    }
}

.col-1 {
    width: 8.3333333333%;
}

.col-2 {
    width: 16.6666666667%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.3333333333%;
}

.col-5 {
    width: 41.6666666667%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.3333333333%;
}

.col-8 {
    width: 66.6666666667%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.3333333333%;
}

.col-11 {
    width: 91.6666666667%;
}

.col-12 {
    width: 100%;
}

@media all and (min-width: 442px) {
    .col-xs-1 {
        width: 8.3333333333%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-2 {
        width: 16.6666666667%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-3 {
        width: 25%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-4 {
        width: 33.3333333333%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-5 {
        width: 41.6666666667%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-6 {
        width: 50%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-7 {
        width: 58.3333333333%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-8 {
        width: 66.6666666667%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-9 {
        width: 75%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-10 {
        width: 83.3333333333%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-11 {
        width: 91.6666666667%;
    }
}

@media all and (min-width: 442px) {
    .col-xs-12 {
        width: 100%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-1 {
        width: 8.3333333333%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-2 {
        width: 16.6666666667%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-3 {
        width: 25%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-4 {
        width: 33.3333333333%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-5 {
        width: 41.6666666667%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-6 {
        width: 50%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-7 {
        width: 58.3333333333%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-8 {
        width: 66.6666666667%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-9 {
        width: 75%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-10 {
        width: 83.3333333333%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-11 {
        width: 91.6666666667%;
    }
}

@media all and (min-width: 576px) {
    .col-sm-12 {
        width: 100%;
    }
}

@media all and (min-width: 768px) {
    .col-md-1 {
        width: 8.3333333333%;
    }
}

@media all and (min-width: 768px) {
    .col-md-2 {
        width: 16.6666666667%;
    }
}

@media all and (min-width: 768px) {
    .col-md-3 {
        width: 25%;
    }
}

@media all and (min-width: 768px) {
    .col-md-4 {
        width: 33.3333333333%;
    }
}

@media all and (min-width: 768px) {
    .col-md-5 {
        width: 41.6666666667%;
    }
}

@media all and (min-width: 768px) {
    .col-md-6 {
        width: 50%;
    }
}

@media all and (min-width: 768px) {
    .col-md-7 {
        width: 58.3333333333%;
    }
}

@media all and (min-width: 768px) {
    .col-md-8 {
        width: 66.6666666667%;
    }
}

@media all and (min-width: 768px) {
    .col-md-9 {
        width: 75%;
    }
}

@media all and (min-width: 768px) {
    .col-md-10 {
        width: 83.3333333333%;
    }
}

@media all and (min-width: 768px) {
    .col-md-11 {
        width: 91.6666666667%;
    }
}

@media all and (min-width: 768px) {
    .col-md-12 {
        width: 100%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-1 {
        width: 8.3333333333%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-2 {
        width: 16.6666666667%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-3 {
        width: 25%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-4 {
        width: 33.3333333333%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-5 {
        width: 41.6666666667%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-6 {
        width: 50%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-7 {
        width: 58.3333333333%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-8 {
        width: 66.6666666667%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-9 {
        width: 75%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-10 {
        width: 83.3333333333%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-11 {
        width: 91.6666666667%;
    }
}

@media all and (min-width: 992px) {
    .col-lg-12 {
        width: 100%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-1 {
        width: 8.3333333333%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-2 {
        width: 16.6666666667%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-3 {
        width: 25%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-4 {
        width: 33.3333333333%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-5 {
        width: 41.6666666667%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-6 {
        width: 50%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-7 {
        width: 58.3333333333%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-8 {
        width: 66.6666666667%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-9 {
        width: 75%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-10 {
        width: 83.3333333333%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-11 {
        width: 91.6666666667%;
    }
}

@media all and (min-width: 1200px) {
    .col-xl-12 {
        width: 100%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-1 {
        width: 8.3333333333%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-2 {
        width: 16.6666666667%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-3 {
        width: 25%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-4 {
        width: 33.3333333333%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-5 {
        width: 41.6666666667%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-6 {
        width: 50%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-7 {
        width: 58.3333333333%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-8 {
        width: 66.6666666667%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-9 {
        width: 75%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-10 {
        width: 83.3333333333%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-11 {
        width: 91.6666666667%;
    }
}

@media all and (min-width: 1600px) {
    .col-xxl-12 {
        width: 100%;
    }
}

/** 8.1 Dashboard */
.dashboard {
    position: relative;
}

    .dashboard.dashboard--sidebar .dashboard-header {
        left: 288px;
        width: calc(100% - 288px);
    }

    .dashboard.dashboard--sidebar .dashboard-sidebar {
        width: 288px;
    }

    .dashboard.dashboard--sidebar .dashboard-main {
        width: 100%;
        min-height: 100vh;
        padding: 79px 15px 30px 303px;
        background: var(--grey-light-1);
    }

.dashboard-header,
.dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    width: 100vw;
    padding: 10px 15px;
    background: #ffffff;
    border-bottom: 1px solid var(--grey-light-3);
}

    .dashboard-header .utility {
        line-height: 0;
    }

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    width: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--grey-dark-4);
}

    .dashboard-sidebar .logo {
        flex: 0 0 auto;
        padding: 22px 20px;
        line-height: 0;
    }

        .dashboard-sidebar .logo svg,
        .dashboard-sidebar .logo img {
            max-width: 90px;
        }

        .dashboard-sidebar .logo .icon {
            max-width: 165px;
        }

    .dashboard-sidebar .profile {
        flex: 0 0 auto;
        padding: 0 16px 20px;
    }

        .dashboard-sidebar .profile .card {
            padding: 10px 15px 15px;
        }

        .dashboard-sidebar .profile .menu {
            margin-right: -5px;
        }

    .dashboard-sidebar .nav-sidebar {
        flex: 1 1 auto;
    }

.dashboard-main-header .btn {
    font-size: 0.875em;
}

.dashboard-main-header .row {
    align-items: center;
}

.dashboard-main-nav {
    line-height: 0;
}

    .dashboard-main-nav .card {
        padding: 0;
        border-radius: 4px 4px 0 0;
    }

        .dashboard-main-nav .card.layout--dark {
            background-color: var(--grey-dark-3);
        }

    .dashboard-main-nav .row {
        align-items: center;
        margin: 0;
        padding: 0 10px 0 4px;
    }

    .dashboard-main-nav .flex,
    .dashboard-main-nav .clock {
        margin: 0;
        align-items: center;
    }

    .dashboard-main-nav .menu-list,
    .dashboard-main-nav .calendar {
        line-height: var(--line-height);
    }

        .dashboard-main-nav .calendar .menu--calendar .menu-header {
            font-size: 0.875em;
        }

.dashboard-main-body {
    background: var(--grey-light-2);
    border: 1px solid var(--grey-light-3);
    border-top: none;
    border-radius: 0 0 4px 4px;
    min-height: 600px;
    height: calc(100vh - 221px);
}

    .dashboard-main-body .row > * {
        max-height: 100%;
    }

.dashboard-main-builder {
    min-height: 600px;
    height: calc(100vh - 160px);
}

/** Main */
.main {
    width: 100%;
}

    .main .main-header .menu--calendar {
        position: relative;
        top: 0.2em;
    }

    .main .main-header .menu--dropdown {
        width: 164px;
    }

/** 12.1 General */
.list.list--disc {
    position: relative;
}

    .list.list--disc > * {
        position: relative;
        padding-left: 10px;
    }

        .list.list--disc > *:not(:last-of-type) {
            margin-bottom: 0.4em;
        }

        .list.list--disc > *::before {
            content: "";
            position: absolute;
            top: 0.5em;
            left: 0;
            transform: translateY(50%);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--grey-1);
        }

.list.list--horizontal, .list.list--icons {
    display: flex;
    align-items: center;
}

    .list.list--horizontal > *, .list.list--icons > * {
        flex-basis: auto;
        flex-shrink: 0;
        margin: 0 10px;
    }

        .list.list--horizontal > *:first-child, .list.list--icons > *:first-child {
            margin-left: 0;
        }

        .list.list--horizontal > *:last-child, .list.list--icons > *:last-child {
            margin-right: 0;
        }

    .list.list--horizontal > * {
        margin: 0 10px;
    }

    .list.list--icons > * {
        margin: 0 5px;
    }

.list.list--inline > * {
    display: inline-block;
    margin: 6px;
}

.layout--dark .list.list--disc > *::before {
    background: #616161;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
.card {
    padding: 15px;
    width: 100%;
    border: 1px solid var(--grey-light-3);
    border-radius: 8px;
    background: #ffffff;
    /*.card-header {
      @include clearfix();
  }*/
}

    .card.card--clean {
        padding: 0;
        border: none;
        border-radius: 0;
    }

    .card .card-inner {
        padding: 15px;
        border-radius: 8px;
        background: var(--alpha-dark-1);
    }

.layout--light.card,
.layout--light .card {
    background: var(--grey-light-1);
}

    .layout--light.card .card-inner,
    .layout--light .card .card-inner {
        border: 1px solid var(--grey-light-3);
        background: #ffffff;
    }

        .layout--light.card .card-inner .card-btn,
        .layout--light .card .card-inner .card-btn {
            background: var(--grey-light-1);
        }

            .layout--light.card .card-inner .card-btn:hover, .layout--light.card .card-inner .card-btn.active,
            .layout--light .card .card-inner .card-btn:hover,
            .layout--light .card .card-inner .card-btn.active {
                background: var(--green);
            }

.layout--dark.card,
.layout--dark .card {
    color: var(--grey-3);
    border-color: var(--grey-dark-4);
    background: var(--grey-dark-4);
}

    .layout--dark.card .card-inner,
    .layout--dark .card .card-inner {
        background: var(--alpha-light-1);
    }

/** 5.1.2 Card Scroll */
.card--scroll {
    padding: 15px 11px;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 13.26 Drag & Drop */
.drag .drag-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
    padding: 4px 8px;
    border: 1px solid var(--grey-light-3);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    .drag .drag-item::before {
        content: "";
        display: block;
        height: 10px;
        width: 10px;
        background-image: linear-gradient(to bottom, currentColor 50%, rgba(255, 255, 255, 0) 50%);
        background-position: top;
        background-size: 2px 4px;
        background-repeat: repeat-y;
        opacity: 0.5;
    }

    .drag .drag-item.disabled {
        cursor: context-menu;
    }

    .drag .drag-item.drag-item--dragging {
        color: var(--green);
        transform: rotate(4deg);
        transform-origin: center;
        transition: none !important;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        pointer-events: none;
        z-index: 99;
    }

    .drag .drag-item.drag-item--enter {
        color: transparent;
        background: rgba(0, 0, 0, 0.015) !important;
        border: 1px dashed var(--grey-light-3) !important;
    }

.layout--dark .drag .drag-item {
    border-color: var(--alpha-light-2);
}

    .layout--dark .drag .drag-item.correct {
        border: 2px solid var(--green);
    }

    .layout--dark .drag .drag-item.incorrect {
        border: 2px solid var(--red);
    }

    .layout--dark .drag .drag-item.drag-item--dragging {
        background: var(--grey-dark-4);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .layout--dark .drag .drag-item.drag-item--enter {
        background: rgba(255, 255, 255, 0.015) !important;
        border-color: var(--alpha-light-2) !important;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 2.1 General */
.form .card {
    padding: 0.3125rem 0.625rem;
}

.form .container.gutter .row > * {
    padding: 0.3125rem 0.625rem;
}

/*input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='search'],
input[type='number']*/

[contenteditable]::selection,
input::selection {
    color: #ffffff;
    background: var(--green);
}

input[type=text].correct {
    border: 2px solid var(--green);
}

input[type=text].incorrect {
    border: 2px solid var(--red);
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
    line-height: var(--line-height);
    scrollbar-color: var(--alpha-dark-2) transparent;
}

    textarea::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    textarea::-webkit-scrollbar-track {
        background: transparent;
    }

    textarea::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        textarea::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    textarea::-webkit-scrollbar-corner {
        background: transparent;
    }

    textarea.scroll--hidden {
        padding: 0;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

        textarea.scroll--hidden::-webkit-scrollbar {
            display: none; /* for Chrome, Safari, and Opera */
        }

.field {
    color: var(--grey-dark-3);
    padding: 12px 12px 10px;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    width: 100%;
    font-size: 0.875em;
}

    .field:focus::placeholder {
        color: transparent;
    }

    .field:disabled {
        background-color: var(--grey-light-2);
        opacity: 0.5;
    }

        .field:disabled ~ .btn {
            border-color: transparent;
            background: transparent;
            color: var(--grey-light-4);
            cursor: default;
        }

    .field.field--blank {
        width: auto;
    }

    .field::placeholder {
        transition: all var(--transition-duration) ease 0s;
        color: var(--grey-1);
    }

.field-group.field-group--inline {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

    .field-group.field-group--inline label {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .field-group.field-group--inline input {
        max-width: 80px;
    }

    .field-group.field-group--inline .response {
        display: none;
    }

.field-group.valid .required::after {
    color: var(--green);
}

.field-group.valid .field {
    border-bottom: 2px solid var(--green);
}

.field-group.invalid .required::after {
    color: var(--red);
}

.field-group.invalid .field {
    border-bottom: 2px solid var(--red);
}

.field-group.invalid .response {
    margin: 4px 0 0 8px;
    height: auto;
    opacity: 1;
}

.field-group label {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

    .field-group label.field-file {
        display: inline-block;
    }

.field-group .required::after {
    margin-left: 0.2em;
    content: "*";
    color: var(--green);
}

.field-group .response {
    color: var(--red);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.125em;
    opacity: 0;
    height: 0;
    transition: all var(--transition-duration) ease 0s;
}

.layout--dark .field {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background-color: var(--grey-dark-4);
}

    .layout--dark .field:focus {
        /*border-bottom-width: 2px;
  border-bottom-color: $grey-1;
  background: $grey-dark-5;*/
    }

        .layout--dark .field:focus::placeholder {
            color: transparent;
        }

    .layout--dark .field:disabled {
        opacity: 0.3;
    }

        .layout--dark .field:disabled ~ .btn {
            color: var(--grey-dark-3);
        }

    .layout--dark .field::placeholder {
        color: var(--grey-dark-1);
    }

.layout--dark textarea {
    scrollbar-color: var(--alpha-light-2) transparent;
}

    .layout--dark textarea::-webkit-scrollbar-thumb {
        background: var(--alpha-light-3);
    }

        .layout--dark textarea::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

/** 2.1.1 Radio, Checkbox, File, Switch */
.field-check,
.field-file {
    position: relative;
}

    .field-check input[type=radio],
    .field-check input[type=checkbox],
    .field-check input[type=file],
    .field-file input[type=radio],
    .field-file input[type=checkbox],
    .field-file input[type=file] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

        .field-check input[type=radio]:disabled,
        .field-check input[type=checkbox]:disabled,
        .field-check input[type=file]:disabled,
        .field-file input[type=radio]:disabled,
        .field-file input[type=checkbox]:disabled,
        .field-file input[type=file]:disabled {
            cursor: context-menu;
        }

.field-check {
    padding-left: calc(1em + 12px);
    font-weight: var(--font-weight);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
}

    .field-check input[type=radio],
    .field-check input[type=checkbox] {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
    }

        .field-check input[type=radio]:checked ~ .radiomark {
            border-color: var(--green);
        }

            .field-check input[type=radio]:checked ~ .radiomark::before {
                opacity: 1;
            }

        .field-check input[type=checkbox]:checked ~ .checkmark {
            border-color: var(--green);
            background: var(--green);
        }

            .field-check input[type=checkbox]:checked ~ .checkmark .icon {
                opacity: 1;
            }

        .field-check input[type=checkbox]:disabled ~ .checkmark {
            border-color: var(--grey-light-4);
            background: var(--alpha-dark-1);
            color: var(--alpha-dark-2);
        }

    .field-check .radiomark,
    .field-check .checkmark {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        min-height: 18px;
        min-width: 18px;
        width: 1.125em;
        height: 1.125em;
        border: 1px solid var(--grey-light-3);
        background: #ffffff;
        transition: all var(--transition-duration) ease 0s;
        pointer-events: none;
    }

    .field-check .radiomark {
        border-radius: 50%;
    }

        .field-check .radiomark::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "";
            display: block;
            width: 0.725em;
            height: 0.725em;
            border-radius: inherit;
            background: var(--green);
            opacity: 0;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-check .checkmark {
        border-radius: 4px;
        color: #ffffff;
    }

        .field-check .checkmark .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-height: 9px;
            height: 0.6em;
            opacity: 0;
        }

.success .field-check input[type=checkbox]:checked ~ .checkmark {
    color: #ffffff;
    border-color: var(--green);
    background: var(--green);
}

.error .field-check input[type=checkbox]:checked ~ .checkmark {
    color: #ffffff;
    border-color: var(--red);
    background: var(--red);
}

.layout--dark .field-check input[type=checkbox]:disabled ~ .checkmark {
    background: var(--alpha-light-1);
    border-color: var(--alpha-light-2);
    color: var(--alpha-light-2);
}

.layout--dark .field-check .radiomark,
.layout--dark .field-check .checkmark {
    background: transparent;
    border-color: var(--grey-dark-1);
}

.layout--dark .field-check .checkmark {
    color: var(--grey-dark-6);
}

/** 2.1.2 Field Checkbox */
.field-checkbox {
    position: relative;
    display: inline-block;
    font-size: 0.675rem;
    font-weight: var(--font-weight);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

    .field-checkbox input[type=radio] {
        position: absolute;
        opacity: 0;
    }

        .field-checkbox input[type=radio]:checked ~ .checkmark .icon .check {
            stroke-dashoffset: 0;
        }

    .field-checkbox .checkmark .icon,
    .field-checkbox .checkmark-readonly .icon {
        min-height: 9px;
        height: 0.6em;
    }

        .field-checkbox .checkmark .icon .check,
        .field-checkbox .checkmark-readonly .icon .check {
            transition: all var(--transition-duration) ease 0s;
            fill: none;
            stroke: currentColor;
            stroke-miterlimit: 10;
            stroke-dasharray: 25;
            stroke-width: 1.8px;
        }

        .field-checkbox .checkmark .icon .check {
            stroke-dashoffset: 25;
        }

        .field-checkbox .checkmark-readonly .icon .check {
            stroke-dashoffset: 0;
        }

    .field-checkbox > .checkmark {
        position: relative;
        display: block;
        width: 27px;
        height: 27px;
        border-radius: 4px;
        color: var(--green);
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
    }

        .field-checkbox > .checkmark .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .field-checkbox > .checkmark .icon .check {
                stroke-dashoffset: 25;
            }

/** 2.1.3 Field File */
.field-file {
    display: inline-block;
}

    .field-file input[type=file] {
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
    }

        .field-file input[type=file]:hover ~ .btn, .field-file input[type=file]:focus ~ .btn {
            color: #ffffff !important;
            background: var(--green);
            border-color: var(--green);
        }

        .field-file input[type=file]:disabled {
            display: none;
        }

            .field-file input[type=file]:disabled ~ .btn {
                color: var(--grey-light-4) !important;
                background: transparent;
                border-color: var(--grey-light-3);
                cursor: not-allowed;
            }

.layout--dark .field-file input[type=file]:disabled ~ .btn {
    opacity: 0.125;
}

.browse-file ul li {
    margin-bottom: 6px;
}

/** 2.1.4 Date, Time */
.field-date,
.field-time,
.field-url {
    position: relative;
}

    .field-date .field,
    .field-time .field,
    .field-url .field {
        letter-spacing: 0.025em;
    }

        .field-date .field:focus ~ .btn:not(:disabled),
        .field-time .field:focus ~ .btn:not(:disabled),
        .field-url .field:focus ~ .btn:not(:disabled) {
            color: #ffffff;
            background: var(--green);
        }

        .field-date .field:focus ~ .btn--clear:not(:disabled) {
            background: transparent;
        }

        .field-date .field:focus ~ .btn--clear:hover:not(:disabled) {
            background: var(--alpha-dark-2)!important;
        }

    .field-date .btn,
    .field-date .btn-calendar,
    .field-time .btn,
    .field-url .btn {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
    }

    .field-url .validation-state {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-40%);
    }

        .field-url .validation-state .spinner {
            transform-box: view-box;
            transform-origin: 8px 10px;
            animation: spinner 0.8s linear infinite;
        }

        .field-date .btn--clear {
            position: absolute;
            top: 50%;
            right: 40px;
            transform: translateY(-50%);
        }

        .field-date .btn[disabled],
        .field-time .btn[disabled],
        .field-url .btn[disabled] {
            border-width: 0;
            cursor: context-menu;
        }

.layout--dark .field-date,
.layout--dark .field-time,
.layout--dark .field-url {
    position: relative;
}

    .layout--dark .field-date .field:focus,
    .layout--dark .field-time .field:focus,
    .layout--dark .field-url .field:focus {
        border-bottom-width: 1px;
        border-bottom-color: var(--grey-dark-1);
    }

/** 2.1.5 Field Readonly  */
.field-readonly {
    display: inline-block;
    font-size: 0.875em;
}

    .field-readonly label {
        font-weight: 600;
    }

    .field-readonly input {
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        min-width: 36px;
        width: 100%;
        max-width: 60px;
        text-align: center;
    }

.layout--dark .field-readonly input {
    border-color: var(--alpha-light-2);
    background: var(--grey-dark-4);
}

/** 2.1.6 Field Renge*/
.field-range.range--drag .range-slider .range-slider-track .range-slider-track-value {
    transition: none;
}

.field-range label {
    font-size: 0.875rem;
}

.field-range .range {
    margin-top: -4px;
    display: flex;
    align-items: center;
}

    .field-range .range:hover .range-inputs .range-input, .field-range .range:focus .range-inputs .range-input {
        border-color: var(--green);
    }

.field-range .range-inputs {
    margin-left: 10px;
}

    .field-range .range-inputs .range-input {
        padding: 4px;
        width: 44px;
        color: var(--grey-3);
        font-size: 0.875rem;
        text-align: center;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-range .range-inputs .range-input:focus {
            border-color: var(--green);
        }

    .field-range .range-inputs [type=range] {
        display: none;
    }

.field-range .range-slider {
    position: relative;
    height: 30px;
    min-width: 100px;
    width: 100%;
    flex: 1 1 100px;
    cursor: pointer;
}

    .field-range .range-slider .range-slider-track {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 1px;
        width: 100%;
        background: var(--alpha-dark-2);
    }

        .field-range .range-slider .range-slider-track .range-slider-track-value {
            position: relative;
            height: 100%;
            width: 30%;
            background: var(--green);
            transition: all var(--transition-duration) ease 0s;
        }

    .field-range .range-slider .range-slider-btn {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 26px;
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
    }

        .field-range .range-slider .range-slider-btn:hover::before, .field-range .range-slider .range-slider-btn:focus::before {
            transform: translate(-50%, -50%) scale(1.2);
        }

        .field-range .range-slider .range-slider-btn::before, .field-range .range-slider .range-slider-btn::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .field-range .range-slider .range-slider-btn::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
            border: 2px solid var(--green);
            border-radius: inherit;
            transition: all var(--transition-duration) ease 0s;
        }

        .field-range .range-slider .range-slider-btn::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: var(--green);
            border-radius: inherit;
        }

        .field-range .range-slider .range-slider-btn.range-slider-btn--max {
            left: initial;
            right: 0;
            transform: translate(50%, -50%);
        }

.layout--light .field-range .range-slider .range-slider-btn {
    background: var(--grey-light-1);
}

.layout--dark .field-range .range-inputs .range-input {
    color: var(--grey-1);
    border-color: var(--alpha-light-2);
    background: transparent;
}

    .layout--dark .field-range .range-inputs .range-input:focus {
        border-color: var(--green);
    }

.layout--dark .field-range .range-slider .range-slider-track {
    background: var(--alpha-light-2);
}

.layout--dark .field-range .range-slider .range-slider-btn {
    background: var(--grey-dark-4);
}

/** 2.1.7 Field Letter */
.field-letter {
    position: relative;
    padding-left: 2.25rem;
    font-weight: 400;
    line-height: 2;
    white-space: nowrap;
    cursor: default;
}

    .field-letter .lettermark,
    .field-letter input {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .field-letter input {
        opacity: 0;
        z-index: 1;
    }

        .field-letter input:not([disabled]) {
            cursor: pointer;
        }

        .field-letter input:hover:not([disabled]) ~ .lettermark, .field-letter input:focus:not([disabled]) ~ .lettermark {
            color: var(--green);
            border-color: var(--green);
        }

        .field-letter input:hover:not([disabled]):checked ~ .lettermark, .field-letter input:focus:not([disabled]):checked ~ .lettermark {
            color: #ffffff;
        }

        .field-letter input:checked:hover ~ .lettermark, .field-letter input:checked:focus ~ .lettermark, .field-letter input.checked:hover ~ .lettermark, .field-letter input.checked:focus ~ .lettermark {
            color: #ffffff;
        }

        .field-letter input:checked ~ .lettermark, .field-letter input.checked ~ .lettermark {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-letter .lettermark {
        font-weight: 600;
        border: 1px solid var(--grey-1);
        transition: all var(--transition-duration) ease 0s;
    }

        .field-letter .lettermark > * {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

.error .field-letter input:hover:not([disabled]) ~ .lettermark, .error .field-letter input:focus:not([disabled]) ~ .lettermark {
    color: var(--red);
    border-color: var(--red);
}

.error .field-letter input:checked:hover ~ .lettermark, .error .field-letter input:checked:focus ~ .lettermark, .error .field-letter input.checked:hover ~ .lettermark, .error .field-letter input.checked:focus ~ .lettermark {
    color: #ffffff;
}

.error .field-letter input:checked ~ .lettermark, .error .field-letter input.checked ~ .lettermark {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
}

.success .field-letter input:hover:not([disabled]) ~ .lettermark, .success .field-letter input:focus:not([disabled]) ~ .lettermark {
    color: var(--green);
    border-color: var(--green);
}

.success .field-letter input:checked:hover ~ .lettermark, .success .field-letter input:checked:focus ~ .lettermark, .success .field-letter input.checked:hover ~ .lettermark, .success .field-letter input.checked:focus ~ .lettermark {
    color: #ffffff;
}

.success .field-letter input:checked ~ .lettermark, .success .field-letter input.checked ~ .lettermark {
    color: #ffffff;
    background: var(--green);
    border-color: var(--green);
}

/** 2.1.8 Field True False */
.field-true-false {
    display: flex;
    align-items: center;
}

    .field-true-false .slash-sep {
        font-size: 1.25em;
        margin: 4px;
    }

    .field-true-false .field-letter {
        padding: 0;
    }

        .field-true-false .field-letter .lettermark {
            position: relative;
            display: block;
        }

/** 2.1.9 Field Evaluate */
.field-evaluate {
    position: relative;
    padding-left: 0.25rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: default;
    margin-bottom: 0;
    line-height: 0;
}

    .field-evaluate.success-color input:hover:not([disabled]) ~ .mark, .field-evaluate.success-color input:focus:not([disabled]) ~ .mark {
        border-color: var(--green);
    }

    .field-evaluate.success-color input:checked ~ .mark {
        color: #ffffff;
        background: var(--green);
        border-color: var(--green);
    }

    .field-evaluate.error-color input:hover:not([disabled]) ~ .mark, .field-evaluate.error-color input:focus:not([disabled]) ~ .mark {
        border-color: var(--red);
    }

    .field-evaluate.error-color input:checked ~ .mark {
        color: #ffffff;
        background: var(--red);
        border-color: var(--red);
    }

    .field-evaluate .mark,
    .field-evaluate input {
        border-radius: 50%;
    }

    .field-evaluate input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        cursor: pointer;
    }

        .field-evaluate input:checked ~ .mark {
            color: #ffffff;
            background: var(--green);
            border-color: var(--green);
        }

    .field-evaluate .mark {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
        font-weight: 600;
        border: 1px solid transparent;
        transition: all var(--transition-duration) ease 0s;
    }

        .field-evaluate .mark > * {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.125em;
            line-height: 0;
        }

/** 2.1.10 Input Blank */
.input-blank {
    display: inline-block;
    padding: 0 4px;
    color: var(--green);
    background: transparent;
    border-bottom: 1px solid var(--green);
    outline: 0;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 13.11 Scroll */
.scroll {
    width: 100%;
    height: 100%;
    padding: 0 4px;
    overflow: auto;
    scrollbar-color: var(--alpha-dark-2) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
    /* Hide scrollbar but allow scrolling */
}

    .scroll::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll::-webkit-scrollbar-thumb {
        background: var(--alpha-dark-2);
    }

        .scroll::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    .scroll::-webkit-scrollbar-corner {
        background: transparent;
    }

    .scroll.scroll--hidden {
        padding: 0;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

        .scroll.scroll--hidden::-webkit-scrollbar {
            display: none; /* for Chrome, Safari, and Opera */
        }

.layout--dark .scroll {
    scrollbar-color: var(--alpha-light-2) transparent;
}

    .layout--dark .scroll::-webkit-scrollbar-thumb {
        background: var(--alpha-light-3);
    }

        .layout--dark .scroll::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

/** Modifiers */
.shadow-edge-left,
.shadow-edge-right {
    position: relative;
    overflow: hidden;
}

    .shadow-edge-left::before, .shadow-edge-left::after,
    .shadow-edge-right::before,
    .shadow-edge-right::after {
        position: absolute;
        top: 0;
        height: 100%;
        width: 1px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    }

    .shadow-edge-left::before {
        content: "";
        left: -1px;
    }

    .shadow-edge-right::after {
        content: "";
        right: -1px;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 9.1 Sidebar */
.sidebar {
    max-width: 240px;
    height: 100%;
}

    .sidebar.sidebar--left {
        position: absolute;
        top: 0;
        left: 0;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 13.7 Window */
.window {
    width: 100%;
    height: 100%;
}

    .window.window--maximize {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;
        z-index: 9999;
        overflow: auto;
        scroll-behavior: smooth;
    }

        .window.window--maximize .window-header,
        .window.window--maximize .window-body {
            border-radius: 0 !important;
            border: none !important;
        }

        .window.window--maximize .window-instruction-materials > .card,
        .window.window--maximize .window-notes > .card,
        .window.window--maximize .window-practice-and-review > .card,
        .window.window--maximize .window-side-by-side > .card {
            border-radius: 0 !important;
            border: none;
            height: auto;
            min-height: 100%;
        }

        .window.window--maximize .icon-maximize {
            height: 0 !important;
            border-width: 1px;
            border-style: solid;
        }

    .window.window--instruction-materials .window-instruction-materials {
        display: block;
    }

    .window.window--notes .window-notes {
        display: block;
    }

    .window.window--practice-and-review .window-practice-and-review {
        display: block;
    }

    .window.window--side-by-side .window-side-by-side {
        display: block;
    }

    .window [data-window-btn][data-view=maximize] .icon {
        display: none;
    }

        .window [data-window-btn][data-view=maximize] .icon.maximize {
            display: block;
        }

    .window [data-window-btn][data-view=minimize] .icon {
        display: none;
    }

        .window [data-window-btn][data-view=minimize] .icon.minimize {
            display: block;
        }

    .window .window-instruction-materials,
    .window .window-notes,
    .window .window-practice-and-review,
    .window .window-side-by-side {
        display: none;
        height: 100%;
    }

        .window .window-instruction-materials > .card,
        .window .window-notes > .card,
        .window .window-practice-and-review > .card,
        .window .window-side-by-side > .card {
            padding: 0;
        }

    .window .window-header {
        position: sticky;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: var(--grey-light-1);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        z-index: 9;
    }

        .window .window-header .window-header-nav {
            display: flex;
        }

            .window .window-header .window-header-nav > * {
                margin: 0 5px;
            }

        .window .window-header .window-header-controls {
            line-height: 0;
        }

            .window .window-header .window-header-controls > * {
                font-size: 12px;
                margin: 0 -4px;
            }

        .window .window-header .heading {
            line-height: 1.2;
        }

            .window .window-header .heading .heading-icon {
                margin-right: 10px;
                width: 1.875em;
                height: 1.875em;
                color: var(--green);
                background: transparent;
            }

                .window .window-header .heading .heading-icon .icon {
                    height: 100%;
                    width: auto;
                    max-width: 100%;
                }

    .window .window-body {
        padding: 10px;
    }

        .window .window-body.window-body--dark {
            border-color: var(--grey-dark-4);
            background: var(--grey-dark-4);
        }

        .window .window-body .container {
            max-width: 979px;
        }

    .window .window-document {
        margin: 20px 0;
    }

        .window .window-document .window-document-page.card-inner {
            padding: 30px;
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        }

        .window .window-document .table-of-contents {
            position: sticky;
            top: 80px;
        }

    .window .card {
        min-height: 100%;
        border-radius: 4px;
    }

    .window .card-inner {
        border-radius: 4px;
    }

    .window .layout--light.card {
        display: flex;
        flex-direction: column;
        border: none;
        background: var(--grey-light-2);
    }

    .window .layout--light .window-header {
        border: 1px solid var(--grey-light-3);
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }

        .window .layout--light .window-header.layout--dark {
            border-color: var(--grey-light-3);
        }

            .window .layout--light .window-header.layout--dark .label--meta {
                color: #717171;
            }

    .window .layout--light .window-body {
        flex: 1 1 auto;
        border: 1px solid var(--grey-light-3);
        border-top: none;
        border-radius: 0 0 4px 4px;
    }

    .window .layout--dark.window-header,
    .window .layout--dark .window-header {
        background: var(--grey-dark-3);
    }

/** 13.7.1 Window Side by Side */
.window-side-by-side .side-by-side {
    margin: 0 auto;
    max-width: 1600px;
    min-height: 600px;
    height: calc(100vh - 300px);
}

.window.window--maximize .window-side-by-side .side-by-side {
    margin: 30px auto 0;
    height: calc(100vh - 140px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* -----------
# LAYOUTS
----------- */
/* 7. TABLE  */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1 General */
.table {
    width: 100%;
    font-size: 0.875rem;
}

    .table th, .table td {
        position: relative;
        vertical-align: inherit;
    }

    .table th {
        background: var(--alpha-dark-1);
    }

    .table [rowspan] {
        padding: 10px;
        vertical-align: top;
    }

    .table .tr--active .check {
        color: var(--green);
    }

    .table .tr--highlight th {
        background: var(--alpha-dark-2);
    }

    .table .tr--highlight td {
        background: var(--alpha-dark-1);
    }

    .table .tr--thin > * {
        padding-top: 4px;
        padding-bottom: 4px;
        height: auto;
    }

    .table .tr--layout {
        padding: 0;
        height: 0;
    }

        .table .tr--layout th, .table .tr--layout td {
            padding: 0;
            height: 0;
            border: 0;
        }

    .table .tr--link,
    .table .td--link {
        cursor: pointer;
        transition: all var(--transition-duration) ease 0s;
    }

        .table .tr--link:hover, .table .tr--link:focus, .table .tr--link:active,
        .table .td--link:hover,
        .table .td--link:focus,
        .table .td--link:active {
            background-color: var(--alpha-dark-1);
        }

    .table .tr--disabled {
        color: var(--grey-1);
        cursor: default;
        pointer-events: none;
    }

    .table .th--sticky {
        position: sticky;
        z-index: 2;
        background: var(--grey-light-1);
    }

        .table .th--sticky::before, .table .th--sticky::after {
            content: "";
            position: absolute;
            display: block;
        }

        .table .th--sticky.th--sticky-top {
            top: 0;
        }

            .table .th--sticky.th--sticky-top::before, .table .th--sticky.th--sticky-top::after {
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom-width: inherit;
                border-bottom-style: inherit;
                border-bottom-color: inherit;
            }

            .table .th--sticky.th--sticky-top::before {
                height: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-top::after {
                height: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-left {
            left: 0;
        }

            .table .th--sticky.th--sticky-left::before, .table .th--sticky.th--sticky-left::after {
                right: -1px;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-left::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-left::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-right {
            right: 0;
        }

            .table .th--sticky.th--sticky-right::before, .table .th--sticky.th--sticky-right::after {
                left: 0;
                top: 0;
                height: 100%;
                border-right-width: inherit;
                border-right-style: inherit;
                border-right-color: inherit;
            }

            .table .th--sticky.th--sticky-right::before {
                width: 1px;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            }

            .table .th--sticky.th--sticky-right::after {
                width: 4px;
                background: inherit;
            }

        .table .th--sticky.th--sticky-top-left, .table .th--sticky.th--sticky-top-right {
            top: 0;
            z-index: 4;
        }

            .table .th--sticky.th--sticky-top-left > *, .table .th--sticky.th--sticky-top-right > * {
                position: relative;
                z-index: 1;
            }

            .table .th--sticky.th--sticky-top-left::before, .table .th--sticky.th--sticky-top-left::after, .table .th--sticky.th--sticky-top-right::before, .table .th--sticky.th--sticky-top-right::after {
                filter: blur(1px);
                background: rgba(0, 0, 0, 0.15);
            }

            .table .th--sticky.th--sticky-top-left::before, .table .th--sticky.th--sticky-top-right::before {
                top: 0;
                height: 100%;
                width: 1px;
            }

            .table .th--sticky.th--sticky-top-left::after, .table .th--sticky.th--sticky-top-right::after {
                bottom: -2px;
                left: 0;
                height: 1px;
                width: 100%;
            }

        .table .th--sticky.th--sticky-top-left {
            left: 0;
        }

            .table .th--sticky.th--sticky-top-left::before {
                left: 100%;
            }

        .table .th--sticky.th--sticky-top-right {
            right: 0;
        }

            .table .th--sticky.th--sticky-top-right::before {
                right: 100%;
            }

    .table .th--scroll-border-fix {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + (2 * 1px));
        height: calc(100% + (2 * 1px));
        border: inherit;
    }

    .table .th--highlight {
        color: var(--green);
        background: #f4fcf9;
        border: 1px solid #a8d7c4;
        z-index: 2;
    }

        .table .th--highlight > * {
            color: inherit !important;
        }

    .table .th--clean {
        padding: 0;
        border: none;
        background: transparent;
    }

        .table .th--clean.th--sticky::before, .table .th--clean.th--sticky::after {
            content: none;
        }

    .table .td--icon .icon {
        width: 10px;
    }

    .table .td--sticky {
        position: sticky;
        z-index: 2;
    }

        .table .td--sticky.td--sticky-left {
            left: 0;
        }

        .table .td--sticky.td--sticky-right {
            right: 0;
        }

    .table .td--pseudo-border {
        position: relative;
    }

        .table .td--pseudo-border::before, .table .td--pseudo-border::after {
            position: absolute;
            content: "";
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

        .table .td--pseudo-border::before {
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
        }

        .table .td--pseudo-border::after {
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
        }

    .table .table--cell-spacer {
        width: 100%;
        background: transparent;
        border: none;
    }

        .table .table--cell-spacer::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            box-shadow: none;
            border: none;
            background: var(--grey-light-3);
        }

    .table .table--cell-pattern {
        position: relative;
    }

        .table .table--cell-pattern.th--sticky {
            position: sticky;
            background: transparent !important;
        }

            .table .table--cell-pattern.th--sticky .pattern {
                left: 0;
                width: 100%;
                height: 100%;
            }

            .table .table--cell-pattern.th--sticky::before, .table .table--cell-pattern.th--sticky::after {
                content: none;
            }

        .table .table--cell-pattern .pattern {
            position: absolute;
            top: -1px;
            left: -1px;
            width: calc(100% + (2 * 1px));
            height: calc(100% + (2 * 1px));
            background-repeat: repeat;
            background-size: 45px;
            background-color: #ffffff;
        }

    .table .th--weekend {
        background: var(--grey-light-1) !important;
    }

    .table .td--weekend {
        background: rgba(0, 0, 0, 0.025) !important;
    }

        .table .td--weekend .pattern {
            background-color: #ffffff;
        }

    .table .tr--weekend th .pattern, .table .tr--weekend td .pattern {
        background-color: var(--alpha-dark-1);
    }

    .table .tr--weekend th {
        background: #efefef !important;
    }

    .table .tr--weekend td {
        background-color: rgba(0, 0, 0, 0.025) !important;
    }

    .table .check {
        text-align: center;
        padding: 0 8px;
    }

        .table .check .icon {
            width: 12px;
        }

.layout--light .table th {
    background: var(--alpha-light-1);
}

.layout--dark .table .tr--link:hover, .layout--dark .table .tr--link:focus, .layout--dark .table .tr--link:active,
.layout--dark .table .td--link:hover,
.layout--dark .table .td--link:focus,
.layout--dark .table .td--link:active {
    background-color: rgba(255, 255, 255, 0.025);
}

.layout--dark .table .th--sticky {
    background: var(--grey-dark-3);
}

    .layout--dark .table .th--sticky.th--sticky-top::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .layout--dark .table .th--sticky.th--sticky-top-left::before {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

.layout--dark .table .th--highlight {
    background: #272f2c;
    border-color: var(--alpha-green-3);
}

.layout--dark .table .th--weekend {
    background: #2c2c2c !important;
}

.layout--dark .table .td--weekend {
    background: rgba(255, 255, 255, 0.015) !important;
}

    .layout--dark .table .td--weekend .pattern {
        background-color: #212121;
    }

.layout--dark .table .td--pseudo-border::before, .layout--dark .table .td--pseudo-border::after {
    background: var(--grey-dark-4);
}

.layout--dark .table .table--cell-spacer::after {
    background: var(--grey-dark-4);
    opacity: 0.5;
}

.layout--dark .table .table--cell-pattern .pattern {
    background-color: var(--grey-dark-6);
}

.layout--dark .tr--weekend th .pattern, .layout--dark .tr--weekend td .pattern {
    background-color: #212121;
}

.layout--dark .tr--weekend th {
    background: #363636 !important;
}

.layout--dark .tr--weekend td {
    background: rgba(255, 255, 255, 0.025) !important;
}

/** 7.7 Table Wrapper */
.table-wrapper.table-wrapper--flex {
    display: flex;
    flex-direction: column;
}

    .table-wrapper.table-wrapper--flex .table-wrapper-card {
        display: flex;
        flex-direction: column;
        max-height: 100%;
    }

    .table-wrapper.table-wrapper--flex .table-wrapper-body {
        flex: 0 1 auto;
        min-height: 0;
    }

.table-wrapper.table-wrapper--card .table-wrapper-card {
    padding: 10px;
    border: 1px solid var(--grey-light-3);
    background: rgba(0, 0, 0, 0.025);
    border-radius: 4px;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .card {
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.025);
    border: none;
}

.table-wrapper.table-wrapper-body--card .table-wrapper-body .scroll {
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.table-wrapper .table-wrapper-header {
    /*&:not(:empty) {
      margin-bottom: 1rem;
  }*/
}

    .table-wrapper .table-wrapper-header .title {
        margin-bottom: 0;
    }

    .table-wrapper .table-wrapper-header > .title,
    .table-wrapper .table-wrapper-header > * {
        margin-bottom: 10px;
    }

    .table-wrapper .table-wrapper-header[data-view] .context-options {
        display: none;
    }

    .table-wrapper .table-wrapper-header[data-view=context-options] .context-options {
        display: block;
    }

        .table-wrapper .table-wrapper-header[data-view=context-options] .context-options + * {
            margin-left: 10px;
        }

    .table-wrapper .table-wrapper-header .row {
        align-items: center;
    }

        .table-wrapper .table-wrapper-header .row > * {
            width: auto;
            flex: 1 1 auto;
        }

    .table-wrapper .table-wrapper-header .field-menu {
        min-width: 160px;
    }

    .table-wrapper .table-wrapper-header .search {
        max-width: 100%;
        width: 320px;
    }

.table-wrapper .table-wrapper-body[data-view] .table-empty {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr td,
.table-wrapper .table-wrapper-body[data-view=table-empty] .table tr th {
    border-bottom: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-left::after, .table-wrapper .table-wrapper-body[data-view=table-empty] .th--sticky.th--sticky-top-right::after {
    content: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .table-empty {
    display: block;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] ~ .table-wrapper-footer {
    display: none;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] .card {
    height: auto;
}

.table-wrapper .table-wrapper-body .card,
.table-wrapper .table-wrapper-body .scroll {
    padding: 0;
    border-radius: 0;
}

.table-wrapper .table-wrapper-body .card {
    background: #ffffff;
    height: 100%;
}

.table-wrapper .table-wrapper-footer {
    /*&:not(:empty) {
      padding: 10px 0;
  }*/
}

    .table-wrapper .table-wrapper-footer > * {
        padding: 10px 0 0;
    }

.table-wrapper .table thead tr {
    background: var(--grey-light-1);
}

.table-wrapper .table thead th {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /*cursor: pointer;

  &:hover {
      background: #f0f0f0;
  }*/
}

.table-wrapper .table tbody tr:last-child th,
.table-wrapper .table tbody tr:last-child td {
    border-bottom: none;
}

.table-wrapper .table tr:hover .td--row-menu.td--sticky {
    z-index: 6;
}

.table-wrapper .table tr > *:first-child, .table-wrapper .table tr > *:last-child {
    min-width: 40px;
}

.table-wrapper .table th,
.table-wrapper .table td {
    border-bottom: 1px solid var(--grey-light-3);
    text-align: left;
    height: 44px;
    padding: 5px 12px;
}

.table-wrapper .table th {
    color: var(--grey-3);
    background: var(--grey-light-1);
}

.table-wrapper .table [rowspan] {
    padding: 10px;
}

.table-wrapper .table .tr--nowrap > * {
    white-space: nowrap;
}

.table-wrapper .table .tr--link .td--sticky {
    transition: all var(--transition-duration) ease 0s;
}

.table-wrapper .table .tr--link:hover .td--sticky {
    background: #f2f2f2;
}

.table-wrapper .table .th--sticky.th--sticky-top, .table-wrapper .table .th--sticky.th--sticky-top-left, .table-wrapper .table .th--sticky.th--sticky-top-right {
    border-bottom: none;
}

    .table-wrapper .table .th--sticky.th--sticky-top::before, .table-wrapper .table .th--sticky.th--sticky-top-left::before, .table-wrapper .table .th--sticky.th--sticky-top-right::before {
        content: none;
    }

    .table-wrapper .table .th--sticky.th--sticky-top::after, .table-wrapper .table .th--sticky.th--sticky-top-left::after, .table-wrapper .table .th--sticky.th--sticky-top-right::after {
        height: 1px;
        bottom: 0px;
        background: var(--grey-light-3);
        filter: none;
        box-shadow: none;
    }

.table-wrapper .table .th--sticky.th--sticky-top {
    z-index: 4;
}

.table-wrapper .table .th--sticky.th--sticky-top-left, .table-wrapper .table .th--sticky.th--sticky-top-right {
    z-index: 5;
}

.table-wrapper .table .th--highlight {
    color: var(--green);
    background: #f4fcf9;
    border: none;
}

    .table-wrapper .table .th--highlight::before {
        width: 100%;
        height: 100%;
        background: transparent;
    }

.table-wrapper .table .th--active {
    color: var(--green);
}

    .table-wrapper .table .th--active.th--sort .sort {
        opacity: 1;
    }

.table-wrapper .table .th--sort {
    padding: 5px 20px 5px 12px;
    transition: all var(--transition-duration) ease 0s;
    cursor: pointer;
}

    .table-wrapper .table .th--sort:hover {
        background: #f0f0f0;
    }

        .table-wrapper .table .th--sort:hover .sort {
            opacity: 1;
        }

    .table-wrapper .table .th--sort.sort--top .icon .sort-bottom {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort.sort--bottom .icon .sort-top {
        opacity: 0.5;
    }

    .table-wrapper .table .th--sort .sort {
        position: absolute;
        width: 6px;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

.table-wrapper .table .th--check {
    cursor: pointer;
}

    .table-wrapper .table .th--check:hover {
        background: #f0f0f0;
    }

.table-wrapper .table .td--sticky {
    background: #ffffff;
}

.table-wrapper .table .td--row-menu .menu {
    position: absolute;
    top: 10px;
    right: 4px;
}

    .table-wrapper .table .td--row-menu .menu .btn .icon {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.table-wrapper .table .field-check {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .table-wrapper .table .field-check .checkmark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.table-wrapper .table-empty {
    padding: 30px;
    text-align: center;
}

.layout--light .table-wrapper .table .th--sort:hover {
    background: #eaeaea;
}

.layout--dark .table-wrapper {
    border-color: var(--alpha-light-2);
}

    .layout--dark .table-wrapper.table-wrapper--card .table-wrapper-card {
        background: rgba(255, 255, 255, 0.025);
        border-color: var(--alpha-light-1);
    }

        .layout--dark .table-wrapper.table-wrapper--card .table-wrapper-card .scroll {
            box-shadow: none;
        }

    .layout--dark .table-wrapper.table-wrapper--card .card {
        background: rgba(255, 255, 255, 0.025);
    }

    .layout--dark .table-wrapper.table-wrapper--card .scroll {
        background: var(--grey-dark-4);
        border-color: var(--alpha-light-2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    .layout--dark .table-wrapper .table {
        /*thead {
      th {
          &:hover {
              background: #383838;
          }
      }
  }*/
    }

        .layout--dark .table-wrapper .table th,
        .layout--dark .table-wrapper .table td {
            border-bottom-color: var(--alpha-light-2);
        }

        .layout--dark .table-wrapper .table .tr--link:hover .td--sticky {
            background: #2c2c2c;
        }

        .layout--dark .table-wrapper .table .th--check:hover {
            background: #383838;
        }

        .layout--dark .table-wrapper .table .th--sticky.th--sticky-top::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-left::after, .layout--dark .table-wrapper .table .th--sticky.th--sticky-top-right::after {
            background: var(--alpha-light-2);
        }

        .layout--dark .table-wrapper .table .td--sticky {
            background: var(--grey-dark-4);
        }

        .layout--dark .table-wrapper .table .th--sort:hover {
            background: #383838;
        }

    .layout--dark .table-wrapper .card {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-4);
    }

.layout--dark .card {
    background: var(--grey-dark-4);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1.2 Table Classes Viewer */
.table-classes-viewer {
    position: relative;
}

    .table-classes-viewer.h-scrollable .card {
        border-bottom: 1px solid var(--grey-light-3);
    }

    .table-classes-viewer.h-scrollable .layout--dark .scroll {
        scrollbar-color: var(--alpha-light-2) transparent;
    }

        .table-classes-viewer.h-scrollable .layout--dark .scroll::-webkit-scrollbar-thumb {
            background: var(--alpha-light-3);
        }

            .table-classes-viewer.h-scrollable .layout--dark .scroll::-webkit-scrollbar-thumb:hover {
                background: var(--green);
            }

    .table-classes-viewer .card {
        padding: 0;
        border-bottom: none;
        border-top: none;
        overflow: hidden;
    }

    .table-classes-viewer .scroll {
        padding: 0;
    }

        .table-classes-viewer .scroll > .btn {
            position: absolute;
            top: 50%;
            z-index: 6;
            color: var(--green);
            background: var(--alpha-green-2);
            border: none;
        }

            .table-classes-viewer .scroll > .btn.prev {
                left: 162px;
            }

            .table-classes-viewer .scroll > .btn.next {
                right: 20px;
            }

            .table-classes-viewer .scroll > .btn:hover, .table-classes-viewer .scroll > .btn:focus, .table-classes-viewer .scroll > .btn.active {
                color: #ffffff;
                background: var(--green);
            }

.table--classes-viewer {
    line-height: 1.2;
    table-layout: fixed;
    text-align: center;
}

    .table--classes-viewer:not(.table--colspan) td:nth-of-type(7n), .table--classes-viewer:not(.table--colspan) td:nth-of-type(7n+1) {
        background: rgba(0, 0, 0, 0.025);
    }

    .table--classes-viewer thead th:first-child {
        background: var(--grey-light-2);
        text-align: left;
    }

    .table--classes-viewer tbody th {
        text-align: left;
    }

    .table--classes-viewer tr {
        height: 41px;
    }

    .table--classes-viewer th, .table--classes-viewer td {
        width: 66px;
        padding: 0 4px;
    }

    .table--classes-viewer th {
        border: 1px solid var(--grey-light-3);
    }

        .table--classes-viewer th:first-child {
            width: 142px;
        }

    .table--classes-viewer td {
        vertical-align: middle;
        border: 1px solid var(--alpha-dark-1);
    }

    .table--classes-viewer .label {
        color: var(--grey-1);
    }

    .table--classes-viewer h6 {
        color: var(--grey-3);
    }

.layout--dark .table-classes-viewer.h-scrollable .card {
    border-color: var(--alpha-light-1);
}

.layout--dark .table--classes-viewer:not(.table--colspan) td:nth-of-type(7n), .layout--dark .table--classes-viewer:not(.table--colspan) td:nth-of-type(7n+1) {
    background: rgba(255, 255, 255, 0.025);
}

.layout--dark .table--classes-viewer thead th:first-child {
    background: var(--grey-dark-2);
}

.layout--dark .table--classes-viewer th {
    border: 1px solid var(--grey-dark-2);
}

.layout--dark .table--classes-viewer td {
    border: 1px solid var(--alpha-light-1);
}

.layout--dark .table--classes-viewer .label {
    color: #717171;
}

.layout--dark .table--classes-viewer h6 {
    color: var(--grey-light-4);
    font-weight: 400;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.table-wrapper.table-wrapper--list .table-wrapper-footer, .table-wrapper.table-wrapper--list-rounded .table-wrapper-footer {
    border-top: 1px solid var(--grey-light-3);
}

.table-wrapper.table-wrapper--list .table-wrapper-header,
.table-wrapper.table-wrapper--list .table-wrapper-footer {
    padding: 0 12px;
}

.table-wrapper.table-wrapper--list-rounded .table-wrapper-header,
.table-wrapper.table-wrapper--list-rounded .table-wrapper-footer {
    margin: 0 20px;
}

.table-wrapper .table-wrapper-body[data-view=table-empty] tbody {
    display: none;
}

.table-wrapper .table.table--list .th--sticky {
    background: #ffffff;
}

.table-wrapper .table.table--list th,
.table-wrapper .table.table--list td {
    border-bottom: none;
}

.table-wrapper .table.table--list-rounded .th--sticky::before {
    content: none !important;
}

.table-wrapper .table.table--list-rounded .th--sticky::after {
    content: "" !important;
}

.layout--light .table-wrapper .table.table--list .th--sticky {
    background: var(--grey-light-1);
}

.layout--dark .table-wrapper.table-wrapper--list .table-wrapper-footer, .layout--dark .table-wrapper.table-wrapper--list-rounded .table-wrapper-footer {
    border-color: var(--alpha-light-2);
}

.layout--dark .table-wrapper .table.table--list .th--sticky {
    background: var(--grey-dark-4);
}

/** 7.6 Table List */
.table--list {
    color: var(--grey-3);
}

    .table--list.table--list-rounded .tr--active td::before {
        content: none;
    }

    .table--list.table--list-rounded .tr--active td:first-child {
        border-radius: 30px 0 0 30px;
    }

        .table--list.table--list-rounded .tr--active td:first-child::after {
            left: auto;
            right: 0;
            width: calc(100% - 15px);
        }

    .table--list.table--list-rounded .tr--active td:last-child {
        border-radius: 0 30px 30px 0;
    }

        .table--list.table--list-rounded .tr--active td:last-child::after {
            width: calc(100% - 15px);
        }

    .table--list.table--list-rounded .th--sticky:first-child::before, .table--list.table--list-rounded .th--sticky:first-child::after {
        left: auto;
        right: 0;
        width: calc(100% - 18px);
    }

    .table--list.table--list-rounded .th--sticky:last-child::before, .table--list.table--list-rounded .th--sticky:last-child::after {
        width: calc(100% - 18px);
    }

    .table--list.table--list-rounded .th--sticky.th--sticky-top::after {
        content: "";
        height: 1px;
        box-shadow: none;
    }

    .table--list.table--list-rounded thead tr,
    .table--list.table--list-rounded tbody tr {
        border: none;
    }

    .table--list.table--list-rounded tbody:last-child td::before {
        content: none;
    }

    .table--list.table--list-rounded tbody td {
        position: relative;
    }

        .table--list.table--list-rounded tbody td:first-child {
            border-radius: 30px 0 0 30px;
        }

            .table--list.table--list-rounded tbody td:first-child::before {
                left: auto;
                right: 0;
                width: calc(100% - 18px);
            }

        .table--list.table--list-rounded tbody td:last-child {
            border-radius: 0 30px 30px 0;
        }

            .table--list.table--list-rounded tbody td:last-child::before {
                width: calc(100% - 18px);
            }

        .table--list.table--list-rounded tbody td::before {
            box-sizing: border-box;
            content: "";
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            height: 1px;
            background: var(--alpha-dark-1);
        }

    .table--list .tr--active {
        position: relative;
        border-bottom: 0;
    }

        .table--list .tr--active td {
            background: var(--alpha-dark-1);
        }

            .table--list .tr--active td::before {
                content: none;
            }

            .table--list .tr--active td::after {
                box-sizing: border-box;
                content: "";
                position: absolute;
                left: 0;
                height: 3px;
                bottom: 0;
                width: 100%;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
            }

    .table--list .tr--disabled {
        color: var(--grey-1);
        cursor: default;
        pointer-events: none;
    }

    .table--list .tr--link.tr--active:hover, .table--list .tr--link.tr--active:focus {
        color: var(--green);
    }

    .table--list .th--sticky {
        background: #ffffff;
    }

        .table--list .th--sticky.th--sticky-top::before, .table--list .th--sticky.th--sticky-top::after {
            content: none;
        }

    .table--list tr {
        border-bottom: 1px solid var(--alpha-dark-1);
    }

    .table--list th {
        padding: 4px 8px;
        text-align: left;
    }

    .table--list td {
        padding: 8px;
    }

    .table--list thead tr {
        border-bottom: 1px solid var(--alpha-dark-2);
    }

    .table--list tbody tr {
        border-bottom: 1px solid var(--alpha-dark-1);
    }

        .table--list tbody tr:last-child {
            border: none;
        }

.layout--light .table.table--list .th--sticky {
    background: var(--grey-light-1);
}

.layout--light .table--list .tr--active td {
    background: #ffffff;
}

.layout--dark .table.table--list .th--sticky {
    background: var(--grey-dark-4);
}

.layout--dark .table--list.table--list-rounded tbody td::before {
    background: var(--alpha-light-1);
}

.layout--dark .table--list .tr--active td {
    background: var(--grey-dark-3);
}

    .layout--dark .table--list .tr--active td::after {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.06);
    }

.layout--dark .table--list .tr--disabled {
    color: var(--grey-dark-1);
    cursor: default;
    pointer-events: none;
}

.layout--dark .table--list .th--sticky.th--sticky-top::before, .layout--dark .table--list .th--sticky.th--sticky-top::after {
    background: var(--alpha-light-1);
    box-shadow: none;
}

.layout--dark .table--list thead tr {
    border-color: var(--alpha-light-2);
}

.layout--dark .table--list tbody tr {
    border-color: var(--alpha-light-1);
}


/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 7.1.1 Table Summary */
.table--summary {
    table-layout: fixed;
    vertical-align: baseline;
    width: 100%;
}

    .table--summary.table--flex .th {
        width: 58px;
        color: #616161;
        font-size: 0.75rem;
        text-transform: uppercase;
        background: var(--alpha-light-1);
    }

    .table--summary.table--flex .th, .table--summary.table--flex .td {
        padding: 4px 8px;
    }

    .table--summary th, .table--summary td {
        padding: 8px;
    }

    .table--summary tr:not(:last-child) {
        border-bottom: 1px solid #ffffff;
    }

    .table--summary th {
        width: 58px;
        flex: 0 0 58px;
        color: var(--grey-1);
        font-size: 0.75rem;
        text-transform: uppercase;
        background: var(--alpha-dark-1);
    }

    .table--summary .label {
        color: var(--grey-1);
    }

    .table--summary .tag {
        padding: 4px 8px;
        line-height: 1;
    }

.layout--dark .table--summary tr:not(:last-child) {
    border-color: var(--grey-dark-4);
}

.layout--dark .table--summary th {
    color: #616161;
    background: var(--alpha-light-1);
}

.layout--dark .table--summary .tr--highlight th {
    background: var(--alpha-light-2);
}

.layout--dark .table--summary .tr--highlight td {
    background: var(--alpha-light-1);
}

.layout--dark .table--summary .tr--link:hover, .layout--dark .table--summary .tr--link:focus, .layout--dark .table--summary .tr--link:active,
.layout--dark .table--summary .td--link:hover,
.layout--dark .table--summary .td--link:focus,
.layout--dark .table--summary .td--link:active {
    background: var(--alpha-light-1);
}

.layout--dark .table--summary .th--highlight {
    color: var(--green);
    background: var(--alpha-green-1);
}

.layout--dark .table--summary .label {
    color: #616161;
}

/* 9. MISC */
/* ---------
# VIEWS
--------- */
/** 9.3 Builder */
.builder {
    display: flex;
    height: 100%;
}

    .builder .builder-toolbar,
    .builder .builder-sidebar,
    .builder .builder-main {
        transition: all var(--transition-duration) ease 0s;
    }

    .builder:has(.builder-footer) {
        flex-wrap: wrap;
    }

        .builder:has(.builder-footer) > [class*=view-] {
            flex-wrap: wrap;
        }

        .builder:has(.builder-footer) .builder-toolbar,
        .builder:has(.builder-footer) .builder-sidebar,
        .builder:has(.builder-footer) .builder-main {
            max-height: calc(100% - 64px);
        }

    .builder:has(.builder-footer.footer--hide) .builder-toolbar,
    .builder:has(.builder-footer.footer--hide) .builder-sidebar,
    .builder:has(.builder-footer.footer--hide) .builder-main {
        max-height: 100%;
    }

    .builder > [class*=view-] {
        display: flex;
        width: 100%;
    }

    .builder[data-view] > .view1,
    .builder[data-view] > .view2 {
        display: none;
        width: 100%;
    }

    .builder[data-view=view1] > .view1 {
        display: flex;
    }

    .builder[data-view=view2] > .view2 {
        display: flex;
    }

.builder-toolbar {
    width: 64px;
    background: rgba(0, 0, 0, 0.02);
}

    .builder-toolbar .scroll {
        padding: 0;
    }

    .builder-toolbar.toolbar--left {
        border-right: 1px solid var(--grey-light-3);
    }

.builder-sidebar {
    position: relative;
    padding: 10px 6px 10px 10px;
    width: 288px;
    background: rgba(0, 0, 0, 0.02);
}

    .builder-sidebar.sidebar--left {
        border-right: 1px solid var(--grey-light-3);
    }

    .builder-sidebar.sidebar--right {
        border-left: 1px solid var(--grey-light-3);
    }

    .builder-sidebar.sidebar--update .scroll {
        padding: 0px 8px 42px 6px;
    }

    .builder-sidebar.sidebar--update .builder-sidebar-footer {
        transform: translateY(0);
        opacity: 1;
    }

    .builder-sidebar.sidebar--update .builder-options {
        margin-bottom: 52px;
    }

    .builder-sidebar .sidebar-row {
        display: flex;
    }

        .builder-sidebar .sidebar-row > *:first-child {
            padding-right: 10px;
        }

        .builder-sidebar .sidebar-row > *:last-child {
            padding-left: 10px;
        }

    .builder-sidebar .builder-sidebar-footer {
        position: absolute;
        padding: 10px;
        bottom: 0;
        transform: translateY(100%);
        opacity: 0;
        left: 0;
        width: 100%;
        border-top: 1px solid var(--grey-light-3);
        background: #ffffff;
        transition: all var(--transition-duration) ease 0s;
        z-index: 1;
    }

    .builder-sidebar .scroll {
        padding: 0px 8px 0 6px;
    }

    .builder-sidebar .flex.flex--gutter {
        margin-left: 0;
        margin-right: 0;
    }

        .builder-sidebar .flex.flex--gutter > * {
            margin-left: 0;
            margin-right: 0;
        }

    .builder-sidebar hr {
        margin: 10px 0;
    }

.builder-main {
    height: 100%;
    padding: 20px;
    flex: 1 1 auto;
    min-width: 0;
    flex-basis: 0;
}

    .builder-main[data-view=main-update] .builder-main-header .header-options {
        transform: translateX(100%);
        transition-delay: 0s;
    }

    .builder-main[data-view=main-update] .builder-main-header .main-update {
        transform: translateX(0);
        opacity: 1;
        transition-delay: 0.3s;
    }

    .builder-main .builder-main-header {
        margin-bottom: 10px;
    }

        .builder-main .builder-main-header .header-right {
            min-width: 160px;
            position: relative;
            overflow: hidden;
        }

        .builder-main .builder-main-header .header-options {
            position: relative;
            float: right;
            transition: all var(--transition-duration) ease 0s;
            transition-delay: 0.3s;
        }

        .builder-main .builder-main-header .main-update {
            position: relative;
            top: 0;
            right: 0;
            transform: translateX(100%);
            opacity: 0;
            transition: all var(--transition-duration) ease 0s;
        }

    .builder-main .builder-main-body .card-preview {
        margin-top: 10px;
    }

    .builder-main .container {
        max-width: 992px;
    }

    .builder-main > .scroll {
        padding: 0 10px;
    }

    .builder-main .card-inner {
        background: var(--grey-light-1);
        border: 1px solid var(--alpha-dark-2);
    }

.builder-footer {
    position: relative;
    width: 100%;
    padding: 15px;
    min-height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid var(--grey-light-3);
    z-index: 1;
}

    .builder-footer.footer--hide {
        top: 64px;
        opacity: 0;
        height: 0;
        padding: 0;
        min-height: 0;
        border: none;
        overflow: hidden;
        pointer-events: none;
    }

.layout--light .builder-toolbar {
    background: rgba(255, 255, 255, 0.3);
}

.layout--light .builder-sidebar {
    background: rgba(255, 255, 255, 0.3);
}

.layout--light .builder-main .card-inner {
    background: rgba(255, 255, 255, 0.3);
}

.layout--dark .builder-toolbar {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

.layout--dark .builder-sidebar {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark .builder-sidebar .builder-sidebar-footer {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-3);
    }

.layout--dark .builder-main .card-inner {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

.layout--dark .builder-footer {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 9.2 Side By Side */
.side-by-side {
    height: calc(100% - 70px);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: var(--grey-light-1);
}

    .side-by-side .side-by-side-activity {
        height: 100%;
        border-right: 1px solid var(--grey-light-3);
    }

        .side-by-side .side-by-side-activity .activity {
            padding: 15px 30px;
        }

            .side-by-side .side-by-side-activity .activity::before {
                border-radius: 4px 0 0 4px;
            }

    .side-by-side .side-by-side-checklist {
        height: 100%;
    }

        .side-by-side .side-by-side-checklist .checklist {
            padding: 15px 30px;
        }

    .side-by-side .side-by-side-activity .window-navigation {
        border-radius: 4px 0 0 4px;
    }

.layout--dark .side-by-side, .layout--dark.side-by-side {
    background: var(--grey-dark-4);
    border-color: var(--alpha-light-2);
    color: var(--grey-3);
}

    .layout--dark .side-by-side .side-by-side-activity, .layout--dark.side-by-side .side-by-side-activity {
        border-color: var(--alpha-light-2);
    }

/* 10. PAGE */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* 10.1 Page Dashboard */
.page-dashboard .dashboard-main .container.gutter {
    margin-top: -0.625rem;
    margin-bottom: -0.625rem;
}

.page-dashboard .dashboard-main .timeline-daily {
    height: 100%;
}

    .page-dashboard .dashboard-main .timeline-daily .card {
        height: calc(100% - 36px);
    }

    .page-dashboard .dashboard-main .timeline-daily .scroll {
        min-height: 553px;
        max-height: calc(100vh - 230px);
    }

.page-dashboard .dashboard-main .panel:not(:first-child) {
    margin-top: 15px;
}

/* 10.1.1 Page Dashboard Vesrion 0 */
.page-dashboard.version-0 .dashboard-main .list-classes .scroll {
    min-height: 164px;
    height: calc(100vh - 507px);
}

/* 10.1.2 Page Dashboard Vesrion MVP */
/* 10.1.3 Page Dashboard Vesrion MVP */
/* 10.1.4 Page Dashboard Vesrion MVP */
/*.page-dashboard.version-mvp .dashboard-main > .container {
    margin: 0 auto;
    padding: 0;
}

.page-dashboard.version-mvp .grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "monthly" "daily" "weekly" "classes";
}

@media all and (min-width: 992px) {
    .page-dashboard.version-mvp .grid {
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: 425px 1fr 1fr 344px;
        grid-template-areas: "weekly monthly" "daily daily" "daily daily" "classes classes";
    }
}

@media all and (min-width: 1200px) {
    .page-dashboard.version-mvp .grid {
        grid-template-columns: repeat(2, 50%);
        grid-template-areas: "daily monthly" "daily weekly" "daily weekly" "classes classes";
    }
}

@media all and (min-width: 1600px) {
    .page-dashboard.version-mvp .grid {
        grid-template-columns: repeat(3, 33.3333333%);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: "daily weekly monthly" "daily weekly classes";
        height: calc(100vh - 110px);
    }
}

.page-dashboard.version-mvp .grid .grid-item {
    padding: 10px;
}

.page-dashboard.version-mvp .grid .grid-area--monthly {
    grid-area: monthly;
}

.page-dashboard.version-mvp .grid .grid-area--weekly {
    grid-area: weekly;
}

@media all and (min-width: 1600px) {
    .page-dashboard.version-mvp .grid .grid-area--weekly {
        grid-row: weekly-start/end;
    }
}

.page-dashboard.version-mvp .grid .grid-area--daily {
    grid-area: daily;
}

.page-dashboard.version-mvp .grid .grid-area--classes {
    grid-area: classes;
}

@media all and (min-width: 1600px) {
    .page-dashboard.version-mvp .grid .grid-area--classes {
        grid-row: monthly-start/classes-end;
    }
}

.page-dashboard.version-mvp .timeline-daily {
    height: 100%;
    max-height: 720px;
}

@media all and (min-width: 1200px) {
    .page-dashboard.version-mvp .timeline-daily {
        max-height: 810px;
    }
}

@media all and (min-width: 1600px) {
    .page-dashboard.version-mvp .timeline-daily {
        max-height: initial;
    }
}

.page-dashboard.version-mvp .timeline-daily .panel-body {
    height: calc(100% - 46px);
}

.page-dashboard.version-mvp .timeline-daily .scroll {
    min-height: 553px;
    max-height: initial;
}

.page-dashboard.version-mvp .timeline-daily .timetrack {
    height: initial;
}

.page-dashboard.version-mvp .weekly-in-classes {
    height: 100%;
}

@media all and (min-width: 1200px) {
    .page-dashboard.version-mvp .weekly-in-classes {
        max-height: 388px;
    }
}

@media all and (min-width: 1600px) {
    .page-dashboard.version-mvp .weekly-in-classes {
        max-height: initial;
    }
}

.page-dashboard.version-mvp .weekly-in-classes .panel-body {
    height: 100%;
}

.page-dashboard.version-mvp .weekly-in-classes > .card {
    height: calc(100% - 36px);
}

.page-dashboard.version-mvp .list-classes {
    height: 100%;
}

@media all and (min-width: 1600px) {
    .page-dashboard.version-mvp .list-classes {
        margin-top: 420px;
        height: initial;
        max-height: initial;
    }
}

.page-dashboard.version-mvp .list-classes .panel-body {
    height: 100%;
}

.page-dashboard.version-mvp .list-classes > .card {
    height: calc(100% - 36px);
}

@media all and (min-width: 1600px) {
    .page-dashboard.version-mvp .list-classes > .card {
        height: calc(100vh - 586px);
        min-height: 288px;
    }
}*/

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* 10.# Page Class Builder */
.page-class-builder.dashboard.dashboard--sidebar .dashboard-main {
    padding: 79px 15px 15px 303px;
}

.page-class-builder .class-builder-table > .row,
.page-class-builder .class-builder-table .table-wrapper,
.page-class-builder .class-builder-table .table-wrapper-card,
.page-class-builder .class-builder-table .table-wrapper-body {
    display: flex;
    flex-direction: column;
}

.page-class-builder .class-builder-table > .row {
    height: calc(100vh - 155px);
}

    .page-class-builder .class-builder-table > .row > * {
        flex: 0 1 auto;
        min-height: 0;
    }

.page-class-builder .class-builder-table .table-wrapper {
    height: 100%;
}

.page-class-builder .class-builder-table .table-wrapper-card {
    flex: 1 1 auto;
    min-height: 0;
}

    .page-class-builder .class-builder-table .table-wrapper-card .table-wrapper-body {
        flex: 1 1 auto;
        min-height: 0;
    }

        .page-class-builder .class-builder-table .table-wrapper-card .table-wrapper-body .card {
            flex: 1 1 auto;
            min-height: 0;
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* 10.4 Page Evaluate */
.page-evaluate .dashboard-main-body .main {
    padding: 0 10px;
}

    .page-evaluate .dashboard-main-body .main .main-header .menu--calendar .menu-header {
        font-size: 1em;
        line-height: 1.1;
    }

.page-evaluate .dashboard-main-body .window.window--maximize {
    padding: 15px 30px;
    background: var(--grey-light-2);
}

    .page-evaluate .dashboard-main-body .window.window--maximize .side-by-side {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        min-height: 600px;
    }

    .page-evaluate .dashboard-main-body .window.window--maximize > * {
        margin: 0 auto;
        max-width: 1600px;
    }

.page-evaluate .dashboard-main-body .window .main-header [data-window-btn] {
    flex-shrink: 0;
    margin-left: 10px;
}

    .page-evaluate .dashboard-main-body .window .main-header [data-window-btn][data-view] .icon {
        display: none;
    }

    .page-evaluate .dashboard-main-body .window .main-header [data-window-btn][data-view=maximize] .icon.maximize {
        display: block;
        transform: translate(-50%, -50%) scale(1);
    }

    .page-evaluate .dashboard-main-body .window .main-header [data-window-btn][data-view=maximize]:hover .icon {
        transform: translate(-50%, -50%) scale(1.2);
    }

    .page-evaluate .dashboard-main-body .window .main-header [data-window-btn][data-view=minimize] .icon.minimize {
        display: block;
        transform: translate(-50%, -50%) scale(1.2);
    }

    .page-evaluate .dashboard-main-body .window .main-header [data-window-btn][data-view=minimize]:hover .icon {
        transform: translate(-50%, -50%) scale(1);
    }

/* 10.5 Page Open Class */
.page-open-class .dashboard-main .dashboard-main-body {
    background: transparent;
    border-color: transparent;
    display: flex;
    flex-direction: column;
    height: auto;
}

    .page-open-class .dashboard-main .dashboard-main-body > .flex {
        flex: 1 1 auto;
    }

    .page-open-class .dashboard-main .dashboard-main-body .topbar {
        margin-bottom: 20px;
    }

        .page-open-class .dashboard-main .dashboard-main-body .topbar > .card {
            padding: 0 10px;
            border-radius: 0 0 4px 4px;
            background: var(--grey-light-2);
        }

        .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-headline {
            display: flex;
            flex-shrink: 0;
        }

            .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-headline .room {
                flex: 0 0 auto;
                margin-right: 10px;
            }

        .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta {
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
        }

            .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .card--meta {
                white-space: nowrap;
            }

            .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group {
                margin: 4px 0;
                padding: 0 20px;
            }

                .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group:first-child {
                    padding-left: 0;
                    border: none;
                }

                    .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group:first-child::before {
                        content: none;
                    }

                .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group:last-child {
                    padding-right: 0;
                }

                .page-open-class .dashboard-main .dashboard-main-body .topbar .topbar-meta .meta-group .user {
                    top: 0.1em;
                }

    .page-open-class .dashboard-main .dashboard-main-body .main .card,
    .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar .card {
        border-radius: 4px;
    }

    .page-open-class .dashboard-main .dashboard-main-body .main {
        position: relative;
        flex: 1 1 auto;
    }

        .page-open-class .dashboard-main .dashboard-main-body .main.main--window .window {
            display: block;
        }

        .page-open-class .dashboard-main .dashboard-main-body .main.main--window .class-actions {
            /*position: absolute;
  width: 100%;
  height: 100%;*/
            display: none;
        }

        .page-open-class .dashboard-main .dashboard-main-body .main .window {
            display: none;
        }

        .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar {
            width: 240px;
            flex-shrink: 0;
        }

            .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar > *:not(:last-child) {
                margin-bottom: 20px;
            }

            .page-open-class .dashboard-main .dashboard-main-body .main ~ .sidebar .card {
                background: var(--grey-light-2);
            }

/* ------------
# VIEWS
------------- */
/* 1. BUTTONS  */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/* 1. BUTTONS*/
/** 1.1 Base */
button,
input[type=submit],
input[type=button],
.btn {
    /*display: inline-block;
  padding: 6px 12px 4px;*/
    font-size: 0.875rem;
    color: var(--grey-3);
    font-weight: 400;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1;
}

    button:hover, button.active,
    input[type=submit]:hover,
    input[type=submit].active,
    input[type=button]:hover,
    input[type=button].active,
    .btn:hover,
    .btn.active {
        color: #ffffff;
        background: var(--green);
        border-color: transparent;
        outline: none;
    }

        button:hover .icon, button.active .icon,
        input[type=submit]:hover .icon,
        input[type=submit].active .icon,
        input[type=button]:hover .icon,
        input[type=button].active .icon,
        .btn:hover .icon,
        .btn.active .icon {
            border-color: var(--green);
        }

    button.primary-color:hover, button.primary-color.active,
    input[type=submit].primary-color:hover,
    input[type=submit].primary-color.active,
    input[type=button].primary-color:hover,
    input[type=button].primary-color.active,
    .btn.primary-color:hover,
    .btn.primary-color.active {
        color: #ffffff !important;
    }

    button .icon,
    input[type=submit] .icon,
    input[type=button] .icon,
    .btn .icon {
        position: relative;
        top: 0;
        left: -0.25em;
        margin-right: 4px;
        display: inline-block;
        height: 1em;
        width: 1em;
        fill: currentColor;
        border-color: var(--grey-3);
        pointer-events: none;
    }

.layout--light button,
.layout--light input[type=submit],
.layout--light input[type=button], .layout--light.btn,
.layout--light .btn {
    border-color: var(--grey-light-4);
    background: #ffffff;
}

    .layout--light button:hover, .layout--light button.active,
    .layout--light input[type=submit]:hover,
    .layout--light input[type=submit].active,
    .layout--light input[type=button]:hover,
    .layout--light input[type=button].active, .layout--light.btn:hover, .layout--light.btn.active,
    .layout--light .btn:hover,
    .layout--light .btn.active {
        border-color: transparent;
        background: var(--green);
    }

.layout--light .btn--primary {
    border-color: transparent;
    background: var(--green);
}

.layout--light .btn--notify:before {
    border-color: var(--grey-light-1);
}

.layout--light .btn--link,
.layout--light .btn--text {
    border-color: transparent;
    background: transparent;
}

    .layout--light .btn--text:hover, .layout--light .btn--text.active {
        background: var(--alpha-dark-1);
    }

.layout--light .btn--light {
    background: var(--grey-light-1);
}

.layout--light .btn--outline {
    border-color: var(--green);
    background: transparent;
}

.layout--light .btn--disabled,
.layout--light .btn[disabled] {
    background: transparent;
    border-color: var(--grey-light-3);
}

    .layout--light .btn--disabled:hover,
    .layout--light .btn[disabled]:hover {
        background: transparent;
        border-color: var(--grey-light-3);
    }

.layout--dark button,
.layout--dark input[type=submit],
.layout--dark input[type=button], .layout--dark.btn,
.layout--dark .btn {
    /*border-color: $grey-dark-1;
  background: $grey-dark-2;*/
    color: var(--grey-1);
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark button:hover, .layout--dark button.active,
    .layout--dark input[type=submit]:hover,
    .layout--dark input[type=submit].active,
    .layout--dark input[type=button]:hover,
    .layout--dark input[type=button].active, .layout--dark.btn:hover, .layout--dark.btn.active,
    .layout--dark .btn:hover,
    .layout--dark .btn.active {
        color: #ffffff;
        border-color: transparent;
        background: var(--green);
    }

        .layout--dark button:hover .icon, .layout--dark button.active .icon,
        .layout--dark input[type=submit]:hover .icon,
        .layout--dark input[type=submit].active .icon,
        .layout--dark input[type=button]:hover .icon,
        .layout--dark input[type=button].active .icon, .layout--dark.btn:hover .icon, .layout--dark.btn.active .icon,
        .layout--dark .btn:hover .icon,
        .layout--dark .btn.active .icon {
            border-color: var(--green);
        }

    .layout--dark button .icon,
    .layout--dark input[type=submit] .icon,
    .layout--dark input[type=button] .icon, .layout--dark.btn .icon,
    .layout--dark .btn .icon {
        border-color: var(--grey-3);
    }

.layout--dark .btn--primary {
    color: #ffffff;
    border-color: transparent;
    background: var(--green);
}

.layout--dark .btn--notify:before {
    border-color: var(--grey-dark-3);
}

.layout--dark .btn--link,
.layout--dark .btn--text {
    border-color: transparent;
    background: transparent;
}

.layout--dark .btn--text {
    color: var(--grey-1);
}

    .layout--dark .btn--text:hover, .layout--dark .btn--text.active {
        color: #ffffff;
        background: var(--alpha-light-1);
    }

.layout--dark .btn--link {
    color: var(--green);
}

    .layout--dark .btn--link:hover, .layout--dark .btn--link.active {
        color: #ffffff;
    }

.layout--dark .btn--outline {
    border-color: var(--green);
    background: transparent;
    color: var(--green);
}

.layout--dark .btn--disabled,
.layout--dark .btn[disabled] {
    color: var(--grey-dark-2);
    background: transparent;
    border-color: var(--grey-dark-2);
}

    .layout--dark .btn--disabled:hover,
    .layout--dark .btn[disabled]:hover {
        color: var(--grey-dark-2);
        background: transparent;
        border-color: var(--grey-dark-2);
    }

/** 1.1.1 Primary */
.btn--primary {
    padding: 8px 12px;
    color: #ffffff;
    border-color: transparent;
    background: var(--green);
}

    .btn--primary:hover, .btn--primary.active {
        opacity: 0.9;
    }

/** 1.1.2 Secondary */
.btn--secondary {
    padding: 8px 12px;
    background: #ffffff;
}

    .btn--secondary.btn--link {
        color: var(--grey-3);
    }

        .btn--secondary.btn--link:hover {
            background: var(--alpha-dark-1);
        }

        .btn--secondary.btn--link[disabled] {
            border: none;
        }

.layout--dark .btn--secondary.btn--link:hover {
    background: var(--alpha-light-1);
}

/** 1.1.3 Ternary */
.btn--ternary {
    background: var(--alpha-dark-1);
}

    .btn--ternary:hover, .btn--ternary:focus {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .btn--ternary.active {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--light .btn--ternary {
    background: var(--alpha-dark-1);
}

    .layout--light .btn--ternary:hover, .layout--light .btn--ternary:focus {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: var(--alpha-dark-2);
    }

    .layout--light .btn--ternary.active {
        color: var(--grey-3);
        border-color: var(--grey-light-3);
        background: #ffffff;
    }

.layout--dark .btn--ternary {
    background: var(--grey-dark-2);
}

    .layout--dark .btn--ternary:hover {
        color: var(--grey-light-4);
        background: var(--grey-dark-1);
    }

    .layout--dark .btn--ternary.active {
        color: var(--grey-3);
        border-color: var(--grey-dark-2);
        background: var(--grey-dark-4);
    }

/** 1.1.4 Modifiers */
.btn--notify {
    position: relative;
}

    .btn--notify:before {
        position: absolute;
        top: 4px;
        right: 4px;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #ffffff;
        background: var(--green);
        z-index: 1;
    }

.btn--light {
    background: var(--grey-light-1);
    border-color: var(--grey-light-4);
}

.btn--dark {
    background: var(--grey-dark-2);
    border-color: var(--grey-dark-1);
}

.btn--outline {
    color: var(--green);
    background: transparent;
    border-color: var(--green);
}

.btn--outline-white {
    color: #ffffff;
    background: transparent;
    border-color: #ffffff;
}

    .btn--outline-white .icon {
        fill: #ffffff;
    }

    .btn--outline-white:hover {
        color: var(--green);
        background: white;
    }

        .btn--outline-white:hover .icon {
            fill: var(--green);
        }

.btn--rounded {
    padding: 8px 25px;
    border-radius: 30px;
}

.btn--border-medium {
    border-width: 2px;
}

.btn--link {
    color: var(--green);
    background: transparent;
    border-color: transparent;
}

.btn--text {
    color: var(--grey-3);
    background: transparent;
    border-color: transparent;
}

    .btn--text.primary-color:hover, .btn--text.primary-color.active {
        color: var(--green) !important;
    }

    .btn--text:hover, .btn--text.active {
        color: var(--green);
        background: var(--alpha-dark-1);
    }

    .btn--text[disabled] {
        border: none;
    }

.btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn--icon .icon {
        position: initial;
        top: initial;
        left: initial;
        margin: initial;
    }

.btn--circle,
.btn--square {
    position: relative;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

    .btn--circle .icon,
    .btn--square .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.btn--circle {
    border-radius: 50%;
}

.btn--square {
    border-radius: 4px;
}

.btn--spaced {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

    .btn--spaced .icon {
        position: initial;
        top: initial;
        left: initial;
        margin: initial;
        flex: 0 0 auto;
    }

.btn--disabled,
.btn[disabled] {
    color: var(--grey-light-4);
    background: transparent;
    border-color: var(--grey-light-3);
    cursor: not-allowed;
}

    .btn--disabled [class*=-prefix]::before,
    .btn[disabled] [class*=-prefix]::before {
        background: currentColor;
    }

    .btn--disabled:hover,
    .btn[disabled]:hover {
        color: var(--grey-light-4);
        background: transparent;
        border-color: var(--grey-light-3);
    }

.btn-inner {
    display: inline-block;
    padding: 3px;
    background: var(--grey-light-3);
    line-height: 0;
}

    .btn-inner.btn-inner--circle {
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

        .btn-inner.btn-inner--circle .btn {
            width: 24px;
            height: 24px;
        }

    .btn-inner .btn {
        border: none;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

.btn-join {
    display: inline-flex;
}

    .btn-join .btn {
        flex-shrink: 0;
    }

        .btn-join .btn:not(:last-child) {
            border-right-width: 0;
        }

        .btn-join .btn:first-child:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .btn-join .btn:last-child:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .btn-join .btn:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

    .btn-join .btn--tab {
        background: rgba(0, 0, 0, 0.025);
    }

        .btn-join .btn--tab:hover, .btn-join .btn--tab.active {
            color: var(--grey-3);
            background: #ffffff;
            border-color: var(--grey-light-3);
        }

        .btn-join .btn--tab.active {
            color: var(--green);
        }

        .btn-join .btn--tab.btn--disabled:hover, .btn-join .btn--tab[disabled]:hover {
            color: var(--grey-light-4);
            background: transparent;
            border-color: var(--grey-light-3);
        }

.btn--success {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--success:hover, .btn--success.active {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--success:disabled {
        pointer-events: none;
    }

.btn--hover-success:hover, .btn--hover-success.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--hover-success:hover [class*=-prefix]::before, .btn--hover-success.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-success:disabled {
    pointer-events: none;
}

.btn--error {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--error:hover, .btn--error.active {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--error:disabled {
        pointer-events: none;
    }

.btn--hover-error:hover, .btn--hover-error.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--hover-error:hover [class*=-prefix]::before, .btn--hover-error.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-error:disabled {
    pointer-events: none;
}

.btn--activity {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--grey-3) !important;
}

    .btn--activity:hover, .btn--activity.active {
        background: var(--grey-3) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--activity:disabled {
        pointer-events: none;
    }

.btn--hover-activity:hover, .btn--hover-activity.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--grey-3) !important;
}

    .btn--hover-activity:hover [class*=-prefix]::before, .btn--hover-activity.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-activity:disabled {
    pointer-events: none;
}

.btn--lesson {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--lesson:hover, .btn--lesson.active {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--lesson:disabled {
        pointer-events: none;
    }

.btn--hover-lesson:hover, .btn--hover-lesson.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--hover-lesson:hover [class*=-prefix]::before, .btn--hover-lesson.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-lesson:disabled {
    pointer-events: none;
}

.btn--test {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--test:hover, .btn--test.active {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--test:disabled {
        pointer-events: none;
    }

.btn--hover-test:hover, .btn--hover-test.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--hover-test:hover [class*=-prefix]::before, .btn--hover-test.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-test:disabled {
    pointer-events: none;
}

.btn--quiz {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--quiz:hover, .btn--quiz.active {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--quiz:disabled {
        pointer-events: none;
    }

.btn--hover-quiz:hover, .btn--hover-quiz.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--hover-quiz:hover [class*=-prefix]::before, .btn--hover-quiz.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-quiz:disabled {
    pointer-events: none;
}

.btn--project {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--project:hover, .btn--project.active {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--project:disabled {
        pointer-events: none;
    }

.btn--hover-project:hover, .btn--hover-project.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--hover-project:hover [class*=-prefix]::before, .btn--hover-project.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-project:disabled {
    pointer-events: none;
}

.btn--supplementary {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green-yellow) !important;
}

    .btn--supplementary:hover, .btn--supplementary.active {
        background: var(--green-yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--supplementary:disabled {
        pointer-events: none;
    }

.btn--hover-supplementary:hover, .btn--hover-supplementary.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green-yellow) !important;
}

    .btn--hover-supplementary:hover [class*=-prefix]::before, .btn--hover-supplementary.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-supplementary:disabled {
    pointer-events: none;
}

.btn--field-trip {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--field-trip:hover, .btn--field-trip.active {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--field-trip:disabled {
        pointer-events: none;
    }

.btn--hover-field-trip:hover, .btn--hover-field-trip.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--hover-field-trip:hover [class*=-prefix]::before, .btn--hover-field-trip.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-field-trip:disabled {
    pointer-events: none;
}

.btn--lab {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--lab:hover, .btn--lab.active {
        background: var(--yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--lab:disabled {
        pointer-events: none;
    }

.btn--hover-lab:hover, .btn--hover-lab.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--hover-lab:hover [class*=-prefix]::before, .btn--hover-lab.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-lab:disabled {
    pointer-events: none;
}

.btn--student {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--student:hover, .btn--student.active {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--student:disabled {
        pointer-events: none;
    }

.btn--hover-student:hover, .btn--hover-student.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--hover-student:hover [class*=-prefix]::before, .btn--hover-student.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-student:disabled {
    pointer-events: none;
}

.btn--teacher {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--teacher:hover, .btn--teacher.active {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--teacher:disabled {
        pointer-events: none;
    }

.btn--hover-teacher:hover, .btn--hover-teacher.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--hover-teacher:hover [class*=-prefix]::before, .btn--hover-teacher.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-teacher:disabled {
    pointer-events: none;
}

.btn--parent {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--parent:hover, .btn--parent.active {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--parent:disabled {
        pointer-events: none;
    }

.btn--hover-parent:hover, .btn--hover-parent.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--hover-parent:hover [class*=-prefix]::before, .btn--hover-parent.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-parent:disabled {
    pointer-events: none;
}

.btn--admin {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--admin:hover, .btn--admin.active {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--admin:disabled {
        pointer-events: none;
    }

.btn--hover-admin:hover, .btn--hover-admin.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--hover-admin:hover [class*=-prefix]::before, .btn--hover-admin.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-admin:disabled {
    pointer-events: none;
}

.btn--audit {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--audit:hover, .btn--audit.active {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--audit:disabled {
        pointer-events: none;
    }

.btn--hover-audit:hover, .btn--hover-audit.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--hover-audit:hover [class*=-prefix]::before, .btn--hover-audit.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-audit:disabled {
    pointer-events: none;
}

.btn--meta {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--grey-1) !important;
}

    .btn--meta:hover, .btn--meta.active {
        background: var(--grey-1) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--meta:disabled {
        pointer-events: none;
    }

.btn--hover-meta:hover, .btn--hover-meta.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--grey-1) !important;
}

    .btn--hover-meta:hover [class*=-prefix]::before, .btn--hover-meta.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-meta:disabled {
    pointer-events: none;
}

.btn--green {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--green:hover, .btn--green.active {
        background: var(--green) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--green:disabled {
        pointer-events: none;
    }

.btn--hover-green:hover, .btn--hover-green.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--green) !important;
}

    .btn--hover-green:hover [class*=-prefix]::before, .btn--hover-green.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-green:disabled {
    pointer-events: none;
}

.btn--blue {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--blue:hover, .btn--blue.active {
        background: var(--blue) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--blue:disabled {
        pointer-events: none;
    }

.btn--hover-blue:hover, .btn--hover-blue.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--blue) !important;
}

    .btn--hover-blue:hover [class*=-prefix]::before, .btn--hover-blue.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-blue:disabled {
    pointer-events: none;
}

.btn--red {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--red:hover, .btn--red.active {
        background: var(--red) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--red:disabled {
        pointer-events: none;
    }

.btn--hover-red:hover, .btn--hover-red.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--red) !important;
}

    .btn--hover-red:hover [class*=-prefix]::before, .btn--hover-red.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-red:disabled {
    pointer-events: none;
}

.btn--orange {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--orange:hover, .btn--orange.active {
        background: var(--orange) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--orange:disabled {
        pointer-events: none;
    }

.btn--hover-orange:hover, .btn--hover-orange.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--orange) !important;
}

    .btn--hover-orange:hover [class*=-prefix]::before, .btn--hover-orange.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-orange:disabled {
    pointer-events: none;
}

.btn--yellow {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--yellow:hover, .btn--yellow.active {
        background: var(--yellow) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--yellow:disabled {
        pointer-events: none;
    }

.btn--hover-yellow:hover, .btn--hover-yellow.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--yellow) !important;
}

    .btn--hover-yellow:hover [class*=-prefix]::before, .btn--hover-yellow.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-yellow:disabled {
    pointer-events: none;
}

.btn--purple {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--purple:hover, .btn--purple.active {
        background: var(--purple) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--purple:disabled {
        pointer-events: none;
    }

.btn--hover-purple:hover, .btn--hover-purple.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--purple) !important;
}

    .btn--hover-purple:hover [class*=-prefix]::before, .btn--hover-purple.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-purple:disabled {
    pointer-events: none;
}

.btn--pink {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--pink) !important;
}

    .btn--pink:hover, .btn--pink.active {
        background: var(--pink) !important;
        border-color: transparent !important;
        opacity: 0.9;
    }

    .btn--pink:disabled {
        pointer-events: none;
    }

.btn--hover-pink:hover, .btn--hover-pink.active {
    color: #ffffff !important;
    border-color: transparent !important;
    background: var(--pink) !important;
}

    .btn--hover-pink:hover [class*=-prefix]::before, .btn--hover-pink.active [class*=-prefix]::before {
        background: currentColor;
    }

.btn--hover-pink:disabled {
    pointer-events: none;
}

.layout--light .btn--outline-white {
    background: transparent;
    border-color: #ffffff;
}

    .layout--light .btn--outline-white:hover {
        color: var(--green);
        background: #ffffff;
    }

        .layout--light .btn--outline-white:hover .icon {
            fill: var(--green);
        }

.layout--dark .btn--outline-white {
    background: transparent;
    border-color: #ffffff;
}

    .layout--dark .btn--outline-white:hover {
        color: var(--green);
        background: #ffffff;
    }

        .layout--dark .btn--outline-white:hover .icon {
            fill: var(--green);
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 1.3 Button Counter */
.btn-counter {
    position: relative;
    display: inline-block;
}

    .btn-counter .btn {
        border: none;
        width: 40px;
        height: 40px;
        background: transparent;
        color: var(--grey-1);
    }

        .btn-counter .btn:hover, .btn-counter .btn:focus, .btn-counter .btn:active {
            color: var(--green);
            background: rgba(0, 0, 0, 0.05);
        }

        .btn-counter .btn .icon {
            width: 1.4em;
            height: 1.4em;
        }

.layout--dark .btn-counter .btn:hover, .layout--dark .btn-counter .btn:focus, .layout--dark .btn-counter .btn:active {
    background: rgba(255, 255, 255, 0.05);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 1.4 Button Sidebar */
.btn-sidebar {
    position: relative;
    display: block;
    padding: 10px 8px 10px 48px;
    font-size: 0.875em;
    height: 2.625rem;
    color: var(--grey-1);
    transition: all var(--transition-duration) ease 0s;
}

    .btn-sidebar > .icon {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        height: 1.5em;
        width: 1.5em;
        transition: all var(--transition-duration) ease 0s;
    }

    .btn-sidebar.btn-sidebar--menu {
        position: relative;
    }

        .btn-sidebar.btn-sidebar--menu .btn {
            position: absolute;
            color: inherit;
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
        }

            .btn-sidebar.btn-sidebar--menu .btn .icon {
                height: 0.4em;
                opacity: 0.5;
                transition: all var(--transition-duration) ease 0s;
            }

            .btn-sidebar.btn-sidebar--menu .btn:hover, .btn-sidebar.btn-sidebar--menu .btn:focus {
                background: var(--grey-dark-5);
                border: transparent;
            }

    .btn-sidebar::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 4px;
        height: 100%;
        border-radius: 0 2px 2px 0;
        background: var(--green);
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

    .btn-sidebar:hover, .btn-sidebar:focus {
        background: rgba(255, 255, 255, 0.03);
    }

    .btn-sidebar:hover {
        cursor: pointer;
    }

        .btn-sidebar:hover > .icon {
            fill: var(--green);
        }

    .btn-sidebar.active {
        background: rgba(255, 255, 255, 0.03);
    }

        .btn-sidebar.active::before {
            opacity: 1;
        }

        .btn-sidebar.active > .icon {
            fill: var(--green);
        }

    .btn-sidebar.active--child {
        background: rgba(255, 255, 255, 0.03);
    }

        .btn-sidebar.active--child.btn-sidebar--menu .btn .icon {
            transform: translate(-50%, -50%) rotate(90deg);
        }

    .btn-sidebar.disabled {
        opacity: 0.15;
        cursor: not-allowed;
    }

        .btn-sidebar.disabled:hover, .btn-sidebar.disabled:focus {
            background: transparent;
            border: transparent;
        }

            .btn-sidebar.disabled:hover > .icon {
                fill: var(--grey-1);
            }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/* 1.7 Button Sort */
.btn-sort {
    display: inline-block;
    line-height: 1;
}

    .btn-sort.sort--top .icon {
        /*.sort-top {
      fill: $text-color;
  }*/
    }

        .btn-sort.sort--top .icon .sort-bottom {
            opacity: 0.5;
        }

    .btn-sort.sort--bottom .icon .sort-top {
        opacity: 0.5;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 1.2 Button Split */
.btn-split {
    position: relative;
    display: inline-flex;
    align-items: center;
    /*display: inline-block;
  padding-left: 38px;*/
}

    .btn-split.btn-split--flex {
        display: flex;
    }

    .btn-split > .btn--circle {
        margin-right: 10px;
        /*position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);*/
    }

    .btn-split .field-menu {
        display: inline-block;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 1.8 Button Progress */
.btn-progress.state--loading {
    pointer-events: none;
}

    .btn-progress.state--loading.btn--rounded .loader-spinner {
        margin-right: -10px;
    }

    .btn-progress.state--loading .loader-spinner {
        width: 1em;
        opacity: 1;
        margin-left: 10px;
    }

.btn-progress .loader-spinner {
    width: 0;
    height: 1em;
    aspect-ratio: 1/1;
    opacity: 0;
    transition: all var(--transition-duration) ease 0s;
}

    .btn-progress .loader-spinner .loader-spinner-circles {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .btn-progress .loader-spinner .loader-spinner-circles span::before {
            width: 20%;
            height: 20%;
            background: currentColor;
            opacity: calc(0.2 * var(--spinner-i));
        }

.layout--dark .btn-progress .loader-spinner .loader-spinner-circles span::before {
    background: currentColor;
}

/** 1.5 Button Tile */
/* 2. FORM */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 3.2 Dropdown */
.dropdown {
    position: relative;
}

    .dropdown.open .dropdown-header .btn {
        color: #ffffff;
        background: var(--green);
    }

    .dropdown.open .dropdown-header .btn--clear {
        color: var(--grey-dark-1);
        background: transparent !important;
    }

    .dropdown.open .dropdown-body {
        top: 110%;
        height: auto;
        opacity: 1;
        visibility: visible;
    }

    .dropdown.dropdown--list-top .dropdown-body {
        top: initial;
        bottom: 120%;
    }

    .dropdown.dropdown--list-top.open .dropdown-body {
        bottom: 100%;
    }

    .dropdown.dropdown--list-right .dropdown-body {
        left: initial;
        right: 0;
    }

    .dropdown.dropdown--list-ycenter .dropdown-body {
        top: 50%;
        transform: translate(0, -50%);
    }

    .dropdown.dropdown--list-xcenter .dropdown-body {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .dropdown.dropdown--list-center .dropdown-body {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .dropdown .dropdown-body {
        position: absolute;
        top: 130%;
        opacity: 0;
        visibility: hidden;
        z-index: 9;
        transition: all var(--transition-duration) ease 0s;
    }

/** 3.2.1 Dropdown Expendable */
.dropdown--expendable .dropdown-header {
    position: relative;
    font-size: 0.875rem;
    color: var(--grey-3);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    .dropdown--expendable .dropdown-header .dropdown-label > .icon,
    .dropdown--expendable .dropdown-header [data-dropdown-btn] .icon,
    .dropdown--expendable .dropdown-header > .icon {
        display: inline-block;
        position: relative;
        top: -2px;
        height: 0.4em;
        transition: all var(--transition-duration) ease 0s;
        transform: rotate(90deg);
        fill: currentColor;
        pointer-events: none;
    }

        .dropdown--expendable .dropdown-header .dropdown-label > .icon.icon--left,
        .dropdown--expendable .dropdown-header [data-dropdown-btn] .icon.icon--left,
        .dropdown--expendable .dropdown-header > .icon.icon--left {
            transform: rotate(-90deg);
        }

.dropdown--expendable [data-dropdown-btn] {
    cursor: pointer;
}

.dropdown--expendable .dropdown-body {
    position: initial;
    height: 0;
    overflow: hidden;
}

.dropdown--expendable.expend > .dropdown-body {
    opacity: 1;
    visibility: visible;
    overflow: initial;
    height: auto;
}

.dropdown--expendable.expend > .dropdown-header .dropdown-label > .icon,
.dropdown--expendable.expend > .dropdown-header [data-dropdown-btn] .icon,
.dropdown--expendable.expend > .dropdown-header > .icon {
    transform: rotate(0);
}

    .dropdown--expendable.expend > .dropdown-header .dropdown-label > .icon.icon--left,
    .dropdown--expendable.expend > .dropdown-header [data-dropdown-btn] .icon.icon--left,
    .dropdown--expendable.expend > .dropdown-header > .icon.icon--left {
        transform: rotate(0);
    }

.layout--dark .dropdown--expendable .dropdown-header {
    color: #717171;
}

/** 2.2 Dropdown Menu */
.field-menu,
.menu {
    position: relative;
    display: inline-block;
    font-weight: 400;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    .field-menu.open > .menu-header > .icon,
    .menu.open > .menu-header > .icon {
        transform: rotate(90deg);
    }

    .field-menu.open > .menu-list,
    .menu.open > .menu-list {
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible;
    }

    .field-menu.menu--headline > .menu-header [data-menu-option],
    .menu.menu--headline > .menu-header [data-menu-option] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--grey-dark-3);
    }

    .field-menu.menu--headline > .menu-header > .icon,
    .menu.menu--headline > .menu-header > .icon {
        top: -0.25em;
    }

    .field-menu.menu--list-top .menu-list,
    .menu.menu--list-top .menu-list {
        top: 0;
        transform: translate(0, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.open > .menu-list,
    .menu.menu--list-top.open > .menu-list {
        transform: translate(0, calc(-100% - 8px));
    }

    .field-menu.menu--list-right .menu-list,
    .menu.menu--list-right .menu-list {
        left: 100%;
        transform: translate(-100%, 10px);
    }

    .field-menu.menu--list-right.open > .menu-list,
    .menu.menu--list-right.open > .menu-list {
        transform: translate(-100%, 0);
    }

    .field-menu.menu--list-top.menu--list-right .menu-list,
    .menu.menu--list-top.menu--list-right .menu-list {
        top: 0;
        left: 100%;
        transform: translate(-100%, calc(-100% - 14px));
    }

    .field-menu.menu--list-top.menu--list-right.open > .menu-list,
    .menu.menu--list-top.menu--list-right.open > .menu-list {
        transform: translate(-100%, calc(-100% - 8px));
    }

    .field-menu.menu--list-ycenter .menu-list,
    .menu.menu--list-ycenter .menu-list {
        top: calc(50% + 14px);
        transform: translate(0, -50%);
    }

    .field-menu.menu--list-ycenter.open > .menu-list,
    .menu.menu--list-ycenter.open > .menu-list {
        top: calc(50% + 4px);
    }

    .field-menu.menu--list-xcenter .menu-list,
    .menu.menu--list-xcenter .menu-list {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
    }

    .field-menu.menu--list-xcenter.open > .menu-list,
    .menu.menu--list-xcenter.open > .menu-list {
        transform: translate(-50%, 0);
    }

    .field-menu.menu--list-center .menu-list,
    .menu.menu--list-center .menu-list {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--list-center.open > .menu-list,
    .menu.menu--list-center.open > .menu-list {
        transform: translate(-50%, -50%);
    }

    .field-menu.menu--dark,
    .menu.menu--dark {
        color: var(--grey-1);
    }

        .field-menu.menu--dark .menu-list,
        .menu.menu--dark .menu-list {
            color: var(--grey-3);
            background: var(--grey-dark-4);
        }

        .field-menu.menu--dark .option:hover,
        .menu.menu--dark .option:hover {
            color: var(--grey-1);
            background: var(--alpha-light-2);
        }

        .field-menu.menu--dark .option.option--checked,
        .menu.menu--dark .option.option--checked {
            background: var(--alpha-light-1);
        }

    .field-menu .menu-header,
    .menu .menu-header {
        display: inline-block;
        cursor: pointer;
        color: var(--grey-3);
        font-size: 0.875em;
    }

        .field-menu .menu-header:hover > .icon,
        .menu .menu-header:hover > .icon {
            fill: var(--green);
        }

        .field-menu .menu-header > span,
        .menu .menu-header > span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .field-menu .menu-header > .icon,
        .menu .menu-header > .icon {
            position: relative;
            top: -0.1em;
            height: 0.4em;
            margin-left: 0.125em;
            transition: all var(--transition-duration) ease 0s;
        }

    .field-menu .menu-list,
    .menu .menu-list {
        position: absolute;
        top: 100%;
        left: 0;
        transform: translate(0, 10px);
        display: inline-block;
        list-style: none;
        padding-left: 0px;
        min-width: 150px;
        width: auto;
        max-width: 300px;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        transition: all var(--transition-duration) ease 0s;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        line-height: var(--line-height);
        z-index: 99;
        max-height: 50vh;
        scrollbar-color: var(--alpha-dark-2) transparent;
        scrollbar-width: thin;
        /* width */
        /* Track */
        /* Handle */
        /* Handle */
        /* Hide scrollbar but allow scrolling */
    }

        .field-menu .menu-list.scroll,
        .menu .menu-list.scroll {
            padding: 0;
            height: auto;
            max-height: 200px;
            overflow-y: auto;
        }

        .field-menu .menu-list::-webkit-scrollbar,
        .menu .menu-list::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .field-menu .menu-list::-webkit-scrollbar-track,
        .menu .menu-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .field-menu .menu-list::-webkit-scrollbar-thumb,
        .menu .menu-list::-webkit-scrollbar-thumb {
            background: var(--alpha-dark-2);
        }

            .field-menu .menu-list::-webkit-scrollbar-thumb:hover,
            .menu .menu-list::-webkit-scrollbar-thumb:hover {
                background: var(--green);
            }

        .field-menu .menu-list::-webkit-scrollbar-corner,
        .menu .menu-list::-webkit-scrollbar-corner {
            background: transparent;
        }

        .field-menu .menu-list.scroll--hidden,
        .menu .menu-list.scroll--hidden {
            padding: 0;
            -ms-overflow-style: none; /* for Internet Explorer, Edge */
            scrollbar-width: none; /* for Firefox */
        }

            .field-menu .menu-list.scroll--hidden::-webkit-scrollbar,
            .menu .menu-list.scroll--hidden::-webkit-scrollbar {
                display: none; /* for Chrome, Safari, and Opera */
            }

        .field-menu .menu-list label,
        .menu .menu-list label {
            margin-bottom: 0;
        }

        .field-menu .menu-list hr,
        .menu .menu-list hr {
            margin: 0;
        }

    .field-menu .field-check,
    .field-menu .option,
    .menu .field-check,
    .menu .option {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        transition: all var(--transition-duration) ease 0s;
    }

    .field-menu .option,
    .menu .option {
        position: relative;
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-3);
        cursor: pointer;
    }

        .field-menu .option[class*=prefix],
        .menu .option[class*=prefix] {
            padding-left: 22px !important;
        }

            .field-menu .option[class*=prefix]::before,
            .menu .option[class*=prefix]::before {
                left: 8px;
            }

        .field-menu .option:hover,
        .menu .option:hover {
            background-color: var(--grey-light-2);
        }

        .field-menu .option .icon,
        .menu .option .icon {
            position: absolute;
            top: 50%;
            right: 8px;
            height: 0.6em;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
            fill: var(--green);
            opacity: 0;
            pointer-events: none;
        }

        .field-menu .option.option--icon,
        .menu .option.option--icon {
            padding: 8px 8px 8px 30px;
        }

            .field-menu .option.option--icon .icon,
            .menu .option.option--icon .icon {
                right: initial;
                left: 8px;
                height: 1em;
                max-width: 1.125em;
                opacity: 1;
                fill: currentColor;
            }

            .menu .option.option--icon.disabled {
                opacity: 0.5;
                display: flex;
                align-items: center;
                justify-content: start;
                gap: 10px;
                cursor: default;
            }

            .menu .option.option--icon.enabled {
                opacity: 1;
                display: flex;
                align-items: center;
                justify-content: start;
                gap: 10px;
                cursor: pointer;
            }

        .field-menu .option.option--checked,
        .menu .option.option--checked {
            color: var(--green);
            background: var(--grey-light-1);
        }

            .field-menu .option.option--checked .icon,
            .menu .option.option--checked .icon {
                opacity: 1;
            }

.field-menu {
    max-width: 100%;
}

    .field-menu .menu-header {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 100%;
    }

        .field-menu .menu-header .icon {
            flex: 0 0 10px;
            width: 12px;
            height: auto;
            top: 0;
            margin-left: 0;
        }

        .field-menu .menu-header .btn--square .icon,
        .field-menu .menu-header .btn--circle .icon {
            top: 50%;
        }

    .field-menu.menu--headline > .menu-header [data-menu-option] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--grey-dark-3);
    }

    .field-menu.menu--headline > .menu-header > .icon {
        top: 0;
    }

    .field-menu.menu--date-picker .menu-header {
        justify-content: center;
    }

    .field-menu.menu--dark .field-option input[type=radio]:checked ~ .option {
        background: var(--alpha-light-1);
    }

    .field-menu .field-option {
        position: relative;
        font-weight: var(--font-weight);
    }

        .field-menu .field-option input[type=radio] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

            .field-menu .field-option input[type=radio]:checked ~ .option {
                color: var(--green);
                background: var(--grey-light-1);
            }

                .field-menu .field-option input[type=radio]:checked ~ .option .icon {
                    opacity: 1;
                }

            .field-menu .field-option input[type=radio]:disabled ~ .option {
                opacity: 0.5;
                pointer-events: none;
            }

                .field-menu .field-option input[type=radio]:disabled ~ .option .icon {
                    opacity: 0;
                }

    .field-menu .field-check {
        padding: 8px 8px 8px 30px;
    }

        .field-menu .field-check:hover {
            background-color: var(--grey-light-2);
        }

        .field-menu .field-check .checkmark {
            left: 8px;
        }

.field-option-checked {
    color: var(--green) !important;
    background: var(--grey-light-1) !important;
}

.field-option-icon-checked {
    opacity: 1 !important;
}

.layout--dark .field-menu .menu-header,
.layout--dark menu .menu-header {
    color: var(--grey-1);
}

/** 2.2.1 More Options */
.menu--more.open .btn {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--more hr {
    margin: 0;
}

.menu--more .menu-header {
    position: relative;
}

    .menu--more .menu-header::before {
        content: "*";
        display: block;
        visibility: hidden;
        width: 30px;
    }

    .menu--more .menu-header > span,
    .menu--more .menu-header [data-menu-option] {
        display: none;
    }

    .menu--more .menu-header .btn {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) rotate(90deg);
    }

.menu--more .menu-list {
    margin-top: 4px;
}

.layout--dark .menu--more.open .btn {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--more hr {
    border-color: var(--grey-light-3);
}

/** 2.2.2 Select Options */
.menu--dropdown,
.menu--dropdown-search {
    display: block;
}

    .menu--dropdown.open .menu-header .btn,
    .menu--dropdown-search.open .menu-header .btn {
        color: #ffffff;
        background: var(--green);
        border: var(--green);
    }

        .menu--dropdown.open .menu-header .btn .icon,
        .menu--dropdown-search.open .menu-header .btn .icon {
            transform: translate(-50%, -50%) rotate(180deg);
        }

    .menu--dropdown .menu-header,
    .menu--dropdown-search .menu-header {
        position: relative;
        display: block;
    }

        .menu--dropdown .menu-header [data-menu-option],
        .menu--dropdown-search .menu-header [data-menu-option] {
            display: block;
            color: var(--grey-dark-3);
            background: #ffffff;
            padding: 8px 52px 8px 12px;
            border-radius: 4px;
            border: 1px solid var(--grey-light-3);
            max-height: 2.8em;
        }

        .menu--dropdown .menu-header .btn,
        .menu--dropdown-search .menu-header .btn {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 40px;
            border-radius: 0 4px 4px 0;
            background: var(--grey-light-1);
        }

            .menu--dropdown .menu-header .btn .icon,
            .menu--dropdown-search .menu-header .btn .icon {
                width: 0.8em;
                height: 0.8em;
            }

            .menu--dropdown .menu-header .btn:hover,
            .menu--dropdown-search .menu-header .btn:hover {
                background: var(--green);
            }

            .menu--dropdown .menu-header .btn.btn--square .icon,
            .menu--dropdown-search .menu-header .btn.btn--square .icon {
                width: auto;
                height: 0.3em;
            }

    .menu--dropdown .menu-list,
    .menu--dropdown-search .menu-list {
        display: block;
        width: 100%;
        min-width: initial;
        max-width: initial;
    }

    .menu--dropdown-search .menu-list {
        max-height: initial;
        overflow: hidden;
    }

.layout--dark .menu--dropdown .menu-header [data-menu-option],
.layout--dark .menu--dropdown-search .menu-header [data-menu-option] {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .menu--dropdown .btn,
.layout--dark .menu--dropdown-search .btn {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .menu--dropdown-search .search-field .field {
    color: var(--grey-3);
    background: #ffffff;
    border-color: var(--grey-light-3);
}

/** 2.2.3 Filter Options */
.menu--filter.open .btn {
    color: var(--green);
    background: rgba(0, 0, 0, 0.05);
}

.menu--filter .field-check {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.layout--dark .menu--filter.open .btn {
    background: rgba(255, 255, 255, 0.05);
}

.layout--dark .menu--filter .field-check .checkmark {
    background: #ffffff;
    border-color: var(--grey-light-3);
    color: #ffffff;
}

/** 2.2.4 Calendar Options */
.menu--calendar .menu-header {
    font-weight: 600;
}

    .menu--calendar .menu-header [data-menu-option] {
        color: var(--grey-dark-4);
    }

.layout--dark .menu--calendar .menu-header [data-menu-option] {
    color: var(--grey-1);
}

/** 2.2.5 Date Picker */
.menu--date-picker > .menu-header {
    text-align: center;
    min-width: 178px;
}

    .menu--date-picker > .menu-header [data-menu-option] {
        color: var(--grey-dark-4);
    }

.menu--date-picker .menu-header {
    font-weight: 600;
}

.menu--date-picker > .menu-list {
    width: 100%;
    max-width: 300px !important;
    border-color: var(--grey-light-3);
    background: var(--grey-light-1);
    overflow: initial;
}

    .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option {
        color: var(--green);
        background: #ffffff;
    }

.menu--date-picker .field-calendar {
    padding: 8px;
}

.menu--date-picker hr {
    margin: 0 8px;
}

.layout--dark .menu--date-picker > .menu-list {
    border-color: var(--grey-dark-2);
    background: var(--grey-dark-4);
}

    .layout--dark .menu--date-picker > .menu-list > * > .field-option input[type=radio]:checked ~ .option {
        background: var(--alpha-light-2);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option:hover {
        color: var(--grey-1);
        background: var(--alpha-light-1);
    }

    .layout--dark .menu--date-picker > .menu-list > * > .field-option .option.option--checked {
        color: var(--green);
        background: var(--alpha-light-2);
    }

.layout--dark .menu--date-picker > .menu-header [data-menu-option] {
    color: var(--grey-1);
    border-color: var(--grey-dark-2);
    background: transparent;
}

/** 2.2.6 Menu Dropdown Small */
.menu--dropdown-small.open .menu-btn .icon {
    transform: translateY(-50%) rotate(90deg);
}

.menu--dropdown-small .menu-btn {
    padding: 8px 24px 8px 8px;
    font-size: 0.875rem;
    color: var(--grey-3);
    line-height: 1;
    background: var(--grey-light-1);
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-duration) ease 0s;
}

    .menu--dropdown-small .menu-btn:hover, .menu--dropdown-small .menu-btn.active {
        background: var(--alpha-dark-2);
    }

    .menu--dropdown-small .menu-btn .icon {
        position: absolute;
        top: 50%;
        right: 8px;
        left: initial;
        transform: translateY(-50%);
        width: 12px;
        height: 6px;
        transition: all var(--transition-duration) ease 0s;
    }

.menu--dropdown-small hr {
    margin: 0;
}

.layout--light .menu--dropdown-small .menu-btn {
    background: #ffffff;
}

    .layout--light .menu--dropdown-small .menu-btn:hover, .layout--light .menu--dropdown-small .menu-btn.active {
        background: var(--alpha-dark-1);
    }

.layout--dark .menu--dropdown-small .menu-btn {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

    .layout--dark .menu--dropdown-small .menu-btn:hover, .layout--dark .menu--dropdown-small .menu-btn.active {
        background: var(--alpha-light-2);
    }

.layout--dark .menu--dropdown-small hr {
    border-color: var(--grey-light-3);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 2.3 Field Switch */
.field-switch,
.field-switch-small {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    .field-switch label,
    .field-switch-small label {
        display: inline-block;
        margin-right: 4px;
    }

    .field-switch input[type=checkbox],
    .field-switch-small input[type=checkbox] {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .field-switch .switch-wrap,
    .field-switch-small .switch-wrap {
        position: relative;
        display: inline-block;
    }

    .field-switch .switch,
    .field-switch-small .switch {
        display: block;
    }

        .field-switch .switch .knob,
        .field-switch-small .switch .knob {
            position: absolute;
            display: block;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: all var(--transition-duration) ease 0s;
        }

        .field-switch .switch .state,
        .field-switch-small .switch .state {
            display: block;
        }

.field-switch {
    position: relative;
    line-height: var(--line-height);
    margin-bottom: -4px;
}

    .field-switch hr {
        margin: 0 0 8px;
    }

    .field-switch .switch-wrap {
        width: 64px;
    }

    .field-switch input[type=checkbox]:checked ~ .switch .knob {
        left: calc(100% - 34px);
    }

    .field-switch input[type=checkbox]:checked ~ .switch.disabled .knob {
        left: calc(100% - 34px);
        box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.06);
        background: var(--grey-light-1);
    }

    .field-switch input[type=checkbox]:not(:checked) ~ .switch.disabled .knob {
        box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.06);
        background: var(--grey-light-1);
    }

    .field-switch input[type=checkbox]:checked ~ .switch .knob::before {
        background: var(--green);
    }

    .field-switch input[type=checkbox]:checked ~ .switch.disabled .knob::before {
        background: var(--grey-1);
    }

    .field-switch input[type=checkbox]:checked ~ .switch .state {
        color: #ffffff;
        background-color: var(--green);
    }

    .field-switch input[type=checkbox]:checked ~ .switch.disabled .state {
        color: var(--grey-1);
        background-color: var(--grey-light-1);
    }

    .field-switch input[type=checkbox]:not(:checked) ~ .switch.disabled .state {
        color: var(--grey-1);
        background-color: var(--grey-light-1);
    }

    .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(1) {
        opacity: 1;
    }

    .field-switch input[type=checkbox]:checked ~ .switch .state *:nth-child(2) {
        opacity: 0;
    }

    .field-switch .switch .knob {
        width: 34px;
        height: 34px;
        border: 1px solid var(--grey-light-3);
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        z-index: 1;
    }

        .field-switch .switch .knob:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            width: 35%;
            height: 35%;
            border-radius: 50%;
            background: var(--grey-3);
        }

    .field-switch .switch .state {
        width: 62px;
        padding: 2px 6px;
        color: var(--grey-3);
        font-size: 0.75rem;
        text-transform: uppercase;
        border: 1px solid var(--grey-light-3);
        border-radius: 30px;
        background-color: #ffffff;
    }

        .field-switch .switch .state::after {
            display: table;
            content: "";
            clear: both;
        }

        .field-switch .switch .state *:nth-child(1) {
            opacity: 0;
            float: left;
        }

        .field-switch .switch .state *:nth-child(2) {
            opacity: 1;
            float: right;
        }

.field-switch-small .switch-wrap {
    top: 0.2em;
}

.field-switch-small input[type=checkbox]:checked ~ .switch {
    border-color: var(--green);
    background: var(--green);
}

    .field-switch-small input[type=checkbox]:checked ~ .switch .knob {
        left: calc(100% - 14px);
        background: #ffffff;
    }

.field-switch-small .switch {
    width: 32px;
    height: 16px;
    border-radius: 32px;
    border: 1px solid var(--grey-3);
}

    .field-switch-small .switch .knob {
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--grey-3);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

.layout--dark .field-switch hr {
    border-color: var(--grey-dark-3);
}

.layout--dark .field-switch .switch .knob {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-2);
}

.layout--dark .field-switch .switch .state {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .field-switch-small .switch {
    border-color: var(--grey-dark-1);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 2.4 Search */
.search {
    font-size: 1rem;
}

    .search .search-results {
        display: none;
    }

/** 2.4.1 Search Small */
.search--small {
    position: relative;
    padding: 6px 8px;
    background: var(--grey-light-2);
    z-index: 99;
}
    .search--small.disabled {
        background: var(--alpha-dark-1) !important;
    }

    .search--small .search-field {
        position: relative;
    }

        .search--small .search-field input {
            padding: 8px 28px 6px;
            border-color: transparent;
            background: transparent;
            cursor: pointer;
        }

    .search--small.disabled .search-field input {
        padding: 8px 28px 6px;
        border-color: transparent;
        background: transparent;
        cursor: initial;
    }

    .search--small .search-field input:focus {
        border-width: 1px;
        border-color: transparent;
        cursor: initial;
        background: #ffffff;
    }

    .search--small .search-field .search-icon,
    .search--small .search-field .field-menu {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .search--small .search-field .search-icon {
        left: 8px;
        width: 0.875em;
        line-height: 0;
        pointer-events: none;
    }

    .search--small .search-field .field-menu {
        right: 0;
    }

        .search--small .search-field .field-menu.open .menu-list {
            top: 70%;
        }

        .search--small .search-field .field-menu .menu-header .icon {
            height: 0.4em;
        }

.layout--dark .search--small {
    background: var(--grey-dark-4);
}

    .layout--dark .search--small .search-field {
        border-color: var(--grey-dark-1);
        background-color: var(--grey-dark-4);
    }

        .layout--dark .search--small .search-field input:focus {
            background: var(--grey-dark-5);
        }

/** 2.4.2 Search Filed Live */
.search--live {
    position: relative;
}

    .search--live[data-view=search-results] .search-field {
        z-index: 10;
    }

        .search--live[data-view=search-results] .search-field input {
            border-radius: 4px 0 0 0;
        }

        .search--live[data-view=search-results] .search-field .btn {
            border-radius: 0 4px 0 0;
        }

    .search--live[data-view=search-results] .search-results {
        top: calc(100% - 1px);
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }

    .search--live .search-field {
        position: relative;
        display: flex;
        z-index: 1;
    }

        .search--live .search-field input {
            border-radius: 4px 0 0 4px;
        }

        .search--live .search-field .btn {
            margin-left: -1px;
            width: 40px;
            height: 40px;
            font-size: 1em;
            border-radius: 0 4px 4px 0;
        }

    .search--live .search-results {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        border-radius: 0 0 2px 2px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        transition: all var(--transition-duration) ease 0s;
    }

        .search--live .search-results .search-results-item {
            display: flex;
            align-items: center;
            font-size: 0.875em;
            transition: all var(--transition-duration) ease 0s;
            padding: 5px 10px;
        }

            .search--live .search-results .search-results-item:not(:last-child) {
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }

            .search--live .search-results .search-results-item.item--found {
                cursor: pointer;
            }

                .search--live .search-results .search-results-item.item--found:hover, .search--live .search-results .search-results-item.item--found:focus {
                    background: rgba(0, 0, 0, 0.025);
                }

                    .search--live .search-results .search-results-item.item--found:hover .result *, .search--live .search-results .search-results-item.item--found:focus .result * {
                        color: var(--green);
                    }

            .search--live .search-results .search-results-item.item--no-result {
                color: var(--grey-1);
            }

            .search--live .search-results .search-results-item .icon {
                margin-right: 10px;
                height: 0.875em;
                color: var(--alpha-dark-2);
            }

            .search--live .search-results .search-results-item .result {
                color: var(--grey-1);
            }

                .search--live .search-results .search-results-item .result * {
                    transition: all var(--transition-duration) ease 0s;
                }

                .search--live .search-results .search-results-item .result > span {
                    color: var(--grey-3);
                }

                .search--live .search-results .search-results-item .result strong {
                    color: var(--grey-dark-4);
                }

.layout--dark .search--live .search-field .btn {
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-3);
}

    .layout--dark .search--live .search-field .btn:hover, .layout--dark .search--live .search-field .btn:focus {
        background: var(--green);
    }

/** 2.4.3 Search Filed Dropdown */
.search--dropdown .search-field {
    padding: 0.625rem;
    background-color: var(--grey-light-1);
    border-bottom: 1px solid var(--grey-light-3);
}

.search--dropdown .search-results {
    display: block;
}

    .search--dropdown .search-results.scroll {
        padding: 0px;
        max-height: calc(50vh - 61px);
    }

    .search--dropdown .search-results .no-result {
        display: block;
        padding: 8px 30px 8px 8px;
        font-size: 0.875rem;
        color: var(--grey-1);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 2.5 Field Week Days */
.field-week-days hr {
    margin: 4px 0 12px;
}

.field-week-days .week-day {
    text-align: center;
    font-size: 0.75em;
    font-weight: var(--font-weight);
}

    .field-week-days .week-day .field-check {
        padding: 0;
    }

        .field-week-days .week-day .field-check .checkmark {
            position: relative;
            display: block;
            top: 0;
            transform: none;
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 2.6 Field Color Picker */
.field-color-picker .field-color {
    position: relative;
    padding: 4px;
    width: 100%;
    color: var(--grey-dark-3);
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
}

    .field-color-picker .field-color:focus::placeholder {
        color: transparent;
    }

    .field-color-picker .field-color:disabled {
        background-color: transparent;
        opacity: 0.5;
    }

        .field-color-picker .field-color:disabled ~ .btn {
            border-color: transparent;
            background: transparent;
            color: var(--grey-light-4);
            cursor: default;
        }

    .field-color-picker .field-color > span {
        display: block;
        color: #ffffff;
        padding: 4px 8px;
        border-radius: 2px;
    }

.field-color-picker .no-color .field-color > span {
    color: var(--grey-1);
    background: none;
}

.field-color-picker .field-menu {
    display: block;
}

    .field-color-picker .field-menu .menu-header {
        display: block;
    }

    .field-color-picker .field-menu .menu-list {
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        max-width: 200px;
    }

    .field-color-picker .field-menu label {
        margin-bottom: 2px;
    }

.field-color-picker .color-picker {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.layout--dark .field-color-picker .field-color {
    border-color: var(--grey-dark-1);
    background-color: var(--grey-dark-4);
}

.layout--dark .field-color-picker .no-color .field-color > span {
    color: var(--grey-dark-1);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 2.8 Field Timeslot Picker */
.field-timeslot-picker .field-menu,
.field-timeslot-picker .field-time {
    width: 100%;
}

    .field-timeslot-picker .field-menu .menu-header,
    .field-timeslot-picker .field-menu .menu-list {
        width: inherit;
    }

    .field-timeslot-picker .field-menu .menu-header {
        font-size: 1em;
    }

        .field-timeslot-picker .field-menu .menu-header .icon {
            width: 1em;
        }

    .field-timeslot-picker .field-menu .menu-list {
        max-width: initial;
    }

    .field-timeslot-picker .field-time .field[readonly] {
        cursor: pointer;
    }

    .field-timeslot-picker .field-time .field:focus::placeholder {
        color: var(--grey-1);
    }

.field-timeslot-picker .timeslot-picker .picker-header {
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
}

.field-timeslot-picker .timeslot-picker .meta,
.field-timeslot-picker .timeslot-picker .label.label--meta {
    color: var(--grey-1);
}

.field-timeslot-picker .timeslot-picker .picker-prefooter .field-range {
    padding: 5px 5px 10px;
}

    .field-timeslot-picker .timeslot-picker .picker-prefooter .field-range .range-slider .range-slider-track {
        background: var(--alpha-dark-2);
    }

    .field-timeslot-picker .timeslot-picker .picker-prefooter .field-range .range-slider .range-slider-btn {
        background: #ffffff;
    }

.field-timeslot-picker .timeslot-picker .picker-footer .btn {
    color: #ffffff;
    border-radius: 0 0 4px 4px;
    border-width: 0;
    border-top-width: 1px;
    border-color: var(--grey-light-3);
}

    .field-timeslot-picker .timeslot-picker .picker-footer .btn:hover {
        border-color: var(--grey-light-3);
    }

    .field-timeslot-picker .timeslot-picker .picker-footer .btn[disabled] {
        color: var(--grey-1);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.layout--dark .field-letter .lettermark {
    color: var(--grey-1);
    border-color: var(--alpha-light-3);
}

.layout--dark .field-true-false .slash-sep {
    color: var(--alpha-light-3);
}

/* 3. MENUS  */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 3.1 Calendar */
.calendar .calendar-pagination {
    margin-right: 8px;
    line-height: 0;
}

    .calendar .calendar-pagination .btn {
        margin: 0 -4px;
    }

    .calendar .calendar-pagination .icon {
        width: 0.875em;
        height: 0.875em;
    }

.calendar .menu--calendar .menu-header {
    font-size: 1em;
}

.calendar.calendar--dropdown, .calendar.calendar--nav {
    display: inline-flex;
    align-items: center;
}

/** 3.1.1 Calendar Navigation */
.calendar--nav {
    flex-wrap: wrap;
    width: 100%;
}

    .calendar--nav.medium .calendar-pagination > *, .calendar--nav.small .calendar-pagination > * {
        min-width: initial;
    }

    .calendar--nav.medium .calendar-pagination .label, .calendar--nav.small .calendar-pagination .label {
        display: none;
    }

    .calendar--nav.small .calendar-pagination-range {
        display: none;
    }

    .calendar--nav .calendar-pagination > * {
        display: inline-flex;
        align-items: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        min-width: 108px;
    }

    .calendar--nav .calendar-pagination .btn {
        margin: 0;
    }

    .calendar--nav .calendar-pagination:nth-of-type(1) {
        margin-right: 8px;
    }

        .calendar--nav .calendar-pagination:nth-of-type(1) .label {
            margin-right: inherit;
            flex-shrink: 0;
            line-height: 1.2;
            white-space: nowrap;
        }

    .calendar--nav .calendar-pagination:nth-of-type(3) {
        margin-left: 8px;
    }

        .calendar--nav .calendar-pagination:nth-of-type(3) .label {
            margin-right: inherit;
            flex-shrink: 0;
            line-height: 1.2;
            white-space: nowrap;
        }

    .calendar--nav .calendar-pagination-range {
        position: relative;
        display: inline-flex;
        padding-left: 20px;
    }

        .calendar--nav .calendar-pagination-range::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 1px;
            height: 80%;
            background: var(--grey-light-3);
        }

        .calendar--nav .calendar-pagination-range .btn {
            border-radius: 0;
            margin: 0 -0.5px;
            font-size: 0.875em;
        }

            .calendar--nav .calendar-pagination-range .btn:first-of-type {
                border-radius: 4px 0 0 4px;
            }

            .calendar--nav .calendar-pagination-range .btn:last-of-type {
                border-radius: 0 4px 4px 0;
            }

.layout--dark .calendar--nav .calendar-pagination-range::before {
    background: var(--grey-dark-2);
}

/** 3.1.2 Date Picker */
.date-picker {
    width: 300px;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    .date-picker .date-picker-header,
    .date-picker .week-days,
    .date-picker .days {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .date-picker .date-picker-header {
        border-radius: 4px 4px 0 0;
        padding: 6px;
        border-bottom: 1px solid var(--grey-light-3);
        background: var(--grey-light-1);
    }

        .date-picker .date-picker-header .btn {
            color: var(--grey-3);
        }

            .date-picker .date-picker-header .btn:hover, .date-picker .date-picker-header .btn:focus {
                color: var(--grey-3);
            }

            .date-picker .date-picker-header .btn .icon {
                width: 0.75em;
                height: 0.75em;
            }

        .date-picker .date-picker-header .field-menu .menu-header {
            color: var(--grey-3);
            font-weight: 400;
        }

        .date-picker .date-picker-header .field-menu .menu-list {
            min-width: initial;
        }

    .date-picker .date-picker-body {
        padding: 8px;
        color: var(--grey-3);
        font-size: 0.875em;
    }

        .date-picker .date-picker-body .weekdays,
        .date-picker .date-picker-body .dates {
            list-style: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .date-picker .date-picker-body .weekdays li,
            .date-picker .date-picker-body .weekdays li > span,
            .date-picker .date-picker-body .dates li,
            .date-picker .date-picker-body .dates li > span {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .date-picker .date-picker-body .weekdays li,
            .date-picker .date-picker-body .dates li {
                margin: 4px 0;
                height: 32px;
                width: 40px;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
                transition: all var(--transition-duration) ease 0s;
            }

                .date-picker .date-picker-body .weekdays li > span,
                .date-picker .date-picker-body .dates li > span {
                    height: 32px;
                    width: 32px;
                    border-radius: 50%;
                }

        .date-picker .date-picker-body .dates {
            flex-wrap: wrap;
        }

            .date-picker .date-picker-body .dates .date-prev,
            .date-picker .date-picker-body .dates .date-next,
            .date-picker .date-picker-body .dates .date-disabled {
                opacity: 0.5;
            }

            .date-picker .date-picker-body .dates .date--highlighted {
                background-color: var(--grey-light-1);
            }

            .date-picker .date-picker-body .dates .date {
                cursor: pointer;
            }

                .date-picker .date-picker-body .dates .date:hover > span {
                    color: var(--green);
                    background: rgba(0, 0, 0, 0.05);
                }

                .date-picker .date-picker-body .dates .date .date--range:hover > span {
                    background: rgba(0, 0, 0, 0.05);
                }

            .date-picker .date-picker-body .dates .date--range {
                background: rgba(0, 0, 0, 0.05);
            }

            .date-picker .date-picker-body .dates .date--selected > span {
                color: #ffffff;
                background: var(--green);
            }

            .date-picker .date-picker-body .dates .date--selected:hover > span {
                color: #ffffff;
                background: var(--green);
            }

            .date-picker .date-picker-body .dates .date--start,
            .date-picker .date-picker-body .dates .date--end {
                position: relative;
                background: transparent;
            }

                .date-picker .date-picker-body .dates .date--start > span,
                .date-picker .date-picker-body .dates .date--end > span {
                    position: relative;
                    z-index: 1;
                }

                .date-picker .date-picker-body .dates .date--start::before,
                .date-picker .date-picker-body .dates .date--end::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    width: 50%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.05);
                }

                .date-picker .date-picker-body .dates .date--start::before {
                    right: 0;
                }

                .date-picker .date-picker-body .dates .date--end::before {
                    left: 0;
                }

            .date-picker .date-picker-body .dates .date--today {
                position: relative;
                color: var(--green);
                font-weight: 600;
            }

                .date-picker .date-picker-body .dates .date--today:after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background: var(--green);
                }

.layout--dark .date-picker .date-picker-header .btn:hover, .layout--dark .date-picker .date-picker-header .btn.focus {
    background: var(--alpha-dark-2);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 3.4 Color Picker */
.color-picker {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
    width: 200px;
    background: var(--grey-light-1);
    line-height: 0;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
}

    .color-picker .color {
        margin: 4px;
        position: relative;
        width: 30px;
        height: 30px;
        background: #ffffff;
        border-radius: 4px;
    }

        .color-picker .color.color--none {
            background: transparent;
        }

            .color-picker .color.color--none .option {
                border: 1px solid var(--alpha-dark-2);
                box-shadow: none;
            }

            .color-picker .color.color--none input:checked ~ .option .icon {
                fill: var(--alpha-dark-2);
            }

        .color-picker .color .option {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            font-size: 0;
            padding: 0;
            border-radius: 2px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
            transition: all var(--transition-duration) ease 0s;
        }

            .color-picker .color .option:hover, .color-picker .color .option:focus {
                width: calc(100% - 6px);
                height: calc(100% - 6px);
            }

            .color-picker .color .option .icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 14px;
                height: 14px;
                fill: #ffffff;
                opacity: 0;
                transition: none;
            }

    .color-picker .field-option {
        position: initial !important;
    }

        .color-picker .field-option input {
            position: absolute;
            visibility: hidden;
        }

            .color-picker .field-option input:checked ~ .option {
                width: calc(100% - 6px);
                height: calc(100% - 6px);
                cursor: context-menu;
            }

                .color-picker .field-option input:checked ~ .option .icon {
                    opacity: 1;
                }

            .color-picker .field-option input:disabled ~ .option {
                width: calc(100% - 10px);
                height: calc(100% - 10px);
                cursor: not-allowed;
            }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 3.3 Menu Context */
.menu.menu--context {
    position: fixed;
    z-index: 9999;
}

    .menu.menu--context.menu--dark .menu-list,
    .menu.menu--context.menu--dark .menu-sublist {
        color: var(--grey-1);
        border-color: var(--grey-dark-2);
        background: var(--grey-dark-3);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    }

    .menu.menu--context.menu--dark .option .option--disabled, .menu.menu--context.menu--dark .option[disabled] {
        opacity: 0.25;
    }

    .menu.menu--context.menu--light .menu-list,
    .menu.menu--context.menu--light .menu-sublist {
        background: var(--grey-light-1);
    }

    .menu.menu--context .menu-list,
    .menu.menu--context .menu-sublist {
        color: var(--grey-dark-4);
        position: absolute;
        border-radius: 0;
    }

        .menu.menu--context .menu-list li:hover > .menu-sublist, .menu.menu--context .menu-list li:focus > .menu-sublist,
        .menu.menu--context .menu-sublist li:hover > .menu-sublist,
        .menu.menu--context .menu-sublist li:focus > .menu-sublist {
            opacity: 1;
            pointer-events: all;
        }

        .menu.menu--context .menu-list li[disabled],
        .menu.menu--context .menu-sublist li[disabled] {
            pointer-events: none;
        }

        .menu.menu--context .menu-list .option,
        .menu.menu--context .menu-sublist .option {
            color: inherit;
        }

    .menu.menu--context .menu-list {
        left: 0;
        overflow: visible;
    }

    .menu.menu--context .menu-sublist {
        left: 98%;
        min-width: 150px;
        width: auto;
        max-width: 300px;
        border: 1px solid var(--grey-light-3);
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        transition: opacity var(--transition-duration) ease 0s;
        transform: translateY(-29px);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
    }

        .menu.menu--context .menu-sublist.menu-sublist--left {
            left: 0;
            transform: translateX(-98%);
        }

    .menu.menu--context .option {
        font-size: 13px;
        padding: 4px 16px;
    }

        .menu.menu--context .option.option--disabled, .menu.menu--context .option[disabled] {
            opacity: 0.4;
            pointer-events: none;
            cursor: context-menu;
        }

            .menu.menu--context .option.option--disabled:hover, .menu.menu--context .option.option--disabled:focus, .menu.menu--context .option[disabled]:hover, .menu.menu--context .option[disabled]:focus {
                background: transparent;
            }

        .menu.menu--context .option.option--next {
            padding: 4px 30px 4px 16px;
        }

            .menu.menu--context .option.option--next .icon {
                right: 12px;
                opacity: 1;
                fill: var(--grey-3);
            }

    .menu.menu--context hr {
        margin: 0;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 1.6 Button Filter */
.btn-filter {
    background: transparent;
    border-color: transparent;
}

    .btn-filter .btn {
        border: none;
    }

        .btn-filter .btn:hover, .btn-filter .btn:focus {
            color: var(--grey-3);
            background: rgba(0, 0, 0, 0.05);
        }

    .btn-filter.btn--filter-active {
        position: relative;
    }

        .btn-filter.btn--filter-active:before {
            position: absolute;
            top: 4px;
            right: 4px;
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid #ffffff;
            background: var(--green);
            z-index: 1;
        }

.layout--dark .btn-filter.btn--filter-active:before {
    border-color: var(--grey-dark-3);
}

.layout--dark .btn-filter .btn:hover, .layout--dark .btn-filter .btn:focus {
    color: var(--green);
    background: rgba(255, 255, 255, 0.05);
}

/* 5. CARDS  */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 5.2 Panel */
.panel .panel-preheader {
    margin-bottom: 4px;
}

.panel .panel-header {
    margin-bottom: 10px;
}

.panel .panel-item {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 4px;
}

    .panel .panel-item .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .panel .panel-item .card-header .btn-close {
            display: inline-block;
            padding-left: 4px;
            cursor: pointer;
        }

            .panel .panel-item .card-header .btn-close:hover, .panel .panel-item .card-header .btn-close:focus {
                color: var(--red);
            }

            .panel .panel-item .card-header .btn-close .icon {
                width: 0.625em;
            }

        .panel .panel-item .card-header .menu .btn {
            margin-left: 4px;
        }

.panel .btn--add {
    margin-top: 10px;
    max-width: 100%;
    text-align: left;
    font-size: 0.875em;
    color: var(--green);
}

    .panel .btn--add:hover, .panel .btn--add:focus {
        color: #ffffff;
    }

.layout--dark .panel .panel-item {
    border-color: var(--alpha-light-2);
}

/** 5.2.1 Panel Card */
.panel--card {
    color: var(--grey-3);
}

    .panel--card .card {
        padding: 10px;
    }

        .panel--card .card .card-header {
            margin-bottom: 10px;
        }

/** 5.2.2 Panel Dropdown */
.panel--dropdown {
    color: var(--grey-3);
}

    .panel--dropdown .dropdown .dropdown-header .dropdown-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .panel--dropdown .dropdown .dropdown-header .dropdown-label .icon--left {
            top: 0;
            margin: 0;
        }

    .panel--dropdown .dropdown .dropdown-header .dropdown-controls {
        display: flex;
        gap: 4px;
        pointer-events: all;
    }

    .panel--dropdown .dropdown .dropdown-header .icon--left {
        margin-right: 4px;
    }

    .panel--dropdown .dropdown .dropdown-header .flex {
        display: flex;
        gap: 8px;
    }

    .panel--dropdown .dropdown .dropdown-header > * {
        display: inline-block;
        pointer-events: none;
    }

    .panel--dropdown .dropdown .dropdown-body {
        transform: none !important;
    }

    .panel--dropdown .card {
        padding: 10px;
    }

        .panel--dropdown .card .card-header {
            color: var(--grey-1);
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 5.3 Quick Start */
.quick-start {
    padding: 30px;
    border-radius: 4px;
    background: var(--alpha-dark-1);
}

    .quick-start.quick-start--dark {
        background: var(--alpha-light-2);
    }

    .quick-start .quick-start-header,
    .quick-start .quick-start-footer {
        width: 100%;
        max-width: 80%;
    }

        .quick-start .quick-start-header .btn--circle {
            display: none;
        }

    .quick-start .quick-start-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 90%;
    }

        .quick-start .quick-start-body .description {
            text-align: center;
            margin: auto 0;
        }

            .quick-start .quick-start-body .description p {
                color: var(--grey-3);
                font-size: 1em;
            }

    .quick-start .quick-start-footer {
        display: flex;
        justify-content: space-between;
        margin: 0 10px;
    }

        .quick-start .quick-start-footer .btn {
            min-width: 100px;
        }

    .quick-start > .card {
        height: 80vh;
        min-height: 550px;
        border-radius: 4px;
        border: none !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    }

        .quick-start > .card > .flex {
            position: relative;
            min-height: 90%;
        }

            .quick-start > .card > .flex[data-view] .quick-start-body {
                position: relative;
                top: 0;
                margin-top: auto;
                overflow: visible;
                opacity: 1;
                transition: all var(--transition-duration) ease 0s;
            }

            .quick-start > .card > .flex[data-view] .quick-start-footer {
                flex: 0 0 0;
                display: none;
                opacity: 0;
                transition: all var(--transition-duration) ease 0s;
            }

        .quick-start > .card .card-inner {
            border: none;
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 5.1.3 Card Meta */
.card--meta {
    display: inline-block;
    width: auto;
    padding: 6px 12px;
    border-radius: 4px;
    background: #ffffff;
    line-height: 1.4;
}

    .card--meta .meta-group {
        margin: 4px 0;
        padding: 0 20px;
    }

        .card--meta .meta-group:first-child {
            padding-left: 0;
        }

            .card--meta .meta-group:first-child::before {
                content: none;
            }

        .card--meta .meta-group:last-child {
            padding-right: 0;
        }

.layout--light .card--meta {
    background: #ffffff;
}

.layout--dark .card--meta {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

/* 6. GRAPHS  */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/* 6. GRAPHS  */
.discover {
    font-size: 0.875em;
}

    .discover:hover .discover-box .visible {
        display: none;
    }

    .discover:hover .discover-box .discoverable {
        display: block;
    }

.discover-box {
    padding: 3px;
    width: 39px;
    height: 32px;
    background: var(--grey-light-3);
    border-radius: 4px;
}

    .discover-box .discover-box-inner {
        position: relative;
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 2px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        overflow: hidden;
    }

        .discover-box .discover-box-inner > * {
            position: absolute;
            width: 100%;
            height: 100%;
            color: var(--green);
            font-weight: 600;
        }

    .discover-box .discoverable {
        display: none;
    }

    .discover-box .points .points-last {
        position: absolute;
        top: 0;
        left: 2px;
        font-size: 0.75em;
    }

    .discover-box .points .points-total {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .discover-box .graph svg {
        width: 35px;
        height: 26px;
        margin-left: -1px;
    }

    .discover-box .graph .line1 {
        stroke: var(--green);
        fill: rgba(39, 191, 129, 0.25);
    }

    .discover-box .graph .line2 {
        stroke: var(--grey-light-4);
        fill: rgba(221, 221, 221, 0.25);
    }

    .discover-box .grade > * {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .discover-box .grade .grade-mark {
        position: relative;
        display: block;
        width: 21px;
        color: #ffffff;
    }

        .discover-box .grade .grade-mark::before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            padding-bottom: 100%;
            background: var(--green);
            border-radius: 50%;
        }

        .discover-box .grade .grade-mark > * {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.layout--dark .discover-box {
    background: var(--grey-dark-5);
}

    .layout--dark .discover-box .discover-box-inner {
        background: var(--grey-dark-3);
    }

    .layout--dark .discover-box .graph .line1 {
        stroke: var(--green);
        fill: rgba(39, 191, 129, 0.25);
    }

    .layout--dark .discover-box .graph .line2 {
        stroke: var(--grey-dark-1);
        fill: rgba(97, 97, 97, 0.25);
    }

    .layout--dark .discover-box .grade .grade-mark {
        color: var(--grey-dark-4);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 6.1 Progress Bar */
.progress {
    position: relative;
    display: inline-block;
    padding-left: 24px;
}

    .progress .progress-bar {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: block;
        width: 18px;
        height: 2px;
        background-color: var(--alpha-dark-2);
    }

        .progress .progress-bar .bar {
            display: block;
            height: 100%;
            background-color: var(--green);
            transition: all var(--transition-duration) ease 0s;
        }

    .progress .progress-percent {
        font-size: inherit;
        color: var(--green);
    }

.layout--dark .progress .progress-bar {
    background-color: var(--grey-dark-2);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 6.2 Progress Circle */
.progress-circle {
    position: relative;
    max-width: 98px;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
}

    .progress-circle:before {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .progress-circle .progress-circle-outer,
    .progress-circle .progress-circle-inner {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-sizing: content-box;
    }

    .progress-circle .progress-circle-outer {
        width: 100%;
        padding-bottom: 100%;
        border: 1px solid var(--grey-light-3);
        background: rgba(255, 255, 255, 0.625);
        box-shadow: 0 6px 9px rgba(0, 0, 0, 0.06);
    }

        .progress-circle .progress-circle-outer .progress-circle-inner {
            width: calc(100% - 5px);
            height: calc(100% - 5px);
            background: var(--grey-light-2);
            background: linear-gradient(180deg, var(--grey-light-2) 0%, var(--grey-light-1) 100%);
        }

    .progress-circle .progress-circle-bar {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform: translate(-50%, -50%) rotate(-90deg);
        width: 100%;
        padding-bottom: 100%;
    }

        .progress-circle .progress-circle-bar svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% + 2px);
            height: calc(100% + 2px);
            overflow: initial;
        }

            .progress-circle .progress-circle-bar svg circle {
                fill: none;
                stroke: var(--green);
                stroke-width: 4;
                stroke-dasharray: 314%;
                stroke-dashoffset: 310.86%;
                stroke-linecap: round;
            }

    .progress-circle .progress-circle-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--green);
        line-height: 0.5;
    }

        .progress-circle .progress-circle-value .label {
            font-size: 0.625rem;
        }

        .progress-circle .progress-circle-value .value {
            display: inline-block;
            margin: 0.25em 0;
            width: 100%;
        }

        .progress-circle .progress-circle-value hr {
            margin: 0.5em 0;
        }

.progress-circle--small {
    max-width: 36px;
    font-size: 0.625rem;
}

    .progress-circle--small .progress-circle-bar svg circle {
        stroke-width: 2;
    }

    .progress-circle--small .progress-circle-value {
        font-weight: 600;
    }

.progress-circle--double {
    font-size: 0.75rem;
}

    .progress-circle--double .progress-circle-outer .progress-circle-inner {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
    }

    .progress-circle--double .progress-circle-bar .progress-circle-bar-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 12px);
        height: calc(100% - 12px);
    }

        .progress-circle--double .progress-circle-bar .progress-circle-bar-inner svg circle {
            stroke-width: 2;
        }

    .progress-circle--double .progress-circle-value {
        line-height: 1;
    }

/* Layout Theme */
.layout--dark .progress-circle .progress-circle-outer {
    border-color: var(--grey-dark-2);
    background: var(--grey-dark-4);
    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.16);
}

    .layout--dark .progress-circle .progress-circle-outer .progress-circle-inner {
        background: var(--grey-dark-4);
        background: linear-gradient(180deg, var(--grey-dark-4) 0%, var(--grey-dark-3) 100%);
    }

.progress-circle.type--import-summary .progress-circle-value {
    color: var(--grey-dark-4);
    font-size: 1.125rem;
    font-weight: 600;
}

.layout--dark .progress-circle.type--import-summary .progress-circle-value {
    color: #ffffff;
}

.progress-circle--small.type--import-summary .progress-circle-value {
    font-size: 0.625rem;
}

/* 8. MEDIA  */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 8.1 Canvas */
.canvas {
    position: relative;
    width: 100%;
    font-size: 16px;
    line-height: 2em;
}

    .canvas p {
        position: absolute;
        width: 100%;
        top: 0;
        left: 80%;
        z-index: 1;
        color: red;
        font-size: inherit;
    }

    .canvas::before {
        content: "";
        position: relative;
        display: block;
        width: 100%;
        padding-bottom: 75%;
    }

    .canvas .canvas-element {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
    }

.canvas-html h5 {
    color: var(--grey-3);
}

    .canvas-html h5:not(:first-of-type) {
        margin-top: 1em;
    }

.canvas-html img {
    max-width: 100%;
    border: 4px solid #ffffff;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.canvas-html p {
    color: var(--grey-2);
}

    .canvas-html p:not(:last-of-type) {
        margin-bottom: 0.6em;
    }

.layout--dark .canvas-html h5 {
    color: var(--grey-1);
}

.layout--dark p {
    color: var(--grey-3);
}

/* 9. NAVIGATION  */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/* 9.1 Navigation Sidebar */
.nav-sidebar {
    overflow: auto;
    scrollbar-color: var(--alpha-dark-2) transparent;
    /* width */
    /* Track */
    /* Handle */
    /* Handle */
    /* Hide scrollbar but allow scrolling */
    scrollbar-color: var(--alpha-light-2) transparent;
}

    .nav-sidebar::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .nav-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-sidebar::-webkit-scrollbar-thumb {
        background: var(--alpha-light-3);
    }

        .nav-sidebar::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

    .nav-sidebar::-webkit-scrollbar-corner {
        background: transparent;
    }

    .nav-sidebar.scroll--hidden {
        padding: 0;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

        .nav-sidebar.scroll--hidden::-webkit-scrollbar {
            display: none; /* for Chrome, Safari, and Opera */
        }

    .nav-sidebar hr {
        margin: 0;
        border-color: var(--grey-dark-3);
    }

    .nav-sidebar .nav-sidebar-menu {
        border-top: 1px solid var(--grey-dark-3);
        border-bottom: 1px solid var(--grey-dark-3);
    }

    .nav-sidebar .nav-sidebar-submenu {
        background: var(--grey-dark-6);
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all var(--transition-duration) ease 0s;
    }

        .nav-sidebar .nav-sidebar-submenu .btn-sidebar {
            color: var(--grey-3);
        }

            .nav-sidebar .nav-sidebar-submenu .btn-sidebar:hover, .nav-sidebar .nav-sidebar-submenu .btn-sidebar:focus, .nav-sidebar .nav-sidebar-submenu .btn-sidebar.active {
                color: var(--grey-1);
            }

    .nav-sidebar .active--child ~ .nav-sidebar-submenu {
        height: auto;
        opacity: 1;
    }

/* 10. USER */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 10.1 General */
.user {
    max-width: 100%;
}

    .user .user-meta {
        line-height: 1.4;
        max-width: 100%;
    }

        .user .user-meta > *:last-child {
            display: block;
            font-size: 0.75rem;
            color: var(--grey-1);
            font-weight: var(--font-weight);
        }

        .user .user-meta .text-overflow {
            display: block;
        }

        .user .user-meta .user-role {
            text-transform: uppercase;
            letter-spacing: 0.125em;
        }

    .user.user--card {
        text-align: center;
    }

        .user.user--card .avatar,
        .user.user--card .user-meta {
            margin-bottom: 0.75em;
        }

    .user.user--tile {
        display: inline-block;
        position: relative;
        padding-left: 38px;
        line-height: 0;
    }

        .user.user--tile .avatar {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            margin-right: 4px;
        }

        .user.user--tile .user-meta {
            position: relative;
            top: 0.1em;
            display: inline-block;
            font-weight: 400;
            line-height: 1.3;
        }

            .user.user--tile .user-meta .user-role {
                font-size: 0.625rem;
            }

.layout--dark .user .user-meta > *:last-child {
    color: #616161;
}

/** 10.2 Avatar */
.avatar {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

    .avatar .avatar-img {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        overflow: hidden;
        z-index: 1;
    }

        .avatar .avatar-img img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
        }

    .avatar > .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -43%);
        height: 80%;
        fill: var(--grey-1);
    }

    .avatar.online::before, .avatar.away::before, .avatar.offline::before {
        position: absolute;
        bottom: 7%;
        right: 7%;
        content: "";
        display: block;
        width: 15%;
        height: 15%;
        border-radius: 50%;
        z-index: 2;
        box-shadow: 0 0 0 2px rgba(235, 235, 235, 0.8);
    }

    .avatar.online::before {
        background: var(--green);
    }

    .avatar.away::before {
        background: var(--orange);
    }

    .avatar.offline::before {
        background: var(--red);
    }

.avatar--browse {
    width: 80px;
    height: 80px;
}

    .avatar--browse:hover .field-file, .avatar--browse:focus .field-file {
        opacity: 1;
        height: 100%;
    }

    .avatar--browse.online::before, .avatar--browse.away::before, .avatar--browse.offline::before {
        bottom: 7%;
        right: 7%;
    }

    .avatar--browse .field-file {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 1;
        opacity: 0;
        transition: all var(--transition-duration) ease 0s;
    }

        .avatar--browse .field-file .file {
            height: 100%;
        }

        .avatar--browse .field-file .browse {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            text-align: center;
            font-size: 0.625em;
            border-radius: 50%;
            overflow: hidden;
        }

            .avatar--browse .field-file .browse .icon {
                position: absolute;
                top: 20%;
                left: 50%;
                transform: translateX(-50%);
                fill: var(--grey-dark-4);
                height: 1.5em;
            }

            .avatar--browse .field-file .browse span {
                position: absolute;
                left: 50%;
                color: var(--grey-dark-4);
                transform: translateX(-50%);
                bottom: 15%;
                line-height: 1.2;
            }

            .avatar--browse .field-file .browse:before {
                position: absolute;
                bottom: 0;
                left: 0;
                content: "";
                width: 100%;
                height: 50%;
                display: block;
                background: rgba(255, 255, 255, 0.6);
            }

.layout--dark .avatar {
    background: var(--grey-dark-2);
}

    .layout--dark .avatar > .icon {
        fill: var(--grey-dark-3);
    }

    .layout--dark .avatar.online::before, .layout--dark .avatar.away::before, .layout--dark .avatar.offline::before {
        box-shadow: 0 0 0 2px rgba(35, 35, 35, 0.8);
    }

    .layout--dark .avatar .field-file .icon {
        fill: var(--green);
    }

    .layout--dark .avatar .field-file .browse span {
        color: var(--grey-1);
    }

    .layout--dark .avatar .field-file .browse:before {
        background: rgba(0, 0, 0, 0.6);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 10.2 Avatar */
.avatar-list {
    list-style: none;
    line-height: 1;
    white-space: nowrap;
}

    .avatar-list.avatar-list--empty .avatar-count {
        color: var(--grey-3);
        background: inherit;
    }

    .avatar-list .avatar {
        width: 28px;
        height: 28px;
    }

        .avatar-list .avatar:not(:last-of-type) {
            margin-right: -16px;
        }

    .avatar-list .avatar-img,
    .avatar-list .avatar-count {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    }

    .avatar-list .avatar-count {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
        color: #ffffff;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: inherit;
        background: var(--grey-dark-4);
        z-index: 1;
    }

        .avatar-list .avatar-count > * {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.layout--dark .avatar-list.avatar-list--empty .avatar {
    background: transparent;
}

.layout--dark .avatar-list.avatar-list--empty .avatar-count {
    color: var(--grey-3);
    background: inherit;
}

.layout--dark .avatar-list .avatar-img,
.layout--dark .avatar-list .avatar-count {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.layout--dark .avatar-list .avatar-count {
    color: var(--grey-dark-3);
    background: #ffffff;
}

/* 11. HEADERS */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 11.1 Heading */
.heading {
    display: inline-flex;
    align-items: center;
}

    .heading .heading-icon {
        position: relative;
        width: 2.25em;
        height: 2.25em;
        color: #ffffff;
        border-radius: 4px;
        background: var(--green);
        margin-right: 15px;
    }

        .heading .heading-icon.heading-icon--clean {
            color: var(--green);
            background: transparent;
        }

            .heading .heading-icon.heading-icon--clean .icon {
                max-height: 100%;
                max-width: 100%;
            }

        .heading .heading-icon .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: 70%;
            width: 100%;
            max-width: 70%;
            fill: currentColor;
        }

    .heading .heading-title {
        line-height: 1;
        margin-bottom: 0;
    }

.layout--dark .heading-title {
    color: var(--grey-light-4);
}

.layout--dark .heading-icon {
    color: var(--grey-dark-4);
}

/* 12. LISTS */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 12.2 Breadcrumbs */
.breadcrumbs {
    list-style: none;
    display: flex;
}

    .breadcrumbs li {
        font-size: 0.75rem;
    }

        .breadcrumbs li:nth-child(1) {
            opacity: 0.4;
        }

        .breadcrumbs li:nth-child(n+2)::before {
            margin: 0.2em;
            content: "/";
            opacity: 0.2;
        }

.layout--dark .breadcrumbs li:nth-child(1) {
    opacity: 0.6;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 12.3 Rating Stars */
.rating-stars {
    display: inline-block;
    list-style: none;
    color: var(--green);
}

    .rating-stars .rating-star,
    .rating-stars .rating-half-star {
        display: inline-block;
        width: 1em;
    }

        .rating-stars .rating-star .icon,
        .rating-stars .rating-half-star .icon {
            fill: currentColor;
        }

        .rating-stars .rating-half-star .icon {
            width: 50%;
        }

/* 13. MISC */

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.7 Loaders */
.loader-container {
    position: relative;
}

    .loader-container .loader {
        position: absolute !important;
        display: initial;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        z-index: 999;
        border-radius: 8px;
    }

        .loader-container .loader > * {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 14% !important;
        }

.loader {
    display: none;
}

/** 13.6.1 Loader Spinner */
.loader-spinner {
    position: relative;
    width: 100%;
    max-width: 50px;
}

    .loader-spinner::before {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 100%;
    }

    .loader-spinner.loader-spinner--mini {
        max-width: 12px;
    }

        .loader-spinner.loader-spinner--mini .loader-spinner-circles {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .loader-spinner .loader-spinner-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 16%;
        height: 16%;
        background: var(--grey-3);
        border-radius: 50%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        transform-origin: 50% 50%;
    }

    .loader-spinner .loader-spinner-circles,
    .loader-spinner .loader-spinner-effect,
    .loader-spinner .loader-spinner-effect span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .loader-spinner .loader-spinner-circles span,
        .loader-spinner .loader-spinner-effect span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(calc(45deg * var(--spinner-i)));
        }

            .loader-spinner .loader-spinner-circles span::before,
            .loader-spinner .loader-spinner-effect span::before {
                content: "";
                position: absolute;
                top: 0;
                left: 44%;
                min-width: 2px;
                min-height: 2px;
                width: 8%;
                height: 8%;
                background: var(--grey-3);
                border-radius: 50%;
                opacity: calc(0.125 * var(--spinner-i));
            }

    .loader-spinner .loader-spinner-circles {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
        animation: spinner 4s linear infinite;
    }

    .loader-spinner .loader-spinner-effect {
        filter: url(#gooey);
    }

        .loader-spinner .loader-spinner-effect .loader-spinner-rotate {
            animation: spinner 4s ease-in-out infinite;
            animation-delay: calc(-0.2s * var(--spinner-j));
        }

            .loader-spinner .loader-spinner-effect .loader-spinner-rotate::before {
                left: 26%;
                width: 14%;
                height: 14%;
                opacity: calc(0.2 * var(--spinner-j) + 0.33);
            }

.layout--dark .loader-spinner .loader-spinner-ring {
    background: var(--green);
}

.layout--dark .loader-spinner .loader-spinner-circles span::before,
.layout--dark .loader-spinner .loader-spinner-effect span::before {
    background: var(--green);
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/** 13.6.2 Loader Moving */
.loader-moving {
    position: relative;
    width: 100%;
    max-width: 20px;
}

    .loader-moving::before {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 25%;
    }

    .loader-moving span {
        position: absolute;
        top: 0;
        left: calc(39% * var(--moving-i));
        width: 25%;
        height: 100%;
    }

        .loader-moving span::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: var(--grey-3);
        }

    .loader-moving .loader-moving-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: url(#gooey);
    }

        .loader-moving .loader-moving-effect .loader-moving-circle {
            top: -11%;
        }

            .loader-moving .loader-moving-effect .loader-moving-circle::before {
                width: 120%;
                height: 120%;
                animation: moveing 1.25s ease-in-out both infinite;
            }

.layout--dark .loader-moving span::before {
    background: var(--green);
}

@keyframes moveing {
    0% {
        left: 0;
    }

    50% {
        left: 300%;
    }

    100% {
        left: 0;
    }
}
/** 13.6.3 Loader Typing */
.loader-typing {
    position: relative;
    width: 100%;
    max-width: 20px;
}

    .loader-typing.animation--stop span::before {
        animation: none;
    }

    .loader-typing::before {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 20%;
    }

    .loader-typing span {
        position: absolute;
        top: 0;
        left: calc(39% * var(--typing-i));
        width: 20%;
        height: 100%;
    }

        .loader-typing span::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: var(--grey-3);
            animation: typing 0.75s linear both infinite;
            animation-delay: calc(0.2s * var(--typing-i));
        }

.layout--dark .loader-typing span::before {
    background: var(--green);
}

@keyframes typing {
    0% {
        opacity: 0.5;
        top: 0;
    }

    25% {
        opacity: 0;
        top: -50%;
    }

    75% {
        opacity: 1;
        top: 50%;
    }

    100% {
        opacity: 0.5;
        top: 0;
    }
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.1 Daily Activities */
.timeline-daily {
    height: 100%;
}

    .timeline-daily .scroll {
        max-height: calc(100vh - 135px);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.2 Label */
.label {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--grey-3);
    font-weight: 400;
}

    .label.label--title, .label.label--meta, .label.label--status {
        text-transform: uppercase;
        letter-spacing: 0.125em;
    }

    .label.label--meta, .label.label--status {
        font-size: 0.75rem;
        color: var(--grey-1);
    }

    .label.label--icon {
        position: relative;
        padding-left: 1.6em;
    }

        .label.label--icon .icon {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            max-width: 1.25em;
            max-height: 1.25em;
        }

            .label.label--icon .icon.icon--sm {
                max-width: 0.875em;
                max-height: 0.875em;
            }

    .label.label--menu {
        font-weight: 600;
    }

        .label.label--menu::after {
            content: "|";
            color: var(--grey-light-3);
            display: inline-block;
            margin: 0 0.375em 0 0.5em;
        }

    .label.label--status .label-value {
        text-transform: none;
        letter-spacing: var(--letter-spacing);
    }

    .label.label--color {
        position: relative;
        padding-bottom: 6px;
    }

        .label.label--color .label-color {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            max-width: 50px;
            height: 4px;
            border-radius: 2px;
        }

/** Layout Theme */
.layout--dark .label.label--title {
    color: var(--grey-1);
}

.layout--dark .label.label--meta {
    color: #616161;
}

.layout--dark .label.label--menu::after {
    color: var(--alpha-light-2);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 13.3 Meta */
.meta-group {
    position: relative;
    padding-left: 8px;
}

    .meta-group:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-left: 1px solid var(--grey-light-3);
    }

.meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--grey-1);
}

    .meta.meta--icon {
        position: relative;
        padding-left: 1.6em;
    }

        .meta.meta--icon .icon {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 100%;
            max-height: 1.25em;
        }

    .meta .meta-value {
        color: var(--grey-3);
    }

/** Layout Theme */
.layout--dark .meta-group:before {
    border-color: var(--grey-dark-2);
}

.layout--dark .meta {
    color: #616161;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.4.2 Tile Class */
.tile--class {
    position: relative;
    padding: 8px 12px 8px 8px;
    height: 52px;
    font-size: 0.875rem;
    border-radius: 4px;
    background: var(--alpha-dark-1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-duration) ease 0s;
    cursor: pointer;
    overflow: hidden;
}

    .tile--class:hover, .tile--class:focus, .tile--class.active {
        background: var(--alpha-dark-2);
    }

        .tile--class:hover .tile-headline .label, .tile--class:focus .tile-headline .label, .tile--class.active .tile-headline .label {
            display: none;
        }

        .tile--class:hover .tile-links, .tile--class:focus .tile-links, .tile--class.active .tile-links {
            display: block;
            opacity: 1;
        }

        .tile--class:hover .tile-extra .discover-box .visible, .tile--class:focus .tile-extra .discover-box .visible, .tile--class.active .tile-extra .discover-box .visible {
            display: none;
        }

        .tile--class:hover .tile-extra .discover-box .discoverable, .tile--class:focus .tile-extra .discover-box .discoverable, .tile--class.active .tile-extra .discover-box .discoverable {
            display: initial;
        }

    .tile--class.open {
        cursor: initial;
        overflow: initial;
    }

        .tile--class.open .dialog {
            transform: translate(-50%, -50%);
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

            .tile--class.open .dialog.dialog--bottom {
                transform: translate(-50%, 12px);
            }

            .tile--class.open .dialog.dialog--top {
                transform: translate(-50%, calc(-100% - 48px));
            }

    .tile--class .tile-headline {
        position: relative;
        padding-left: 44px;
        max-width: calc(100% - 86px);
        height: 39px;
    }

        .tile--class .tile-headline .progress-circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 36px;
            height: 36px;
        }

        .tile--class .tile-headline .headline {
            line-height: 1.4;
        }

        .tile--class .tile-headline .label {
            font-size: 0.75rem;
        }

    .tile--class .tile-links {
        opacity: 1;
        display: none;
        font-size: 0.75rem;
        pointer-events: all;
        transition: all var(--transition-duration) ease 0s;
    }

        .tile--class .tile-links li {
            position: relative;
            display: inline-block;
        }

            .tile--class .tile-links li:not(:first-child) {
                padding-left: 9px;
            }

                .tile--class .tile-links li:not(:first-child):before {
                    position: absolute;
                    top: 0;
                    left: 3px;
                    content: "";
                    display: block;
                    height: 100%;
                    width: 1px;
                    background: var(--alpha-dark-2);
                }

    .tile--class .tile-extra .discover-box {
        float: left;
        margin-right: -3px;
    }

    .tile--class .dialog {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        z-index: 9;
        box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.26), 0px 3px 6px rgba(0, 0, 0, 0.12);
    }

.layout--dark .tile--class {
    background: var(--alpha-light-1);
}

    .layout--dark .tile--class:hover, .layout--dark .tile--class:focus, .layout--dark .tile--class.active {
        background: var(--alpha-light-2);
    }

    .layout--dark .tile--class .tile-links li:not(:first-child):before {
        background: var(--alpha-light-2);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.4 Tile */
.tile > *:first-child {
    pointer-events: none;
}

.tile.placeholder {
    border: 1px dashed var(--grey-light-3);
    background: #ffffff;
    cursor: initial;
}

    .tile.placeholder > *:first-child {
        pointer-events: all;
    }

    .tile.placeholder:hover, .tile.placeholder:focus {
        background: #ffffff;
    }

.layout--light .tile.placeholder {
    background: var(--grey-light-1);
}

    .layout--light .tile.placeholder:hover, .layout--light .tile.placeholder:focus {
        background: var(--grey-light-1);
    }

.layout--dark .tile {
    color: rgba(255, 255, 255, 0.8);
}

    .layout--dark .tile .tile-headline h1, .layout--dark .tile .tile-headline h2, .layout--dark .tile .tile-headline h3, .layout--dark .tile .tile-headline h4, .layout--dark .tile .tile-headline h5, .layout--dark .tile .tile-headline h6 {
        color: inherit;
    }

    .layout--dark .tile.placeholder {
        border-color: var(--grey-dark-2);
        background: var(--grey-dark-4);
    }

        .layout--dark .tile.placeholder:hover, .layout--dark .tile.placeholder:focus {
            background: var(--grey-dark-4);
        }

/** 13.4.1 Tile Class Item */
.tile--class-item {
    position: relative;
    padding: 8px 12px 8px 8px;
    min-height: 51px;
    font-size: 0.875rem;
    border-radius: 4px;
    border: 1px solid var(--grey-light-1);
    background: var(--alpha-dark-1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-duration) ease 0s;
    cursor: pointer;
    overflow: hidden;
}

    .tile--class-item:hover, .tile--class-item:focus {
        background: var(--alpha-dark-2);
    }

    .tile--class-item.focus .tile-extra .label {
        display: none;
    }

    .tile--class-item.focus .tile-extra .btn {
        display: inline-block;
        pointer-events: all;
    }

    .tile--class-item.open {
        overflow: initial;
    }

        .tile--class-item.open .dialog {
            transform: translate(calc(100% + 12px), 0);
            opacity: 1;
            visibility: visible;
        }

            .tile--class-item.open .dialog.dialog--bottom {
                transform: translate(-50%, 12px);
            }

            .tile--class-item.open .dialog.dialog--top {
                transform: translate(-50%, calc(-100% - 12px));
            }

    .tile--class-item.placeholder {
        box-shadow: none;
    }

        .tile--class-item.placeholder .tile-headline .room {
            border: none;
            background: var(--alpha-dark-1);
        }

        .tile--class-item.placeholder .tile-extra .label {
            display: none;
        }

        .tile--class-item.placeholder .tile-extra .btn {
            display: inline-block;
        }

    .tile--class-item .tile-headline {
        position: relative;
        padding-left: 44px;
        max-width: calc(100% - 86px);
    }

        .tile--class-item .tile-headline .room {
            position: absolute;
            top: 0;
            left: 0;
        }

        .tile--class-item .tile-headline .headline {
            line-height: 1.4;
            max-height: 36px;
        }

        .tile--class-item .tile-headline .label {
            font-size: 0.75rem;
        }

    .tile--class-item .tile-extra .label {
        font-size: 0.75rem;
    }

    .tile--class-item .tile-extra .btn {
        display: none;
    }

    .tile--class-item .tile-pattern {
        position: absolute;
        left: 8px;
        top: 52px;
        width: calc(100% - 16px);
        height: calc(100% - 60px);
        background-size: 100px;
        background-repeat: repeat;
        background-position: top left;
    }

    .tile--class-item .dialog {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(100%, 0);
        z-index: 9;
        opacity: 0;
        visibility: hidden;
    }

        .tile--class-item .dialog.dialog--bottom {
            top: 51px;
            right: auto;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .tile--class-item .dialog.dialog--top {
            top: 0;
            right: auto;
            left: 50%;
            transform: translate(-50%, -100%);
        }

.layout--dark .tile--class-item {
    border-color: var(--grey-dark-4);
    background: var(--alpha-light-1);
}

    .layout--dark .tile--class-item:hover, .layout--dark .tile--class-item:focus {
        background: var(--alpha-light-2);
    }

    .layout--dark .tile--class-item.placeholder .tile-headline .room {
        background: var(--grey-dark-3);
    }

    .layout--dark .tile--class-item .placeholder-prefix:before {
        border-color: var(--grey-dark-1);
    }

    .layout--dark .tile--class-item .room {
        color: inherit;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.8 Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100%;
    width: 100%;
    padding: 10px;
    z-index: 9999;
}

@media all and (min-width: 768px) {
    .modal {
        padding: 30px;
    }
}

@media all and (min-width: 992px) {
    .modal {
        padding: 40px;
    }
}

.modal.open {
    display: flex;
}

.modal.modal--lg .modal-body {
    max-width: 1320px;
}

.modal.modal--md .modal-body {
    max-width: 888px;
}

.modal.modal--sm .modal-body {
    max-width: 696px;
}

.modal.modal--xs .modal-body {
    max-width: 562px;
}

.modal.modal--xxs .modal-body {
    max-width: 480px;
}

.modal .modal-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    z-index: 1;
    width: 100%;
}

@media all and (min-width: 1200px) {
    .modal .modal-body {
        padding: 0 60px;
    }
}

.modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(82, 88, 96, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.5.1 Dialog Class Item */
.dialog--class-item {
    width: 100%;
    max-width: 325px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

    .dialog--class-item.dialog.dialog--arrow::before {
        top: 20px;
    }

    .dialog--class-item .dialog-header {
        padding: 15px;
        border-bottom: 1px solid var(--grey-light-3);
        border-radius: 4px 4px 0 0;
        background: var(--grey-light-1);
    }

        .dialog--class-item .dialog-header .label--title {
            margin-bottom: 8px;
        }

        .dialog--class-item .dialog-header .menu {
            top: -4px;
            right: -6px;
        }

        .dialog--class-item .dialog-header .meta {
            font-size: 0.75rem;
        }

    .dialog--class-item .dialog-body {
        padding: 0 15px 7px;
    }

        .dialog--class-item .dialog-body > * {
            margin: 8px 0;
        }

        .dialog--class-item .dialog-body ul li {
            margin: 0.25rem 0;
        }

    .dialog--class-item .label {
        font-size: 0.875rem;
    }

        .dialog--class-item .label.label--meta {
            font-size: 0.75rem;
        }

    .dialog--class-item ul .label--icon {
        font-size: 0.875rem;
    }

    .dialog--class-item ul label,
    .dialog--class-item ul .link {
        font-size: 0.75rem;
    }

    .dialog--class-item ul label {
        margin: 0.5em 0;
    }

.layout--dark .dialog--class-item h1, .layout--dark .dialog--class-item h2, .layout--dark .dialog--class-item h3, .layout--dark .dialog--class-item h4, .layout--dark .dialog--class-item h5, .layout--dark .dialog--class-item h6 {
    color: var(--grey-dark-3);
}

.layout--dark .dialog--class-item hr {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta-group:before {
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .meta {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .label.label--title {
    color: var(--grey-3);
}

.layout--dark .dialog--class-item .label.label--meta {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .field-check .radiomark,
.layout--dark .dialog--class-item .field-check .checkmark {
    background: #ffffff;
    border-color: var(--grey-light-3);
}

.layout--dark .dialog--class-item .field-check .checkmark {
    color: #ffffff;
}

.layout--dark .dialog--class-item .menu.open .btn--text {
    color: var(--green);
    background: var(--alpha-dark-1);
}

.layout--dark .dialog--class-item a.btn {
    border-color: var(--grey-light-3);
    background: #ffffff;
}

    .layout--dark .dialog--class-item a.btn:hover, .layout--dark .dialog--class-item a.btn.active {
        border-color: transparent;
        background: var(--green);
    }

.layout--dark .dialog--class-item .btn--text:hover, .layout--dark .dialog--class-item .btn--text.active {
    color: var(--green);
    background: var(--alpha-dark-1);
}

.layout--dark .dialog--class-item .user .user-meta > * {
    color: var(--grey-1);
}

.layout--dark .dialog--class-item .avatar {
    background: var(--grey-light-3);
}

    .layout--dark .dialog--class-item .avatar > .icon {
        fill: var(--grey-1);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.5 Dialog */
.dialog {
    position: relative;
    transition: all var(--transition-duration) ease 0s;
}

    .dialog.dialog--arrow::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, 0) rotate(45deg);
        width: 12px;
        height: 12px;
        border: 1px solid var(--grey-light-3);
        border-top: none;
        border-right: none;
        background: var(--grey-light-1);
    }

    .dialog.dialog--arrow.dialog--bottom::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .dialog.dialog--arrow.dialog--top::before {
        top: auto;
        bottom: 0;
        left: 50%;
        background: #ffffff;
        transform: translate(-50%, 50%) rotate(315deg);
    }

    .dialog.type--shadow {
        box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.26);
    }

/** 13.5.2 Dialog Standard & Builder */
.dialog--standard,
.dialog--builder,
.dialog--popup {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

    .dialog--standard .dialog-header,
    .dialog--standard .dialog-footer,
    .dialog--builder .dialog-header,
    .dialog--builder .dialog-footer,
    .dialog--popup .dialog-header,
    .dialog--popup .dialog-footer {
        padding: 15px;
        min-height: 64px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dialog--standard .dialog-header,
    .dialog--builder .dialog-header,
    .dialog--popup .dialog-header {
        border-bottom: 1px solid var(--grey-light-3);
    }

        .dialog--standard .dialog-header > *:last-child,
        .dialog--builder .dialog-header > *:last-child,
        .dialog--popup .dialog-header > *:last-child {
            line-height: 0;
        }

    .dialog--standard .dialog-main,
    .dialog--builder .dialog-main,
    .dialog--popup .dialog-main {
        display: flex;
        flex-direction: column;
    }

    .dialog--standard .dialog-body,
    .dialog--builder .dialog-body,
    .dialog--popup .dialog-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 100%;
        overflow: hidden;
    }

        .dialog--standard .dialog-body .container.gutter,
        .dialog--builder .dialog-body .container.gutter,
        .dialog--popup .dialog-body .container.gutter {
            padding: 0.625rem;
        }

        .dialog--standard .dialog-body > .title,
        .dialog--builder .dialog-body > .title,
        .dialog--popup .dialog-body > .title {
            margin: 0.625rem 0.875rem 0;
        }

        .dialog--standard .dialog-body .scroll,
        .dialog--builder .dialog-body .scroll,
        .dialog--popup .dialog-body .scroll {
            flex: 1 1 auto;
            min-height: 0;
        }

    .dialog--standard .dialog-footer,
    .dialog--builder .dialog-footer,
    .dialog--popup .dialog-footer {
        flex: 0 0 auto;
        border-top: 1px solid var(--grey-light-3);
    }

.dialog--standard,
.dialog--builder {
    background: var(--grey-light-2);
}

    .dialog--popup .dialog-body,
    .dialog--standard .dialog-body {
        padding: 10px;
    }

    .dialog--popup .dialog-body-footer,
    .dialog--standard .dialog-body-footer {
        padding: 0 20px;
    }

.dialog--builder {
    min-height: calc(100vh - 120px);
}

.dialog--popup {
    background: #ffffff;
}

.layout--dark .dialog--standard,
.layout--dark .dialog--builder,
.layout--dark .dialog--popup {
    background: var(--grey-dark-4);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.26);
}

    .layout--dark .dialog--standard .dialog-body,
    .layout--dark .dialog--builder .dialog-body,
    .layout--dark .dialog--popup .dialog-body {
        border-color: var(--alpha-light-2);
    }

    .layout--dark .dialog--standard .dialog-header,
    .layout--dark .dialog--standard .dialog-footer,
    .layout--dark .dialog--builder .dialog-header,
    .layout--dark .dialog--builder .dialog-footer,
    .layout--dark .dialog--popup .dialog-header,
    .layout--dark .dialog--popup .dialog-footer {
        border-color: var(--alpha-light-2);
        background: var(--alpha-light-1);
    }

.dialog--sidebar {
    display: flex;
    flex-direction: row;
}

    .dialog--sidebar .dialog-sidebar {
        flex: 0 0 33.3333333%;
        width: 33.3333333%;
        height: 100%;
    }

        .dialog--sidebar .dialog-sidebar > .card {
            border: none;
            border-radius: 0;
            height: 100%;
        }

            .dialog--sidebar .dialog-sidebar > .card.layout--light {
                background: rgba(0, 0, 0, 0.025);
            }

    .dialog--sidebar .dialog-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.5.2 Dialog Class */
.dialog--class {
    position: relative;
    width: 100%;
    max-width: 400px;
    font-size: 0.875rem;
    background: #ffffff;
    border: 1px solid var(--grey-light-3);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

    .dialog--class.dialog--bottom, .dialog--class.dialog--top, .dialog--class.dialog--center {
        position: relative;
        left: 50%;
    }

    .dialog--class.dialog--bottom {
        transform: translate(-50%, 30px);
    }

    .dialog--class.dialog--top {
        transform: translate(-50%, calc(-100% - 66px));
    }

    .dialog--class.dialog--center {
        transform: translate(-50%, -50%);
    }

        .dialog--class.dialog--center.dialog--arrow::before {
            content: none;
        }

    .dialog--class.dialog--arrow::before {
        background: #f2f2f2;
    }

    .dialog--class .dialog-body {
        height: 100%;
    }

        .dialog--class .dialog-body .summary-class-table {
            height: 100%;
            margin: 0;
            border: none;
            border-radius: 4px 4px 0 0;
        }

            .dialog--class .dialog-body .summary-class-table .summary-class-table-header {
                border-color: var(--grey-light-3);
                background: var(--alpha-dark-1);
            }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text:hover, .dialog--class .dialog-body .summary-class-table .summary-class-table-header .btn--text.active {
                    background: var(--alpha-dark-1);
                }

                .dialog--class .dialog-body .summary-class-table .summary-class-table-header .label {
                    font-weight: 600;
                    color: var(--grey-dark-4);
                }

            .dialog--class .dialog-body .summary-class-table .meta {
                color: var(--grey-3);
            }

        .dialog--class .dialog-body .table--summary .label {
            color: var(--grey-1);
        }

        .dialog--class .dialog-body .table--summary td {
            color: var(--grey-dark-4);
        }

        .dialog--class .dialog-body .table--summary th {
            color: var(--grey-1);
            background: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table--summary tr:not(:last-child) {
            border-color: #ffffff;
        }

        .dialog--class .dialog-body .table .th--highlight {
            color: var(--green);
            background: #f4fcf9;
            border-color: #a8d7c4;
        }

        .dialog--class .dialog-body .table .td--link:hover {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .table .tr--highlight th {
            background-color: var(--alpha-dark-2);
        }

        .dialog--class .dialog-body .table .tr--highlight td {
            background-color: var(--alpha-dark-1);
        }

        .dialog--class .dialog-body .scroll {
            scrollbar-color: var(--alpha-dark-1) transparent;
            padding: 1px 1px 1px 0;
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* 13. MISC */
.timetrack {
    position: relative;
    display: flex;
    margin: 6px 0 4px 0;
    flex-basis: 0;
    height: 100%;
}

    .timetrack .timetrack-time {
        text-align: right;
        width: 36px;
        margin-right: 10px;
        line-height: 1;
        opacity: 0.6;
    }

        .timetrack .timetrack-time .timetrack-time-hour {
            height: calc(60 * var(--min-equal-pix));
        }

            .timetrack .timetrack-time .timetrack-time-hour .hour {
                font-size: 0.75rem;
                color: var(--grey-3);
            }

    .timetrack .timetrack-range {
        display: flex;
        width: 23px;
    }

        .timetrack .timetrack-range .timetrack-range-meter {
            max-width: 12px;
        }

            .timetrack .timetrack-range .timetrack-range-meter > * {
                display: block;
                margin-left: auto;
                margin-bottom: calc(5 * var(--min-equal-pix) - 1px);
                height: 1px;
                width: 4px;
                background: var(--alpha-dark-2);
            }

                .timetrack .timetrack-range .timetrack-range-meter > *:nth-of-type(3n+1) {
                    width: 8px;
                }

                .timetrack .timetrack-range .timetrack-range-meter > *:nth-of-type(6n+1) {
                    width: 12px;
                }

        .timetrack .timetrack-range .timetrack-range-time {
            position: relative;
            margin: 0 5px;
            width: 1px;
            height: 100%;
            background: var(--alpha-dark-2);
        }

            .timetrack .timetrack-range .timetrack-range-time .timetrack-range-time-pointer {
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 20%;
                background: var(--green);
            }

                .timetrack .timetrack-range .timetrack-range-time .timetrack-range-time-pointer::before {
                    content: "";
                    display: block;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translate(-50%, 50%);
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    border: 2px solid var(--green);
                    background: #ffffff;
                }

        .timetrack .timetrack-range .timetrack-range-position {
            position: absolute;
            top: 20%;
            left: 0;
            width: 100%;
            z-index: 1;
        }

            .timetrack .timetrack-range .timetrack-range-position .timetrack-range-position-clock {
                position: absolute;
                top: 0;
                left: 2px;
                padding: 0 2px;
                transform: translateY(-50%);
                font-size: 0.75rem;
                font-weight: 600;
                color: var(--green);
                background: #ffffff;
            }

            .timetrack .timetrack-range .timetrack-range-position .timetrack-range-position-line {
                display: block;
                margin-left: auto;
                width: calc(100% - 42px);
                border-top: 1px dotted var(--green);
                opacity: 0.6;
            }

    .timetrack .timetrack-content {
        position: relative;
        flex: 1 1 auto;
    }

        .timetrack .timetrack-content .timetrack-content-meter > * {
            display: block;
            height: calc(60 * var(--min-equal-pix));
            border-top: 1px solid var(--alpha-dark-1);
        }

        .timetrack .timetrack-content .timetrack-content-body {
            position: absolute;
            top: 0;
            left: 4px;
            height: 100%;
            width: calc(100% - 8px);
        }

    .timetrack .tile {
        position: absolute;
        width: 100%;
        top: 30%;
    }

/** Layout theme */
.layout--light .timetrack .timetrack-range .timetrack-range-position .timetrack-range-position-clock {
    background: var(--grey-light-1);
}

.layout--dark .timetrack .timetrack-time {
    opacity: 1;
}

.layout--dark .timetrack .timetrack-range .timetrack-range-meter > * {
    background: var(--alpha-light-2);
}

.layout--dark .timetrack .timetrack-range .timetrack-range-position .timetrack-range-position-clock {
    background: var(--grey-dark-4);
}

.layout--dark .timetrack .timetrack-range .timetrack-range-time {
    background: var(--alpha-light-2);
}

    .layout--dark .timetrack .timetrack-range .timetrack-range-time .timetrack-range-time-pointer::before {
        background: var(--grey-dark-4);
    }

.layout--dark .timetrack .timetrack-content .timetrack-content-meter > * {
    border-top: 1px solid var(--alpha-light-1);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.10 Room */
.room {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 2px solid #616161;
}

    .room.room--tile {
        background: #ffffff;
    }

        .room.room--tile .room-number {
            font-size: 0.875rem;
        }

    .room.room--square {
        position: relative;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 6px;
        background: var(--grey-light-3);
        text-align: center;
    }

        .room.room--square::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            border-radius: 4px;
            background: #ffffff;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        }

        .room.room--square .room-number {
            position: absolute;
            top: 15%;
            left: 0;
            width: 100%;
            transform: none;
        }

        .room.room--square .label {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 4px;
            font-size: 10px;
            letter-spacing: 0;
        }

    .room .room-number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
    }

.layout--dark .room.room--tile {
    background: var(--grey-dark-4);
}

.layout--dark .room.room--square {
    background: var(--alpha-light-1);
}

    .layout--dark .room.room--square::before {
        background: var(--alpha-light-2);
    }

    .layout--dark .room.room--square .room-number {
        color: var(--grey-1);
    }

    .layout--dark .room.room--square .label--meta {
        color: rgba(255, 255, 255, 0.25);
    }


/* ---------
# VIEWS
--------- */
/** 13.12 Slider */
.slider {
    position: relative;
}

    .slider .slide {
        position: relative;
        min-height: 100%;
    }

        .slider .slide img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            opacity: 0.35;
        }

        .slider .slide .slide-info {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            padding: 15px;
            background: var(--grey-light-1);
            background: linear-gradient(90deg, var(--grey-light-1) 0%, rgba(255, 255, 255, 0) 100%);
        }

            .slider .slide .slide-info h2, .slider .slide .slide-info p {
                color: inherit;
            }

            .slider .slide .slide-info h2 {
                margin-bottom: 0.375em;
                opacity: 0.9;
            }

            .slider .slide .slide-info .label {
                color: inherit;
                opacity: 0.5;
            }

            .slider .slide .slide-info p {
                max-height: 5em;
                margin-bottom: 1em;
                font-size: 1em;
                opacity: 0.75;
                overflow: hidden;
            }

            .slider .slide .slide-info a {
                font-size: 0.875em;
            }

.layout--dark .slide .slide-info {
    color: #ffffff;
    background: var(--grey-dark-4);
    background: linear-gradient(90deg, var(--grey-dark-4) 0%, rgba(0, 0, 0, 0) 100%);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.13 List Classes */
.list-classes {
    height: auto;
}

    .list-classes .tile:not(:last-of-type) {
        margin-bottom: 4px;
    }

    .list-classes .card--scroll {
        padding: 8px 4px;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.4 Summary Class */
.summary-class.summary-class--active .panel-header .label, .summary-class.summary-class--inactive .panel-header .label {
    position: relative;
    padding-right: 1.2em;
}

    .summary-class.summary-class--active .panel-header .label:after, .summary-class.summary-class--inactive .panel-header .label:after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 0.75em;
        height: 0.75em;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .summary-class.summary-class--active .panel-header .label:after {
        background: var(--green);
    }

.summary-class.summary-class--active .panel-footer .meta-value {
    color: var(--green);
}

.summary-class.summary-class--inactive .panel-header .label:after {
    width: 0.875em;
    height: 0.875em;
    border: 2px solid var(--grey-light-3);
    background: transparent;
}

.summary-class.summary-class--inactive .btn--primary {
    color: var(--green);
    border: 1px solid var(--green);
    background: transparent;
}

    .summary-class.summary-class--inactive .btn--primary:hover, .summary-class.summary-class--inactive .btn--primary:focus, .summary-class.summary-class--inactive .btn--primary.active {
        color: #ffffff;
        background: var(--green);
    }

.summary-class.summary-class--inactive .btn--disabled {
    color: var(--grey-light-4);
    background: transparent;
    border-color: var(--grey-light-3);
}

    .summary-class.summary-class--inactive .btn--disabled:hover, .summary-class.summary-class--inactive .btn--disabled:focus {
        color: var(--grey-light-4);
        background: transparent;
        border-color: var(--grey-light-3);
    }

.summary-class .summary-class-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: -10px -10px 10px;
}

    .summary-class .summary-class-meta > * {
        flex: 1 1 auto;
        margin: 10px;
    }

        .summary-class .summary-class-meta > *:nth-child(1) {
            margin: 10px 0 10px 10px;
        }

    .summary-class .summary-class-meta .meta-list {
        line-height: 1.4;
        min-width: 146px;
    }

    .summary-class .summary-class-meta .progress-circle {
        margin: 5px auto;
    }

    .summary-class .summary-class-meta .btn {
        margin-top: 1em;
        font-size: 0.875rem;
    }

.summary-class .discover-boxes .discover-box {
    margin-bottom: -2px;
}

    .summary-class .discover-boxes .discover-box:first-of-type {
        border-radius: 4px 4px 0 0;
    }

    .summary-class .discover-boxes .discover-box:last-of-type {
        border-radius: 0 0 4px 4px;
    }

.summary-class .card {
    padding: 10px 15px;
}

    .summary-class .card .card-inner {
        text-align: center;
        font-size: 0.875rem;
        min-width: 140px;
    }

        .summary-class .card .card-inner:hover .discover-box .visible, .summary-class .card .card-inner:focus .discover-box .visible, .summary-class .card .card-inner.active .discover-box .visible {
            display: none;
        }

        .summary-class .card .card-inner:hover .discover-box .discoverable, .summary-class .card .card-inner:focus .discover-box .discoverable, .summary-class .card .card-inner.active .discover-box .discoverable {
            display: block;
        }

.summary-class-table {
    margin: 0 0 4px;
    border: 1px solid var(--grey-light-3);
    border-radius: 8px;
    overflow: hidden;
}

    .summary-class-table .summary-class-table-header {
        padding: 8px 12px;
        border-bottom: 1px solid var(--grey-light-3);
        background: var(--alpha-dark-1);
    }

        .summary-class-table .summary-class-table-header .pagination {
            margin: 0 12px 0 -4px;
            line-height: 0;
        }

            .summary-class-table .summary-class-table-header .pagination .btn--text {
                margin: 0 -4px;
            }

    .summary-class-table .scroll {
        padding: 0;
        max-height: 262px;
    }

        .summary-class-table .scroll .v-scrollable {
            padding: 0 4px 0 0;
        }

.layout--dark .summary-class-table {
    border-color: var(--grey-dark-3);
}

    .layout--dark .summary-class-table .summary-class-table-header {
        border-color: var(--grey-dark-4);
        background: var(--alpha-light-1);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.tag {
    display: inline-block;
    padding: 2px 8px;
    color: var(--grey-3);
    font-size: 0.75rem;
    letter-spacing: 0.125em;
    line-height: var(--line-height);
    text-transform: uppercase;
    border-radius: 4px;
}

    .tag.tag--primary {
        color: var(--green);
        background: var(--alpha-green-2);
        border: 1px solid var(--alpha-green-3);
    }

    .tag.tag--basic {
        font-size: 0.875rem;
        letter-spacing: 0;
        text-transform: none;
        background: var(--alpha-dark-1);
    }

        .tag.tag--basic.correct {
            border: 2px solid var(--green);
            color: var(--green);
            background: var(--alpha-green-2);
        }

        .tag.tag--basic.incorrect {
            border: 2px solid var(--red);
            color: var(--red);
            background: var(--alpha-red-2);
        }

    .tag.tag--rounded {
        padding: 2px 12px;
        border-radius: 20px;
    }

    .tag.tag--ctrl {
        display: inline-flex;
        align-items: center;
        font-size: 0.875rem;
        letter-spacing: 0;
        text-transform: none;
        border: 1px solid var(--grey-light-3);
        background: var(--alpha-dark-1);
    }

        .tag.tag--ctrl .tag-close {
            margin-left: 8px;
            line-height: 0.5;
            cursor: pointer;
        }

            .tag.tag--ctrl .tag-close.disabled {
                display: none;
            }

            .tag.tag--ctrl .tag-close:hover {
                color: var(--red);
            }

            .tag.tag--ctrl .tag-close .icon {
                height: 0.75em;
            }

.layout--dark .tag.tag--basic {
    background: var(--alpha-light-1);
}

    .layout--dark .tag.tag--basic.correct {
        background: var(--alpha-green-2);
    }

    .layout--dark .tag.tag--basic.incorrect {
        background: var(--alpha-red-2);
    }

.layout--dark .tag.tag--ctrl {
    border-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.16 Mark */
.mark-class-item {
    display: inline-block;
    color: #ffffff;
    line-height: 1.2;
}

    .mark-class-item:hover .mark-class-item-tooltip, .mark-class-item:focus .mark-class-item-tooltip, .mark-class-item.active .mark-class-item-tooltip {
        pointer-events: all;
        --mark-tooltip-x--default: calc(-50% + 10px);
        --mark-tooltip-y--default: -80%;
        --mark-tooltip-x--hover: calc(-50% + 10px);
        --mark-tooltip-y--hover: -104%;
        animation: mark-class-item-tooltip--default 0.3s ease 1 forwards;
    }

        .mark-class-item:hover .mark-class-item-tooltip.mark--tooltip-top, .mark-class-item:focus .mark-class-item-tooltip.mark--tooltip-top, .mark-class-item.active .mark-class-item-tooltip.mark--tooltip-top {
            --mark-tooltip-x--default: -50%;
            --mark-tooltip-y--default: 0;
            --mark-tooltip-x--hover: -50%;
            --mark-tooltip-y--hover: 24px;
            animation: mark-class-item-tooltip--modify 0.3s ease 1 forwards;
        }

        .mark-class-item:hover .mark-class-item-tooltip.mark--tooltip-right, .mark-class-item:focus .mark-class-item-tooltip.mark--tooltip-right, .mark-class-item.active .mark-class-item-tooltip.mark--tooltip-right {
            --mark-tooltip-x--default: calc(-100% + 20px);
            --mark-tooltip-x--hover: calc(-100% + 20px);
            animation: mark-class-item-tooltip--modify 0.3s ease 1 forwards;
        }

        .mark-class-item:hover .mark-class-item-tooltip.mark--tooltip-left, .mark-class-item:focus .mark-class-item-tooltip.mark--tooltip-left, .mark-class-item.active .mark-class-item-tooltip.mark--tooltip-left {
            --mark-tooltip-x--default: 0;
            --mark-tooltip-x--hover: 0;
            animation: mark-class-item-tooltip--modify 0.3s ease 1 forwards;
        }

    .mark-class-item .mark-class-item-btn {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 2px;
    }

        .mark-class-item .mark-class-item-btn > * {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .mark-class-item .mark-class-item-btn > * .icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 10px;
                width: auto;
            }

    .mark-class-item .mark-class-item-tooltip {
        position: fixed;
        transform: translate(calc(-50% + 10px), -80%);
        width: 210px;
        padding: 8px;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        text-align: left;
        background: #ffffff;
        z-index: 999;
        opacity: 0;
        pointer-events: none;
    }

        .mark-class-item .mark-class-item-tooltip::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            height: 30px;
            width: 30px;
            transform: translate(-50%, 30px);
        }

        .mark-class-item .mark-class-item-tooltip.mark--tooltip-top {
            transform: translate(-50%, 0);
        }

            .mark-class-item .mark-class-item-tooltip.mark--tooltip-top::before {
                bottom: auto;
                top: 0;
                transform: translate(calc(-50% + 10px), -30px);
            }

        .mark-class-item .mark-class-item-tooltip.mark--tooltip-right {
            transform: translate(calc(-100% + 20px), -80%);
        }

            .mark-class-item .mark-class-item-tooltip.mark--tooltip-right::before {
                left: auto;
                right: -15px;
            }

        .mark-class-item .mark-class-item-tooltip.mark--tooltip-left {
            transform: translate(0, -80%);
        }

        .mark-class-item .mark-class-item-tooltip .label {
            color: inherit;
            margin-bottom: 1em;
        }

        .mark-class-item .mark-class-item-tooltip h6 {
            font-size: 0.75rem;
            line-height: 1.4;
            margin-bottom: 0.5em;
        }

        .mark-class-item .mark-class-item-tooltip .meta {
            font-size: 0.625rem;
        }

        .mark-class-item .mark-class-item-tooltip .meta-list {
            line-height: 0.875;
        }

.mark-class-item--activity .mark-class-item-btn {
    color: inherit;
    background: var(--grey-3);
}

    .mark-class-item--activity .mark-class-item-btn.incomplete {
        color: var(--grey-3);
        background: var(--alpha-activity-1);
    }

.mark-class-item--activity .mark-class-item-tooltip {
    color: var(--grey-3);
    border-color: var(--grey-3);
}

.mark-class-item--activity .rating-stars {
    color: var(--grey-3);
}

.mark-class-item--activity .mark-class-item--color {
    color: var(--grey-3);
}

.mark-class-item--lesson .mark-class-item-btn {
    color: inherit;
    background: var(--green);
}

    .mark-class-item--lesson .mark-class-item-btn.incomplete {
        color: var(--green);
        background: var(--alpha-lesson-1);
    }

.mark-class-item--lesson .mark-class-item-tooltip {
    color: var(--green);
    border-color: var(--green);
}

.mark-class-item--lesson .rating-stars {
    color: var(--green);
}

.mark-class-item--lesson .mark-class-item--color {
    color: var(--green);
}

.mark-class-item--test .mark-class-item-btn {
    color: inherit;
    background: var(--red);
}

    .mark-class-item--test .mark-class-item-btn.incomplete {
        color: var(--red);
        background: var(--alpha-test-1);
    }

.mark-class-item--test .mark-class-item-tooltip {
    color: var(--red);
    border-color: var(--red);
}

.mark-class-item--test .rating-stars {
    color: var(--red);
}

.mark-class-item--test .mark-class-item--color {
    color: var(--red);
}

.mark-class-item--quiz .mark-class-item-btn {
    color: inherit;
    background: var(--orange);
}

    .mark-class-item--quiz .mark-class-item-btn.incomplete {
        color: var(--orange);
        background: var(--alpha-quiz-1);
    }

.mark-class-item--quiz .mark-class-item-tooltip {
    color: var(--orange);
    border-color: var(--orange);
}

.mark-class-item--quiz .rating-stars {
    color: var(--orange);
}

.mark-class-item--quiz .mark-class-item--color {
    color: var(--orange);
}

.mark-class-item--project .mark-class-item-btn {
    color: inherit;
    background: var(--purple);
}

    .mark-class-item--project .mark-class-item-btn.incomplete {
        color: var(--purple);
        background: var(--alpha-project-1);
    }

.mark-class-item--project .mark-class-item-tooltip {
    color: var(--purple);
    border-color: var(--purple);
}

.mark-class-item--project .rating-stars {
    color: var(--purple);
}

.mark-class-item--project .mark-class-item--color {
    color: var(--purple);
}

.mark-class-item--supplementary .mark-class-item-btn {
    color: inherit;
    background: var(--green-yellow);
}

    .mark-class-item--supplementary .mark-class-item-btn.incomplete {
        color: var(--green-yellow);
        background: var(--alpha-supplementary-1);
    }

.mark-class-item--supplementary .mark-class-item-tooltip {
    color: var(--green-yellow);
    border-color: var(--green-yellow);
}

.mark-class-item--supplementary .rating-stars {
    color: var(--green-yellow);
}

.mark-class-item--supplementary .mark-class-item--color {
    color: var(--green-yellow);
}

.mark-class-item--field-trip .mark-class-item-btn {
    color: inherit;
    background: var(--blue);
}

    .mark-class-item--field-trip .mark-class-item-btn.incomplete {
        color: var(--blue);
        background: var(--alpha-field-trip-1);
    }

.mark-class-item--field-trip .mark-class-item-tooltip {
    color: var(--blue);
    border-color: var(--blue);
}

.mark-class-item--field-trip .rating-stars {
    color: var(--blue);
}

.mark-class-item--field-trip .mark-class-item--color {
    color: var(--blue);
}

.mark-class-item--lab .mark-class-item-btn {
    width: 28px;
    color: inherit;
    background: var(--yellow);
}

    .mark-class-item--lab .mark-class-item-btn.incomplete {
        color: var(--yellow);
        background: var(--alpha-lab-1);
    }

.mark-class-item--lab .mark-class-item-tooltip {
    color: var(--yellow);
    border-color: var(--yellow);
}

.mark-class-item--lab .rating-stars {
    color: var(--yellow);
}

.mark-class-item--lab .mark-class-item--color {
    color: var(--yellow);
}

.mark-class-item--pending .mark-class-item-btn {
    color: inherit;
    background: var(--grey-1);
}

    .mark-class-item--pending .mark-class-item-btn.incomplete {
        color: var(--grey-3);
        background: var(--alpha-pending-1);
    }

.mark-class-item--pending .mark-class-item-tooltip {
    color: var(--grey-3);
    border-color: var(--grey-3);
}

.mark-class-item--pending .rating-stars {
    color: var(--grey-3);
}

.mark-class-item--pending .mark-class-item--color {
    color: var(--grey-3);
}

.mark-class-item--evaluate .mark-class-item-btn {
    color: inherit;
    background: var(--green);
}

    .mark-class-item--evaluate .mark-class-item-btn.incomplete {
        color: var(--green);
        background: var(--alpha-evaluate-1);
    }

.mark-class-item--evaluate .mark-class-item-tooltip {
    color: var(--green);
    border-color: var(--green);
}

.mark-class-item--evaluate .rating-stars {
    color: var(--green);
}

.mark-class-item--evaluate .mark-class-item--color {
    color: var(--green);
}

.mark-class-item--late .mark-class-item-btn {
    color: inherit;
    background: var(--red);
}

    .mark-class-item--late .mark-class-item-btn.incomplete {
        color: var(--red);
        background: var(--alpha-late-1);
    }

.mark-class-item--late .mark-class-item-tooltip {
    color: var(--red);
    border-color: var(--red);
}

.mark-class-item--late .rating-stars {
    color: var(--red);
}

.mark-class-item--late .mark-class-item--color {
    color: var(--red);
}

.mark-class-item--complete .mark-class-item-btn {
    color: var(--green);
    background: var(--green);
}

    .mark-class-item--complete .mark-class-item-btn.incomplete {
        color: var(--green);
        background: var(--alpha-complete-1);
    }

.mark-class-item--complete .mark-class-item-tooltip {
    color: var(--green);
    border-color: var(--green);
}

.mark-class-item--complete .rating-stars {
    color: var(--green);
}

.mark-class-item--complete .mark-class-item--color {
    color: var(--green);
}

.mark-class-item--passed .mark-class-item-btn {
    color: var(--green);
    background: var(--green);
}

    .mark-class-item--passed .mark-class-item-btn.incomplete {
        color: var(--green);
        background: var(--alpha-passed-1);
    }

.mark-class-item--passed .mark-class-item-tooltip {
    color: var(--green);
    border-color: var(--green);
}

.mark-class-item--passed .rating-stars {
    color: var(--green);
}

.mark-class-item--passed .mark-class-item--color {
    color: var(--green);
}

.mark-class-item--insufficient .mark-class-item-btn {
    color: var(--red);
    background: var(--red);
}

    .mark-class-item--insufficient .mark-class-item-btn.incomplete {
        color: var(--red);
        background: var(--alpha-insufficient-1);
    }

.mark-class-item--insufficient .mark-class-item-tooltip {
    color: var(--red);
    border-color: var(--red);
}

.mark-class-item--insufficient .rating-stars {
    color: var(--red);
}

.mark-class-item--insufficient .mark-class-item--color {
    color: var(--red);
}

.mark-class-item--complete-late .mark-class-item-btn {
    color: var(--red);
    background: var(--red);
}

    .mark-class-item--complete-late .mark-class-item-btn.incomplete {
        color: var(--red);
        background: var(--alpha-complete-late-1);
    }

.mark-class-item--complete-late .mark-class-item-tooltip {
    color: var(--red);
    border-color: var(--red);
}

.mark-class-item--complete-late .rating-stars {
    color: var(--red);
}

.mark-class-item--complete-late .mark-class-item--color {
    color: var(--red);
}

.mark-class-item--not-complete .mark-class-item-btn {
    color: var(--grey-3);
    background: var(--grey-3);
}

    .mark-class-item--not-complete .mark-class-item-btn.incomplete {
        color: var(--grey-3);
        background: var(--alpha-not-complete-1);
    }

.mark-class-item--not-complete .mark-class-item-tooltip {
    color: var(--grey-3);
    border-color: var(--grey-3);
}

.mark-class-item--not-complete .rating-stars {
    color: var(--grey-3);
}

.mark-class-item--not-complete .mark-class-item--color {
    color: var(--grey-3);
}

.mark-class-item--lab .mark-class-item-tooltip::before {
    width: 38px;
}

.mark-class-item--passed,
.mark-class-item--insufficient {
    position: relative;
    background: transparent;
}

    .mark-class-item--passed .mark-class-item-btn,
    .mark-class-item--insufficient .mark-class-item-btn {
        background: transparent;
    }

.mark-class-item--complete .mark-class-item-btn,
.mark-class-item--complete-late .mark-class-item-btn,
.mark-class-item--not-complete .mark-class-item-btn {
    position: relative;
    background: transparent;
}

    .mark-class-item--complete .mark-class-item-btn::after,
    .mark-class-item--complete-late .mark-class-item-btn::after,
    .mark-class-item--not-complete .mark-class-item-btn::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -1px;
        height: 1px;
        width: 60%;
    }

    .mark-class-item--complete .mark-class-item-btn::after {
        border-top: 2px solid var(--green);
    }

    .mark-class-item--complete-late .mark-class-item-btn::after {
        width: 30%;
        border-top: 2px dotted var(--red);
    }

    .mark-class-item--not-complete .mark-class-item-btn::after {
        border-top: 2px solid var(--grey-3);
    }

.mark-class-item--graph {
    line-height: 1;
}

    .mark-class-item--graph .mark-class-item-tooltip {
        width: auto;
        min-width: 140px;
        max-width: 200px;
    }

    .mark-class-item--graph .mark-class-item-btn {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
    }

/** Thema Layout */
.layout--dark .mark-class-item {
    color: var(--grey-dark-4);
}

.layout--dark .mark-class-item-tooltip {
    background: var(--grey-dark-5);
}

.layout--dark .mark-class-item--pending .mark-class-item-btn {
    background: var(--grey-dark-2);
}

.layout--dark .mark-class-item--not-complete .mark-class-item-btn {
    color: var(--grey-dark-2);
}

    .layout--dark .mark-class-item--not-complete .mark-class-item-btn::after {
        border-color: var(--grey-dark-2);
    }

/** Animation */
@keyframes mark-class-item-tooltip--default {
    0% {
        opacity: 0;
        transform: translate(var(--mark-tooltip-x--default), var(--mark-tooltip-y--default));
    }

    100% {
        opacity: 1;
        transform: translate(var(--mark-tooltip-x--hover), var(--mark-tooltip-y--hover));
    }
}

@keyframes mark-class-item-tooltip--modify {
    0% {
        opacity: 0;
        transform: translate(var(--mark-tooltip-x--default), var(--mark-tooltip-y--default));
    }

    100% {
        opacity: 1;
        transform: translate(var(--mark-tooltip-x--hover), var(--mark-tooltip-y--hover));
    }
}
/** 13.17 Checklist */
.checklist {
    display: flex;
    flex-direction: column;
    counter-reset: checklist;
}

    .checklist .checklist-subheader {
        margin: 0 0 0.25rem;
    }

    .checklist .checklist-footer {
        margin: 15px 0 0;
    }

    .checklist .checklist-body {
        flex: 1 1 0;
        min-height: 100px;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        border-radius: 4px;
    }

        .checklist .checklist-body .scroll {
            padding: 0 10px;
        }

    .checklist .checklist-questions .checklist-question {
        padding: 10px 0;
    }

        .checklist .checklist-questions .checklist-question:not(:last-of-type) {
            border-bottom: 1px solid var(--grey-light-2);
        }

    .checklist .checklist-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-height: 72px;
        padding: 20px;
        border-radius: 4px;
        border: 1px solid var(--grey-light-3);
        margin-top: 20px;
    }

    .checklist .btn {
        font-size: 0.875rem;
    }

.layout--dark .checklist {
    background: var(--grey-dark-4);
}

    .layout--dark .checklist .checklist-body {
        background-color: transparent;
        border-color: var(--alpha-light-2);
    }

    .layout--dark .checklist .checklist-questions .checklist-question:not(:last-of-type) {
        border-color: var(--alpha-light-1);
    }

    .layout--dark .checklist .checklist-questions .checklist-question-content .checklist-question-extra p {
        color: var(--grey-1);
    }

/** 13.17.1 Checklist Evaluate */
.checklist--evaluate .checklist-body {
    display: flex;
    flex-direction: column;
}

.checklist--evaluate .checklist-questions[data-view] .checkmark-readonly {
    display: none;
}

.checklist--evaluate .checklist-questions[data-view=checkmark-readonly] .checkmark-readonly {
    display: block;
}

.checklist--evaluate .checklist-body-status-bar {
    padding: 10px;
    border-top: 1px solid var(--grey-light-3);
    background: var(--grey-light-1);
    border-radius: 0 0 4px 4px;
}

    .checklist--evaluate .checklist-body-status-bar[data-view] .view-status,
    .checklist--evaluate .checklist-body-status-bar[data-view] .view-status-menu,
    .checklist--evaluate .checklist-body-status-bar[data-view] .view-submit {
        display: none;
    }

    .checklist--evaluate .checklist-body-status-bar[data-view=status] .view-status {
        display: block;
    }

    .checklist--evaluate .checklist-body-status-bar[data-view=status-menu] .view-status-menu {
        display: block;
    }

    .checklist--evaluate .checklist-body-status-bar[data-view=submit] .view-submit {
        display: block;
    }

.checklist--evaluate .checklist-footer[data-view] .view-complete,
.checklist--evaluate .checklist-footer[data-view] .view-meta,
.checklist--evaluate .checklist-footer[data-view] .field-range {
    display: none;
}

.checklist--evaluate .checklist-footer[data-view*=complete] .view-complete {
    display: block;
}

.checklist--evaluate .checklist-footer[data-view*=field-range] .field-range {
    display: block;
}

.checklist--evaluate .checklist-footer[data-view*=view-meta] .view-meta {
    display: block;
}

.layout--dark .checklist--evaluate .checklist-body-status-bar {
    border-top-color: var(--alpha-light-2);
    background: var(--alpha-light-1);
}

/** 13.17.4 Checklist Create */
.checklist--create .checklist-checkbox {
    display: none;
}

.checklist--create .checklist-question .checklist-question-options > * {
    margin: 0;
}

.checklist--create .checklist-menu .menu .menu-header .btn .icon {
    transform: translate(-50%, -50%) rotate(90deg);
}

/** 13.17.6 Checklist Readonly */
.checklist--readonly .checklist-checkbox {
    pointer-events: none;
    opacity: 0.5;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.checklist-checkbox {
    position: relative;
    display: inline-block;
}

    .checklist-checkbox input[type=radio] {
        position: absolute;
        opacity: 0;
    }

        .checklist-checkbox input[type=radio]:checked ~ .checklist-checkbox-checkmarks .checkmark {
            position: initial;
            transform: none;
        }

            .checklist-checkbox input[type=radio]:checked ~ .checklist-checkbox-checkmarks .checkmark .icon .check {
                stroke-dashoffset: 0;
            }

    .checklist-checkbox label {
        width: 27px;
        color: var(--grey-1);
    }

    .checklist-checkbox .checklist-checkbox-checkmarks {
        width: 27px;
        height: 27px;
        border-radius: 4px;
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
    }

        .checklist-checkbox .checklist-checkbox-checkmarks > div {
            position: absolute;
            top: 13.5px;
            left: 50%;
            transform: translate(-50%, -50%);
            min-height: 5px;
            line-height: 0;
        }

        .checklist-checkbox .checklist-checkbox-checkmarks .checkmark,
        .checklist-checkbox .checklist-checkbox-checkmarks .checkmark-readonly {
            display: inline-block;
            margin: -2px 0;
        }

        .checklist-checkbox .checklist-checkbox-checkmarks .checkmark {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .checklist-checkbox .checklist-checkbox-checkmarks .checkmark-readonly {
            margin: -2px 0;
            pointer-events: none;
        }

.layout--dark .checklist-checkbox label {
    color: #717171;
}

.layout--dark .checklist-checkbox .checklist-checkbox-checkmarks {
    border-color: var(--alpha-light-2);
    background: var(--grey-dark-4);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.checklist-question {
    position: relative;
    display: flex;
    font-size: 0.875rem;
    counter-increment: checklist;
}

    .checklist-question .checklist-question-number {
        flex: 1 0 26px;
        margin-right: 5px;
        font-size: inherit;
        color: var(--grey-1);
    }

        .checklist-question .checklist-question-number:empty::before {
            content: "#" counter(checklist);
        }

        .checklist-question .checklist-question-number::before, .checklist-question .checklist-question-number::after {
            display: inline;
        }

        .checklist-question .checklist-question-number::before {
            content: "#";
        }

        .checklist-question .checklist-question-number::after {
            content: ".";
        }

    .checklist-question .checklist-question-content {
        flex: 1 1 auto;
        width: 100%;
    }

        .checklist-question .checklist-question-content .checklist-question-extra {
            margin-top: 5px;
        }

            .checklist-question .checklist-question-content .checklist-question-extra p {
                color: var(--grey-3);
            }

        .checklist-question .checklist-question-content .checklist-question-typing {
            position: relative;
            display: inline-block;
            padding: 0px;
            width: 56px;
            height: 30px;
            background: var(--grey-light-1);
            border-radius: 0 12px 12px 12px;
        }

            .checklist-question .checklist-question-content .checklist-question-typing .loader-typing {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

    .checklist-question .checklist-question-options {
        display: flex;
        justify-content: flex-end;
        /*.checklist-checkbox {
      margin: 5px 0 0 10px;
  }*/
    }

        .checklist-question .checklist-question-options > * {
            margin: 5px 0 0 10px;
        }

.layout--dark .checklist-question .checklist-question-number {
    color: #717171;
}

.layout--dark .checklist-question .checklist-question-definition {
    color: var(--grey-1);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.18 Activity */
.activity {
    position: relative;
}

    .activity::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(31, 31, 31, 0.75);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        visibility: hidden;
        opacity: 0;
        z-index: 1;
        transition: all var(--transition-duration) ease 0s;
    }

    .activity.activity--answer {
        padding: 10px;
    }

        .activity.activity--answer::before {
            visibility: visible;
            opacity: 1;
            z-index: 1;
        }

        .activity.activity--answer .activity-header {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            z-index: 1;
        }

            .activity.activity--answer .activity-header .is-not-answer {
                display: none;
            }

            .activity.activity--answer .activity-header .is-answer {
                display: flex;
            }

        .activity.activity--answer .activity-header,
        .activity.activity--answer .activity-body {
            position: relative;
        }

        .activity.activity--answer .activity-question.workspace--expend {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .activity.activity--answer .activity-question > .scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }

        .activity.activity--answer .activity-question .activity-question-header .title {
            color: var(--grey-1);
        }

        .activity.activity--answer .activity-question .activity-question-header .meta {
            color: var(--grey-3);
        }

            .activity.activity--answer .activity-question .activity-question-header .meta .meta-value {
                color: var(--grey-2);
            }

    .activity.activity--evaluate .activity-question.workspace--expend .activity-question-footer .is-answerd {
        display: none;
    }

    .activity.activity--evaluate .activity-question.workspace--expend .activity-question-footer .is-evaluated {
        display: flex;
    }

    .activity.activity--tabs.activity--answer > .tabs .tabs-header {
        display: none;
    }

    .activity.activity--tabs .activity-overview .activity-footer > * {
        display: none;
    }

    .activity.activity--tabs > .tabs .tabs-header {
        display: block;
    }

    .activity .activity-header {
        margin-bottom: 10px;
    }

        .activity .activity-header .activity-header-meta {
            margin-top: 4px;
        }

        .activity .activity-header .btn {
            font-size: 0.875rem;
        }

        .activity .activity-header .is-answer {
            display: none;
            background: transparent;
        }

        .activity .activity-header .title {
            margin-bottom: 0;
        }

        .activity .activity-header .controls > * {
            margin-left: 10px;
        }

    .activity .activity-body {
        height: 100%;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

        .activity .activity-body > .scroll {
            padding: 0 4px 10px 0;
        }

    .activity .activity-footer {
        border-top: 1px solid var(--grey-light-3);
        padding: 4px 10px;
    }

    .activity .activity-overview .activity-footer {
        padding: 15px 0 0;
    }

    .activity > .tabs {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

        .activity > .tabs .tabs-header {
            display: none;
            margin-bottom: 10px;
        }

        .activity > .tabs .tabs-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

            .activity > .tabs .tabs-body .tabs-content {
                display: flex;
                flex-direction: column;
                height: 100%;
                z-index: -1;
            }

                .activity > .tabs .tabs-body .tabs-content.active {
                    z-index: initial;
                }

.layout--dark .activity {
    color: var(--grey-3);
    background: var(--grey-dark-4);
}

    .layout--dark .activity .activity-question-header .title {
        color: var(--grey-3);
    }

    .layout--dark .activity .activity-footer {
        border-color: var(--alpha-light-2);
    }

/** 13.18.1 Activity Offline */
.activity.activity--offline .window-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 10px 0;
    background: rgba(224, 224, 224, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: all var(--transition-duration) ease 0s;
    z-index: 2;
}

    .activity.activity--offline .window-navigation.layout--dark {
        background: rgba(31, 31, 31, 0.75);
    }

    .activity.activity--offline .window-navigation .navigation-page {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

        .activity.activity--offline .window-navigation .navigation-page .navigation-page-body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
            height: 100%;
            padding: 0 10px;
        }

            .activity.activity--offline .window-navigation .navigation-page .navigation-page-body .activity-body {
                flex: 1 1 auto;
                min-height: 0;
            }

.activity.activity--offline .document.document--pdf {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .activity.activity--offline .document.document--pdf .document-body {
        flex: 1 1 auto;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.18.1 Activity Question  */
.activity-question:not(:last-of-type) {
    margin-bottom: 10px;
}

.activity-question.activity-question--answered.answered--answer .activity-question-answer {
    display: block;
}

.activity-question.activity-question--answered.answered--student-workspace .activity-question-student-workspace {
    display: block;
}

    .activity-question.activity-question--answered.answered--student-workspace .activity-question-student-workspace .field-switch-small {
        display: none;
    }

.activity-question.activity-question--answered.workspace--expend .activity-question-footer .is-not-answerd {
    display: none;
}

.activity-question.activity-question--answered .activity-question-footer > .btn {
    display: none;
}

.activity-question.activity-question--answered .activity-question-footer .is-answerd {
    display: flex;
}

.activity-question.success .activity-question-footer .is-answerd > .label, .activity-question.error .activity-question-footer .is-answerd > .label {
    display: block;
}

.activity-question.success .activity-question-footer .is-answerd .label-value.success-color {
    display: inline-block;
}

.activity-question.error .activity-question-footer .is-answerd .label-value.error-color {
    display: inline-block;
}

.activity-question.rework .activity-question-footer .is-answerd > .label {
    display: none;
}

.activity-question.rework .activity-question-footer .is-answerd .state {
    display: inline-block;
}

.activity-question.rework .activity-question-footer .is-evaluated .evaluate-controls {
    display: none;
}

.activity-question.workspace--expend.workspace--student .activity-question-workspaces > *, .activity-question.workspace--expend.workspace--answer .activity-question-workspaces > * {
    display: none;
}

.activity-question.workspace--expend.workspace--student .activity-question-workspaces .activity-question-student-workspace {
    display: block;
}

.activity-question.workspace--expend.workspace--answer .activity-question-workspaces .activity-question-answer {
    display: block;
}

.activity-question.workspace--expend.workspace--solution .activity-question-workspaces .activity-question-solution-example {
    display: block;
}

.activity-question.workspace--expend.activity-question--answered.answered--student-workspace .field-switch-small {
    display: block;
}

.activity-question.workspace--expend.edit .activity-question-footer .is-edit {
    display: block;
}

.activity-question.workspace--expend.edit .activity-question-footer .is-answerd {
    justify-content: space-between;
}

.activity-question.workspace--expend .activity-question-header {
    padding-right: 4px;
}

.activity-question.workspace--expend .activity-question-workspaces > * {
    display: block;
}

.activity-question.workspace--expend .activity-question-footer > .btn {
    display: none;
}

.activity-question.workspace--expend .activity-question-footer .is-answerd {
    justify-content: flex-end;
}

    .activity-question.workspace--expend .activity-question-footer .is-answerd > .btn {
        display: none;
    }

.activity-question.workspace--expend .activity-question-footer .is-not-answerd {
    display: flex;
}

.activity-question.workspace--expend > .scroll {
    padding-right: 4px;
}

.activity-question > .scroll {
    padding: 0;
    overflow: visible;
    scrollbar-color: var(--alpha-light-2) transparent;
}

    .activity-question > .scroll::-webkit-scrollbar-thumb {
        background: var(--alpha-light-3);
    }

        .activity-question > .scroll::-webkit-scrollbar-thumb:hover {
            background: var(--green);
        }

.activity-question .activity-question-header:not(:empty) {
    margin-bottom: 0.2em;
}

.activity-question .activity-question-header .title {
    color: var(--grey-1);
    margin-bottom: 0;
}

.activity-question .activity-question-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--grey-light-3);
    border-radius: 0 12px 12px 12px;
    overflow: hidden;
}

    .activity-question .activity-question-body .activity-question-definition {
        padding-bottom: 10px;
    }

        .activity-question .activity-question-body .activity-question-definition .input-blank.correct {
            color: var(--green);
            border-color: var(--green);
        }

        .activity-question .activity-question-body .activity-question-definition .input-blank.incorrect {
            color: var(--red);
            border-color: var(--red);
        }

.activity-question .activity-question-workspaces > * {
    display: none;
}

.activity-question .activity-question-workspaces > .dropdown > .dropdown-header {
    padding: 4px 0;
    border-bottom: 1px solid var(--grey-light-3);
}

.activity-question .activity-question-workspaces > .dropdown.expend > .dropdown-body {
    overflow: visible;
}

.activity-question .activity-question-workspaces .activity-question-student-workspace textarea {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid var(--grey-light-3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    resize: none;
}

    .activity-question .activity-question-workspaces .activity-question-student-workspace textarea .readonly, .activity-question .activity-question-workspaces .activity-question-student-workspace textarea:read-only {
        margin-top: 0;
        background: var(--grey-light-1);
        border-color: var(--grey-light-1);
        border-radius: 0;
    }

.activity-question .activity-question-workspaces .activity-question-solution-example .canvas-top {
    margin-top: 10px;
}

.activity-question .activity-question-workspaces .activity-question-answer .short-answer .field {
    margin: 10px 0;
}

.activity-question .activity-question-workspaces .activity-question-answer .field:disabled {
    opacity: 1;
}

.activity-question .activity-question-workspaces .activity-question-answer .field-letter .correct:checked ~ .lettermark {
    background: var(--green);
    border-color: var(--green);
}

.activity-question .activity-question-workspaces .activity-question-answer .field-letter .correct ~ .lettermark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 7px);
    height: calc(100% + 7px);
    border-radius: inherit;
    border: 2px solid var(--green);
}

.activity-question .activity-question-workspaces .activity-question-answer .field-letter .incorrect:checked ~ .lettermark {
    background: var(--red);
    border-color: var(--red);
}

.activity-question .activity-question-workspaces .activity-question-answer .field-check {
    display: inline-block;
    color: var(--grey-3);
    font-weight: 600;
    margin-right: 4px;
}

    .activity-question .activity-question-workspaces .activity-question-answer .field-check .correct:checked ~ .checkmark {
        background: var(--green);
        border-color: var(--green);
    }

    .activity-question .activity-question-workspaces .activity-question-answer .field-check .correct:checked:disabled ~ .checkmark {
        color: #ffffff;
    }

    .activity-question .activity-question-workspaces .activity-question-answer .field-check .correct ~ .checkmark::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        border-radius: 50%;
        border: 2px solid var(--green);
    }

    .activity-question .activity-question-workspaces .activity-question-answer .field-check .incorrect:checked ~ .checkmark {
        background: var(--red);
        border-color: var(--red);
    }

    .activity-question .activity-question-workspaces .activity-question-answer .field-check .incorrect:checked:disabled ~ .checkmark {
        color: #ffffff;
    }

.activity-question .activity-question-workspaces .activity-question-answer .short-answer {
    /*.correct{
      border: 2px solid $success-color;
  }

  .incorrect{
      border: 2px solid $error-color;
  }*/
}

    .activity-question .activity-question-workspaces .activity-question-answer .short-answer .tag {
        margin-bottom: 10px;
    }

@media all and (min-width: 992px) {
    .activity-question .activity-question-workspaces .activity-question-answer .fill-in-the-blanks {
        flex-wrap: nowrap;
    }
}

.activity-question .activity-question-workspaces .activity-question-answer .fill-in-the-blanks .field-group {
    margin-bottom: 0;
}

.activity-question .activity-question-workspaces .activity-question-answer .fill-in-the-blanks .field {
    margin: 0 0 10px;
}

    .activity-question .activity-question-workspaces .activity-question-answer .fill-in-the-blanks .field.correct {
        border: 2px solid var(--green);
    }

    .activity-question .activity-question-workspaces .activity-question-answer .fill-in-the-blanks .field.incorrect {
        border: 2px solid var(--red);
    }

.activity-question .activity-question-workspaces .activity-question-answer .fill-in-the-blanks .tag {
    margin-bottom: 10px;
}

.activity-question .activity-question-workspaces .activity-question-answer .fill-in-the-blanks > * {
    flex: 1 1 auto;
}

.activity-question .activity-question-workspaces .activity-question-answer .true-false {
    padding: 4px 0;
}

.activity-question .activity-question-workspaces .activity-question-answer .ordering,
.activity-question .activity-question-workspaces .activity-question-answer .matching,
.activity-question .activity-question-workspaces .activity-question-answer .video,
.activity-question .activity-question-workspaces .activity-question-answer .audio {
    padding: 10px 0;
}

    .activity-question .activity-question-workspaces .activity-question-answer .ordering label {
        font-size: 0.875em;
    }

    .activity-question .activity-question-workspaces .activity-question-answer .ordering ul {
        position: relative;
    }

    .activity-question .activity-question-workspaces .activity-question-answer .ordering li {
        display: flex;
    }

        .activity-question .activity-question-workspaces .activity-question-answer .ordering li label {
            margin: 4px 8px 4px 0;
        }

        .activity-question .activity-question-workspaces .activity-question-answer .ordering li:not(:last-child) {
            margin-bottom: 0.75em;
        }

    .activity-question .activity-question-workspaces .activity-question-answer .matching .matching-pair {
        position: relative;
        padding: 4px 8px;
        background: transparent;
        border: 1px solid var(--grey-light-3);
        margin-right: 20px;
    }

        .activity-question .activity-question-workspaces .activity-question-answer .matching .matching-pair::after {
            position: absolute;
            content: "";
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
            height: 1px;
            width: 21px;
            border-top: 1px dashed var(--grey-light-3);
        }

    .activity-question .activity-question-workspaces .activity-question-answer .matching li {
        display: flex;
        font-size: 0.875em;
        line-height: 1.2;
    }

        .activity-question .activity-question-workspaces .activity-question-answer .matching li label {
            margin: 4px 8px 4px 0;
        }

        .activity-question .activity-question-workspaces .activity-question-answer .matching li:not(:last-child) {
            margin-bottom: 0.75em;
        }

.activity-question .activity-question-workspaces .canvas-html {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    background: var(--alpha-dark-1);
}

    .activity-question .activity-question-workspaces .canvas-html[contenteditable] {
        background: #ffffff;
        border: 1px solid var(--grey-light-3);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

        .activity-question .activity-question-workspaces .canvas-html[contenteditable]:focus {
            outline: none;
        }

.activity-question .activity-question-footer {
    margin-top: calc((10px + 1px) * -1);
    padding-top: 10px;
    border-top: 1px solid var(--grey-light-3);
}

    .activity-question .activity-question-footer .is-not-answerd,
    .activity-question .activity-question-footer .is-answerd,
    .activity-question .activity-question-footer .is-evaluated,
    .activity-question .activity-question-footer .is-edit {
        display: none;
    }

        .activity-question .activity-question-footer .is-answerd > .label {
            display: none;
        }

            .activity-question .activity-question-footer .is-answerd > .label .label-value {
                position: relative;
                padding-right: 1.5em;
            }

                .activity-question .activity-question-footer .is-answerd > .label .label-value .icon {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 0;
                    max-height: 0.875em;
                    display: inline-block;
                }

            .activity-question .activity-question-footer .is-answerd > .label > * {
                display: none;
            }

        .activity-question .activity-question-footer .is-answerd .state {
            display: none;
        }

    .activity-question .activity-question-footer .is-evaluated {
        min-height: 28px;
    }

        .activity-question .activity-question-footer .is-evaluated label {
            margin-bottom: 0;
        }

    .activity-question .activity-question-footer .field-check input[type=checkbox]:checked ~ .checkmark {
        border-color: var(--green);
        background: var(--green);
    }

    .activity-question .activity-question-footer .btn {
        font-size: 14px;
    }

    .activity-question .activity-question-footer .label {
        color: var(--grey-1);
    }

        .activity-question .activity-question-footer .label .label-value {
            color: var(--grey-3);
        }

.activity-question .field-switch-small label {
    color: var(--grey-1);
    font-size: 0.95em;
    font-weight: 400;
}

.layout--dark .activity-question .activity-question-body {
    background: var(--grey-dark-3);
    border-color: var(--alpha-light-2);
}

.layout--dark .activity-question .activity-question-workspaces .activity-question-student-workspace textarea {
    color: var(--grey-1);
    border-color: var(--grey-dark-1);
    background: var(--grey-dark-4);
}

.layout--dark .activity-question .activity-question-workspaces .activity-question-solution-example .canvas {
    background: var(--alpha-light-1);
}

.layout--dark .activity-question .activity-question-workspaces .activity-question-answer .matching .matching-pair {
    border-color: var(--alpha-light-2);
}

    .layout--dark .activity-question .activity-question-workspaces .activity-question-answer .matching .matching-pair::after {
        border-color: var(--grey-dark-1);
    }

.layout--dark .activity-question .activity-question-workspaces .canvas-html {
    background: var(--alpha-light-1);
}

.layout--dark .activity-question .activity-question-footer {
    border-color: var(--alpha-light-1);
}

.layout--dark .activity-question .dropdown .dropdown-header {
    border-color: var(--alpha-light-1);
}

.layout--dark .activity-question .field-switch-small label {
    color: #616161;
}

.activity-question .multiple-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

    .activity-question .multiple-choice .field-group {
        display: flex;
        align-items: flex-start;
        margin: 0;
    }

        .activity-question .multiple-choice .field-group .field-check {
            margin: 2px 8px 0 0;
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.19 Tabs */
.tabs > .tabs-header {
    border-bottom: 1px solid var(--grey-light-3);
}

    .tabs > .tabs-header .tabs-btn {
        padding: 0 8px 8px;
    }

.tabs:not(.tabs--alt) > .tabs-header .tabs-btn {
    position: relative;
    display: inline-block;
    font-size: 0.875rem;
    color: var(--grey-3);
    border: none;
    border-radius: 0;
    cursor: pointer;
    background: transparent;
    transition: all var(--transition-duration) ease 0s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: transparent;
        transition: all var(--transition-duration) ease 0s;
    }

    .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:hover, .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:focus, .tabs:not(.tabs--alt) > .tabs-header .tabs-btn.active {
        background: transparent;
    }

        .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:hover:after, .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:focus:after, .tabs:not(.tabs--alt) > .tabs-header .tabs-btn.active:after {
            background: var(--green);
        }

    .tabs:not(.tabs--alt) > .tabs-header .tabs-btn.active {
        color: var(--green);
    }

    .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:disabled {
        opacity: 0.625;
        color: var(--grey-1);
        cursor: not-allowed;
    }

        .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:disabled:after {
            background: transparent;
        }

    .tabs:not(.tabs--alt) > .tabs-header .tabs-btn:not(:last-of-type) {
        margin-right: 10px;
    }

    .tabs:not(.tabs--alt) > .tabs-header .tabs-btn .btn-close {
        display: inline-block;
        padding-left: 4px;
    }

        .tabs:not(.tabs--alt) > .tabs-header .tabs-btn .btn-close:hover, .tabs:not(.tabs--alt) > .tabs-header .tabs-btn .btn-close:focus {
            color: var(--red);
        }

        .tabs:not(.tabs--alt) > .tabs-header .tabs-btn .btn-close .icon {
            width: 0.625em;
        }

.tabs .tabs-body {
    position: relative;
}

    .tabs .tabs-body .tabs-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        z-index: -1;
    }

        .tabs .tabs-body .tabs-content.active {
            position: relative;
            opacity: 1;
            z-index: 1;
            pointer-events: all;
        }

.layout--dark .tabs .tabs-header {
    border-color: var(--alpha-light-2);
}

    .layout--dark .tabs .tabs-header .card {
        border-color: var(--alpha-light-2);
        background: var(--grey-dark-3);
    }

.layout--dark .tabs .tabs-btn:hover:after, .layout--dark .tabs .tabs-btn:focus:after, .layout--dark .tabs .tabs-btn.active:after {
    background: var(--green);
}

.layout--dark .tabs .tabs-btn:disabled {
    opacity: 0.25;
}
/** 13.19.1 Tabs Builder */
.tabs--builder {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

    .tabs--builder > .tabs-header {
        border: none;
    }

        .tabs--builder > .tabs-header .tabs-btn {
            padding: 18px 8px;
        }

        .tabs--builder > .tabs-header .card {
            padding: 0 10px;
            border-radius: 4px 4px 0 0;
        }

    .tabs--builder .tabs-body {
        position: initial;
        flex: 1 1 auto;
        min-height: 0;
    }

        .tabs--builder .tabs-body .tabs-content {
            position: fixed;
            visibility: hidden;
        }

            .tabs--builder .tabs-body .tabs-content.active {
                position: initial;
                height: 100%;
                visibility: visible;
            }

        .tabs--builder .tabs-body > .card {
            height: 100%;
            padding: 0;
            border-top: none;
            border-radius: 0 0 4px 4px;
            background: #ffffff;
            overflow: hidden;
        }

    .tabs--builder .card.layout--light {
        background: var(--grey-light-2);
    }

    .tabs--builder .card.layout--dark {
        background: var(--grey-dark-4);
    }

.layout--light .tabs--builder .tabs-body > .card {
    background: var(--grey-light-2);
}

.layout--dark .tabs--builder .tabs-header .card {
    border-color: var(--grey-dark-1);
}

.layout--dark .tabs--builder .tabs-body > .card {
    background: var(--grey-dark-4);
}

/** 13.19.2 Tabs Alt */
.tabs--alt > .tabs-header {
    border-bottom: none;
    margin-bottom: 10px;
}

    .tabs--alt > .tabs-header .tabs-btn {
        padding: 8px 12px;
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.025);
    }

        .tabs--alt > .tabs-header .tabs-btn:hover, .tabs--alt > .tabs-header .tabs-btn.active {
            color: var(--grey-3);
            background: #ffffff;
            border-color: var(--grey-light-3);
        }

        .tabs--alt > .tabs-header .tabs-btn.active {
            color: var(--green);
        }

        .tabs--alt > .tabs-header .tabs-btn.btn--disabled, .tabs--alt > .tabs-header .tabs-btn[disabled] {
            color: var(--grey-light-4);
            background: transparent;
            cursor: not-allowed;
        }

            .tabs--alt > .tabs-header .tabs-btn.btn--disabled:hover, .tabs--alt > .tabs-header .tabs-btn[disabled]:hover {
                color: var(--grey-light-4);
                background: transparent;
                border-color: var(--grey-light-3);
            }

        .tabs--alt > .tabs-header .tabs-btn:not(:last-child) {
            border-right-width: 0;
        }

        .tabs--alt > .tabs-header .tabs-btn:first-child:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .tabs--alt > .tabs-header .tabs-btn:last-child:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .tabs--alt > .tabs-header .tabs-btn:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

.layout--dark .tabs--alt > .tabs-header {
    background: var(--grey-dark-4);
    border-radius: 4px;
}

    .layout--dark .tabs--alt > .tabs-header .tabs-btn {
        color: var(--grey-3);
        background: var(--alpha-light-1);
        border-color: var(--alpha-light-2);
    }

        .layout--dark .tabs--alt > .tabs-header .tabs-btn:hover, .layout--dark .tabs--alt > .tabs-header .tabs-btn.active {
            background: var(--alpha-light-2);
            border-color: var(--alpha-light-2);
        }

        .layout--dark .tabs--alt > .tabs-header .tabs-btn.active {
            color: var(--green);
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.20 Activity Document  */
.document .document-header {
    margin-bottom: 4px;
}

.document .document-body {
    border: 4px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

    .document .document-body img {
        width: 100%;
    }

.layout--dark .document .meta {
    color: var(--grey-3);
}

    .layout--dark .document .meta .meta-value {
        color: var(--grey-2);
    }

.layout--dark .document .document-body {
    border-color: var(--alpha-light-1);
    background: var(--grey-dark-4);
}

/** 13.20.1 Activity Document PDF */
.document.document--pdf .pdf-viewer {
    margin-bottom: -8px;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.21 Clock */
.clock {
    display: flex;
    align-items: center;
}

    .clock.clock--tag .tag {
        display: block;
    }

    .clock > * {
        margin: 0 4px;
    }

    .clock .clock-time {
        position: relative;
        padding: 0 16px 0 44px;
        height: 36px;
        color: var(--green);
        font-size: 0.875em;
        line-height: 2.36;
        background-color: #ffffff;
        border: 1px solid var(--alpha-dark-1);
        border-radius: 36px;
    }

    .clock .clock-time-countdown {
        position: absolute;
        top: 0;
        left: 0;
        width: 36px;
    }

        .clock .clock-time-countdown .progress-circle--small {
            max-width: 34px;
            font-size: 0.875em;
        }

            .clock .clock-time-countdown .progress-circle--small .value {
                margin-top: 0;
            }

            .clock .clock-time-countdown .progress-circle--small .label {
                color: inherit;
                font-size: 0.5rem;
            }

    .clock .tag {
        display: none;
    }

.layout--dark .clock .clock-time {
    background-color: var(--grey-dark-4);
    border-color: var(--alpha-light-2);
}

/** 13.21.1 Stopwatch */
.stopwatch {
    position: relative;
    display: inline-block;
    padding: 0 10px 0 28px;
    height: 30px;
    color: var(--green);
    font-size: 0.875em;
    line-height: 2.1;
    background: #ffffff;
    border: 1px solid var(--alpha-dark-2);
    border-radius: 36px;
    /*.stopwatch-time {
      position: absolute;
      top: 50%;
      left: 2px;
      transform: translateY(-50%);
  }*/
}

    .stopwatch .icon {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        height: 18px;
    }

.layout--dark .stopwatch {
    background: var(--grey-dark-4);
    border: 1px solid var(--alpha-light-2);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- *
/** 13.22 Icons */
.icons {
    color: var(--grey-3);
}

    .icons.icons--link:hover {
        color: var(--green);
    }

    .icons.icons--square {
        position: relative;
        width: 60px;
        height: 60px;
        border: none;
        border-radius: 6px;
        color: #ffffff;
        background: var(--alpha-dark-2);
        text-align: center;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

        .icons.icons--square::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            border-radius: 4px;
            background: linear-gradient(225deg, #27BF81 0%, #29af78 100%);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        }

        .icons.icons--square .icon {
            height: auto;
            max-width: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .icons.icons--square .counter {
            transform: translate(25%, -25%);
        }

    .icons.icons--square-secondary {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 4px;
        background: var(--grey-dark-4);
    }

        .icons.icons--square-secondary .icon {
            fill: #ffffff;
            height: auto;
            width: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .icons.icons--btn {
        width: 40px;
        height: 40px;
        color: var(--green);
        cursor: pointer;
    }

        .icons.icons--btn::before {
            background: white;
        }

        .icons.icons--btn:hover, .icons.icons--btn:focus, .icons.icons--btn.active {
            color: #ffffff;
        }

            .icons.icons--btn:hover::before, .icons.icons--btn:focus::before, .icons.icons--btn.active::before {
                background: var(--green);
            }

    .icons .icon {
        height: 0.875em;
        fill: currentColor;
        transition: all var(--transition-duration) ease 0s;
    }

.layout--dark .icons.icons--square {
    color: var(--grey-dark-3);
    background: var(--alpha-light-1);
}

    .layout--dark .icons.icons--square::before {
        content: "";
        background: linear-gradient(225deg, #33F7A7 0%, #27BF81 100%);
    }

.layout--dark .icons.icons--square-secondary {
    background: rgba(255, 255, 255, 0.5);
}

    .layout--dark .icons.icons--square-secondary .icon {
        fill: var(--grey-dark-3);
    }

.layout--dark .icons.icons--btn {
    color: var(--green);
    background: var(--grey-dark-4);
}

    .layout--dark .icons.icons--btn::before {
        background: var(--alpha-light-1);
    }

    .layout--dark .icons.icons--btn:hover, .layout--dark .icons.icons--btn:focus, .layout--dark .icons.icons--btn.active {
        color: var(--grey-dark-4);
    }

        .layout--dark .icons.icons--btn:hover::before, .layout--dark .icons.icons--btn:focus::before, .layout--dark .icons.icons--btn.active::before {
            background: linear-gradient(225deg, #33F7A7 0%, #27BF81 100%);
        }

/** 13.22.1 Icon Maximize */
.icon-maximize {
    width: 1em;
    height: 1em;
    border-width: 2px;
    border-style: solid;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.23 Counter */
.counter {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    text-align: center;
    height: 18px;
    width: 18px;
    color: #ffffff;
    line-height: 0;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

    .counter::before, .counter::after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
    }

    .counter::before {
        animation: ping 1.6s ease infinite;
    }

    .counter::after {
        animation: ping 1.6s ease 0.4s infinite;
    }

    .counter .counter-num {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 0;
        font-size: 0.75rem;
        z-index: 1;
    }

.layout--dark .counter {
    border-color: var(--grey-dark-3);
}

@keyframes ping {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ----------
# VIEWS
------------ */
/** 13.24 Class Action */
.class-actions {
    position: relative;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
}

    .class-actions .class-actions-item {
        position: relative;
        z-index: 1;
        height: 100%;
    }

        .class-actions .class-actions-item .item-complete {
            position: absolute;
            margin: 0;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: var(--green);
            background-color: var(--grey-dark-4);
        }

            .class-actions .class-actions-item .item-complete .icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

        .class-actions .class-actions-item > * {
            margin: 15px 0 0;
        }

        .class-actions .class-actions-item .btn {
            min-width: 70px;
        }

        .class-actions .class-actions-item .icons--square {
            display: inline-block;
            margin-bottom: 0;
        }

        .class-actions .class-actions-item .flex {
            flex-wrap: wrap;
            margin: 20px auto 5px;
            max-width: 400px;
        }

        .class-actions .class-actions-item .discover {
            display: inline-flex;
        }

            .class-actions .class-actions-item .discover .discover-box {
                margin: 0 -1px;
            }

    .class-actions .class-actions-meta {
        font-size: 0.75rem;
        line-height: 1.4;
    }

        .class-actions .class-actions-meta .label--meta {
            font-size: 0.6875rem;
        }

    .class-actions .class-actions-graph {
        text-align: center;
        width: 25%;
        min-width: 84px;
    }

        .class-actions .class-actions-graph .progress-circle {
            width: 64px;
            margin: 10px auto;
        }

            .class-actions .class-actions-graph .progress-circle .progress-circle-value {
                font-size: 1rem;
            }

        .class-actions .class-actions-graph .label--meta {
            font-size: 0.6875rem;
        }

    .class-actions .relevant-actions {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 240px;
        text-align: left;
    }

    .class-actions .container {
        max-width: 979px;
    }

    .class-actions .row {
        flex-wrap: wrap;
    }

        .class-actions .row > * {
            flex: 1 1 auto;
            min-width: 240px;
        }

    .class-actions > .card {
        min-height: 100%;
    }

    .class-actions .layout--light.card {
        background: var(--grey-light-2);
    }

    .class-actions .layout--dark.card {
        background: var(--grey-dark-4);
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ------------
# VIEWS
------------- */
/** 13.25 Relevant Actions */
.relevant-actions {
    position: relative;
    padding: 10px;
    overflow: hidden;
}

    .relevant-actions.open .relevant-actions-body {
        left: 0;
    }

    .relevant-actions.relevant-actions--no-list .relevant-actions-list {
        display: none;
    }

    .relevant-actions.relevant-actions--no-list .relevant-actions-no-list {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }

    .relevant-actions .relevant-actions-header {
        text-align: right;
    }

        .relevant-actions .relevant-actions-header .btn {
            width: 36px;
            height: 36px;
        }

            .relevant-actions .relevant-actions-header .btn:before {
                top: 4px;
                right: 4px;
                border: 2px solid #ffffff;
            }

            .relevant-actions .relevant-actions-header .btn:hover:before, .relevant-actions .relevant-actions-header .btn:focus:before {
                border-color: #f2f2f2;
            }

            .relevant-actions .relevant-actions-header .btn .icon {
                width: 1.2em;
                height: 1.2em;
            }

    .relevant-actions .relevant-actions-body {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;
        background: var(--alpha-dark-1);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: all var(--transition-duration) ease 0s;
        z-index: 1;
    }

    .relevant-actions .relevant-actions-list {
        flex: 1 1 auto;
        min-height: 0;
    }

        .relevant-actions .relevant-actions-list .scroll {
            padding: 0 4px 0 0;
        }

        .relevant-actions .relevant-actions-list .dropdown:not(:last-of-type) {
            margin-bottom: 10px;
        }

        .relevant-actions .relevant-actions-list .dropdown .dropdown-header {
            color: rgba(0, 0, 0, 0.3);
            padding: 4px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.075);
        }

    .relevant-actions .relevant-actions-item {
        margin-top: 10px;
    }

        .relevant-actions .relevant-actions-item .card-inner {
            padding: 10px;
            border-radius: 4px;
            background: #ffffff;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all var(--transition-duration) ease 0s;
        }

            .relevant-actions .relevant-actions-item .card-inner [class*=-prefix]::before {
                transition: all ease 0.3s;
            }

            .relevant-actions .relevant-actions-item .card-inner:hover [class*=-prefix] {
                position: initial;
                z-index: 1;
            }

                .relevant-actions .relevant-actions-item .card-inner:hover [class*=-prefix]::before {
                    left: 0;
                    width: 100%;
                    padding-bottom: 100%;
                    transform: translateY(-50%) scale(1.5);
                    transition: all ease 0.5s;
                }

            .relevant-actions .relevant-actions-item .card-inner:hover * {
                position: relative;
                color: #ffffff;
                z-index: 2;
            }

    .relevant-actions .relevant-actions-meta {
        font-size: 0.75rem;
        line-height: 1.4;
    }

        .relevant-actions .relevant-actions-meta .label--meta {
            font-size: 0.625rem;
        }

    .relevant-actions .relevant-actions-no-list {
        display: none;
        width: 100%;
        padding: 30px;
        text-align: center;
    }

    .relevant-actions .btn-close {
        display: inline-block;
        padding-left: 4px;
        cursor: pointer;
    }

        .relevant-actions .btn-close:hover, .relevant-actions .btn-close:focus {
            color: var(--green);
        }

        .relevant-actions .btn-close .icon {
            width: 0.625em;
        }

.layout--light .relevant-actions .relevant-actions-header .btn:before {
    border-color: var(--grey-light-1);
}

.layout--light .relevant-actions .relevant-actions-header .btn:hover:before, .layout--light .relevant-actions .relevant-actions-header .btn:focus:before {
    border-color: #e5e5e5;
}

.layout--light .relevant-actions .relevant-actions-item .card-inner {
    border: none;
}

.layout--dark .relevant-actions .relevant-actions-header .btn:before {
    border-color: var(--grey-dark-4);
}

.layout--dark .relevant-actions .relevant-actions-body {
    background: rgba(31, 31, 31, 0.9);
}

.layout--dark .relevant-actions .relevant-actions-list .dropdown .dropdown-header {
    color: #717171;
    border-color: var(--grey-dark-3);
}

.layout--dark .relevant-actions .relevant-actions-item .card-inner {
    background: var(--grey-dark-4);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.weekly-in-classes > .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    min-height: 350px;
}

.weekly-in-classes .table-classes-viewer {
    flex: 0 1 auto;
    min-height: 0;
}

    .weekly-in-classes .table-classes-viewer > .card {
        height: 100%;
    }

.weekly-in-classes .start-here {
    padding: 0 10px 10px;
}

    .weekly-in-classes .start-here .start-here-header {
        padding: 10px;
        text-align: center;
    }

        .weekly-in-classes .start-here .start-here-header .title {
            margin: 10px 0 0;
        }

.weekly-in-classes .direction-arrows {
    display: inline-block;
    width: 12px;
    line-height: 0.4;
}

    .weekly-in-classes .direction-arrows .icon {
        fill: var(--green);
        width: 100%;
        animation: direction-arrows 0.6s linear infinite alternate;
    }

        .weekly-in-classes .direction-arrows .icon:nth-child(2) {
            opacity: 0.6;
            animation: direction-arrows 0.6s linear infinite alternate 0.3s;
        }

        .weekly-in-classes .direction-arrows .icon:nth-child(3) {
            opacity: 0.4;
            animation: direction-arrows 0.6s linear infinite alternate 0.6s;
        }

@keyframes direction-arrows {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** Panel Dashboard Calendar*/
.dashboard-calendar > .card {
    padding: 6px;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 13.4.4 Tile Class Item Supplementary */
.tile-class-item-supplementary .tile-aside {
    text-align: right;
}

    .tile-class-item-supplementary .tile-aside .date-time {
        margin: 4px 8px 4px 0;
        font-size: 0.75em;
        line-height: 1.2;
    }

        .tile-class-item-supplementary .tile-aside .date-time:last-child {
            opacity: 0.5;
        }

.tile-class-item-supplementary .tile-main {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    border-left-width: 4px;
    border-left-style: solid;
    border-color: var(--green-yellow);
    padding: 10px 4px 10px 10px;
    border-radius: 4px;
    background: var(--alpha-dark-1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all var(--transition-duration) ease 0s;
}

    .tile-class-item-supplementary .tile-main:hover, .tile-class-item-supplementary .tile-main:focus {
        background: var(--alpha-dark-2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
    }

.tile-class-item-supplementary .tile-headline {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1;
}

    .tile-class-item-supplementary .tile-headline .headline .label--meta {
        font-size: 0.75em;
        margin-bottom: 2px;
    }

.layout--light .tile-class-item-supplementary .tile-main {
    background: rgba(255, 255, 255, 0.75);
}

    .layout--light .tile-class-item-supplementary .tile-main:hover, .layout--light .tile-class-item-supplementary .tile-main:focus {
        background: #ffffff;
    }

.layout--dark .tile-class-item-supplementary .tile-aside .date-time {
    color: var(--grey-1);
}

.layout--dark .tile-class-item-supplementary .tile-main {
    background: var(--alpha-light-1);
}

    .layout--dark .tile-class-item-supplementary .tile-main:hover, .layout--dark .tile-class-item-supplementary .tile-main:focus {
        background: var(--alpha-light-2);
    }

.layout--dark .tile-headline .headline .label--meta {
    color: var(--grey-3);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/** 3.1.3 Date Picker Calendar */
.date-picker--calendar {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    box-shadow: none;
}

    .date-picker--calendar .date-picker-header {
        width: 100%;
        padding: 10px 10px 10px 20px;
    }

        .date-picker--calendar .date-picker-header .title {
            color: var(--grey-dark-3);
            margin-bottom: 0;
        }

        .date-picker--calendar .date-picker-header .pagination {
            line-height: 0;
        }

    .date-picker--calendar .date-picker-body {
        width: 300px;
    }

        .date-picker--calendar .date-picker-body .dates > li {
            position: relative;
        }

        .date-picker--calendar .date-picker-body .dates .date-weekend > * {
            opacity: 0.5;
        }

        .date-picker--calendar .date-picker-body .dates .date-weekend.date-prev,
        .date-picker--calendar .date-picker-body .dates .date-weekend.date-next,
        .date-picker--calendar .date-picker-body .dates .date-weekend.date-disabled {
            opacity: 0.5;
        }

            .date-picker--calendar .date-picker-body .dates .date-weekend.date-prev > *,
            .date-picker--calendar .date-picker-body .dates .date-weekend.date-next > *,
            .date-picker--calendar .date-picker-body .dates .date-weekend.date-disabled > * {
                opacity: 1;
            }

        .date-picker--calendar .date-picker-body .dates .date-weekend.date--start::before, .date-picker--calendar .date-picker-body .dates .date-weekend.date--end::before {
            width: 100%;
        }

        .date-picker--calendar .date-picker-body .dates .date--range-week {
            background: rgba(0, 0, 0, 0.05);
            position: relative;
        }

            .date-picker--calendar .date-picker-body .dates .date--range-week.date-prev::before,
            .date-picker--calendar .date-picker-body .dates .date--range-week.date-next::before,
            .date-picker--calendar .date-picker-body .dates .date--range-week.date-disabled::before {
                content: none;
            }

            .date-picker--calendar .date-picker-body .dates .date--range-week::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.05);
            }

        .date-picker--calendar .date-picker-body .dates .date--start-week::before {
            right: 0;
            width: calc(100% - 4px);
            border-radius: 32px 0 0 32px;
        }

        .date-picker--calendar .date-picker-body .dates .date--end-week::before {
            left: 0;
            width: calc(100% - 4px);
            border-radius: 0 32px 32px 0;
        }

        .date-picker--calendar .date-picker-body .dates .date--selected {
            pointer-events: none;
        }

        .date-picker--calendar .date-picker-body .dates .date--today::after {
            content: none;
        }

        .date-picker--calendar .date-picker-body .date-markers {
            position: absolute;
            text-align: center;
            width: 100%;
            bottom: 0;
            line-height: 0;
        }

            .date-picker--calendar .date-picker-body .date-markers .date-marker {
                display: inline-block;
                margin: 0 1px;
                width: 4px;
                height: 4px;
                border-radius: 50%;
            }

    .date-picker--calendar .date-picker-legend {
        flex: 1 1 auto;
        padding: 20px;
        border-left: 1px solid var(--grey-light-3);
        min-width: 143px;
    }

        .date-picker--calendar .date-picker-legend ul {
            line-height: 2;
        }

    .date-picker--calendar .scroll {
        padding: 0;
        display: flex;
    }

.layout--dark.date-picker--calendar {
    background: var(--grey-dark-4);
    border-color: var(--grey-dark-4);
}

    .layout--dark.date-picker--calendar .date-picker-header,
    .layout--dark.date-picker--calendar .date-picker-body {
        background: var(--alpha-light-1);
    }

    .layout--dark.date-picker--calendar .date-picker-header {
        border-color: var(--grey-dark-4);
    }

        .layout--dark.date-picker--calendar .date-picker-header .title {
            color: var(--grey-light-4);
        }

    .layout--dark.date-picker--calendar .date-picker-body .dates .date {
        color: var(--grey-1);
    }

        .layout--dark.date-picker--calendar .date-picker-body .dates .date:hover > span {
            background: var(--alpha-dark-2);
        }

    .layout--dark.date-picker--calendar .date-picker-body .dates .date--start::before,
    .layout--dark.date-picker--calendar .date-picker-body .dates .date--end::before {
        background: var(--alpha-dark-2);
    }

    .layout--dark.date-picker--calendar .date-picker-body .dates .date--range-week {
        background: var(--alpha-dark-2);
    }

        .layout--dark.date-picker--calendar .date-picker-body .dates .date--range-week::before {
            background: var(--alpha-dark-2);
        }

    .layout--dark.date-picker--calendar .date-picker-legend {
        border: none;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.card--profile .avatar {
    margin-top: -12px;
}

.card--profile .card-footer {
    text-align: center;
}

    .card--profile .card-footer ul {
        line-height: 1.2;
    }

    .card--profile .card-footer .btn-list {
        margin-bottom: 12px;
    }

        .card--profile .card-footer .btn-list li {
            display: inline-block;
            margin: 4px;
        }

.layout--dark.card--profile {
    background: var(--grey-dark-3);
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/* 13.# */
.alert {
    padding: 15px 15px 15px 20px;
    background: var(--grey-light-1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

    .alert.type--inline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

        .alert.type--inline .alert-header,
        .alert.type--inline .alert-controls {
            line-height: 1;
        }

        .alert.type--inline .alert-body {
            flex: 1 1 auto;
        }

    .alert.position--fixed {
        position: fixed;
        left: 50%;
        transform: translate(-50%, 110%);
        bottom: 0;
        width: 100%;
        max-width: 1200px;
        z-index: 9999;
        transition: all var(--transition-duration) ease 0s;
    }

@media all and (min-width: 576px) {
    .alert.position--fixed {
        max-width: 576px;
    }
}

@media all and (min-width: 768px) {
    .alert.position--fixed {
        max-width: 768px;
    }
}

@media all and (min-width: 992px) {
    .alert.position--fixed {
        max-width: 992px;
    }
}

@media all and (min-width: 1200px) {
    .alert.position--fixed {
        max-width: 1200px;
    }
}

.alert.position--fixed.state--show {
    transform: translate(-50%, -20px);
}

.alert.status--warning {
    color: #ffffff !important;
    background: var(--orange) !important;
    border-color: rgba(255, 255, 255, 0.25);
}

    .alert.status--warning .alert-controls .btn {
        color: var(--orange);
        background: white;
        border: none;
    }

        .alert.status--warning .alert-controls .btn:hover {
            background: rgba(255, 255, 255, 0.85);
        }

    .alert.status--warning .btn--text {
        color: #ffffff;
    }

.alert.status--success {
    color: #ffffff !important;
    background: var(--green) !important;
    border-color: rgba(255, 255, 255, 0.25);
}

    .alert.status--success .alert-controls .btn {
        color: var(--green);
        background: white;
        border: none;
    }

        .alert.status--success .alert-controls .btn:hover {
            background: rgba(255, 255, 255, 0.85);
        }

    .alert.status--success .btn--text {
        color: #ffffff;
    }

.alert.status--error {
    color: #ffffff !important;
    background: var(--red) !important;
    border-color: rgba(255, 255, 255, 0.25);
}

    .alert.status--error .alert-controls .btn {
        color: var(--red);
        background: white;
        border: none;
    }

        .alert.status--error .alert-controls .btn:hover {
            background: rgba(255, 255, 255, 0.85);
        }

    .alert.status--error .btn--text {
        color: #ffffff;
    }

.alert .alert-header .icon {
    height: 1em;
    aspect-ratio: 1/1;
}

.alert .alert-body {
    font-size: 0.875em;
}

.alert .alert-footer,
.alert .alert-controls {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 1 auto;
    justify-content: flex-end;
}

.layout--light.alert,
.layout--light .alert {
    background: #ffffff;
}

.layout--dark.alert,
.layout--dark .alert {
    color: var(--grey-1);
    background: var(--grey-dark-3);
    border-color: rgba(255, 255, 255, 0.05);
}


/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 2.1 layout-school-years-page */
@media all and (min-height: 768px) {
    .page-school-years.dashboard.dashboard--sidebar .dashboard-main {
        height: 100vh;
    }
}

.page-school-years .dashboard-main-builder {
    min-height: initial;
    height: 100%;
}

.page-school-years .window-navigation {
    height: 100%;
}

    .page-school-years .window-navigation .navigation-page {
        min-height: 600px;
        height: 100%;
    }

        .page-school-years .window-navigation .navigation-page.view-quick-start {
            padding-top: 10px;
            margin: 0 auto;
            max-width: 1200px;
        }

        .page-school-years .window-navigation .navigation-page.view-builder {
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            max-width: 1556px;
            height: calc(100vh - 100px);
        }

            .page-school-years .window-navigation .navigation-page.view-builder .navigation-page-body {
                flex: 1 1 auto;
                min-height: 0;
            }

                .page-school-years .window-navigation .navigation-page.view-builder .navigation-page-body > .container {
                    display: flex;
                    flex-direction: column;
                }

            .page-school-years .window-navigation .navigation-page.view-builder .navigation-page-footer {
                padding: 0 10px;
            }

                .page-school-years .window-navigation .navigation-page.view-builder .navigation-page-footer > .flex {
                    padding: 8px 10px;
                    border-radius: 0 0 4px 4px;
                    background: #ffffff;
                    border: 1px solid var(--grey-light-3);
                    border-top: 0;
                }

        .page-school-years .window-navigation .navigation-page .navigation-page-body {
            height: 100%;
        }

            .page-school-years .window-navigation .navigation-page .navigation-page-body > .container {
                height: 100%;
            }

.page-school-years .tabs--builder .tabs-body {
    flex: 1 1 0;
}

    .page-school-years .tabs--builder .tabs-body > .card {
        border-radius: 0;
    }

.page-school-years .quick-start {
    height: 100%;
}

    .page-school-years .quick-start > .card {
        height: 100%;
    }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# LAYOUT
--------- */
.page-users.dashboard.dashboard--sidebar .dashboard-main {
    padding: 79px 15px 15px 303px;
}

.page-users .users-table > .row,
.page-users .users-table .table-wrapper,
.page-users .users-table .table-wrapper-card,
.page-users .users-table .table-wrapper-body {
    display: flex;
    flex-direction: column;
}

.page-users .users-table > .row {
    height: calc(100vh - 95px);
}

    .page-users .users-table > .row > * {
        flex: 0 1 auto;
        min-height: 0;
    }

.page-users .users-table .table-wrapper {
    height: 100%;
}

.page-users .users-table .table-wrapper-card {
    flex: 1 1 auto;
    min-height: 0;
}

    .page-users .users-table .table-wrapper-card .table-wrapper-body {
        flex: 1 1 auto;
        min-height: 0;
    }

        .page-users .users-table .table-wrapper-card .table-wrapper-body .card {
            flex: 1 1 auto;
            min-height: 0;
        }

/* ---------
# VIEWS
--------- */
/** 13.4.3 Tile Calendar Build */
.tile-calendar-build {
    position: relative;
    border-left-width: 4px;
    border-left-style: solid;
    padding: 10px 4px 10px 10px;
    border-radius: 4px;
    background: var(--alpha-dark-1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all var(--transition-duration) ease 0s;
}

    .tile-calendar-build:hover, .tile-calendar-build:focus {
        background: var(--alpha-dark-2);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
    }

    .tile-calendar-build .tile-headline {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1;
    }

        .tile-calendar-build .tile-headline .headline .label {
            font-size: 0.75em;
            margin-top: 6px;
        }

    .tile-calendar-build .tile-options .btn .icon {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .tile-calendar-build .flex {
        height: 100%;
    }

.layout--light .tile-calendar-build {
    background: rgba(255, 255, 255, 0.75);
}

    .layout--light .tile-calendar-build:hover, .layout--light .tile-calendar-build:focus {
        background: #ffffff;
    }

.layout--dark .tile-calendar-build {
    background: var(--alpha-light-1);
}

    .layout--dark .tile-calendar-build:hover, .layout--dark .tile-calendar-build:focus {
        background: var(--alpha-light-2);
    }

.dashboard-overview > .card {
    padding: 5px;
}

    .dashboard-overview > .card.layout--light {
        background: rgba(0, 0, 0, 0.025);
        border: none;
    }

.dashboard-overview .list-tile-users-summary {
    margin: -0.625rem;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 1.1 view-school-year-form */
.form-school-year .card,
.form-school-year .card-inner {
    max-width: 345px;
    padding: 40px;
    border: none !important;
}

.form-school-year .title {
    margin-bottom: 1.25em;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEW
--------- */
/** 1.2 School Year Records View */
.table-school-year .card-inner .table--list .tr--active td {
    background: #ffffff;
}

.table-school-year .card-inner .table--list .th--sticky {
    background: #f2f2f2;
}

.table-school-year .card-inner .table--list .th--sort:hover {
    background: #eaeaea;
}

.layout--light .table-school-year .card-inner .table--list .tr--active td {
    background: var(--grey-light-2);
}

.layout--light .table-school-year .card-inner .table--list .th--sticky {
    background: #ffffff;
}

.layout--dark .table-school-year .card-inner .table--list .tr--active td {
    background: var(--grey-dark-2);
}

    .layout--dark .table-school-year .card-inner .table--list .tr--active td::before {
        border-color: var(--grey-dark-3);
    }

.layout--dark .table-school-year .card-inner .table--list .th--sticky {
    background: var(--grey-dark-3);
}

.layout--dark .table-school-year .card-inner .table--list .th--sort:hover {
    background: #383838;
}

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
.tile-school-year-summary {
    overflow: hidden;
    line-height: 1.25;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    border-radius: 4px;
}

    .tile-school-year-summary .school-year-summary {
        position: relative;
    }

        .tile-school-year-summary .school-year-summary .summary-headline {
            padding: 20px;
            color: #ffffff;
            background: linear-gradient(225deg, #27BF81 0%, #1BA16A 100%);
        }

            .tile-school-year-summary .school-year-summary .summary-headline .label {
                opacity: 0.75;
            }

            .tile-school-year-summary .school-year-summary .summary-headline * {
                color: inherit;
            }

        .tile-school-year-summary .school-year-summary .summary-meta {
            display: flex;
            padding: 10px 15px;
        }

            .tile-school-year-summary .school-year-summary .summary-meta > * {
                overflow: hidden;
                width: 50%;
            }

            .tile-school-year-summary .school-year-summary .summary-meta .v-sep {
                flex: 0 0 1px;
                margin: 0 10px;
                background: var(--alpha-dark-2);
            }

        .tile-school-year-summary .school-year-summary .summary-grades {
            display: flex;
            align-items: center;
        }

            .tile-school-year-summary .school-year-summary .summary-grades .icons {
                flex: 0 0 auto;
                margin-right: 10px;
            }

            .tile-school-year-summary .school-year-summary .summary-grades .grades {
                overflow: hidden;
            }

            .tile-school-year-summary .school-year-summary .summary-grades .label--meta {
                margin-bottom: 3px;
            }

            .tile-school-year-summary .school-year-summary .summary-grades .text-overflow {
                display: block;
            }

        .tile-school-year-summary .school-year-summary .btn {
            position: absolute;
            top: 15px;
            right: 15px;
        }

    .tile-school-year-summary .no-school-year {
        display: flex;
        min-height: 174px;
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        text-align: center;
    }

    .tile-school-year-summary h2 {
        font-size: 1.625rem;
    }

.layout--light.tile-school-year-summary {
    background: var(--alpha-dark-1);
}

.layout--dark.tile-school-year-summary {
    background: var(--alpha-light-1);
}

    .layout--dark.tile-school-year-summary .school-year-summary {
        position: relative;
    }

        .layout--dark.tile-school-year-summary .school-year-summary .summary-headline * {
            color: inherit;
        }

        .layout--dark.tile-school-year-summary .school-year-summary .summary-meta .v-sep {
            background: var(--alpha-light-2);
        }

/** 2.1 Typography */
/** 2.2 Colors */
/** 2.3 Layout */
/* ---------
# VIEWS
--------- */
/** 5.3.1 Quick Start School Year */
.quick-start--school-year .quick-start-body .table-school-year {
    /*flex: 1 1 auto;
  display: flex;
  flex-direction: column;*/
    max-height: 335px;
    margin-top: 1em;
}

    .quick-start--school-year .quick-start-body .table-school-year .card,
    .quick-start--school-year .quick-start-body .table-school-year .card-inner {
        min-height: 200px;
    }

        .quick-start--school-year .quick-start-body .table-school-year .card .scroll,
        .quick-start--school-year .quick-start-body .table-school-year .card-inner .scroll {
            max-height: 226px;
        }

.quick-start--school-year > .card {
    display: flex;
    align-items: center;
}

.quick-start--school-year .form-school-year {
    flex: 0 0 0;
    position: relative;
    top: -100px;
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    opacity: 0;
    z-index: -1;
    transition: all var(--transition-duration) ease 0s;
}

.quick-start.quick-start--school-year > .card > .flex[data-view=form-school-year] .quick-start-header .btn--primary {
    display: none;
}

.quick-start.quick-start--school-year > .card > .flex[data-view=form-school-year] .quick-start-header .btn--circle {
    display: block;
}

.quick-start.quick-start--school-year > .card > .flex[data-view=form-school-year] .form-school-year {
    top: 0;
    flex: 1 1 auto;
    overflow: visible;
    opacity: 1;
    z-index: 0;
}

.quick-start.quick-start--school-year > .card > .flex[data-view=form-school-year] .quick-start-body {
    flex: 0 0 0;
    top: 100px;
    overflow: hidden;
    opacity: 0;
}

.quick-start.quick-start--school-year > .card > .flex[data-view=form-school-year] .quick-start-footer {
    display: flex;
    opacity: 1;
}

.tile-users-summary {
    display: flex;
    line-height: 1.4;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    height: 77px;
    cursor: pointer;
}

    .tile-users-summary.summary--all {
        color: #ffffff;
        background-color: var(--green);
        box-shadow: 0 3px 6px rgba(39, 191, 129, 0.06);
    }

        .tile-users-summary.summary--all .summary-meta .label,
        .tile-users-summary.summary--all .summary-label .label {
            opacity: 0.75;
        }

        .tile-users-summary.summary--all .summary-meta *,
        .tile-users-summary.summary--all .summary-label * {
            color: inherit;
        }

        .tile-users-summary.summary--all .summary-label {
            padding: 10px 15px;
        }

        .tile-users-summary.summary--all:hover .summary-label, .tile-users-summary.summary--all:focus .summary-label, .tile-users-summary.summary--all.active .summary-label {
            padding-right: 15px;
            background: var(--alpha-dark-1);
        }

    .tile-users-summary:hover .summary-meta, .tile-users-summary:focus .summary-meta, .tile-users-summary.active .summary-meta {
        background: var(--green);
        color: #ffffff;
    }

    .tile-users-summary:hover .summary-label, .tile-users-summary:focus .summary-label, .tile-users-summary.active .summary-label {
        padding-right: 50px;
    }

        .tile-users-summary:hover .summary-label .btn, .tile-users-summary:focus .summary-label .btn, .tile-users-summary.active .summary-label .btn {
            transform: translate(-10px, -50%);
        }

    .tile-users-summary .summary-meta,
    .tile-users-summary .summary-label {
        transition: all var(--transition-duration) ease 0s;
    }

    .tile-users-summary .summary-meta {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        width: 68px;
        background: var(--alpha-dark-2);
    }

    .tile-users-summary .summary-label {
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
        padding: 15px;
    }

        .tile-users-summary .summary-label .btn {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(100%, -50%);
        }

    .tile-users-summary .summary-icon {
        position: relative;
        width: 43px;
        height: 43px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
    }

        .tile-users-summary .summary-icon .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            fill: var(--green);
        }

    .tile-users-summary .summary-count {
        font-size: 1.625rem;
        font-weight: 600;
    }

.layout--light.tile-users-summary {
    background: var(--alpha-dark-1);
}

    .layout--light.tile-users-summary.summary--all {
        background-color: var(--green);
    }

    .layout--light.tile-users-summary:hover .summary-meta, .layout--light.tile-users-summary:focus .summary-meta, .layout--light.tile-users-summary.active .summary-meta {
        background: var(--green);
    }

    .layout--light.tile-users-summary .summary-meta {
        background: var(--alpha-dark-1);
    }

.layout--dark.tile-users-summary {
    background: var(--alpha-light-1);
}

    .layout--dark.tile-users-summary.summary--all {
        background-color: var(--green);
    }

        .layout--dark.tile-users-summary.summary--all .summary-meta .label,
        .layout--dark.tile-users-summary.summary--all .summary-label .label {
            opacity: 0.75;
        }

        .layout--dark.tile-users-summary.summary--all .summary-meta *,
        .layout--dark.tile-users-summary.summary--all .summary-label * {
            color: inherit;
        }

        .layout--dark.tile-users-summary.summary--all .summary-meta {
            background: var(--alpha-dark-2);
        }

    .layout--dark.tile-users-summary:hover .summary-meta, .layout--dark.tile-users-summary:focus .summary-meta, .layout--dark.tile-users-summary.active .summary-meta {
        background: var(--green);
    }

    .layout--dark.tile-users-summary:hover .summary-count, .layout--dark.tile-users-summary:focus .summary-count, .layout--dark.tile-users-summary.active .summary-count {
        color: #ffffff;
    }

    .layout--dark.tile-users-summary .summary-meta {
        background: var(--alpha-light-1);
    }

    .layout--dark.tile-users-summary .summary-count {
        color: var(--grey-1);
    }