:root {
    color-scheme: light dark;

    --smallest-font-size: 7pt;
    --smaller-font-size: 8pt;
    --small-font-size: 9pt;
    --normal-font-size: 10pt;
    --normal-font-size-moz: 10.2pt;
    --large-font-size: 11pt;
    --larger-font-size: 12pt;
    --largest-font-size: 13pt;
    --title-font-size: 15pt;
    --heading-font-size: 16pt;

    --icon-tiny-size: 0.9rem;
    --icon-smallest-size: 1rem;
    --icon-small-size: 1.1rem;
    --icon-smaller-size: 1.2rem;
    --icon-normal-size: 1.4rem;
    --icon-large-size: 1.6rem;
    --icon-larger-size: 1.7rem;
    --icon-largest-size: 2.6rem;

    --main-height: 28px;
    --main-line-height: 28px;
    --dialog-title-line-height: 30px;

    --brand-font: "Titillium Web", sans-serif;
    --icon-font: normal normal normal var(--icon-normal-size) "Material Icons";

    --brand-color: light-dark(#5e6e65, #91a198);

    --background-color: light-dark(#f0f0f0, #2d2d34);
    --background-color-light: light-dark(#f9f9f9, #26262c);
    --background-color-dark: light-dark(#e7e7e7, #37373f);
    --foreground-color: light-dark(#000, #f9f9f9);
    --foreground-color-invert: #fff;
    --foreground-color-error: light-dark(#ff0000, #ff7777);

    --overlay-back-color: light-dark(#f0f0f0, #2d2d34);
    --overlay-color-light: light-dark(#f7f7f7, #22222a);
    --overlay-color-dark: light-dark(#ddd, #353541);
    --overlay-back-filtr: brightness(1.05);
    --overlay-icon-color: light-dark(#ffffff, rgba(0, 0, 0, 1));
    --overlay-icon-shadw: light-dark(
        0 1px 30px 10px #ccc,
        0 1px 120px 30px #000
    );
    --overlay-text-color: light-dark(#555, #fff);
    --overlay-text-shadw: light-dark(0 -1px 3px #fff, 0 1px 30px #000);

    --scrollbar-color-base: light-dark(#aaa #ddd, #aaa #636369);
    --scrollbar-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    --scrollbar-color-hover: light-dark(
        rgba(0, 0, 0, 0.4),
        rgba(255, 255, 255, 0.4)
    );

    --anchor-foreground: light-dark(#1967d2, #59b6ed);
    --anchor-foreground-hover: light-dark(#649ded, #bfd7f8);
    --anchor-foreground-white: #eee;
    --anchor-suffix: light-dark(brightness(100%), brightness(150%));

    --input-background: light-dark(#d0d0d0, #3a3a3a);
    --input-background-hover: light-dark(#f0f0f0, #2a2a2a);
    --input-foreground: light-dark(#b0b0b0, #f9f9f9);

    --input-background-framed: light-dark(#fff, #111113);
    --input-background-framed-hover: light-dark(#e6e6e6, #131211);
    --input-foreground-framed: light-dark(#666, #ccc);
    --input-foreground-framed-hover: light-dark(#888, #aaa);

    --input-background-mandatory: light-dark(#c0dcc0, #546e49);
    --input-background-mandatory-hover: light-dark(#cbf5cb, #617c55);
    --input-foreground-mandatory: light-dark(#0d3d0d, #eafbea);

    --input-background-error: light-dark(#ff9999, #5c0a0a);
    --input-background-error-hover: light-dark(#ffcccc, #720d0d);

    --input-background-editable: light-dark(#ffffe0, #4f4f00);
    --input-background-editable-hover: light-dark(#f3f3d2, #6d6d00);

    --input-background-disabled: light-dark(#e9e9e9, #636369);
    --input-foreground-disabled: light-dark(#b9b9b9, #d0d0d0);
    --input-foreground-framed-disabled: light-dark(#aaa, #777);

    --input-foreground: light-dark(#333, #f9f9f9);
    --input-placeholder: light-dark(#c0c0c0, #777);

    --select-background: light-dark(#e9e9e9, #3a3a3a);
    --select-foreground: light-dark(#000, #f9f9f9);
    --select-icon: light-dark(
        url(/graphics/ddl-arrow-black.png),
        url(/graphics/ddl-arrow-white.png)
    );
    --select-dropdown-background: light-dark(#ffffff, #222222);

    --select-background-disabled: light-dark(#d0d0d0, #636369);
    --select-foreground-disabled: light-dark(#a0a0a0, #d0d0d0);

    --select-option-background: light-dark(#fff, #434347);
    --select-option-foreground: light-dark(#333, #d0d0d0);
    --select-option-background-hover: light-dark(#00ace6, #006080);
    --select-option-foreground-hover: light-dark(#fff, #f0f0f0);
    --select-option-background-selected: light-dark(#09c, #004d66);
    --select-option-foreground-selected: light-dark(#fff, #f0f0f0);
    --select-option-background-unselectable: light-dark(#d0d0d0, #636369);
    --select-option-foreground-unselectable: light-dark(#888, #999);
    --select-option-background-notice: light-dark(#f0f0f0, #a0a0a0);
    --select-option-foreground-notice: light-dark(#000, #fff);

    --button-background: light-dark(#d9d9d9, #313135);
    --button-background-hover: light-dark(#e0e0e0, #3a3a3a);
    --button-background-alt: light-dark(#d0d0d0, #434347);
    --button-background-alt-hover: light-dark(#c0c0c0, #4a4a4a);
    --button-foreground: light-dark(#444, #f0f0f0);
    --button-shadow:
        0 0.7px 2.2px 0 light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        0 0.6px 1.8px 0 light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));

    --button-background-disabled: light-dark(#e0e0e0, #3e3e3e);
    --button-foreground-disabled: light-dark(#a0a0a0, #5e5e5e);

    --button-shadow-dialer:
        0 0.7px 1.2px 0 light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),
        0 0.6px 0.8px 0 rgba(0, 0, 0, 0.1);

    --button-background-theme: light-dark(#09c, #005b7a);
    --button-background-theme-hover: light-dark(#00ace6, #007ea8);
    --button-background-theme-selected: light-dark(#8cd9f2, #0080ab);
    --button-foreground-theme: light-dark(#fff, #e6e6e6);
    --button-foreground-subtitle-theme: light-dark(#e9e9e9, #f9f9f9);
    --button-foreground-shadow: light-dark(#0086b3, #005e80);
    --button-shadow-theme:
        0 0.7px 3.2px 0 light-dark(rgba(3, 96, 126, 0.7), rgba(2, 58, 76, 0.7)),
        0 0.6px 0 0 rgba(1, 19, 25, 0.9);

    --button-background-theme-disabled: light-dark(#90c7da, #3b606d);
    --button-foreground-theme-disabled: light-dark(#c9e4ed, #5b7f8b);

    --button-background-green: light-dark(#67c267, #214a21);
    --button-background-green-hover: light-dark(#74ca74, #2f6a2f);
    --button-background-green-alt: light-dark(#67bf67, #2a6a2a);
    --button-background-green-alt-hover: light-dark(#d4ffd4, #0f4d0f);
    --button-background-green-selected: light-dark(#cbf5cb, #2a6a2a);
    --button-foreground-green: #fff;
    --button-shadow-green:
        0 0.7px 2.2px 0 rgba(16, 56, 16, 0.4),
        0 0.6px 1.8px 0 light-dark(rgba(16, 56, 16, 0.1), rgba(16, 56, 16, 0.7));

    --button-background-green-disabled: light-dark(#c0e4c0, #1f471f);
    --button-foreground-green-disabled: light-dark(#e2f3e2, #2f6a2f);
    --button-background-green-current: light-dark(#d4dbd4, #414541);

    --button-background-red: light-dark(#cb2d2d, #7d1c1c);
    --button-background-red-hover: light-dark(#d85b5b, #8a1f1f);
    --button-foreground-red: #fff;
    --button-foreground-red-alt: light-dark(#ffb2b2, #b28181);

    --button-background-red-disabled: light-dark(#ebb4b4, #581313);
    --button-foreground-red-disabled: light-dark(#f5dbdb, #761919);
    --button-background-red-current: light-dark(#ddd2d2, #4d3c3c);

    --button-background-white: light-dark(#f9f9f9, #656565);
    --button-background-white-hover: light-dark(#fff, #606060);
    --button-foreground-white: light-dark(#333, #fff);

    --button-background-error: light-dark(#f5cbcb, #6a2a2a);
    --button-background-error-hover: light-dark(#f9e1e1, #7c3131);
    --button-foreground-error: #fff;

    --button-image-disabled: light-dark(
        grayscale(100%) brightness(110%),
        grayscale(100%) brightness(50%)
    );

    --group-shadow:
        0 0.7px 1.2px 0 light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        0 0.6px 1.8px 0 light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
    --group-filter: light-dark(brightness(0.9), brightness(1.3));

    --menu-shadow:
        0 0.6px 8px 0 light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)),
        0 0.3px 0.9px 0 light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
    --menu-background: light-dark(#fff, #1d1d20);
    --menu-background-alt: light-dark(#ddd, #434347);
    --menu-background-hover: light-dark(#dedede, #525257);
    --menu-background-mask: rgba(0, 0, 0, 0.15);
    --menu-children-mask: rgba(0, 0, 0, 0.4);
    --menu-foreground: light-dark(#000, #f9f9f9);
    --menu-foreground-hover: light-dark(#333, #fff);
    --menu-foreground-disabled: light-dark(#d0d0d0, #888);
    --menu-icon-home: light-dark(#333, #f0f0f0);
    --menu-icon-color: light-dark(#333, #f0f0f0);
    --menu-icon-color-info: light-dark(#09c, #007099);
    --menu-icon-color-info-disabled: light-dark(#addceb, #457687);
    --menu-icon-color-proc: light-dark(#cc9900, #997300);
    --menu-icon-color-proc-disabled: light-dark(#ebdbad, #867646);
    --menu-icon-color-repr: light-dark(#00cc66, #008040);
    --menu-icon-color-repr-disabled: light-dark(#adebcc, #58a780);
    --menu-icon-color-admn: light-dark(#ff6666, #993333);
    --menu-icon-color-admn-disabled: light-dark(#ff6666, #993333);
    --menu-indicator: light-dark(#777, #999);
    --menu-indicator-hover: #666;
    --menu-border: light-dark(#ddd, #434347);

    --menu-side-extra: #a7a7a7;

    --expand-button-background: light-dark(#000, #fff);

    --header-one: light-dark(#666, #d0d0d0);
    --header-two: light-dark(#888, #c0c0c0);
    --header-three: light-dark(#333, #f0f0f0);
    --header-four: light-dark(#666, #d0d0d0);

    --mobile-pin: light-dark(#f0f0f0, #323130);
    --mobile-pin-shadow: light-dark(
        -5px 0.6px 8px -4px rgba(0, 0, 0, 0.3),
        -5px 0.6px 8px -4px rgba(0, 0, 0, 0.7)
    );
    --page-header: light-dark(#f0f0f0, #2d2d34);

    --main-background: light-dark(#fff, #1c1c21);
    --main-bordercolor: light-dark(#e0e0e0, #414148);
    --main-bordercolor-alt: #a0a0a0;
    --main-shadow: light-dark(#aaa, #121212);
    --main-shadow-dark: light-dark(#666, #000000);
    --main-shadow-frame: light-dark(#aaa, #000);
    --main-hover-mask: light-dark(#ffffff33, #00000033);

    --toolbar-background: light-dark(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
    --toolbar-background-hover: light-dark(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.5)
    );
    --toolbar-button-gradiant-start: light-dark(#ccc, #434347);
    --toolbar-button-gradiant-end: light-dark(#dfdfdf, #595959);
    --toolbar-button-gradiant-start-hover: light-dark(#ddd, #313135);
    --toolbar-button-gradiant-end-hover: light-dark(#efefef, #494949);
    --toolbar-button-gradiant-start-active: light-dark(#eee, #1e1e20);
    --toolbar-button-gradiant-end-active: light-dark(#fff, #2c2c30);
    --toolbar-button-border: light-dark(#ccc, #525257);
    --toolbar-button-border-disabled: light-dark(#d9d9d9, #434347);
    --toolbar-button-gradiant-start-dark: light-dark(#808080, #999);
    --toolbar-button-gradiant-end-dark: light-dark(#707070, #888);
    --toolbar-button-border-dark: light-dark(#707070, #888);

    --grid-border: light-dark(#e0e0e0, #313135);
    --grid-border-dark: light-dark(#ddd, #202022);
    --grid-border-bottom: light-dark(#ccc, #636369);
    --grid-header-gradient-start: light-dark(#ddd, #313135);
    --grid-header-gradient-end: light-dark(#eee, #454545);
    --grid-header-gradient-start-hover: light-dark(#eee, #202022);
    --grid-header-gradient-end-hover: light-dark(#fff, #313135);
    --grid-header-gradient-start-active: light-dark(#eee, #434347);
    --grid-header-gradient-end-active: light-dark(#fff, #525257);
    --grid-header-border-bottom: light-dark(#bbb, #525257);
    --grid-header-border-right: light-dark(#f9f9f9, #434347);
    --grid-header-foreground: light-dark(#666, #f0f0f0);
    --grid-header-foreground-shadow: light-dark(#fff, #434347);
    --grid-header-foreground-shadow-dark: light-dark(#666, #202022);
    --grid-header-fixed: light-dark(#fcfcfc, #111113);
    --grid-input: light-dark(#c2c2c2, #606060);
    --grid-editable: light-dark(#fffff0, #38382e);
    --grid-even: light-dark(#f4f6f9, #314159);
    --grid-disabled: light-dark(#f0f0f0, #636369);
    --grid-hard-rule: light-dark(#909090, #505050);
    --grid-body-background: light-dark(#fff, #111113);
    --grid-body-background-hover: #ddd;
    --grid-body-foreground: light-dark(#333, #f0f0f0);
    --grid-body-foreground-alt: light-dark(#fff, #111113);
    --grid-row-selected-cell: light-dark(#e0e0e0, #313135);
    --grid-row-selected-cell-selected: light-dark(#d1d1d1, #434347);
    --grid-row-selected-cell-editable: light-dark(#f7f9d3, #46463a);
    --grid-row-selected-cell-editable-selected: light-dark(#e6e6bf, #525252);
    --grid-row-selected-cell-overload: light-dark(#f1a2a2, #8c0606);
    --grid-row-selected-cell-overload-selected: light-dark(#e58c8c, #ac0606);
    --grid-row-cell-new: light-dark(#d5fcc7, #298807);
    --grid-row-cell-editable: light-dark(#ffffe1, #38382e);
    --grid-row-cell-editable-hover: light-dark(#ffffd6, #4c4c3e);
    --grid-row-cell-selectedcol: light-dark(#c0dcc0, #607b60);
    --grid-row-cell-selectedcol-selected: light-dark(#0f79bb, #205779);
    --grid-row-cell-selectedcol-selected-fore: #fff;
    --grid-row-cell-quickediting: light-dark(#c4e8c4, #225822);
    --grid-row-cell-yardduty: light-dark(#f9f9ea, #5d5d53);
    --grid-row-cell-yarddutyperiod: light-dark(#e8d4c2, #534b44);
    --grid-row-cell-neweditable: light-dark(#caeebd, #2c6119);
    --grid-row-cell-allocatable: light-dark(#d4ffcf, #023800);
    --grid-row-cell-allocations: light-dark(#ffe9cf, #383800);
    --grid-row-cell-allocSearch: light-dark(#efefef, #202022);
    --grid-row-cell-allocBlockd: light-dark(#ffcfcf, #380000);
    --grid-row-cell-past: light-dark(#ffe0ff, #5f4e5f);
    --grid-row-cell-past-hover: light-dark(#e6cae6, #7b657b);
    --grid-row-cell-future: light-dark(#a6caf0, #2d4b6c);
    --grid-row-cell-future-hover: light-dark(#94b4d6, #3c6590);
    --grid-row-cell-selected: light-dark(#c0dcc0, #5f725f);
    --grid-row-cell-selected-hover: light-dark(#a9c2a9, #778d77);
    --grid-row-cell-replacement: light-dark(#ffbbbb, #8a0000);
    --grid-row-cell-stat-over: light-dark(#ffbbbb, #8a0000);
    --grid-row-cell-stat-over-hover: light-dark(#c78996, #5a2a34);
    --grid-row-cell-stat-under: light-dark(#b2dbaf, #1d3c1b);
    --grid-row-cell-stat-under-hover: light-dark(#a9c2a9, #172117);
    --grid-row-cell-mrcg: light-dark(#fad3b6, #513d2f);
    --grid-row-cell-mrcg-hover: light-dark(#e0bea4, #413125);
    --grid-row-cell-composite: light-dark(#c2aea0, #8c6f5a);
    --grid-row-cell-composite-hover: light-dark(#a8978a, #7c6250);
    --grid-row-cell-noteacherroom: light-dark(#a6caf0, #354c64);
    --grid-row-cell-noroom: light-dark(#b2dbaf, #506f4d);
    --grid-row-cell-noroom-hover: light-dark(#bfe0b6, #3b5138);
    --grid-row-cell-roomremoved: light-dark(#ffe471, #705c00);
    --grid-row-cell-noteacher: light-dark(#a6caf0, #354c64);
    --grid-row-cell-roomedit: light-dark(#00f, #000033);
    --grid-row-cell-cancelled: light-dark(#ff0, #606020);
    --grid-row-cell-cancelled-hover: light-dark(#d1d100, #86862d);
    --grid-row-cell-clash: light-dark(#e60000, #b14e4e);
    --grid-row-cell-etunavailable: light-dark(#ffbbbb, #9c5454);
    --grid-row-cell-etunavailable-hover: light-dark(#d19999, #955050);
    --grid-row-cell-unavailable: light-dark(#ff7d7d, #773b3b);
    --grid-row-cell-unavailable-hover: light-dark(#dd6b6b, #542929);
    --grid-row-cell-unavailable-activity: light-dark(#fc4e4e, #633636);
    --grid-row-cell-unavailable-activity-hover: light-dark(#e20303, #522d2d);
    --grid-row-cell-unavailable-planned: light-dark(#f0e1a8, #757528);
    --grid-row-cell-unavailable-planned-hover: light-dark(#c5b787, #59591e);
    --grid-row-cell-available: light-dark(#b2dbaf, #658d62);
    --grid-row-cell-available-hover: light-dark(#92b38f, #61875e);
    --grid-row-cell-absent: light-dark(#90ebeb, #366363);
    --grid-row-cell-absent-hover: light-dark(#76d1d1, #2d5252);
    --grid-row-cell-notatschool: light-dark(#90ebeb, #6b2e2e);
    --grid-row-cell-notatschool-hover: light-dark(#76d1d1, #592626);
    --grid-row-cell-edit: light-dark(#00f, #8a8aff);
    --grid-row-cell-absent-activity: light-dark(#f0a8b3, #6c2d37);
    --grid-row-cell-absent-activity-hover: light-dark(#c58790, #5a262d);
    --grid-row-cell-absent-planned: light-dark(#a8cbf0, #2d4b6c);
    --grid-row-cell-absent-planned-hover: light-dark(#87a6c5, #263f5a);
    --grid-row-cell-etavailother: light-dark(#32cd32, #356435);
    --grid-row-cell-etavailother-hover: light-dark(#29a829, #2c542c);
    --grid-row-cell-cyclestart: light-dark(#90ebeb, #105656);
    --grid-row-cell-countedabsent: light-dark(#0000cc, #0000cd);
    --grid-row-cell-countedabsent-hover: #11126f;
    --grid-row-cell-roomavailable: light-dark(#ccff99, #638146);
    --grid-row-cell-roomavailable-hover: light-dark(#8ac84c, #4c6436);
    --grid-row-cell-available-activity: light-dark(#55cef6, #086f91);
    --grid-row-cell-available-activity-hover: light-dark(#26acd9, #125368);
    --grid-row-cell-available-planned: light-dark(#8ffd79, #33532d);
    --grid-row-cell-available-planned-hover: light-dark(#66c653, #21371d);
    --grid-row-cell-has-change: light-dark(#faffd4, #5a6600);
    --grid-row-cell-overload: light-dark(#ffbbbb, #906060);
    --grid-row-cell-overload-hover: light-dark(#e6a8a8, #7a5252);
    --grid-row-cell-overload-editable: light-dark(#f1a2a2, #7a6252);
    --grid-row-cell-underload: light-dark(#b2dbaf, #506f4d);
    --grid-row-cell-underload-hover: light-dark(#9ec29b, #415a3f);
    --grid-row-cell-underload-editable: light-dark(#b2dbaf, #525a3f);
    --grid-row-cell-outstanding: light-dark(#377e7f, #285c5d);
    --grid-row-cell-issue: light-dark(#ff0000, #ff7777);
    --grid-row-cell-same: light-dark(#7f0000, #ffb3b3);
    --grid-row-cell-faculty: light-dark(#00ff00, #293d29);
    --grid-row-cell-tintedtitle: light-dark(#f0f0f0, #313135);
    --grid-row-cell-tintedtitledark: light-dark(#d0d0d0, #525257);
    --grid-row-cell-highlight: light-dark(#272727, #f0f0f0);
    --grid-row-cell-highlight-hover: light-dark(#353535, #e0e0e0);
    --grid-row-cell-highlight-selected: light-dark(#444, #d9d9d9);
    --grid-row-cell-highlightgrey: #d1d1d1;
    --grid-row-cell-subitem: light-dark(#e0e0e0, #313135);
    --grid-row-cell-disabled: light-dark(#f0f0f0, #313135);
    --grid-row-cell-wait: light-dark(#ffffffb3, #333333b3);

    --dialog-mask-start: light-dark(#eeeeee55, #00000055);
    --dialog-mask-end: light-dark(#eeeeeeaa, #000000aa);
    --dialog-background: light-dark(#fff, #202022);
    --dialog-border: light-dark(#e6edf7, #323232);
    --dialog-shadow: light-dark(#333, #000);
    --dialog-title: light-dark(#333, #f0f0f0);
    --dialog-title-alt: #fff;
    --dialog-title-red: light-dark(#e05252, #c51616);
    --dialog-title-yellow: light-dark(#ffc600, #cca000);
    --dialog-title-green: light-dark(#79c779, #398e39);
    --dialog-title-icon: light-dark(#666, #f9f9f9);
    --dialog-title-icon-alt: #fff;
    --dialog-button-background: light-dark(#e0e0e0, #434347);
    --dialog-button-background-hover: light-dark(#f0f0f0, #525257);
    --dialog-button-background-disabled: light-dark(#d0d0d0, #525257);
    --dialog-button-foreground: light-dark(#444, #f0f0f0);
    --dialog-button-foreground-disabled: light-dark(#bdbdbd, #777);
    --dialog-content-mask: light-dark(#ffffff99, #505050b3);

    --extra-window-background: light-dark(#ffffffe6, #464646e6);
    --extra-window-background-min: light-dark(#ffffff66, #46464666);
    --extra-window-background-hover: light-dark(#fff, #464646);
    --extra-window-minimized-background: light-dark(#777, #636369);
    --extra-window-minimized-foreground: light-dark(#fff, #202022);

    --loader-background: light-dark(#fff, #313135);
    --loader-color: #006ebf;
    --loader-doc1: #ddd;
    --loader-doc1-before: #ccc;
    --loader-doc1-shadow: #333;
    --loader-doc2: #006ebf;
    --loader-doc2-before: #0061a9;
    --loader-doc2-shadow: #333;
    --loader-cube: #006ebf;
    --loader-wall-background: light-dark(#fff, #313135);
    --loader-wall-border: light-dark(#fff, #000);

    --item-hover: light-dark(#c6eeff, #203741);
    --item-selected: light-dark(#bbdefb, #5a6c7b);
    --item-selected-hover: light-dark(#7cdaff, #0b2028);
    --item-dragged: transparent;
    --item-dragged-hover: light-dark(#40e192, #185a3a);
    --item-dragged-shadow: light-dark(#d3f6e5, #0b4629);
    --item-dragged-mask: light-dark(#ffffff4d, #0000004d);

    --message-other: light-dark(#f0f0f0, #434347);
    --message-other-hover: light-dark(#e3e3e3, #4f4f4f);
    --message-mine: #006ebf;
    --message-mine-hover: #007dd6;

    --report-header-background: #fefefe;
    --report-header-rule: #005a9d;

    --rich-editor-border-dark: light-dark(#bbb, #636369);
    --rich-editor-border-light: light-dark(#d0d0d0, #525257);
    --rich-editor-border-stroke: light-dark(#777, #ccc);
    --rich-editor-border-colour: light-dark(#777, #ccc);
    --rich-editor-background-accent: light-dark(#ccc, #525257);
    --rich-editor-border-accent: light-dark(#111, #fff);
    --rich-editor-blank: #ffffff99;

    --tabs-shadow: light-dark(
        0px -1px 5px -1px rgba(0, 0, 0, 0.3),
        0px -1px 5px -1px rgba(0, 0, 0, 0.9)
    );
    --tabs-shadow-selected: light-dark(
        0 -3px 4px -2px rgba(0, 0, 0, 0.3),
        0 -3px 4px -2px rgba(0, 0, 0, 0.9)
    );
    --tabs-dirty-start: light-dark(#cb2d2d, #7d1c1c);
    --tabs-dirty-end: light-dark(#fff, #111113);
    --tabs-dirty-start-hover: light-dark(#d85b5b, #8a1f1f);
    --tabs-dirty-end-hover: light-dark(#fff, #111113);
    --tabs-border: light-dark(#c0c0c0, #636369);

    --tooltip-background: light-dark(#494949ed, #dcdcdced);
    --tooltip-foreground: light-dark(#fff, #000);

    --user-menu-hover: light-dark(#ffffffcc, #ffffff1a);
    --user-menu-school-hover: light-dark(#0000001a, #ffffff0d);
    --user-menu-icon: light-dark(#00000066, #000);

    --pane-list: light-dark(#f8f8f8, #313135);
    --pane-foreground: #000;
    --pane-bordercolor: #000;

    --focus-outline: light-dark(#7facdb, #5892d0);
    --focus-outline-pulse: light-dark(#7facdb00, #5892d000);

    --icon-default: light-dark(#333, #f9f9f9);
    --icon-blue: light-dark(#006ebf, #7dcde8);
    --icon-green: light-dark(#67c267, #59d959);
    --icon-yellow: light-dark(#ffc800, #ffd333);
    --icon-red: light-dark(#ed4f4f, #ff7777);
    --icon-grey: light-dark(#666, #ccc);
    --icon-token: light-dark(#09c, #004d66);
    --icon-foreground: light-dark(#fff, #e6e6e6);

    --file-icon-tdf-start: #4e90bf;
    --file-icon-tdf-end: #366e96;
    --file-icon-sof-start: #bf684e;
    --file-icon-sof-end: #964c36;
    --file-icon-dof-start: #4ebf84;
    --file-icon-dof-end: #369664;
    --file-icon-fld-start: light-dark(#e7d6a0, #d3b450);
    --file-icon-fld-end: light-dark(#ddc678, #c09e30);

    --file-activity-filter: light-dark(brightness(150%), invert(1));

    --horizontal-rule: light-dark(#f0f0f0, #787878);
    --horizontal-rule-dark: light-dark(#a0a0a0, #c4c4c4);

    --notification-brightness-1: brightness(1);
    --notification-brightness-2: light-dark(brightness(3), brightness(0.5));
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }

    :root.dark {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    :root.light {
        color-scheme: light;
    }
}
.apps-menu-slide {
    color: var(--header-four);

    &.On {
        display: initial;
    }

    .apps-menu,
    .sidebar-menu {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;

        .item {
            span {
                font-size: var(--normal-font-size);
                line-height: 30px;
                color: var(--header-four);
                padding-left: 5px;
            }

            a {
                color: var(--anchor-foreground-white);
            }
        }

        .title {
            display: block;
            font-size: var(--large-font-size);
            font-weight: 700;
            margin-bottom: 10px;
            padding: 0;
            float: left;
        }

        .app-items {
            width: 100%;
            margin-bottom: 20px;
            float: left;

            &.notification-links,
            &.config-links {
                .items .item {
                    margin: 0 0 10px;
                    border-radius: 10px;
                }
            }

            .items {
                clear: both;
                display: flex;
                flex-direction: column;

                .extra {
                    color: var(--menu-side-extra);
                    font-style: italic;
                    position: relative;
                    top: -5px;
                    font-size: var(--normal-font-size);
                }

                .item {
                    padding: 5px;
                    margin: 0 0 2px;
                    border-radius: 10px;
                    cursor: pointer;
                    outline: none;
                    display: flex;
                    flex-direction: row;

                    &:hover,
                    &:focus {
                        background: var(--menu-background-hover);
                        box-shadow: var(--button-shadow);
                        text-decoration: none !important;
                    }

                    &.emphasize {
                        background: var(--button-background-theme);
                        box-shadow: var(--button-shadow-theme);

                        &,
                        * {
                            color: var(--button-foreground-theme);
                        }

                        i {
                            top: 1px;
                            text-shadow: -1px -1px 0px
                                var(--button-shadow-theme);
                        }
                    }

                    &.message {
                        flex-direction: column;
                        gap: 5px;
                        padding: 5px 0;

                        &,
                        * {
                            -webkit-user-select: none;
                            user-select: none;
                        }
                    }

                    .icon-cont {
                        display: block;
                        position: relative;
                        overflow: hidden;
                        box-sizing: border-box;
                        top: -2px;

                        i {
                            position: relative;
                            line-height: 16px !important;
                            top: 3px;
                        }

                        img {
                            position: relative;
                            width: 20px;
                            height: 20px;
                            top: 0px;
                        }
                    }
                }
            }
        }

        .app-links {
            margin-bottom: 0;

            .items .item {
                .icon-cont {
                    width: 30px;
                    height: 30px;
                    top: 2px;

                    img {
                        width: 40px;
                        height: 40px;
                        top: -4px;
                        left: -4px;
                    }
                }

                span {
                    line-height: 34px;
                }
            }
        }

        .users {
            .item {
                .icon-cont {
                    img {
                        width: 18px;
                        height: 18px;
                        top: 2px;
                        left: 0;
                    }
                }
            }
        }

        .buttons {
            width: 100%;

            &.notification-links {
                .item {
                    height: initial;
                    min-height: 26px;
                    line-height: initial;
                    overflow: initial;
                    white-space: normal;
                    padding: 0 0 0 10px;
                    margin: 0;
                    text-decoration: none;
                    position: relative;
                    padding: 5px 0 5px 10px;
                    box-sizing: border-box;
                    margin-top: 5px;

                    &:first-child {
                        margin-top: 0;
                    }

                    &.button {
                        height: 26px;
                        padding: 5px 5px 5px 10px;

                        span {
                            line-height: 16px;
                        }
                    }

                    &.emphasize {
                        background: var(--button-background-theme);
                        box-shadow: var(--button-shadow-theme);
                        contain: paint;

                        &::before {
                            content: "";
                            display: block;
                            width: 2px;
                            height: 110%;
                            position: absolute;
                            top: -2px;
                            left: 20px;
                            background: #ffffff77;
                            box-shadow: 0 0 25px 20px #ffffff77;
                            transform: rotate(15deg);
                            -webkit-animation: progress-shine 4s infinite linear;
                            animation: progress-shine 4s infinite linear;
                        }

                        &,
                        * {
                            color: var(--button-foreground-theme);
                        }

                        i {
                            top: 1px;
                            text-shadow: -1px -1px 0px
                                var(--button-shadow-theme);
                        }

                        .remove {
                            &::before,
                            &::after {
                                background: var(--button-foreground-theme);
                            }
                        }
                    }

                    span {
                        height: initial;
                        line-height: initial;
                        overflow: initial;
                        white-space: normal;
                        padding: 0 0 0 10px;
                        margin: 0;
                        text-decoration: none;
                        min-height: initial;

                        &.message {
                            flex-direction: column;
                        }

                        &.sender {
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-weight: bold;
                        }
                        &.message {
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                            line-clamp: 3;
                            display: -webkit-box;
                            overflow: hidden;
                            font-size: 9pt;
                        }
                    }

                    .remove {
                        display: block;
                        position: absolute;
                        top: 5px;
                        right: 5px;
                        width: 10px;
                        height: 10px;
                        min-height: 10px;
                        cursor: pointer;

                        &:before,
                        &:after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 3px;
                            width: 3px;
                            height: 11px;
                            background: var(--menu-icon-color);
                            border-radius: 3px;
                        }

                        &:before {
                            transform: rotate(45deg);
                        }

                        &:after {
                            transform: rotate(-45deg);
                        }
                    }

                    .footer {
                        display: block;
                        margin-top: 5px;
                        float: left;
                    }
                }

                hr {
                    display: block;
                    float: left;
                    width: 100%;
                    color: var(--menu-foreground-disabled);
                    border: 1px solid var(--menu-foreground-disabled);
                    margin-top: 10px;
                }
            }

            .item {
                position: relative;
                width: 100%;
                height: 26px;
                margin: 0px;
                margin-bottom: 10px;
                cursor: pointer;
                color: var(--button-foreground);
                background: var(--button-background);
                box-shadow: var(--button-shadow);
                outline: none;
                border-radius: 10px;
                text-decoration: none;
                text-align: left;
                box-sizing: border-box;

                &:hover,
                &:focus {
                    background: var(--menu-background);

                    i {
                        color: var(--icon-default);
                    }

                    span {
                        color: var(--header-three);
                    }
                }

                .icon-cont {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    margin-left: 5px;
                    padding: 0;
                    background: none;
                    border-radius: 0;
                    box-sizing: border-box;

                    img {
                        width: 24px;
                        height: 24px;
                    }

                    i {
                        color: var(--icon-grey);
                        text-shadow: 1px 1px 0 var(--main-background);
                        font-size: 18px !important;
                        line-height: 16px;
                    }
                }

                a {
                    color: var(--input-foreground);
                }

                span {
                    display: block;
                    line-height: 16px;
                    top: 0;
                    width: calc(100% - 20px);
                    padding: 0 0 0 10px;
                    float: left;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    &:first-child {
                        margin-left: 5px;
                    }
                }
            }
        }
    }

    .apps-menu {
        .item {
            span {
                font-weight: 700;
            }
        }
    }
}
.button-menu {
    position: absolute;
    z-index: 9999;
    overflow: hidden;
    padding: 0;
    margin: 4px 0 0;
    overflow: hidden;
    list-style: none;
    background: var(--select-option-background);
    border: none;
    display: none;
    box-shadow: var(--menu-shadow);
    border-radius: 10px;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    outline: none;

    li {
        margin: 0;
        padding: 0;
        list-style: none;
        outline: none;
        height: 26px;
        line-height: 26px !important;
        width: 100%;
        padding-right: 25px;
        font:
            500 var(--normal-font-size) "Open Sans",
            Arial,
            Sans-Serif;
        color: var(--select-option-foreground);
        cursor: pointer;
        box-sizing: border-box;

        &[disabled] {
            pointer-events: none;
            opacity: 0.6;
        }

        &:hover {
            background: var(--select-option-background-hover);
            color: var(--select-option-foreground-hover);

            img,
            i {
                &,
                &.inline {
                    filter: invert(100%) grayscale(100%) brightness(2) !important;
                }
            }
        }

        img,
        i {
            &,
            &.inline {
                position: relative;
                top: -1px !important;
                left: 5px !important;
                width: 26px !important;
                height: 26px !important;
                line-height: 26px !important;
                text-align: center;
                filter: grayscale(100%) !important;
                font-size: var(--icon-small-size) !important;
            }
        }

        span {
            position: relative;
            left: 9px;
            vertical-align: top;

            &:first-child {
                display: inline-block;
                width: 26px !important;
                height: 26px !important;
                line-height: 26px !important;
                text-align: center;
                left: 5px;
                font-weight: 600;
            }
        }
    }
}
.clause-builder-item-container {
    clear: both;
    width: 100%;

    .clause-builder-title {
        display: inline-block;
        background: transparent;
        border: none;
        font-weight: bold;
    }

    table {
        width: 100%;
        border-collapse: collapse;

        tr {
            align-items: center;
            max-height: 30px;

            &:first-child {
                max-height: 30px;
            }

            th {
                text-align: left;
                padding: 0;

                &.group-button {
                    position: relative;
                    outline: none;
                    border-radius: 3px;
                    z-index: 2;

                    &:focus {
                        box-shadow: 0 0 0 3px var(--focus-outline) !important;
                    }
                }
            }

            th,
            td {
                &:nth-child(1) {
                    white-space: nowrap;
                }

                &:nth-child(3) {
                    text-align: center;
                }

                &.clause-builder-item-main-add {
                    position: relative;
                    cursor: pointer;
                    outline: 0;
                    z-index: 2;
                    padding: 0 5px 0 0;
                    border-radius: 3px;

                    &:focus {
                        box-shadow: 0 0 0 3px var(--focus-outline) !important;
                    }

                    span {
                        position: relative;
                        top: -4px;
                        color: var(--icon-blue);
                    }
                }

                i {
                    font-size: var(--largest-font-size);
                    text-align: center;

                    &.disabled {
                        color: var(--input-background-disabled) !important;
                    }
                }
            }
        }

        .clause-entry {
            &:first-of-type {
                tr.join-row {
                    display: none;
                }
            }

            tr {
                td {
                    padding: 0;
                    border: transparent;
                }

                &.join-row {
                    td {
                        background-color: transparent;

                        &:last-child {
                            border-top-right-radius: 5px;
                        }

                        div.group-level-1 {
                            border-radius: 0 !important;

                            &.group-start {
                                display: none;
                            }

                            &.group-end {
                                border-bottom: none;
                            }
                        }

                        & > .select-editor-container {
                            margin-left: 1px;
                        }
                    }
                }

                &.selection-row {
                    td {
                        background: var(--button-background);
                        height: 30px;

                        &:nth-last-child(2) {
                            td {
                                &:first-child {
                                    border-bottom-left-radius: 5px;
                                }

                                &:last-child {
                                    border-bottom-right-radius: 5px;
                                }
                            }
                        }

                        i {
                            position: relative;
                            cursor: pointer;
                            height: 24px;
                            line-height: var(--main-line-height);
                            font-size: var(--largest-font-size);
                            outline: none;
                            border-radius: 3px;

                            &:focus {
                                box-shadow: 0 0 0 3px var(--focus-outline) !important;
                            }
                        }

                        .select-editor input {
                            height: 27px;
                            line-height: 18px;
                            border-radius: 5px;
                            background: var(--main-background) !important;
                            top: 0.5px;
                            vertical-align: top;
                        }

                        numbereditor {
                            input {
                                height: 25px;
                                line-height: 18px;
                                border-radius: 5px;
                                background: var(--main-background) !important;
                            }
                        }

                        &.group {
                            cursor: pointer;
                            outline: none;

                            &:focus {
                                z-index: 2;
                                box-shadow: 0 0 0 3px var(--focus-outline) !important;
                            }
                        }
                    }
                }
            }

            tr td {
                &:first-child {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }

                &:last-child {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    padding-right: 2px;
                }

                div.group-level-1 {
                    height: 30px;
                    cursor: pointer;
                    background: var(--input-background-error-hover);
                    border-left: 1px solid var(--input-background-error);

                    &.group-start {
                        border-top: 1px solid var(--input-background-error);
                        border-top-left-radius: 10px;
                    }

                    &.group-end {
                        border-bottom: 1px solid var(--input-background-error);
                        border-bottom-left-radius: 10px;
                    }

                    i {
                        color: var(--input-background-error) !important;
                    }
                }
            }
        }
    }
}
.collapsible {
    display: flex;
    flex-direction: column;
    background: var(--background-color);
    border-radius: 10px;

    &.open {
        .title {
            &:after {
                transform: rotate(180deg);
            }
        }

        .content-wrapper {
            max-height: initial;
        }
    }

    .title {
        display: block;
        font-weight: 700;
        flex: 0;
        padding: 0 0 0 10px;
        min-height: 30px;
        line-height: 30px;
        border-radius: 10px;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        outline: none;

        &:hover,
        &:focus {
            background: var(--input-background);
        }

        &:focus {
            box-shadow: 0 0 0 3px var(--focus-outline) !important;
        }

        &:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 6px 5px 0;
            border-color: var(--foreground-color) transparent transparent
                transparent;
            border-radius: 3px;
            transform: rotate(0deg);
            position: absolute;
            top: 12px;
            right: 12px;
            transition: transform 0.1s ease-in-out;
        }
    }

    .content-wrapper {
        display: block;
        flex: 1;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.1s ease-in-out;

        .content {
            display: block;
            padding: 5px;
        }
    }
}
.collection-item {
    position: relative;
    padding: 10px;
    margin: 20px 0 0;
    background: var(--pane-list);
    border-radius: 5px;
    color: var(--dialog-title);
    font-size: var(--normal-font-size);
    outline: 0;

    &.inline-mode {
        padding: 0;
        margin-top: 0;

        .collection-item-add {
            padding: 0 5px 0 10px;
            margin: 0;
            height: 38px;
            line-height: 40px;
        }

        .collection-item-entries {
            padding: 0;
            margin: 0;

            &.mandatory {
                background: var(--input-background-mandatory);

                .collection-item-add {
                    &::placeholder {
                        color: var(--header-two);
                    }
                }
            }

            .collection-item-entry {
                padding: 0 30px 0 5px;
                margin: 0 0 0 5px;
                height: 30px;
                line-height: 30px;
            }
        }
    }

    &.split-mode {
        .collection-item-add-list {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 45%;
            height: 300px;
            max-height: 300px;
            border-right: 1px solid var(--main-bordercolor);

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

        .collection-item-entries {
            position: relative;
            height: 290px;
            margin-top: 20px;

            &:before {
                content: "Available Items";
                position: absolute;
                top: -20px;
                left: 5px;
                width: 45%;
                font-weight: 700;
            }

            &:after {
                content: "Selected Items";
                position: absolute;
                top: -20px;
                right: -5px;
                width: 45%;
                font-weight: 700;
            }

            .collection-item-entry {
                display: block;
                width: 100%;
                height: 30px;
                line-height: 30px;
                padding: 0 25px 0 10px;
                cursor: pointer;
                margin: 0;
                background: initial;
                box-sizing: border-box;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;

                &:hover {
                    border-radius: 0;
                    background: var(--background-color);
                }

                .collection-item-entry-remove {
                    &:before,
                    &:after {
                        display: none;
                    }
                }
            }
        }

        .collection-item-entries-selected {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 45%;
            height: 300px;
            max-height: 300px;
            overflow: auto;
            touch-action: pan-y, pan-x;
            overscroll-behavior: none;
            border-left: 1px solid var(--main-bordercolor);
        }
    }

    &.new-collection {
        background: #d5fcc7;
    }

    &:first-child {
        margin-top: 0;
    }

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline) !important;
    }

    .collection-item-remove {
        position: absolute;
        top: 6px;
        right: 5px;
        display: block;
        background: transparent;
        width: 17px;
        height: 17px;
        border-radius: 8.5px;
        opacity: 1;
        cursor: pointer;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 3px;
            left: 7px;
            width: 3px;
            height: 11px;
            background: var(--input-foreground-framed);
            border-radius: 3px;
        }

        &:before {
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }

    .collection-item-name {
        display: inline-block;
        background: transparent !important;
        border: 0 !important;
        font-weight: bold;
        width: calc(100% - 20px);

        &:focus {
            outline: none;
            box-shadow: none;
        }
    }

    .collection-item-add {
        display: inline-block;
        width: 180px;
        padding: 5px;
        margin: 0 10px 10px 0;
        background: transparent;
        border: none;
        color: var(--normal-font-size);
        font-size: var(--normal-font-size);
        position: relative;
        box-sizing: border-box;

        &:hover,
        &:focus {
            background: transparent;
            box-shadow: none !important;
            outline: none !important;
        }
    }

    .collection-item-add-list {
        display: block;
        width: 100%;
        padding: 0;
        background: transparent;
        border: none;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        color: var(--input-foreground);
        font-size: var(--normal-font-size);
        box-sizing: border-box;
        overflow: auto;
        touch-action: pan-y, pan-x;
        overscroll-behavior: none;
        z-index: 1;
        max-height: 0;
        transition: max-height 0.5s;

        &.open {
            min-height: 30px;
            max-height: 200px;
        }

        span {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            cursor: pointer;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;

            &.selected,
            &:hover {
                background: var(--background-color);
            }

            &.noResults {
                background: unset;
                color: var(--input-foreground-framed);
                cursor: default;
            }
        }
    }

    .collection-item-entries {
        display: block;
        padding: 10px 10px 0 10px;
        margin: 5px 0 0 0;
        background: var(--input-background-framed);
        border: 1px solid var(--main-bordercolor);
        border-radius: 5px;
        min-height: 38px;

        .collection-item-entry {
            position: relative;
            display: inline-block;
            padding: 5px 30px 5px 5px;
            margin: 0 10px 10px 0;
            background: var(--background-color);
            border-radius: 5px;
            cursor: default;
            -webkit-user-select: none;
            user-select: none;
            outline: none;

            &.no-remove-item {
                padding-right: 5px;
            }

            &:last-child {
                margin-right: 0;
            }

            &:focus {
                box-shadow: 0 0 0 3px var(--focus-outline) !important;
            }

            &:hover {
                padding-right: 30px;

                &.no-remove-item {
                    padding-right: 5px;
                }
            }

            .collection-item-entry-remove {
                position: absolute;
                top: 6px;
                right: 5px;
                display: block;
                background: transparent;
                width: 17px;
                height: 17px;
                border-radius: 8.5px;
                opacity: 1;
                cursor: pointer;

                &:before,
                &:after {
                    content: "";
                    position: absolute;
                    top: 3px;
                    left: 7px;
                    width: 3px;
                    height: 11px;
                    background: var(--input-foreground-framed);
                    border-radius: 3px;
                }

                &:before {
                    transform: rotate(45deg);
                }

                &:after {
                    transform: rotate(-45deg);
                }
            }
        }
    }
}
.colour-selector {
    &.mandatory-field {
        .md-color-picker-input-container {
            .md-color-picker-preview {
                border-color: var(--input-background-mandatory) !important;

                &:focus,
                &:hover {
                    border-color: var(
                        --input-background-mandatory-hover
                    ) !important;
                }
            }
        }
    }

    .md-color-picker-clear {
        display: none;
    }

    & > div {
        .md-color-picker-input-container {
            height: var(--main-height);

            .md-color-picker-preview {
                width: 20px !important;
                height: 20px !important;
                top: 0 !important;
                border: 2px solid var(--input-background-framed) !important;
                box-shadow: 0 1px 2px var(--main-shadow) !important;
                margin: 5px;
                cursor: pointer;
            }

            md-input-container {
                margin: 0 !important;
                padding: 0 !important;

                .md-input {
                    border-radius: 5px;
                    border: 1px solid var(--main-bordercolor);
                    width: 100%;
                    height: var(--main-height);
                    margin: 0 !important;
                    padding: 2px 5px 2px 5px !important;
                    line-height: var(--main-line-height);
                    background-color: var(--main-background);
                    color: var(--input-foreground);
                }
            }
        }
    }

    tts-input-container {
        width: 100%;
        margin: 0 !important;
        display: none;

        input {
            font-size: var(--normal-font-size);
            width: 80px;
            height: 26px;
            line-height: 26px;
            padding: 0 10px;
            border-radius: 5px;
            border: 1px solid var(--main-bordercolor);
            outline: 0;
            resize: none;
            box-sizing: border-box;
        }
    }
}
* {
    box-sizing: border-box;
    &:focus {
        outline: none;
    }
}

html {
    height: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--foreground-color);
    background: var(--background-color);
}

body {
    margin: 0;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--overlay-back-color);
    flex-direction: row;
    touch-action: pan-y;
    display: flex;
    color: var(--foreground-color);

    &.unselectable *,
    &.unselectable *:not(input):not(textarea),
    .unselectable,
    .unselectable * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    &.isselectable *,
    .isselectable,
    .isselectable * {
        -webkit-user-select: all;
        user-select: all;
    }

    &.text-selectable *,
    .text-selectable,
    .text-selectable * {
        -webkit-user-select: text;
        user-select: text;
        cursor: text;
    }

    &.dragging * {
        cursor: ew-resize;
    }

    * {
        font-weight: 500;
        font-size: var(--normal-font-size);
        font-family: "Open Sans", Arial, Sans-Serif;
    }
}

th {
    font-weight: 500;
}

form {
    height: 100%;
}

h1,
h2,
h3,
h4 {
    font-weight: 700 !important;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;

    &.inline {
        line-height: var(--main-line-height);
    }
}

h1 {
    font-size: var(--heading-font-size) !important;
    color: var(--header-one);
}

h2 {
    font-size: var(--largest-font-size) !important;
    color: var(--header-two);
}

h3 {
    font-size: var(--larger-font-size) !important;
    color: var(--header-three);
}

h4 {
    font-size: var(--large-font-size) !important;
    color: var(--header-four);
}

a {
    color: var(--anchor-foreground);
    text-decoration: none;
    -webkit-user-drag: none;

    &:visited {
        color: var(--anchor-foreground);
    }

    &:active {
        background-color: transparent;
    }

    &:hover,
    &:focus {
        text-decoration: underline;
    }

    &.inline {
        line-height: var(--main-line-height);
        vertical-align: top;
    }

    &[target="_blank"]:after {
        background-image: url(/graphics/_blank.svg);
        background-repeat: no-repeat;
        content: "";
        display: inline-block;
        height: 0.8125rem;
        margin: 0 0.1875rem 0 0.25rem;
        position: relative;
        top: 0.125rem;
        width: 0.8125rem;
        filter: var(--anchor-suffix);
    }
}

i {
    font: var(--icon-font) !important;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    font-variation-settings: normal !important;
    color: var(--icon-default);
    border-radius: 5px;

    &.default {
        color: var(--icon-default);
    }

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

    &.grey {
        color: var(--icon-grey) !important;
    }

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

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

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

    &.section {
        font-size: var(--icon-larger-size);
    }

    &.upsidedown {
        transform: rotate(-180deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    }

    &.fill {
        font-variation-settings:
            "FILL" 1,
            "wght" 400,
            "GRAD" 0,
            "opsz" 24 !important;
    }

    &.inline {
        line-height: var(--main-line-height) !important;
    }

    &.loadeySpinner {
        animation: spin 1.3s infinite linear;
        cursor: default;
        background: none;
        width: 18px;
        height: 18px;
        top: 5px;
        left: calc(50% - 12px);
        position: absolute;
        border-radius: 13px;
        border: 2px solid var(--input-foreground);

        &::after {
            width: 6px;
            height: 10px;
            position: absolute;
            background-color: var(--main-background);
            bottom: -2px;
            left: calc(50% - 3px);
            content: "";
        }
    }

    &:focus {
        text-shadow:
            2px 0 2px var(--focus-outline),
            0 -2px 2px var(--focus-outline),
            0 2px 2px var(--focus-outline),
            -2px 0 2px var(--focus-outline);
    }
}

b,
.bold {
    font-weight: 700;
}

.mock-link {
    text-decoration: underline;
    cursor: pointer;
    outline: none;

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline) !important;
    }
}

.mock-select {
    height: 26px;
    line-height: 26px;
    background: var(--input-background);
    border: 0;
    border-radius: 5px;
    padding: 0 0 0 10px;
    outline: 0;
    box-sizing: border-box;
    vertical-align: baseline;
    -webkit-user-select: none;
    user-select: none;
}

.no-select {
    * {
        -webkit-user-select: none;
        user-select: none;
    }
}

.single-line {
    white-space: nowrap;

    & > label {
        line-height: 35px;
    }
}

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

.overflow-visible {
    overflow: visible !important;
}

.placeholder {
    color: var(--main-shadow);
    font-style: italic;
}

.bold {
    &,
    * {
        font-weight: 700;
    }
}

.info {
    font-style: italic;
    color: var(--header-one);
}

.whole {
    white-space: nowrap;
}

.token {
    display: block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: var(--icon-token);
    color: var(--icon-foreground);
    margin: 0 auto;
}

a,
input,
button,
select,
textarea,
.dialer-button,
[type="submit"],
input[type="button"],
input[type="clear"],
input:not([type]),
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime"],
input[type="file"] {
    position: relative;

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline) !important;
        z-index: 4;
        outline: none;
    }
}

input,
textarea {
    font-size: var(--normal-font-size) !important;
    line-height: 16px;
}

textarea,
select,
input:not([type]),
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="number"],
input[type="time"] {
    border-radius: 5px;
    border: 1px solid var(--main-bordercolor);
    padding: 2px 5px 2px 5px;
    width: 100%;
    height: var(--main-height);
    line-height: var(--main-line-height);
    background-color: var(--input-background);
    color: var(--input-foreground);
    outline: none;
    resize: none;
    box-sizing: border-box;

    &:hover,
    &:focus {
        background-color: var(--input-background-hover);
    }

    &.mandatory-field {
        background-color: var(--input-background-mandatory);
        border: 1px solid var(--input-background-mandatory);
        color: var(--input-foreground-mandatory);

        &:hover,
        &:focus {
            background-color: var(
                --input-background-mandatory-hover
            ) !important;
        }
    }

    &.input-error {
        background-color: var(--input-background-error) !important;

        &:hover,
        &:focus {
            background-color: var(--input-background-error-hover) !important;
        }
    }

    &:disabled {
        background-color: var(--input-background-disabled) !important;
        color: var(--input-foreground-disabled) !important;
    }

    &::-webkit-input-placeholder {
        color: var(--input-placeholder);
        font-style: italic;
    }

    &:-webkit-autofill,
    &:-webkit-autofill:focus {
        transition:
            background-color 600000s 0s,
            color 600000s 0s;
    }

    &::-moz-placeholder {
        color: var(--input-placeholder);
        font-style: italic;
    }

    &::placeholder {
        color: var(--input-placeholder);
        font-style: italic;
    }
}

textarea {
    height: initial;
    padding: 0 10px;
}

input[type="checkbox"],
input[type="radio"] {
    position: relative;
    width: var(--icon-smallest-size);
    height: var(--icon-smallest-size);
    margin: 0.1em 0.3em 0.1em 0.4em;
}

input[type="number"] {
    padding-right: 15px !important;

    &:focus {
        padding-right: 0 !important;
    }

    &:not(:focus) {
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }
}

button,
.button,
input[type="button"],
input[type="submit"],
input[type="clear"] {
    border: none;
    background: var(--button-background);
    color: var(--button-foreground);
    border-radius: 5px;
    font-size: var(--normal-font-size);
    outline: none;
    height: var(--main-height);
    padding: 3px 20px;
    margin: 0;
    box-shadow: var(--button-shadow);
    appearance: none;
    cursor: pointer;
    white-space: nowrap;

    &.large {
        border-radius: 5px;
        font-weight: 700;
        font-size: var(--large-font-size);
        height: 40px;
        padding: 5px 20px;
    }

    &.inline {
        display: inline-block;
        padding: 2px 4px;
        height: var(--main-height);
        box-sizing: border-box;
    }

    &.spin {
        -webkit-animation: spin 1.3s infinite linear;
        animation: spin 1.3s infinite linear;
    }

    &.pulse {
        -webkit-animation: button-pulse 2.5s infinite linear;
        animation: button-pulse 2.5s infinite linear;
    }

    &.theme-button {
        background: var(--button-background-theme) !important;
        box-shadow: var(--button-shadow-theme);

        &,
        *,
        i {
            color: var(--button-foreground-theme) !important;
        }

        &:hover,
        &:focus {
            background: var(--button-background-theme-hover) !important;
        }

        &:disabled {
            background: var(--button-background-theme-disabled) !important;
            color: var(--button-foreground-theme-disabled) !important;

            &,
            *,
            i {
                color: var(--button-foreground-theme-disabled) !important;
            }

            &:hover,
            &:focus {
                background: var(--button-background-theme-disabled) !important;
                color: var(--button-foreground-theme-disabled) !important;

                &,
                *,
                i {
                    color: var(--button-foreground-theme-disabled) !important;
                }
            }
        }
    }

    &.ok-button {
        background: var(--button-background-green) !important;
        box-shadow: var(--button-shadow-green);

        &,
        *,
        i {
            color: var(--button-foreground-green) !important;
        }

        &:hover,
        &:focus {
            background: var(--button-background-green-hover) !important;
        }

        &:disabled {
            background: var(--button-background-green-disabled) !important;
            color: var(--button-foreground-green-disabled) !important;

            &,
            *,
            i {
                color: var(--button-foreground-green-disabled) !important;
            }

            &:hover,
            &:focus {
                background: var(--button-background-green-disabled) !important;
                color: var(--button-foreground-green-disabled) !important;

                &,
                *,
                i {
                    color: var(--button-foreground-green-disabled) !important;
                }
            }
        }
    }

    &.bad-button {
        background: var(--button-background-red) !important;

        &,
        *,
        i {
            color: var(--button-foreground-red) !important;
        }

        &:hover,
        &:focus {
            background: var(--button-background-red-hover) !important;
        }

        &:disabled {
            background: var(--button-background-red-disabled) !important;
            color: var(--button-foreground-red-disabled) !important;

            &,
            *,
            i {
                color: var(--button-foreground-red-disabled) !important;
            }

            &:hover,
            &:focus {
                background: var(--button-background-red-disabled) !important;
                color: var(--button-foreground-red-disabled) !important;

                &,
                *,
                i {
                    color: var(--button-foreground-red-disabled) !important;
                }
            }
        }
    }

    &.icon-only {
        width: 40px;
        max-width: 40px;
    }

    &:focus,
    &:hover {
        background: var(--button-background-hover);
        white-space: nowrap;
    }

    &:disabled {
        background: var(--button-background-disabled) !important;
        color: var(--button-foreground-disabled) !important;
        box-shadow: none !important;

        &:hover,
        &:focus {
            color: var(--button-foreground-disabled) !important;

            i {
                color: var(--button-foreground-disabled) !important;
            }

            img {
                filter: var(--button-image-disabled) !important;
            }
        }

        i {
            color: var(--button-foreground-disabled) !important;
        }

        img {
            filter: var(--button-image-disabled) !important;
        }
    }

    img {
        position: relative;
        top: 2px;
        width: 16px;
        height: 16px;
        vertical-align: top;
        -webkit-user-select: none !important;
        user-select: none !important;

        ~ span {
            margin-left: 5px;
        }
    }

    i {
        vertical-align: top;
        font-size: var(--icon-smaller-size) !important;
        line-height: 22px !important;
        position: relative;
        -webkit-user-select: none;
        user-select: none;

        ~ span {
            margin-left: 2px;
        }
    }

    span {
        vertical-align: top;
        line-height: 22px;
        display: inline-block;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
    }
}

label {
    & > input,
    & > select {
        width: initial;
    }

    &.disabled {
        color: var(--input-foreground-framed-disabled);
    }

    &.radio,
    &.checkbox {
        position: relative;
        height: 20px;
        margin: 4px 0 0;
        display: flex;
        box-sizing: border-box;
        white-space: nowrap;
        -webkit-user-select: none !important;
        user-select: none !important;

        input[type="radio"],
        input[type="checkbox"] {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            opacity: 0;
            width: 20px !important;
            height: 20px !important;
            margin: 0;
            display: inline-block;

            &:focus ~ .checkmark::after {
                color: var(--input-foreground-framed-hover);
                text-shadow: none;
                box-shadow: inset 0 0 0 3px var(--focus-outline) !important;
            }

            &:disabled {
                ~ .checkmark::after {
                    color: var(--input-foreground-framed-disabled);
                }

                ~ .text {
                    color: var(--input-foreground-framed-disabled);
                }
            }
        }

        .checkmark {
            display: inline-block;
            position: relative !important;
            min-width: 19.2px;
            height: 19.2px;
            box-sizing: border-box;
            vertical-align: top;
            flex: 0 1;

            &::before {
                position: absolute;
                top: 3px;
                left: 3px;
                width: 13px;
                height: 13px;
                content: "";
                background: var(--input-background-framed);
            }

            &::after {
                position: absolute;
                top: 0;
                left: 0;
                font-family: "Material Icons";
                font-size: var(--icon-smaller-size);
                color: var(--input-foreground-framed);
                line-height: 1;
                text-transform: none;
                letter-spacing: normal;
                word-wrap: normal;
                white-space: nowrap;
            }

            &:hover {
                &::after {
                    color: var(--input-foreground-framed-hover);
                }
            }
        }

        .text {
            vertical-align: top;
            position: relative;
            display: inline-block;
            margin: 1px 0 0 7px;
            line-height: 16px;
            flex: 1 1 !important;
            text-overflow: ellipsis;
            overflow: hidden;

            i {
                vertical-align: top;
                font-size: var(--icon-small-size) !important;
                padding: 0 5px;
                position: relative;
                top: -2px;
            }
        }

        &.button {
            .text {
                line-height: 26px;
            }
        }
    }

    &.radio {
        .checkmark {
            &::before {
                border-radius: 50%;
            }

            &::after {
                content: "radio_button_unchecked";
            }
        }

        input[type="radio"] {
            &:focus ~ .checkmark::after {
                border-radius: 50%;
            }

            &:checked ~ .checkmark::after {
                content: "radio_button_checked";
            }
        }
    }

    &.checkbox {
        .checkmark {
            &::before {
                border-radius: 1px;
            }

            &::after {
                content: "check_box_outline_blank";
            }
        }

        input[type="checkbox"] {
            &:focus ~ .checkmark::after {
                border-radius: 3px;
            }

            &:checked ~ .checkmark::after {
                content: "check_box";
            }
        }
    }

    &.inline {
        line-height: var(--main-line-height) !important;
        vertical-align: top;
    }

    &.title {
        height: 26px;
        line-height: 26px;
        padding: 0 10px 0 0;
        font-weight: 700;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: top;

        &.tall {
            height: 40px;
            line-height: 40px;
        }
    }

    &.split-button-label {
        &:focus {
            box-shadow: inset 0 0 0 3px var(--focus-outline) !important;
            outline: none;
        }
    }
}

.label {
    font-weight: 700;
    color: var(--input-foreground-framed);
    padding-right: 20px;

    &.disabled {
        color: var(--input-foreground-framed-disabled);
    }
}

span {
    &.inline {
        line-height: var(--main-line-height);
        vertical-align: top;
    }

    &.title {
        height: 26px;
        line-height: 26px;
        padding: 0 10px;
        font-weight: 700;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: top;

        &.tall {
            height: 40px;
            line-height: 40px;
        }
    }

    &.mock-check {
        position: relative;
        display: inline-block;
        pointer-events: none;
        width: 19.2px;
        height: 20px;
        vertical-align: top;

        &::before {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 12px;
            height: 12px;
            content: "";
            background: var(--input-background-framed);
            border-radius: 3px;
        }

        &::after {
            position: absolute;
            top: 0;
            left: 0;
            content: "check_box_outline_blank";
            font-family: "Material Icons";
            font-size: var(--icon-smaller-size);
            color: var(--input-foreground-framed);
            line-height: 1;
            text-transform: none;
            letter-spacing: normal;
            word-wrap: normal;
            white-space: nowrap;
        }

        &.checked {
            &::after {
                content: "check_box";
            }

            &.highlight {
                &::after {
                    color: var(--foreground-color);
                }
            }
        }
    }
}

select {
    background-color: var(--select-background);
    background-image: var(--select-icon);
    color: var(--select-foreground);
    border: 1px solid var(--main-bordercolor);
    width: 100%;
    line-height: 20px;
    appearance: none;
    background-repeat: no-repeat !important;
    background-position: center right !important;
    -webkit-user-select: none;
    user-select: none;

    &:disabled {
        background-color: var(--select-background-disabled);
        background-image: none;
        color: var(--select-foreground-disabled);
    }

    option {
        min-height: unset;
        background: var(--select-option-background);
        color: var(--select-option-foreground);
        height: var(--icon-smallest-size);
        line-height: var(--icon-smallest-size);

        &:hover,
        &:focus {
            background: var(--select-option-background-hover);
            color: var(--select-option-foreground-hover);
        }
    }
}

.disabledItem {
    pointer-events: none;
    opacity: 0.6;
}

.input-group-btn {
    display: block;
    padding: 15px 15px 5px 15px;

    .btn-file {
        background: #fff;
        border-radius: 3px;
        color: #0078bf;
        font-weight: 700;
        outline: none;
        height: 26px;
        padding: 0px;
        display: inline-block;
        position: relative;

        input {
            height: 26px;
            width: 100px;
            outline: none;
            visibility: hidden;
        }
    }

    label {
        background: #fff;
        height: 26px;
        line-height: 26px;
        width: 100px;
        display: block;
        position: absolute;
        top: -1px;
        left: -1px;
        text-align: center;
        border-radius: 3px;
        border: 1px solid #d0d0d0;
        cursor: pointer;

        &:hover {
            box-shadow: none;
            border-color: #999;
        }
    }
}

ul {
    &.no-style,
    &.no-list-style {
        list-style: none;
        margin: 0;
        padding: 0;

        &.indented {
            padding-left: 20px;

            & > li {
                padding-top: 5px;
            }
        }

        & > li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    }

    &.chevron {
        list-style-type: "❯";

        li {
            padding-left: 8px;
        }
    }

    &.indent-left {
        margin-left: 20px;
    }

    &.horizontal {
        & > li {
            display: inline-block;
            margin: 0 10px 0 0;
        }
    }

    &.icon-check-list {
        & > li {
            i {
                font-size: var(--larger-font-size) !important;
                position: relative;
                top: 3px;
            }
        }
    }

    li {
        i {
            font-size: var(--largest-font-size);
            width: 20px;
            line-height: 24px;

            &.upsidedown {
                top: 5px;
                left: 5px;
            }

            &.inline {
                position: relative;
                left: -2px;
                top: -2px;
                width: 15px;
                line-height: 15px !important;
                font-size: var(--icon-smaller-size) !important;
                vertical-align: middle !important;
            }
        }
    }
}

.disabled {
    color: #909090;
}

.drag-item .handle {
    font-family: "Material Icons" !important;
    font-weight: normal;
    font-style: normal;
    font-size: var(--larger-font-size);
    word-spacing: -28px;
    display: block;
    cursor: move;
}

@media screen {
    .blur .page-frame,
    .blur .sidebar,
    .blur:not(body) {
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        filter: blur(1px);
    }
}

.session-blur .page-frame,
.session-blur .sidebar,
.session-blur:not(body) {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    filter: blur(4px);
}

.v-grip,
.h-grip {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    transition: background 0.4s;

    &:hover {
        background: var(--scrollbar-color);
    }

    &.held {
        background: var(--scrollbar-color);
    }
}

.v-grip {
    width: 100%;
    height: 5px;
    cursor: ns-resize;
}

.h-grip {
    height: 100%;
    width: 5px;
    cursor: ew-resize;
}

.ui-widget {
    font-size: var(--icon-smallest-size);
    border: 1px solid #8ba0bc;
    box-shadow: 0px 0px 5px #a0a0a0;
}

.ui-slider {
    background: #cdd9e9;
    background: -moz-linear-gradient(top, #dee8f5 0%, #cdd9e9 100%);
    /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #dee8f5),
        color-stop(100%, #cdd9e9)
    );
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dee8f5 0%, #cdd9e9 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dee8f5 0%, #cdd9e9 100%);
    /* Opera 11.10+ */
    background: linear-gradient(to bottom, #dee8f5 0%, #cdd9e9 100%);
    /* W3C */
    box-shadow: inset 0px 0px 5px #909090;
}

.ui-slider-handle.ui-state-default {
    background: #8ba0bc;
    background: -moz-linear-gradient(top, #cdd9e9 0%, #8ba0bc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #cdd9e9),
        color-stop(100%, #8ba0bc)
    );
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cdd9e9 0%, #8ba0bc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cdd9e9 0%, #8ba0bc 100%);
    /* Opera 11.10+ */
    background: linear-gradient(to bottom, #cdd9e9 0%, #8ba0bc 100%);
    /* W3C */
    border: 1px solid #8ba0bc;
    box-shadow: 0px 0px 5px #909090;
}

.page-task,
.operation {
    display: initial;
}

.no-details {
    padding: 10px;
    font-size: var(--normal-font-size);
    color: var(--foreground-color);
    display: block;
    -webkit-user-select: none;
    user-select: none;
}

.topSection .table tr th:nth-child(10) {
    min-width: 200px;
}

.error,
.error-message {
    color: var(--foreground-color-error) !important;
}

.error-id {
    position: absolute;
    bottom: -35px;
    left: 0;
    display: inline-block;
    padding-bottom: 5px;
    text-align: left;
    font-size: var(--smallest-font-size);
    font-weight: 700;
    -webkit-user-select: text;
    user-select: text;
}

.check-list {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;

    .table tr th {
        border-top: none;
    }

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

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: initial;
}

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

.left {
    float: left !important;
    margin-left: 0;
    margin-right: auto;
    width: fit-content;
}

.right {
    float: right !important;
    margin-left: auto;
    margin-right: 0;
    width: fit-content;
}

.clearfix {
    clear: both;
}

.block-left {
    text-align: left;
    margin-left: 0 !important;
}

.block-right {
    text-align: right;
    margin-right: 0 !important;
}

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

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

.break-all {
    word-break: break-all;
}

.buffer,
.buffer-small,
.buffer-xsmall,
.buffer-large,
.buffer-xlarge,
.horizontal-buffer-small,
.horizontal-buffer-xsmall,
.horizontal-buffer,
.horizontal-buffer-large,
.horizontal-buffer-xlarge,
.vertical-buffer-small,
.vertical-buffer-xsmall,
.vertical-buffer,
.vertical-buffer-large,
.vertical-buffer-xlarge,
.left-buffer-small,
.left-buffer-xsmall,
.left-buffer,
.left-buffer-large,
.left-buffer-xlarge,
.right-buffer-small,
.right-buffer-xsmall,
.right-buffer,
.right-buffer-large,
.right-buffer-xlarge,
.top-buffer-small,
.top-buffer-xsmall,
.top-buffer,
.top-buffer-large,
.top-buffer-xlarge,
.bottom-buffer-small,
.bottom-buffer-xsmall,
.bottom-buffer,
.bottom-buffer-large,
.bottom-buffer-xlarge {
    box-sizing: border-box;
    clear: both;
}

.buffer-xsmall,
.left-buffer-xsmall,
.horizontal-buffer-xsmall {
    padding-left: 2px !important;
}

.buffer-small,
.left-buffer-small,
.horizontal-buffer-small {
    padding-left: 5px !important;
}

.buffer,
.left-buffer,
.horizontal-buffer {
    padding-left: 10px !important;
}

.buffer-large,
.left-buffer-large,
.horizontal-buffer-large {
    padding-left: 20px !important;
}

.buffer-xlarge,
.left-buffer-xlarge,
.horizontal-buffer-xlarge {
    padding-left: 30px !important;
}

.buffer-xsmall,
.right-buffer-xsmall,
.horizontal-buffer-xsmall {
    padding-right: 2px !important;
}

.buffer-small,
.right-buffer-small,
.horizontal-buffer-small {
    padding-right: 5px !important;
}

.buffer,
.right-buffer,
.horizontal-buffer {
    padding-right: 10px !important;
}

.buffer-large,
.right-buffer-large,
.horizontal-buffer-large {
    padding-right: 20px !important;
}

.buffer-xlarge,
.right-buffer-xlarge,
.horizontal-buffer-xlarge {
    padding-right: 30px !important;
}

.buffer-xsmall,
.top-buffer-xsmall,
.vertical-buffer-xsmall {
    padding-top: 2px !important;
}

.buffer-small,
.top-buffer-small,
.vertical-buffer-small {
    padding-top: 5px !important;
}

.buffer,
.top-buffer,
.vertical-buffer {
    padding-top: 10px !important;
}

.buffer-large,
.top-buffer-large,
.vertical-buffer-large {
    padding-top: 20px !important;
}

.buffer-xlarge,
.top-buffer-xlarge,
.vertical-buffer-xlarge {
    padding-top: 30px !important;
}

.buffer-xsmall,
.bottom-buffer-xsmall,
.vertical-buffer-xsmall {
    padding-bottom: 2px !important;
}

.buffer-small,
.bottom-buffer-small,
.vertical-buffer-small {
    padding-bottom: 5px !important;
}

.buffer,
.bottom-buffer,
.vertical-buffer {
    padding-bottom: 10px !important;
}

.buffer-large,
.bottom-buffer-large,
.vertical-buffer-large {
    padding-bottom: 20px !important;
}

.buffer-xlarge,
.bottom-buffer-xlarge,
.vertical-buffer-xlarge {
    padding-bottom: 30px !important;
}

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

.clearance-small,
.left-clearance-small,
.horizontal-clearance-small {
    margin-left: 5px !important;
}

.clearance,
.left-clearance,
.horizontal-clearance {
    margin-left: 10px !important;
}

.clearance-large,
.left-clearance-large,
.horizontal-clearance-large {
    margin-left: 20px !important;
}

.clearance-xlarge,
.left-clearance-xlarge,
.horizontal-clearance-xlarge {
    margin-left: 30px !important;
}

.clearance-small,
.right-clearance-small,
.horizontal-clearance-small {
    margin-right: 5px !important;
}

.clearance,
.right-clearance,
.horizontal-clearance {
    margin-right: 10px !important;
}

.clearance-large,
.right-clearance-large,
.horizontal-clearance-large {
    margin-right: 20px !important;
}

.clearance-xlarge,
.right-clearance-xlarge,
.horizontal-clearance-xlarge {
    margin-right: 30px !important;
}

.clearance-small,
.top-clearance-small,
.vertical-clearance-small {
    margin-top: 5px !important;
}

.clearance,
.top-clearance,
.vertical-clearance {
    margin-top: 10px !important;
}

.clearance-large,
.top-clearance-large,
.vertical-clearance-large {
    margin-top: 20px !important;
}

.clearance-xlarge,
.top-clearance-xlarge,
.vertical-clearance-xlarge {
    margin-top: 30px !important;
}

.clearance-small,
.bottom-clearance-small,
.vertical-clearance-small {
    margin-bottom: 5px !important;
}

.clearance,
.bottom-clearance,
.vertical-clearance {
    margin-bottom: 10px !important;
}

.clearance-large,
.bottom-clearance-large,
.vertical-clearance-large {
    margin-bottom: 20px !important;
}

.clearance-xlarge,
.bottom-clearance-xlarge,
.vertical-clearance-xlarge {
    margin-bottom: 30px !important;
}

.top-rule {
    border-top: 1px solid var(--horizontal-rule);
}

.top-rule-dark {
    border-top: 1px solid var(--horizontal-rule-dark);
}

.bottom-rule {
    border-bottom: 1px solid var(--horizontal-rule);
}

.bottom-rule-dark {
    border-bottom: 1px solid var(--horizontal-rule-dark);
}

.left-rule {
    border-left: 1px solid var(--horizontal-rule);
}

.left-rule-dark {
    border-left: 1px solid var(--horizontal-rule-dark);
}

.right-rule {
    border-right: 1px solid var(--horizontal-rule);
}

.right-rule-dark {
    border-right: 1px solid var(--horizontal-rule-dark);
}

.contain {
    overflow: auto;
    overflow-anchor: none;
    touch-action: pan-y, pan-x;
    overscroll-behavior: none;
}

.half,
.half-responsive {
    width: 50% !important;
    min-width: 49% !important;
    box-sizing: border-box;
}

.onethird,
.third-responsive {
    width: 33.33% !important;
    min-width: 33% !important;
    box-sizing: border-box;
}

.twothirds,
.twothirds-responsive {
    width: 66.66% !important;
    min-width: 66% !important;
    box-sizing: border-box;
}

.onequarter {
    width: 25% !important;
    min-width: 25% !important;
    box-sizing: border-box;
}

.onefifth {
    width: 20% !important;
    min-width: 20% !important;
    box-sizing: border-box;
}

.onesixth {
    width: 16.66% !important;
    min-width: 16.66% !important;
    box-sizing: border-box;
}

.threequarters {
    width: 75% !important;
    min-width: 75% !important;
    box-sizing: border-box;
}

.scaling-pane {
    width: 66.66%;
    min-width: 400px;
    max-width: 1000px;
}

.scaling-pane-mid {
    width: 75%;
    min-width: 300px;
    max-width: 1400px;
}

.scaling-pane-midmax {
    width: 80%;
    min-width: 300px;
    max-width: 1600px;
}

.scaling-pane-max {
    width: 90%;
    width: calc(100% - 40px);
    min-width: 300px;
    max-width: 1600px;
}

.full {
    min-width: 100% !important;
    box-sizing: border-box;
}

.fit {
    width: fit-content;
}

.full-height {
    height: 100% !important;
    box-sizing: border-box;
}

.fit-height {
    height: fit-content;
}

.scroll {
    overflow: auto;
    touch-action: pan-y, pan-x;
    overscroll-behavior: none;
}

.col-pane,
.col-pane-responsive {
    flex: 0;
}

.center-pane {
    flex: auto;
}

.stacked {
    clear: initial;
}

.bordered {
    border-left: 1px solid var(--main-bordercolor);
    border-bottom: 1px solid var(--main-bordercolor);
    border-right: 1px solid var(--main-bordercolor);
}

.no-radius {
    border-radius: 0 !important;
}

.auto {
    overflow: auto;
    overflow-anchor: none;
    touch-action: pan-y, pan-x;
    overscroll-behavior: none;
}

.col,
.col-responsive {
    flex: 1 !important;

    &.visual-divide {
        border-radius: 0;
        border-left: 1px solid var(--main-bordercolor) !important;

        &:first-of-type {
            border-left: none;
        }

        &.end-cap {
            border-top-right-radius: 5px;
        }

        &.end-heel {
            border-bottom-right-radius: 5px;
        }
    }
}

.d-iblock {
    display: inline-block;
}

.flex-column {
    display: flex !important;
    flex-direction: column;
}

.flex-column-reverse {
    display: flex !important;
    flex-direction: column-reverse;
}

.row,
.flex,
.flex-row,
.row-responsive {
    display: flex !important;
    flex-direction: row;

    &.visual-divide {
        border-top: 1px solid var(--main-bordercolor) !important;

        &:first-of-type {
            border-top: none;
        }
    }
}

.row-reverse,
.flex-row-reverse {
    display: flex !important;
    flex-direction: row-reverse;
}

.flex-wrapped {
    flex-wrap: wrap;
}

.flex-wrapped-reverse {
    flex-wrap: wrap-reverse;
}

.row,
.row-responsive,
.row-reverse,
.flex-column,
.flex-column-reverse,
.flex-row,
.flex-row-reverse,
.flex-wrapped-reverse {
    max-width: 100%;

    &.spaced {
        gap: 5px;
    }

    spacer {
        flex: 1;
    }

    &.distribute {
        * {
            flex: 1 0 1px;
        }
    }

    &.distribute-half {
        & > * {
            flex: 1 0 49%;
        }
    }

    &.responsive-half {
        & > * {
            flex: 0 0 49%;
        }
    }
}

.col-break-responsive {
    flex-basis: 0;
    height: 0;
}

.vertical-auto {
    overflow-y: auto;
    overflow-anchor: none;
}

.dialer-button {
    &.no-height {
        height: auto;
    }

    &.pane-button {
        border-radius: 10px;

        &.has-split {
            display: flex;
            padding: 0;
            background: transparent !important;
            overflow: hidden;

            &:hover,
            &:focus {
                background: transparent !important;
            }

            & > * {
                flex: 0;
                flex-basis: 0;
                background: var(--input-background-framed);
                padding: 10px;
                margin-left: 2px;
                cursor: pointer;

                &:first-child {
                    flex: 1;
                    flex-basis: 1;
                    margin-left: 0;
                }
            }

            &.ok-button {
                background: transparent !important;

                &:hover,
                &:focus {
                    background: transparent !important;
                }

                & > * {
                    background: var(--button-background-theme) !important;
                    color: var(--button-foreground-theme);
                }
            }

            * {
                height: 42px;
                line-height: 42px;
                padding: 0 10px;
            }
        }
    }

    &:disabled {
        img {
            -webkit-filter: grayscale(100%) brightness(2) !important;
            -moz-filter: grayscale(100%) brightness(2) !important;
            filter: grayscale(100%) brightness(2) !important;
        }
    }

    img {
        -webkit-filter: grayscale(100%) !important;
        -moz-filter: grayscale(100%) !important;
        filter: grayscale(100%) !important;
    }
}

.half-height {
    height: 50%;
}

.full-height {
    height: 100%;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
}

.no-spacing {
    margin: 0px !important;
    padding: 0px !important;
}

.group {
    display: flex;
    flex-direction: row;
    background: var(--background-color-light);
    border: 1px solid var(--background-color-light);
    border-radius: 8px;
    padding: 3px 1px;

    & > .radio,
    & > .option-editor,
    & > .option-editor.button {
        flex: 1;
        margin: 0 2px !important;
        border-radius: 3px;
        height: 26px;
        box-sizing: border-box;
        border: none;
        text-align: center;
        justify-content: center;
        contain: paint;
        z-index: 0;

        & > .radio {
            margin: 0;
            padding: 0;
            height: 25px;
        }

        &.grey {
            background: var(--button-background);
        }

        span {
            color: var(--input-foreground-framed);
            vertical-align: top;
        }

        .checkmark {
            display: none;
            width: 14px;
            height: 16px;
            top: 4px;

            &::before {
                width: 10px;
                height: 10px;
                top: 4px;
            }

            &::after {
                font-weight: 500 !important;
                font-size: var(--icon-smallest-size);
            }
        }

        .text {
            vertical-align: top;
            line-height: 20px !important;
            margin: 0 !important;
            padding: 0 5px 2px 5px;
            border-radius: 5px;

            i {
                font-size: var(--icon-small-size) !important;
                font-weight: 400 !important;
                top: 2px;
                padding: 0 2px;
                vertical-align: top;
                position: relative;
            }

            span {
                top: -1px;
                vertical-align: top;
                position: relative;
            }
        }

        & > .option-editor.radio {
            & > span.text {
                margin: 0 !important;
            }
        }

        &:focus {
            box-shadow: 0 0 0 3px var(--focus-outline);
        }

        &:focus,
        &:hover {
            background: var(--button-background-hover);
        }

        input:checked {
            ~ .text {
                box-shadow:
                    inset 0 0 0 100px var(--button-background-theme-hover),
                    0 0 0 200px var(--button-background-theme-hover);
                color: var(--button-foreground-theme);
            }
        }
    }

    & > .option-editor {
        padding-top: 0;
    }
}

.split-button {
    display: flex;
    flex-direction: row;
    background: #f9f9f9;
    border-radius: 5px;
    padding: 0;

    .radio {
        flex: 1;
        margin: 0 !important;
        background: var(--button-background);
        color: var(--button-foreground);
        font-size: var(--normal-font-size);
        outline: none;
        height: var(--main-height);
        padding: 3px 20px;
        box-shadow: var(--button-shadow);
        box-sizing: border-box;
        border-radius: 0;
        text-align: center;
        justify-content: center;
        overflow: hidden;

        &:first-child {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        &:last-child {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        span {
            color: var(--button-foreground);
            vertical-align: top;
        }

        input:checked {
            &,
            &:focus,
            &:hover {
                ~ .checkmark {
                    box-shadow:
                        inset 0 -10px 0 150px var(--button-background-theme),
                        0 -10px 0 150px var(--button-background-theme);

                    &::before {
                        background: var(--button-background-theme);
                    }
                    &::after {
                        color: var(--button-foreground-theme);
                    }
                }
                ~ .text {
                    color: var(--button-foreground-theme);
                }
            }
        }

        .checkmark {
            width: 14px;
            height: 16px;
            top: 3px;

            &::before {
                width: 10px;
                height: 10px;
                top: 4px;
            }

            &::after {
                font-weight: 500 !important;
                font-size: var(--icon-smallest-size);
            }
        }

        .text {
            vertical-align: top;
            line-height: 22px !important;
            margin: 0;

            i {
                font-size: var(--icon-small-size) !important;
                font-weight: 400 !important;
                top: 2px;
                padding: 0 2px;
                vertical-align: top;
                position: relative;
            }

            span {
                top: -1px;
                vertical-align: top;
                position: relative;
            }
        }
    }

    .option-editor {
        .radio {
            border-radius: 0;
        }

        &:first-child {
            .radio {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
        }

        &:last-child {
            .radio {
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        }
    }
}

.tooltip-indicator {
    position: relative;

    &:after {
        content: "";
        position: absolute;
        top: 5px;
        right: 5px;
        width: 5px;
        height: 5px;
        display: block;
        border-radius: 50%;
        background: var(--foreground-color-error);
    }
}

div.mandatory-field {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-top: 10px;
    border-radius: 12px;
    border: 1px solid var(--header-two);
    background: var(--input-background-mandatory);
    vertical-align: top;
}

.required-field {
    display: inline-block;
    padding-left: 5px;
    margin-top: 8px;
    color: var(--header-two);
    vertical-align: top;
}

label.mandatory-indicator {
    display: inline-block;
    padding: 15px 0;
    margin-top: 8px;
    color: var(--header-two);
    vertical-align: top;

    &:before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 2px 10px 0 0;
        border-radius: 12px;
        border: 1px solid var(--header-two);
        background: #c0dcc0;
        vertical-align: top;
    }
}

.link-btn {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none;
    position: relative;
    top: -0.35em;

    &:hover {
        color: blue;
        text-decoration: underline;
    }

    &:disabled {
        border: none;
        background: none !important;
    }
}

.groupbox {
    position: relative;
    border-radius: 5px;
    border: solid 1px var(--pane-bordercolor);
    padding: 10px 30px;
    margin-top: 10px;

    .bold {
        font-weight: bold;
    }

    .group {
        float: left;
        padding: 0 15px;
    }

    .term {
        clear: both;
    }

    .groupbox_label {
        position: absolute;
        top: -21px;
        background: var(--input-background-framed);
        padding: 0 10px;
        left: 15px;
    }

    .groupbox_indent {
        margin-left: 20px !important;
    }
}

.change-container {
    overflow: auto;
    height: 400px !important;
}

.maximised .change-container {
    height: 100% !important;
}

table.print-gridlines {
    border-collapse: collapse !important;
    border-top: 2px solid var(--foreground-color) !important;
    border-left: 2px solid var(--foreground-color) !important;
    border-right: 2px solid var(--foreground-color) !important;
    border-bottom: 2px solid var(--foreground-color) !important;
    margin-top: 10px !important;
    max-width: 100%;

    thead {
        display: table-header-group !important;

        tr {
            display: table-row !important;

            td,
            th {
                padding: 0px !important;
                margin: 0px !important;
                position: initial !important;
                overflow: initial !important;
                padding: 1px !important;
                display: table-cell !important;
                border-top: 1px solid var(--foreground-color) !important;
                border-left: 1px solid var(--foreground-color) !important;
                border-right: 1px solid var(--foreground-color) !important;
                border-bottom: 1px solid var(--foreground-color) !important;
                font-weight: normal !important;
                font-size: var(--larger-font-size) !important;
                font-family: Verdana !important;
                color: var(--foreground-color) !important;
            }

            th {
                font-weight: bold !important;
                font-size: var(--larger-font-size) !important;
                text-align: left;
            }
        }
    }

    tbody {
        display: table-row-group !important;

        tr {
            display: table-row !important;

            td {
                padding: 0px !important;
                margin: 0px !important;
                position: initial !important;
                overflow: initial !important;
                padding: 1px !important;
                display: table-cell !important;
                border-top: 1px solid var(--foreground-color) !important;
                border-left: 1px solid var(--foreground-color) !important;
                border-right: 1px solid var(--foreground-color) !important;
                border-bottom: 1px solid var(--foreground-color) !important;
                font-weight: normal !important;
                font-size: var(--larger-font-size) !important;
                font-family: Verdana !important;
                color: var(--foreground-color) !important;
            }
        }
    }

    tfoot {
        display: table-row-group !important;

        tr {
            display: table-row !important;

            td {
                padding: 0px !important;
                margin: 0px !important;
                position: initial !important;
                overflow: initial !important;
                padding: 1px !important;
                display: table-cell !important;
                border-top: 1px solid var(--foreground-color) !important;
                border-left: 1px solid var(--foreground-color) !important;
                border-right: 1px solid var(--foreground-color) !important;
                border-bottom: 1px solid var(--foreground-color) !important;
                font-weight: normal !important;
                font-size: var(--larger-font-size) !important;
                font-family: Verdana !important;
                color: var(--foreground-color) !important;
            }
        }
    }
}

._elevio_launcher {
    display: none;
}

._elevio_navbar {
    padding: 13px 30px !important;
}

._elevio_navbar div div {
    padding-top: 13px !important;
}

.flip-y {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

.flip-x {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}

.top-section,
.bottom-section {
    overflow: auto;
    overscroll-behavior: none;
}

::-moz-focus-inner {
    border: 0;
}

strong,
.bold {
    &,
    * {
        font-weight: bold;
    }
}

.page-break-after:not(:last-child) {
    page-break-after: always !important;
    page-break-inside: avoid !important;
}

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes button-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--focus-outline);
    }
    50% {
        box-shadow: 0 0 0 5px var(--focus-outline-pulse);
    }
    60% {
        box-shadow: 0 0 0 5px var(--focus-outline-pulse);
    }
    80% {
        box-shadow: 0 0 0 var(--focus-outline-pulse);
    }
    100% {
        box-shadow: 0 0 0 5px var(--focus-outline-pulse);
    }
}

@media screen {
    .print-only {
        display: none !important;
    }
}

@media print {
    .no-print {
        display: none !important;
    }
}

@media only screen and (max-width: 1023px) {
    h1,
    h2,
    h3,
    h4 {
        white-space: initial;
    }

    .scaling-pane {
        min-width: 100%;
        min-height: 100%;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .right-desktop {
        text-align: left;
        float: initial !important;
    }
}

@media only screen and (max-width: 500px) {
    :root body > .page-frame > .page-body,
    :root body > .dialogs-container,
    :root body > .element-container,
    :root body .common-toolbar,
    :root body .sidebar-container,
    :root body .status {
        zoom: 1.2;

        .legal-container {
            zoom: 0.8;
        }
    }

    spacer {
        display: none;
    }

    label {
        &.title {
            min-width: -webkit-max-content !important;
            min-width: max-content !important;
        }
    }

    .half-responsive,
    .third-responsive,
    .twothirds-responsive {
        width: 100% !important;
        min-width: 100% !important;
    }

    .row-responsive {
        flex-wrap: wrap;

        &.responsive {
            * {
                flex: 1 0 99%;
            }
        }

        &.distribute-half,
        &.responsive-half {
            & > * {
                min-width: 100%;
            }
        }
    }

    .col-responsive {
        min-width: 100% !important;
    }

    .col-break-responsive {
        flex-basis: 100%;
        height: 0;
    }

    .scaling-pane-mid {
        width: calc(100% - 10px);
    }

    .scaling-pane-midmax,
    .scaling-pane-max {
        width: calc(100% - 20px);
        padding-bottom: 0;
        margin: 10px !important;
    }

    .col-pane:not(.non-reflex):first-child {
        flex-grow: 1;
    }

    .col {
        max-width: 100% !important;
    }
}

@media only screen and (display-mode: standalone) {
    body {
        height: calc(100%);
        min-height: calc(100%);
    }
}
.tree-scroll {
    height: 100%;

    .tree-menu {
        width: calc(100% - 5px);
        padding: 0;
        margin: 10px 0 20px 5px;
        -webkit-user-select: none;
        user-select: none;

        .menu-item {
            position: relative;
            width: 100%;

            &.open {
                & > .child-indicator:before {
                    transform: rotate(-90deg);
                }

                & > .children {
                    animation: children-expand 0.3s ease forwards;
                }
            }

            &.has-children {
                & > .button > span {
                    width: calc(100% - 110px);
                }

                .icon {
                    padding-left: 0;
                }
            }

            &.horizontal {
                display: inline-block;
                clear: none;
            }

            &.bottom .children {
                background: none;
            }

            & > .child-indicator {
                display: block;
                position: absolute;
                top: 0;
                right: 5px;
                width: 22px;
                height: 22px;
                z-index: 5;
                cursor: pointer;

                &:before {
                    position: absolute;
                    top: 5px;
                    right: 8px;
                    content: "";
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 6px 6px 6px 0;
                    border-color: transparent var(--menu-indicator) transparent
                        transparent;
                    border-top-right-radius: 1px;
                    border-bottom-right-radius: 1px;
                    -webkit-transition: transform 0.3s ease;
                    /* Safari */
                    transition: transform 0.3s ease;
                }

                &:hover:before {
                    border-color: transparent var(--menu-indicator-hover)
                        transparent transparent;
                }
            }

            .children {
                position: relative;
                overflow: hidden;
                box-sizing: border-box;
                max-height: 0;
                width: 100%;
                margin: 0 0 0 15px;
                padding: 0 0 0 5px;
                box-sizing: border-box;
                border-left: 1px solid var(--main-bordercolor);
                animation: children-collapse 0.3s ease forwards;
            }

            & > .button {
                display: block;
                width: 100%;
                height: 22px;
                line-height: 20px;
                font-size: var(--large-font-size);
                text-decoration: none;
                background: transparent;
                box-shadow: none;
                border-radius: 0;
                padding: 0;
                color: var(--menu-foreground-disabled);
                cursor: default;
                outline: none;
                white-space: nowrap;
                min-width: 100px;
                margin: 0;
                box-sizing: border-box;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;

                span {
                    font-size: var(--larger-font-size);
                    vertical-align: top;
                    display: inline-block;
                    width: calc(100% - 80px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding-left: 5px;
                }

                &.infoStage_Colour .icon span {
                    color: var(--menu-icon-color-info-disabled);
                }

                &.processingStage_Colour .icon span {
                    color: var(--menu-icon-color-proc-disabled);
                }

                &.reportingStage_Colour .icon span {
                    color: var(--menu-icon-color-repr-disabled);
                }

                &.admin_Colour .icon span {
                    color: var(--menu-icon-color-admn-disabled);
                }

                &.home .icon:before {
                    content: "home";
                    font: var(--icon-font);
                    font-size: var(--icon-smaller-size);
                    line-height: 17px;
                    color: var(--menu-icon-home);
                    box-shadow: none !important;
                    color: var(--menu-icon-color-home);
                }
            }

            .icon {
                display: inline-block;
                width: 40px;
                height: 22px;
                margin: 0;
                background: transparent;
                font-size: var(--large-font-size);
                line-height: 22px;
                border-radius: 0;
                color: var(--menu-icon-color);
                text-align: center;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;

                &:before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 2px;
                    left: 2px;
                    width: 28px;
                    height: calc(100% - 4px);
                    border-radius: 10px;
                }

                span {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: calc(100% - 10px);
                    line-height: 22px;
                    padding: 0;
                    text-align: center;
                    color: var(--button-foreground);
                    z-index: 2;
                    font-weight: 700;
                }

                img {
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    position: relative;
                    top: 3px;
                    margin: 0 0 0 5px;
                    filter: grayscale(100%) contrast(20%) brightness(300%);
                    z-index: 2;
                }
            }

            .children .menu-item {
                .icon {
                    padding-left: 0;
                }

                &.has-children {
                    .icon {
                        padding-left: 10px;
                    }
                }

                .children {
                    &:before {
                        background: var(--menu-background);
                    }

                    .icon:after {
                        background: var(--menu-children-mask);
                    }
                }

                .children .menu-item {
                    .children {
                        &:before {
                            background: var(--menu-background);
                        }

                        .icon:after {
                            background: var(--menu-children-mask);
                        }
                    }

                    .children .menu-item {
                        .children {
                            &:before {
                                background: var(--menu-background);
                            }

                            .icon:after {
                                background: var(--menu-children-mask);
                            }
                        }
                    }
                }
            }
        }

        &.enabled .menu-item {
            * {
                color: var(--menu-foreground);
            }

            .button {
                cursor: pointer;
                -webkit-user-select: none;
                user-select: none;

                &:hover,
                &:focus {
                    background: var(--menu-background-hover);

                    &.home > .icon:before {
                        filter: grayscale(100%) contrast(100%);
                    }

                    & > span {
                        color: var(--menu-foreground);
                    }

                    & > .icon {
                        &:before {
                            filter: brightness(120%);
                        }
                    }
                }

                &.infoStage_Colour .icon {
                    img {
                        filter: invert(27%) sepia(94%) saturate(1113%)
                            hue-rotate(180deg) brightness(96%) contrast(106%);
                    }

                    span {
                        color: var(--menu-icon-color-info) !important;
                        font-weight: 700;
                    }
                }

                &.processingStage_Colour .icon {
                    img {
                        filter: invert(79%) sepia(37%) saturate(308%)
                            hue-rotate(5deg) brightness(102%) contrast(90%);
                    }

                    span {
                        color: var(--menu-icon-color-proc) !important;
                        font-weight: 700;
                    }
                }

                &.reportingStage_Colour .icon {
                    img {
                        filter: invert(97%) sepia(7%) saturate(1101%)
                            hue-rotate(54deg) brightness(96%) contrast(85%);
                    }

                    span {
                        color: var(--menu-icon-color-repr) !important;
                        font-weight: 700;
                    }
                }

                &.admin_Colour .icon {
                    img {
                        filter: invert(49%) sepia(86%) saturate(4395%)
                            hue-rotate(334deg) brightness(91%) contrast(105%);
                    }

                    span {
                        color: var(--menu-icon-color-admn) !important;
                        font-weight: 700;
                    }
                }

                &.current {
                    background: var(--menu-foreground-disabled);
                    z-index: 2;

                    &.infoStage_Colour {
                        background: var(--menu-icon-color-info);

                        & > span {
                            color: var(--menu-background);
                        }
                    }

                    &.processingStage_Colour {
                        background: var(--menu-icon-color-proc);

                        & > span {
                            color: var(--menu-background);
                        }
                    }

                    &.reportingStage_Colour {
                        background: var(--menu-icon-color-repr);

                        & > span {
                            color: var(--menu-background);
                        }
                    }

                    &.admin_Colour {
                        background: var(--menu-icon-color-admn);

                        & > span {
                            color: var(--menu-background);
                        }
                    }

                    &.home .icon {
                        :before {
                            background-color: var(--menu-background);
                            filter: grayscale(100%) contrast(100%);
                        }

                        &:after {
                            top: 2px;
                        }
                    }

                    .icon {
                        &:before {
                            background-color: var(--menu-background) !important;
                        }
                    }
                }
            }
        }

        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 100%;

            &.menu-item[disabled] {
                pointer-events: none;

                .icon {
                    &.infoStage_Colour span {
                        color: var(--menu-icon-color-info-disabled) !important;
                    }

                    &.processingStage_Colour span {
                        color: var(--menu-icon-color-proc-disabled) !important;
                    }

                    &.reportingStage_Colour span {
                        color: var(--menu-icon-color-repr-disabled) !important;
                    }

                    &.admin_Colour span {
                        color: var(--menu-icon-color-admn-disabled) !important;
                    }
                }

                .button > span {
                    color: var(--menu-foreground-disabled) !important;
                }
            }
        }
    }
}

.context-menu {
    display: none;
    position: absolute;
    padding: 5px;
    background: var(--background-color);
    box-shadow: var(--menu-shadow);
    border-radius: 8px;
    overflow: hidden;
    z-index: 2147483020;

    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
        min-width: 200px;

        li {
            hr {
                margin: 2px 0;
                margin-block-start: 2px;
                margin-block-end: 2px;
                border-top: 1px solid var(--main-bordercolor);
                border-left: 0;
                flex: 1;
            }

            a {
                position: relative;
                display: flex;
                width: 100%;
                height: 26px;
                line-height: 22px;
                padding: 2px 8px 2px 5px;
                font-size: var(--normal-font-size);
                text-decoration: none;
                color: var(--menu-foreground);
                border-radius: 5px;
                cursor: default;
                box-sizing: border-box;
                outline: none;
                -webkit-user-select: none;
                user-select: none;
                white-space: nowrap;

                &.enabled {
                    cursor: pointer;
                }

                &.disabled {
                    img {
                        filter: grayscale(100%) brightness(4);
                    }

                    span,
                    i {
                        color: var(--menu-foreground-disabled);
                    }

                    &:hover {
                        background: var(--background-color);

                        span,
                        i {
                            color: var(--menu-foreground-disabled);
                        }
                    }
                }

                &:hover {
                    background: var(--button-background-theme-hover);

                    span,
                    i {
                        color: var(--button-foreground-theme);
                    }
                }

                img,
                i {
                    width: 16px;
                    height: 16px;
                    filter: grayscale(100%);
                    font-size: var(--icon-small-size) !important;
                    vertical-align: top;
                }

                span {
                    padding: 0 10px;
                    vertical-align: top;
                    flex: 1;

                    &:nth-child(3) {
                        padding: 0;
                        flex: 0;
                    }
                }
            }
        }
    }

    &.enabled ul li a {
        cursor: pointer;
    }
}

@keyframes children-expand {
    0% {
        max-height: 0;
    }

    100% {
        max-height: 500px;
        overflow: visible;
        display: block;
    }
}

@keyframes children-collapse {
    0% {
        max-height: 500px;
    }

    100% {
        max-height: 0;
        overflow: hidden;
        display: none;
    }
}

@media only screen and (max-width: 1023px) {
    .tree-scroll {
        .tree-menu {
            .menu-item {
                & > .button {
                    height: 30px;

                    .icon {
                        height: 30px;

                        span {
                            line-height: 30px;
                        }
                    }

                    &.home .icon:before {
                        line-height: 25px;
                    }

                    & > span {
                        height: 30px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
}
.date-selector {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 26px;
    width: 100%;

    .md-button.md-datepicker-button {
        position: absolute;
        top: 2px;
        right: 5px;
        padding: 0;
        width: initial;
        border-radius: 3px;
        z-index: 5;
        transition: none;
        min-height: unset;
        height: 26px;
        background: transparent !important;
        box-shadow: none;
    }

    md-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        color: var(--button-foreground);
    }

    md-datepicker {
        overflow: initial !important;
    }

    .md-datepicker-open {
        .md-button {
            display: none;
        }

        .md-datepicker-input-container {
            background: transparent !important;
        }

        input[type="text"] {
            background: var(--input-background-framed) !important;
            border-radius: 0;
            border: 0 !important;
            box-shadow: none;

            &:focus {
                box-shadow: none !important;
            }
        }
    }

    .md-datepicker-input-container {
        margin: 0 !important;
        border: none !important;
        width: 100%;

        .md-button {
            display: none;
        }
    }

    .md-datepicker-input {
        width: 100%;
        max-width: 100%;
    }

    &.mandatory-field {
        .md-datepicker-input {
            background: var(--input-background-mandatory) !important;
            border: 1px solid var(--input-background-mandatory);
        }

        &:hover,
        &:focus {
            .md-datepicker-input {
                background: var(--input-background-mandatory-hover) !important;
            }
        }
    }

    input[type="text"] {
        max-width: initial !important;
    }
}

.md-whiteframe-z1 {
    box-shadow: 3px 3px 20px var(--dialog-shadow) !important;
    border-radius: 5px;
    z-index: 99999 !important;
}

.md-calendar-date-selection-indicator {
    border-radius: 5px !important;
}

.md-calendar-date.md-calendar-selected-date
    .md-calendar-date-selection-indicator {
    background: var(--select-option-background-selected) !important;
    color: var(--select-option-foreground-selected);
}

.md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator {
    border-color: var(--icon-blue) !important;
}

.date-button {
    overflow: hidden;

    div,
    md-datepicker,
    input {
        display: inline;
        border: 0;
        visibility: hidden;
    }

    md-datepicker {
        width: 0;
        overflow: hidden;
        display: inline-block;
    }

    div {
        top: -23px;
    }

    & > span {
        height: 100%;
        line-height: 26px;
        top: 0 !important;
        display: inline-block;
        padding: 0 0 0 10px;
        box-shadow: 10px 0 0 10px var(--main-background);
        background: var(--main-background);
        color: var(--header-three);
        border-left: 1px solid var(--main-bordercolor-alt);
    }

    input {
        font:
            500 var(--normal-font-size) "Open Sans",
            Arial,
            Sans-Serif !important;
        margin: 2px 0 0 5px;
        width: 75px;
        min-width: initial;
    }
}

.date-picker-button-open {
    .md-datepicker-input-mask-opaque {
        top: 12px !important;
    }

    .md-datepicker-calendar-pane {
        margin-left: -80px;
    }
}

.md-datepicker-calendar,
.md-default-theme .md-calendar,
.md-calendar {
    background: var(--main-background);
}

.md-default-theme .md-datepicker-calendar-pane,
.md-datepicker-calendar-pane {
    border-color: var(--main-background);
    overflow: hidden;
}

.md-default-theme .md-datepicker-input-mask-opaque,
.md-datepicker-input-mask-opaque {
    box-shadow: 0 0 0 9999px var(--input-background-framed);
}

.md-default-theme .md-calendar-month-label md-icon,
.md-calendar-month-label md-icon,
.md-default-theme .md-datepicker-input,
.md-datepicker-input,
.md-default-theme .md-calendar,
.md-calendar,
.md-default-theme .md-calendar-day-header,
.md-calendar-day-header {
    color: var(--foreground-color);
}
.dialog-section {
    .mask {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: var(--dialog-mask-start);
        -webkit-user-select: none;
        user-select: none;
        backdrop-filter: blur(2px);

        &.open {
            animation: mask-background 0.2s ease-in-out forwards;
        }

        &.dragging {
            backdrop-filter: none;
            animation: mask-background-dragging 0.2s ease-in-out forwards;
        }
    }

    .dialog-outer {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;
        transition: top 0.1s ease-in-out;

        .dialog-scroll {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            overflow-anchor: none;
            touch-action: pan-y, pan-x;
            overscroll-behavior: none;
            padding: 0 0 15px 0;
            box-sizing: border-box;

            .dialog-container {
                position: relative;
                top: 20px;
                opacity: 0;
                display: block;
                background: var(--dialog-background);
                border: 0;
                border-radius: 10px;
                margin: 0 auto 0 auto;
                box-shadow: 0px 1px 10px var(--dialog-shadow);
                overflow: hidden;
                z-index: 2;
                transition:
                    width 0.5s,
                    height 0.5s,
                    top 0s ease-in-out,
                    opacity 0s ease-in-out;
                box-sizing: border-box;

                .dialog-controls {
                    position: absolute;
                    top: 15px;
                    right: 20px;
                    text-align: right;

                    .dialog-maximise,
                    .dialog-drag {
                        font-size: 20px !important;
                        width: 20px !important;
                        height: 20px !important;
                        padding: 0px !important;
                        margin: 0px !important;
                        border-radius: 2px;
                        text-align: right;
                    }

                    .dialog-drag {
                        cursor: move;
                    }

                    .dialog-maximise {
                        cursor: pointer;
                    }
                }

                .dialog-inner {
                    padding-bottom: 0px;
                    position: relative;
                    width: 100%;
                    min-height: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    float: left;
                    -webkit-transition:
                        width 0.5s,
                        height 0.5s;
                    /* Safari */
                    transition:
                        width 0.5s,
                        height 0.5s;
                    display: flex;
                    flex-direction: column;

                    .check-list {
                        border-radius: 3px;
                    }

                    & > div {
                        float: left;
                        width: 100%;
                        box-sizing: border-box;
                    }

                    .dialog-title {
                        width: 100%;
                        text-align: left;
                        font-size: var(--largest-font-size);
                        background: var(--background-color);
                        color: var(--dialog-title);
                        overflow: hidden;
                        position: relative;
                        height: 52px;
                        min-height: 52px;
                        padding: 10px 20px;
                        box-sizing: border-box;
                        cursor: move;
                        flex: 0;

                        &.red {
                            background: var(--dialog-title-red);
                            color: var(--dialog-title-alt);

                            .dialog-title-icon {
                                color: var(--dialog-title-icon-alt);
                            }
                        }

                        &.yellow {
                            background: var(--dialog-title-yellow);
                            color: var(--dialog-title-alt);

                            .dialog-title-icon {
                                color: var(--dialog-title-icon-alt);
                            }
                        }

                        &.green {
                            background: var(--dialog-title-green);
                            color: var(--dialog-title-alt);

                            .dialog-title-icon {
                                color: var(--dialog-title-icon-alt);
                            }
                        }

                        .dialog-title-icon {
                            font-size: 20px !important;
                            padding: 3px 5px;
                            margin: 1px 5px 0 0;
                            border-radius: 50%;
                            vertical-align: top;
                            color: var(--dialog-title-icon);
                        }

                        .dialog-title-text {
                            display: inline-block;
                            margin: 1px 0 0;
                            font-size: var(--largest-font-size);
                            vertical-align: top;
                            line-height: var(--dialog-title-line-height);
                        }

                        &.invert {
                            .dialog-title-icon,
                            .dialog-title-text {
                                color: var(--dialog-title-icon-alt) !important;
                            }
                        }
                    }

                    .dialog-content {
                        flex: 1;
                        padding: 10px 20px 20px;
                        position: relative;

                        .main-toolbar {
                            background: transparent;
                            border-bottom: transparent;
                            display: block;
                            box-shadow: none;
                        }

                        .pane {
                            box-shadow: none;
                        }

                        .dialog-body {
                            min-height: 50px;
                            padding: 10px 0;
                            position: relative;

                            .main-toolbar {
                                top: 0px;
                                margin-bottom: 10px;
                            }

                            .custom-tools {
                                margin-left: 0px;
                            }
                        }

                        .dialog-footer {
                            display: flex;
                            flex-direction: row-reverse;
                            padding: 10px 0px 0px 0px;
                            box-sizing: border-box;
                            width: 100%;

                            .dialog-footer-inner {
                                display: flex;
                                gap: 5px;

                                * {
                                    flex: 0;
                                }

                                button,
                                input[type="submit"],
                                input[type="clear"],
                                button {
                                    background: var(--dialog-button-background);
                                    color: var(--dialog-button-foreground);
                                    cursor: pointer;
                                    font-weight: 700;

                                    &:hover,
                                    &:focus {
                                        background: var(
                                            --dialog-button-background-hover
                                        );
                                    }

                                    &:disabled {
                                        background: var(
                                            --dialog-button-background-disabled
                                        ) !important;
                                        color: var(
                                            --dialog-button-foreground-disabled
                                        ) !important;
                                        cursor: not-allowed;

                                        img {
                                            filter: grayscale(100%);
                                        }
                                    }

                                    img {
                                        top: 2px;
                                        width: 16px;
                                        height: 16px;
                                    }
                                }

                                label {
                                    float: left;
                                }

                                select {
                                    width: 100px;
                                }

                                spacer {
                                    flex: 1;
                                }

                                .dialog-ok,
                                .dialog-close,
                                .button {
                                    margin: 0px !important;
                                }

                                .dialog-ok {
                                    background: var(
                                        --button-background-theme
                                    ) !important;
                                    box-shadow: var(--button-shadow-theme);
                                    color: var(
                                        --button-foreground-theme
                                    ) !important;

                                    &:hover,
                                    &:focus {
                                        background: var(
                                            --button-background-theme-hover
                                        ) !important;
                                    }

                                    &:disabled {
                                        background: var(
                                            --button-background-theme-disabled
                                        ) !important;
                                        color: var(
                                            --button-foreground-theme-disabled
                                        ) !important;
                                        cursor: not-allowed !important;

                                        i {
                                            color: var(
                                                --button-foreground-theme-disabled
                                            ) !important;
                                        }
                                    }

                                    i {
                                        color: var(
                                            --button-foreground-theme
                                        ) !important;
                                    }
                                }

                                .dialog-bad {
                                    background: var(
                                        --button-background-red
                                    ) !important;
                                    color: var(
                                        --button-foreground-red
                                    ) !important;

                                    &:hover,
                                    &:focus {
                                        background: var(
                                            --button-background-red-hover
                                        ) !important;
                                    }

                                    &:disabled {
                                        background: var(
                                            --button-background-red-disabled
                                        ) !important;
                                        color: var(
                                            --button-foreground-red-disabled
                                        ) !important;
                                        cursor: not-allowed !important;
                                    }
                                }
                            }
                        }
                    }

                    .dialog-mask {
                        position: absolute;
                        top: 52px;
                        left: -15px;
                        width: calc(100% + 30px) !important;
                        height: calc(100% - 35px) !important;
                        background: var(--dialog-content-mask);
                        border-radius: 5px;
                        z-index: 999;
                    }
                }
            }
        }

        &.maximised {
            height: 100%;
            padding: 0px;

            .dialog-scroll {
                padding: 0;
            }

            .sizable {
                width: 100% !important;
                height: 100% !important;
            }
        }

        &.open {
            .dialog-container {
                top: 10px;
                opacity: 1;
                transition:
                    width 0.5s,
                    height 0.5s,
                    top 0.2s ease-in-out,
                    opacity 0.2s ease-in-out;

                &.maximised {
                    width: 100% !important;
                    height: 100%;
                    border-radius: 0px;
                    top: 0;

                    .dialog-inner,
                    .dialog-body > div {
                        height: 100%;
                    }

                    .dialog-content {
                        height: calc(100% - 60px);

                        .dialog-body {
                            height: calc(100% - 30px);
                        }
                    }
                }
            }
        }

        &.dragging {
            transition: none;
        }
    }
}

.dialog-confirm {
    .text {
        font-size: var(--normal-font-size);
        text-align: left;
        min-height: 0px;
        padding: 15px 0px 5px 0px;
    }

    &.multi {
        .text {
            text-align: left;
        }
    }
}

.reauth-frame {
    width: calc(100% + 40px);
    height: 600px;
    position: relative;
    margin-top: -20px;
    margin-left: -20px;
    margin-bottom: -24px;
    border: none;
}

@media only screen and (max-width: 1023px) {
    .dialog-section {
        .dialog-outer {
            top: 0 !important;
            left: 0 !important;

            &.open {
                .dialog-container {
                    top: 0;
                }
            }

            .dialog-scroll {
                padding: 0;

                .dialog-container {
                    position: relative;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    box-sizing: border-box;
                    border-radius: 0;
                    overflow: auto;
                    touch-action: pan-y, pan-x;
                    overscroll-behavior: none;

                    .dialog-maximise {
                        display: none !important;
                    }

                    .dialog-title {
                        position: sticky !important;
                        top: 0;
                        z-index: 10;
                        box-shadow: 0 -10px 0 10px var(--main-background);

                        animation-name: pane-toolbar-shadow;
                        animation-duration: 1ms; /* Firefox requires this to apply the animation */
                        animation-timeline: scroll(block nearest);
                    }

                    .dialog-footer-inner {
                        flex-wrap: wrap;
                        gap: 5px;

                        .display-modes {
                            flex-direction: row !important;
                            flex-wrap: nowrap !important;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 500px) {
    .dialog-section {
        .dialog-outer {
            .dialog-scroll {
                .dialog-container {
                    .dialog-content {
                        display: flex;
                        flex-direction: column;

                        .dialog-body {
                            flex: 1;
                        }

                        .dialog-footer-inner {
                            flex: 0;
                            min-width: 100%;

                            * {
                                flex-wrap: wrap;
                            }

                            button {
                                min-width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes mask-background {
    from {
        background-color: var(--dialog-mask-start);
    }
    to {
        background-color: var(--dialog-mask-end);
    }
}

@keyframes mask-background-dragging {
    from {
        background-color: var(--dialog-mask-end);
    }
    to {
        background-color: var(--dialog-mask-start);
    }
}
.drag {
    opacity: 0.5;
}

.over,
.over th,
.over td {
    background: grey !important;
    border: solid;
    border-color: yellow;
}

.drag-drop-list-item {
    z-index: 0;
    padding-top: 10px;
    -webkit-user-select: none;
    user-select: none;
}

.drag-drop-list-item.held {
    z-index: 1;

    & > div {
        box-shadow: 0 1px 8px 0 var(--dialog-shadow);
    }
}

.drag-drop-list-item .handle {
    position: absolute;
    top: calc(50% - 13px);
    left: 4px;
    font-size: var(--icon-normal-size);
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    cursor: row-resize !important;
}

.drag-drop-list-item .handle.handle-align-right {
    left: calc(100% - 30px) !important;
}

.drag-drop-list-item .handle.fixed {
    visibility: hidden;
}

.drag-drop-list-item-display {
    line-height: 20px;
    display: inline-block;
    height: 24px;
    width: calc(100% - 27px);

    &.flexible {
        height: initial;
    }
}

.drag-drop-list-item-display span {
    vertical-align: top;
}
.drag-group {
    display: flex;
    position: relative;
    flex-direction: column;
    min-width: max-content;
    min-height: 200px;
    max-height: 100%;
    padding: 5px;

    &.quick-editing {
        background: var(--grid-row-cell-quickediting) !important;
    }

    &.fixed {
        position: sticky;
        left: 0;
        z-index: 5;
        box-shadow: var(--button-shadow) !important;
    }

    &.drag-over {
        background: var(--item-dragged-hover) !important;

        .items {
            &::before,
            &::after {
                box-shadow: 0 0 5px 2px var(--item-dragged-hover);
            }
        }
    }

    &.has-limit {
        .items {
            &::after {
                box-shadow: none;
            }
        }
    }

    .header {
        flex: 0;
        margin-bottom: 5px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        &.selected {
            background: var(--item-selected);
            cursor: pointer;
        }

        .drag-title {
            display: block;
            text-align: center;
            height: 25px;
            line-height: 15px;
            position: sticky;
            top: 0;
            background: inherit;
            z-index: 2;

            &:before {
                content: "";
                display: block;
                width: 100%;
                height: 10px;
                position: absolute;
                top: -10px;
                background: inherit;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
        }

        .drag-subtitle {
            display: block;
            text-align: center;
            position: sticky;
            height: 25px;
            background: inherit;
            z-index: 2;
            font-weight: bold;
            position: relative;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            line-height: 13px;
        }
    }

    .items {
        flex: 1;
        overflow-y: auto;
        max-height: calc(100% - 60px);

        &::before,
        &::after {
            content: "";
            display: block;
            width: 100%;
            height: 0;
            position: sticky;
            left: 0;
            box-shadow: 0 0 5px 2px var(--background-color);
            z-index: 2;
        }

        &::before {
            top: 0;
        }

        &::after {
            bottom: 0;
        }

        .drag-items {
            display: flex;
            flex-direction: column;
            -webkit-user-select: none;
            user-select: none;
            padding: 5px 0;
            gap: 5px;

            .drag-item {
                display: block;
                flex-basis: 24px;
                line-height: 20px;
                text-align: center;
                padding: 2px 5px 2px 30px;
                position: relative;
                cursor: move;
                box-sizing: border-box;
                z-index: 1;
                white-space: nowrap;
                -webkit-user-select: none;
                user-select: none;

                &.selected {
                    background: var(--item-selected) !important;
                }

                &.held {
                    box-shadow: 1px 1px 3px var(--main-shadow-dark) !important;
                    z-index: 999999;
                }

                .handle {
                    position: absolute;
                    top: 2px;
                    left: 5px;
                }
            }
        }
    }

    .shading-max-class-size {
        position: absolute;
        background-color: var(--main-shadow);
        filter: opacity(0.3);
        left: 0;
        right: 0;
    }
}
editor,
filterfield {
    display: flex;
    height: 100%;
    min-height: 18px;
    width: 100%;
    overflow: hidden;
    position: relative;
    vertical-align: top;

    input {
        height: 100% !important;
        width: 100%;
        position: absolute !important;
        top: 0;
        left: 0;
        padding: 0 !important;
        text-align: left;
        background: transparent !important;

        &[type="text"],
        &[type="number"],
        &[type="date"],
        &[type="datetime"],
        &[type="email"],
        &[type="password"] {
            border: 0 !important;
            background: transparent !important;
        }
    }
}

.number-editor-container,
.select-editor-container,
.text-editor-container {
    display: inline-block;
    width: fit-content;

    input:read-only {
        -webkit-user-select: none;
        user-select: none;
        cursor: default;
    }

    selecteditor {
        display: block;

        input {
            background-color: var(--select-background);
            background-image: var(--select-icon) !important;
            background-repeat: no-repeat !important;
            background-position: center right !important;

            &[type="button"] {
                text-align: left;
                border-radius: 5px;
                background-color: var(--select-background);
                border: 1px solid var(--main-bordercolor);
                padding: 0 20px 0 5px;
                width: 100%;
                height: var(--main-height);
                background-color: var(--input-background);
                color: var(--input-foreground);
                outline: none;
                resize: none;
                box-sizing: border-box;
                box-shadow: none;

                &:hover,
                &:focus {
                    background-color: var(--input-background-hover);
                }

                &.mandatory-field {
                    background-color: var(--input-background-mandatory);
                    border: 1px solid var(--input-background-mandatory);
                    color: var(--input-foreground-mandatory);

                    &:hover,
                    &:focus {
                        background-color: var(
                            --input-background-mandatory-hover
                        ) !important;
                    }
                }

                &.input-error {
                    background-color: var(--input-background-error) !important;

                    &:hover,
                    &:focus {
                        background-color: var(
                            --input-background-error-hover
                        ) !important;
                    }
                }

                &:disabled {
                    background-color: var(
                        --input-background-disabled
                    ) !important;
                    color: var(--input-foreground-disabled) !important;
                }
            }
        }

        &.readonly {
            &.no-grid {
                span {
                    display: inline-block;
                    text-align: left;
                    border-radius: 5px;
                    background-color: var(--input-background);
                    border: 1px solid var(--main-bordercolor);
                    color: var(--input-foreground);
                    padding: 0 5px;
                    width: 100%;
                    height: var(--main-height);
                    line-height: calc(var(--main-line-height) - 2px);
                    box-sizing: border-box;
                    vertical-align: top;
                    -webkit-user-select: text;
                    user-select: text;
                    cursor: text;
                }
            }

            input {
                background-image: none !important;
            }
        }
    }

    &.one-time-code {
        input {
            font-family: monospace;
            font-size: 28pt !important;
            width: 160px;
            padding: 0 11px;
            margin: 0 auto;
            height: 50px;
        }
    }
}

.tts-editor {
    width: 100%;

    &.no-grid {
        min-height: 18px;
    }
}

.boolean-editor {
    display: inline-block;
}

label.boolean-editor {
    height: 18px;
    text-align: left;
    display: flex;

    span.checkmark {
        color: transparent;
    }

    &.is-null span.checkmark::after {
        content: "indeterminate_check_box";
    }
}

.boolean-editor,
.option-editor {
    padding: 0 3px 0 0;

    &.inline {
        line-height: var(--main-line-height);

        .radio,
        .checkbox {
            margin: 5px 0 0;
        }
    }
}

.text-editor,
.number-editor {
    display: flex;
    flex-direction: row;

    &.no-grid {
        overflow: visible;
        min-width: 60px;
    }

    span.static {
        background: var(--input-background);
        color: var(--input-foreground);
        padding: 0 10px;
        height: 26px;
        line-height: 26px;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 5px;
        vertical-align: top;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    span.text {
        display: inline-block;
        line-height: 30px;
        padding-left: 5px;
    }
}

.text-editor {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.number-editor {
    position: relative;
    flex-direction: row-reverse;
    flex: 1;

    .buttons {
        position: absolute;
        flex-direction: column;
        width: 15px;
        height: calc(100% - 2px);
        top: 1px;
        right: 1px;
        display: none;
        z-index: 4;

        .number-up,
        .number-down {
            width: 15px;
            height: 50%;
            padding: 2px 0;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;

            &::before {
                font-family: "Material Icons" !important;
                font-weight: normal;
                font-style: normal;
                font-size: var(--icon-smaller-size);
                line-height: 40%;
                position: relative;
                left: -2px;
            }
        }

        .number-up {
            border-top-right-radius: 5px;

            &::before {
                content: "arrow_drop_up";
            }
        }

        .number-down {
            border-bottom-right-radius: 5px;

            &::before {
                content: "arrow_drop_down";
            }
        }
    }

    &:not(.readonly) {
        &:hover input,
        &:focus-within input,
        input:focus {
            padding-right: 20px;
        }

        &:hover .buttons,
        input:focus ~ .buttons,
        &:focus-within .buttons,
        .buttons:focus-within {
            display: flex;
        }
    }

    span,
    input {
        text-align: right;
        width: 100%;
    }
}

editor {
    .number-editor {
        &:not(.readonly) {
            &:hover input,
            &:focus-within input,
            input:focus {
                padding-right: 0;
            }
        }
    }
}

.address-editor {
    display: flex;
    flex-direction: column;

    &.single-line {
        flex-direction: row;

        .lookup {
            flex: 1;

            input {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        .toggle {
            flex: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            box-shadow: none;
            padding: 3px 5px;
        }
    }

    &:not(.single-line) {
        .toggle {
            max-width: 55px;
            margin-left: calc(100% - 55px);
        }
    }
}

.date-editor {
    display: block;
    height: 18px;
    overflow: hidden;

    .md-datepicker-button {
        display: none !important;
    }
}

.time-editor {
    .time-picker {
        display: block;
        height: 18px;
        overflow: hidden;

        input {
            text-align: right;
        }
    }

    .static-display {
        display: inline-block;
        width: 80px;
        text-align: right;
    }
}

.button-editor {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: center;
    border-radius: 3px;

    &:hover,
    &:focus {
        background: var(--button-background-alt);
    }

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline) !important;
    }

    i {
        font-size: var(--icon-smaller-size) !important;
        line-height: 18px !important;
        position: relative;
        top: 3px;
        text-align: center;
    }
}

.editor-dropdown {
    max-height: 200px;
    padding: 3px !important;
    overflow-y: auto;
    position: fixed;
    display: none;
    background: var(--select-dropdown-background);
    border: 1px solid var(--main-bordercolor);
    border-radius: 8px;
    box-shadow: var(--button-shadow-theme);
    box-sizing: border-box;
    scrollbar-width: thin !important;
    z-index: 99999;

    &.in-grid {
        padding: 0 !important;
        border-radius: 0;

        li {
            border-radius: 0;

            & > a {
                border-radius: 0;
            }
        }
    }

    &,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
        outline: none;
    }

    li {
        display: block;

        & > span,
        & > a {
            padding: 5px 10px 5px 5px;
            color: var(--select-option-foreground);
            display: block;
            min-height: var(--main-height);
            box-sizing: border-box;
        }

        & > span {
            cursor: not-allowed;
        }

        & > a {
            cursor: pointer;
            outline: none;
            text-decoration: none;
            border-radius: 5px;

            &:focus,
            &:hover {
                background: var(--select-option-background-hover);
                color: var(--select-option-foreground-hover);
                box-shadow: none !important;
            }
        }

        &.selected {
            & > a {
                background: var(--select-option-background-selected);
                color: var(--select-option-foreground-selected);
            }
        }

        &.unselectable,
        &.unselectable > span {
            background: var(--select-option-background-unselectable);
            color: var(--select-option-foreground-unselectable);
            border-radius: 5px;
        }

        &.notice,
        &.notice > span {
            background: var(--select-option-background-notice);
            color: var(--select-option-foreground-notice);
            border-radius: 5px;
            font-weight: 700;
        }
    }
}

.hide-editor editor {
    visibility: hidden;
}

.text-editor,
.number-editor,
.select-editor,
.address-editor,
.date-editor,
.time-editor {
    &.readonly {
        position: relative;

        &:after {
            content: "edit_off";
            display: inline-block;
            position: absolute;
            top: 5px;
            right: 3px;
            width: 19px;

            font: var(--icon-font) !important;
            font-size: var(--icon-smallest-size) !important;
            /* Preferred icon size */
            display: inline-block;
            line-height: 1;
            text-transform: none;
            letter-spacing: normal;
            word-wrap: normal;
            white-space: nowrap;
            direction: ltr;
            /* Support for all WebKit browsers. */
            -webkit-font-smoothing: antialiased;
            /* Support for Safari and Chrome. */
            text-rendering: optimizeLegibility;
            /* Support for Firefox. */
            -moz-osx-font-smoothing: grayscale;
            /* Support for IE. */
            font-feature-settings: "liga";
            font-variation-settings: normal !important;
            color: var(--main-bordercolor);
            z-index: 4;
        }

        &:hover,
        &:focus-within {
            &::after {
                color: var(--main-bordercolor-alt);
            }
        }
    }
}

.select-editor.no-grid {
    height: var(--main-height);
}

.number-editor {
    &.readonly {
        &:after {
            left: 3px;
        }
    }
}
._elevio_widget {
    & > div:first-child {
        box-shadow: none !important;

        & > div {
            & > div:nth-child(1) > div {
                background: var(--page-header) !important;

                & > div:nth-child(1) {
                    background: var(--menu-foreground-disabled) !important;
                    border-radius: 20px;
                    width: calc(100% - 10px);
                    margin: 5px 0 0 5px;
                    padding: 13px !important;
                    box-sizing: border-box;

                    &,
                    * {
                        fill: var(--menu-foreground) !important;
                        color: var(--menu-foreground) !important;
                    }

                    & > div > div {
                        padding: 13px 0 !important;
                    }
                }

                & > div:nth-child(2) {
                    background: var(--page-header) !important;
                    padding: 10px 5px !important;

                    ._elevio_search_icon {
                        fill: var(--input-placeholder) !important;
                    }

                    ._elevio_search {
                        & > div#_elev_io_placebo:first-child {
                            border-radius: 10px;
                            box-shadow: var(--button-shadow);
                            contain: paint;
                            overflow: hidden;

                            *,
                            input[type="search"]._elevio_search_input {
                                color: var(--foreground-color) !important;
                                background-color: var(
                                    --main-background
                                ) !important;

                                &::placeholder {
                                    color: var(--input-placeholder) !important;
                                }
                            }
                        }

                        & > ._elevio_search_results {
                            z-index: 10 !important;

                            & > div {
                                top: -7px !important;
                                box-shadow: var(--button-shadow) !important;
                                border-radius: 0 0 10px 10px !important;
                                background-color: var(
                                    --main-background
                                ) !important;
                            }
                        }
                    }
                }

                & > span {
                    background: var(--page-header) !important;
                }
            }

            & > div:nth-child(2) {
                margin: 0 5px 5px 5px;
                background: var(--main-background) !important;
                border-radius: 10px;
                box-shadow: var(--button-shadow);
                animation: detect-overflow linear;
                animation-timeline: scroll(self);
                scrollbar-gutter: stable;
                contain: paint;

                &::-webkit-scrollbar-thumb {
                    background: var(--input-foreground-framed-hover) !important;
                    border-radius: 1000px;
                }

                &,
                * {
                    color: var(--foreground-color);
                }
                ._elevio_article_title,
                ._elevio_relatedarticles_title {
                    color: var(--header-one) !important;
                }

                h3,
                h3 * {
                    color: var(--header-three) !important;
                    background: var(--overlay-back-color) !important;
                }
                h5,
                h5 * {
                    color: var(--header-four) !important;
                    background: var(--overlay-back-color) !important;
                }
                p > span {
                    background: transparent !important;
                }
                p > code {
                    background: var(--input-background-error) !important;
                }

                & > div:nth-child(1) {
                    background: var(--background-color-light) !important;
                    padding-top: 10px !important;

                    & > div > div {
                        background: var(--background-color-light) !important;

                        ._elevio_module_icon > div:first-child {
                            background: var(--button-background) !important;
                            border-radius: 10px;
                            box-shadow: var(--button-shadow) !important;

                            &:focus,
                            &:hover {
                                background: var(
                                    --button-background-theme-hover
                                ) !important;
                            }

                            svg {
                                fill: var(--button-foreground) !important;
                            }
                        }
                    }
                }

                & > div:nth-child(2) {
                    background: var(--main-background) !important;

                    ._elevio_articlefeedback_container {
                        background: var(--main-background) !important;
                    }
                }
            }

            & > div:nth-child(3) > div {
                background: var(--page-header) !important;
                padding: 3px 30px 9px 30px !important;
            }
        }
    }
}

@media (prefers-color-scheme: dark) {
    ._elevio_widget {
        & > div:first-child {
            & > div {
                & > div:nth-child(2) {
                    & > div:nth-child(2) {
                        svg {
                            filter: invert(1) !important;
                        }

                        blockquote {
                            position: relative;
                            isolation: isolate;

                            &::before {
                                content: "";
                                position: absolute;
                                inset: 0;
                                background-color: rgba(0, 0, 50, 0.5);
                                z-index: -1; /* Sits behind the text, but in front of the base background */
                            }
                        }

                        ._elevio_articlefeedback_container svg {
                            filter: none !important;
                        }
                    }
                }
            }
        }
    }
}

.dark ._elevio_widget {
    & > div:first-child {
        & > div {
            & > div:nth-child(2) {
                & > div:nth-child(2) {
                    svg {
                        filter: invert(1) !important;
                    }

                    blockquote {
                        position: relative;
                        isolation: isolate;

                        &::before {
                            content: "";
                            position: absolute;
                            inset: 0;
                            background-color: rgba(0, 0, 50, 0.5);
                            z-index: -1; /* Sits behind the text, but in front of the base background */
                        }
                    }

                    ._elevio_articlefeedback_container svg {
                        filter: none !important;
                    }
                }
            }
        }
    }
}
.email-dialog {
    display: flex;
    min-height: 600px !important;

    .email-metadata {
        & > div {
            display: flex;
            align-items: top;
            margin: 5px 0 5px 0;

            h4 {
                min-width: 105px;
                margin: 0 10px 0 0;
                text-align: right;
                font-weight: 600;
            }

            .collection-item {
                padding: 0;
                margin: 0;

                .collection-item-entries {
                    min-height: var(--main-line-height);
                    padding: 3px 5px 3px 5px;
                    margin: 0;

                    .collection-item-add {
                        width: 200px;
                        margin: 0;
                        padding: 5px;
                        margin: 2px 0 2px 0;
                    }

                    .collection-item-add-list {
                        &.open {
                            margin-top: 10px;
                        }
                    }

                    .collection-item-entry {
                        margin: 2px 5px 2px 0;
                    }
                }
            }

            & > .collection-item,
            & > input {
                flex-grow: 1;
            }

            .add-attachment {
                padding: 2px 5px;
                margin-left: 5px;
                height: 28px;
                width: 32px;
            }

            .insert-merge-field {
                margin-left: 5px;
                width: 32px;
                padding: 0 7px;
            }
        }

        hr {
            border: 0.5px solid var(--background-color);
            margin: 10px 0;
        }
    }

    .rich-editor {
        ng-quill-editor {
            .ql-container {
                min-height: 145px;

                .ql-editor {
                    min-height: 145px;
                }
            }
        }
    }
}
.extra {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px;
    height: 500px;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0px 1px 5px var(--dialog-shadow);
    background: var(--extra-window-background);
    color: var(--foreground-color);
    box-sizing: border-box;
    cursor: default;
    z-index: 20;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .sidebar-grip {
        display: none;
    }

    &.docked {
        position: relative;
        top: initial;
        right: initial;
        bottom: initial;
        width: 100%;
        height: 100%;
        min-width: 300px;
        min-height: 200px;
        border-radius: 0;
        box-shadow: 0 0 5px 1px var(--main-shadow);
        flex: 0;

        &.right,
        &.left,
        &.bottom {
            .sidebar-grip {
                position: absolute;
                display: initial;
                top: 0;
                left: 0;
                width: 5px;
                height: 100%;
                background: transparent;
                cursor: ew-resize;
                z-index: 15;
                transition: background 0.4s;
                -webkit-user-select: none;
                user-select: none;

                &:hover,
                &.resizing {
                    background: var(--scrollbar-color);
                }
            }
        }

        &.left,
        &.bottom {
            .sidebar-grip {
                left: auto !important;
                right: 0 !important;
            }
        }

        &.bottom {
            border-top: 1px solid var(--main-bordercolor);
            flex-basis: unset !important;
            width: 100% !important;
            max-height: 300px;

            .extra-body {
                height: calc(100% - 40px);
            }
        }

        &.left {
            border-right: 1px solid var(--main-bordercolor);
        }

        &.right {
            border-left: 1px solid var(--main-bordercolor);
        }

        &.minimized {
            padding: 0;
            background: var(--extra-window-minimized-background);

            &.bottom {
                min-height: 30px !important;
                height: 30px !important;
                max-height: 30px !important;
                flex-basis: 0 !important;
                padding-left: 10px;

                top: initial !important;
                left: 0 !important;
                bottom: 0 !important;
                right: 0 !important;

                .extra-title {
                    height: 29px;
                    line-height: 29px;
                    padding-left: 0;
                }

                .extra-controls {
                    top: 2px;
                }
            }

            &.left,
            &.right {
                min-width: 30px !important;
                width: 30px !important;
                max-width: 30px !important;
                flex-basis: 0 !important;

                .extra-title {
                    flex: 1;
                    padding-top: 30px;
                    writing-mode: vertical-rl;
                    height: initial;
                    width: 20px;
                    line-height: 12px;
                }
            }

            .extra-minimize {
                i {
                    color: var(--extra-window-minimized-foreground);
                }
            }

            .extra-title {
                color: var(--extra-window-minimized-foreground);
            }
        }
    }

    &.minimized {
        cursor: default;

        &:not(.docked) {
            cursor: move;
            top: initial;
            background: var(--extra-window-background-min);
            height: 50px !important;
            width: 230px !important;
        }

        .extra-controls {
            .extra-close,
            .extra-detatch,
            .extra-print {
                display: none;
            }
        }

        .extra-title {
            background: transparent;
        }

        .extra-header,
        .extra-body {
            display: none;
        }
    }

    &.docked,
    &.minimized {
        .extra-resize {
            display: none;
        }
    }

    &:hover {
        background: var(--extra-window-background-hover);
        box-shadow: 0px 1px 10px var(--dialog-shadow);
    }

    &.dragging {
        background: var(--extra-window-background-hover) !important;
        box-shadow: 0px 1px 10px var(--dialog-shadow) !important;
    }

    .extra-detail-content {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .extra-header {
        position: sticky;
        top: 0;
        left: 0;
        background: var(--main-background);
        -webkit-user-select: none;
        user-select: none;
        z-index: 1;
    }

    .extra-controls {
        position: absolute;
        top: 5px;
        right: 5px;
        display: inline-flex;

        &,
        * {
            -webkit-user-select: none;
            user-select: none;
        }

        .extra-close,
        .extra-detatch,
        .extra-minimize,
        .extra-print {
            flex: 1;
            width: 22px;
            height: 22px;
            border-radius: 3px;
            cursor: pointer;

            &:hover {
                background: var(--background-color);

                i {
                    color: var(--foreground-color) !important;
                }
            }

            i {
                text-align: center;
                width: 22px;
                font-size: var(--icon-small-size) !important;
                color: var(--icon-grey);
            }
        }

        .extra-close {
            i {
                color: var(--icon-red);
            }
        }

        .extra-print {
            margin-right: 10px;
        }
    }

    .extra-resize {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        cursor: nwse-resize;
        z-index: 9;

        &,
        * {
            -webkit-user-select: none;
            user-select: none;
        }

        div {
            position: absolute;

            &:nth-child(1) {
                bottom: 4px;
                right: 4px;
                width: 13px;
                height: 13px;
                border-bottom: 4px solid var(--icon-grey);
                border-right: 4px solid var(--icon-grey);
                border-bottom-right-radius: 8px;
            }
            &:nth-child(2),
            &:nth-child(3) {
                width: 4px;
                height: 4px;
                background: var(--icon-grey);
                border-radius: 50%;
            }
            &:nth-child(2) {
                top: 0px;
                right: 4px;
            }
            &:nth-child(3) {
                bottom: 4px;
                left: 0;
            }
        }

        &:hover {
            div {
                &:nth-child(1) {
                    border-color: var(--header-three);
                }
                &:nth-child(2),
                &:nth-child(3) {
                    background: var(--header-three);
                }
            }
        }
    }

    .extra-title {
        height: 40px;
        line-height: 40px;
        padding: 0 0 0 10px;
        font-size: var(--larger-font-size);
        font-weight: 600;
        color: var(--icon-grey);
        -webkit-user-select: none;
        user-select: none;
        cursor: move;
    }

    .extra-header {
        flex: 0 0 25px;
        line-height: 25px;
        padding: 0 0 0 10px;
        background: var(--background-color);
        border-top: 1px solid var(--main-bordercolor);
        font-weight: 600;
        color: var(--icon-grey);
    }

    .extra-body {
        flex: 1 0 0;
        word-break: break-word;
        padding: 0 3px 3px;
        background: var(--background-color);

        .extra-detail-content {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            contain: paint;
        }
    }
}
.uploads {
    position: absolute;
    bottom: 10px;
    left: -500px;
    background: var(--pane-list);
    border-radius: 10px;
    width: 300px;
    height: 50px;
    padding: 0px 0px 0px 10px;
    z-index: 10000;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus-outline) !important;
    }

    &.on {
        opacity: 1;
        transition: opacity 0.5s;
        left: 10px;
    }

    .upload-text {
        color: var(--input-foreground-framed);
        font-size: var(--largest-font-size);
        line-height: 50px;
        float: left;
        width: 250px;
    }

    .upload-img {
        display: block;
        float: left;
        width: 30px;
        height: 30px;
        margin-top: 10px;
        filter: var(--file-activity-filter) !important;
        -webkit-user-drag: none;
    }
}

.upload-slide {
    position: absolute;
    bottom: 10px;
    left: -500px;
    width: 300px;
    min-height: 50px;
    height: initial;
    background: var(--pane-list);
    box-shadow: var(--menu-shadow);
    border-radius: 10px;
    z-index: 9999;
    opacity: 0;
    overflow: hidden;
    transition-property: opacity, height;
    transition-duration: 0.5s;
    user-select: none;
    -webkit-user-select: none;

    &.on {
        opacity: 1;
        transition: opacity 0.5s;
        left: 10px;
    }

    &.open {
        height: 50px;
        transition: height 0.5s;
    }

    .upload-display {
        margin-bottom: 50px;
        width: 100%;
        padding: 0px;
        background: var(--pane-list);
        z-index: 9999;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;

        .single-upload {
            width: 100%;
            min-height: 50px;
            padding: 5px;
            box-sizing: border-box;

            .name {
                color: var(--input-foreground-framed);
                white-space: nowrap;
                line-height: 20px;
                width: 100%;
                height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 5px;
                box-sizing: border-box;
            }

            .status {
                height: 20px;
                background: var(--button-background-theme);
                border-radius: 5px;
            }

            .status-container {
                width: 100%;
                height: 30px;
                line-height: 30px;
                background: var(--input-background);
                color: var(--input-foreground-framed);
                border: 1px solid var(--main-bordercolor);
                border-radius: 5px;
                box-sizing: border-box;
                contain: paint;

                &.text {
                    padding: 0 0 0 5px;
                }
            }
        }
    }
}

.fileManager {
    .content {
        width: 100%;
        height: 470px;

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    }
}

.file-drop-frame {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 3px dashed var(--button-foreground);
    border-top-right-radius: 10px;
    background: var(--scrollbar-color);
    color: var(--button-foreground);
    font-size: 24pt;
    text-align: center;
    display: none;
    z-index: 9999;

    span {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        display: block;
        transform: translate(-50%);
        color: var(--input-foreground);
        font-size: var(--largest-font-size);
        font-weight: 600;
        text-align: center;
        width: 100%;
    }

    &.drag {
        display: initial;
    }
}

.file-upload {
    display: inline-block;
    position: relative;
    width: initial;
    height: 40px;
    line-height: 35px;
    text-align: center;
    padding: 3px 15px;
    font-size: var(--normal-font-size);
    box-sizing: border-box;
    cursor: pointer;
    background: var(--button-background-theme);
    border-radius: 5px;
    box-shadow: var(--button-shadow);
    border: none;
    cursor: pointer;
    outline: none;
    white-space: nowrap;

    &,
    * {
        color: var(--dialog-title-alt);
    }

    i {
        vertical-align: top;
    }

    &:hover,
    &:focus {
        background: var(--button-background-theme-hover);
    }

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline);
        z-index: 4;
    }

    input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        opacity: 0;

        &:focus {
            box-shadow: none !important;
        }
    }
}
.folder-list-container {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 10px;
    contain: paint;
    height: 300px;

    .title {
        flex: 0;
    }

    .folder-scroll-container {
        flex: 1;
        height: 0;
        position: relative;
        border: 1px solid var(--main-bordercolor);
        border-radius: 10px;
        contain: paint;

        .folder-scroll {
            position: relative;
            background: var(--main-background);
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;

            .loader-mask {
                z-index: 999;
                display: none;
            }

            .folder-list {
                &,
                li {
                    margin: 0px;
                    padding: 0px;
                    list-style: none;
                    width: 100%;
                }

                li {
                    div {
                        margin-bottom: 3px;
                        cursor: pointer;
                        display: flex;
                        flex-direction: row;
                        outline: none;

                        &:hover {
                            background: var(--item-hover);
                        }

                        &:focus {
                            box-shadow: 0 0 0 3px var(--focus-outline) !important;
                        }

                        &.selected {
                            &,
                            &:hover {
                                background: var(--item-selected-hover);
                            }
                        }
                    }

                    & > div {
                        & > span {
                            &:nth-child(1) {
                                &.branch,
                                &.branch-up,
                                &.branch-blank {
                                    display: block;
                                    position: relative;
                                    min-width: 24px;
                                    height: 24px;
                                    outline: none;
                                    flex: 0;

                                    &:focus {
                                        box-shadow: 0 0 0 3px
                                            var(--focus-outline) !important;
                                    }
                                }

                                &.branch,
                                &.branch-up {
                                    &:after {
                                        content: "";
                                        display: block;
                                        position: absolute;
                                        border-style: solid;
                                        border-radius: 2px;
                                        top: 10px;
                                        right: 5px;
                                    }
                                }

                                &.branch {
                                    &:after {
                                        border-width: 6.5px 6px 0 6px;
                                        border-color: var(--icon-default)
                                            transparent transparent transparent;
                                    }
                                }

                                &.branch-up {
                                    &:after {
                                        border-width: 6px 0 6px 6.5px;
                                        border-color: transparent transparent
                                            transparent var(--icon-default);
                                        top: 5px;
                                    }
                                }
                            }

                            &:nth-child(2) {
                                content: "";
                                display: block;
                                min-width: 24px;
                                height: 24px;
                                background-size: 20px 20px;
                                background-repeat: no-repeat;
                                background-position: 0 2px;
                                flex: 0;

                                &.TDF,
                                &.SOF,
                                &.DOF,
                                &.FDR {
                                    position: relative;
                                }

                                &.TDF,
                                &.SOF,
                                &.DOF {
                                    &:before {
                                        content: "";
                                        width: 13px;
                                        height: 19px;
                                        background: var(--main-background);
                                        position: absolute;
                                        top: 2px;
                                        left: 4px;
                                        border-radius: 3px;
                                    }

                                    &:after {
                                        position: absolute;
                                        top: 2px;
                                        right: 9px;
                                        font-family:
                                            "Franklin Gothic Medium",
                                            "Arial Narrow", Arial, sans-serif;
                                        font-size: var(--small-font-size);
                                        font-weight: 700;
                                        background: linear-gradient(
                                            to top,
                                            var(--toolbar-button-gradiant-start)
                                                0%,
                                            var(--toolbar-button-gradiant-end)
                                                100%
                                        );
                                        background-clip: text;
                                        -webkit-text-fill-color: transparent;
                                    }
                                }

                                &.TDF {
                                    &:before {
                                        background: linear-gradient(
                                            to bottom,
                                            var(--file-icon-tdf-start) 0%,
                                            var(--file-icon-tdf-end) 100%
                                        );
                                    }

                                    :after {
                                        content: "T";
                                    }
                                }

                                &.SOF {
                                    &:before {
                                        background: linear-gradient(
                                            to bottom,
                                            var(--file-icon-sof-start) 0%,
                                            var(--file-icon-sof-end) 100%
                                        );
                                    }

                                    :after {
                                        content: "S";
                                    }
                                }

                                &.DOF {
                                    &:before {
                                        background: linear-gradient(
                                            to bottom,
                                            var(--file-icon-dof-start) 0%,
                                            var(--file-icon-dof-end) 100%
                                        );
                                    }

                                    &:after {
                                        content: "D";
                                    }
                                }

                                &.FDR {
                                    &:before {
                                        content: "";
                                        width: 20px;
                                        height: 14px;
                                        background: linear-gradient(
                                            to bottom,
                                            var(--file-icon-fld-start) 0%,
                                            var(--file-icon-fld-end) 100%
                                        );
                                        position: absolute;
                                        top: 6px;
                                        left: 0px;
                                        border-radius: 2px;
                                    }

                                    &:after {
                                        content: "";
                                        width: 15px;
                                        height: 4px;
                                        background: var(--file-icon-fld-end);
                                        position: absolute;
                                        top: 5px;
                                        left: 0px;
                                        border-radius: 1px;
                                    }
                                }
                            }

                            &:nth-child(3) {
                                line-height: 24px;
                                display: block;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                flex: 1;
                            }
                        }
                    }
                }

                ul {
                    margin-left: 20px;
                }
            }
        }

        .folder-upload {
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            padding: 0;
            text-align: center;
            box-shadow: 0 1px 3px var(--main-shadow-dark);
        }
    }

    .folder-list-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        background: var(--dialog-content-mask);
        border-radius: 10px;
        z-index: 999;
    }
}
.grid-view {
    height: fit-content;

    &.contained {
        width: fit-content;
        max-width: 100%;
        overflow-x: auto;
    }

    &.boxed:not(.window) {
        border: 1px solid var(--grid-border-dark);
        border-radius: 5px;
        contain: paint;
        width: fit-content;

        &.rounded {
            border-radius: 10px;
        }

        &.pane {
            width: initial;
        }
    }

    div.boxed {
        border: 0 !important;
    }

    &.window {
        div.boxed {
            &.rounded {
                border-radius: 10px;
            }

            table.boxed {
                &.rounded {
                    border-radius: 10px;
                    contain: paint;

                    thead {
                        tr:first-child {
                            th:first-child {
                                border-top-left-radius: 10px;
                                box-shadow: -8px 0 0 0 #fff;
                            }
                            th:last-child {
                                border-top-right-radius: 10px;
                                box-shadow: 8px 0 0 0 #fff;
                            }
                        }
                    }

                    tbody {
                        tr:last-child {
                            td:first-child {
                                border-bottom-left-radius: 10px;
                                box-shadow: -8px 0 0 0 #fff;
                            }
                            td:last-child {
                                border-bottom-right-radius: 10px;
                                box-shadow: 8px 0 0 0 #fff;
                            }
                        }
                    }
                }

                td:first-child,
                th:first-child {
                    border-left: 1px solid var(--grid-border-dark);
                }

                td:last-child,
                th:last-child {
                    border-right: 1px solid var(--grid-border-dark);
                }

                thead {
                    tr:first-child th {
                        border-top: 1px solid var(--grid-border-dark);
                    }
                }

                tbody {
                    tr:last-child td {
                        border-bottom: 1px solid var(--grid-border-dark);
                    }
                }
            }
        }
    }

    &.window {
        thead {
            &.fixed-header {
                .filterRow {
                    td {
                        top: 30px;
                    }
                }
            }
        }
    }

    &.blank-back {
        div.fixed-header {
            background: transparent;
        }
    }

    &.no-borders {
        border: 0 !important;
        table {
            border: 0 !important;
            thead,
            tbody,
            tfoot {
                tr {
                    border: 0 !important;
                    th,
                    td {
                        border: 0 !important;
                    }
                }
            }
        }
    }

    &.round-cells {
        table {
            thead,
            tbody,
            tfoot {
                tr {
                    th,
                    td {
                        border-radius: 5px;
                    }
                }
            }
        }
    }

    &.rounded {
        .paging {
            &.boxed {
                border-radius: 0 0 10px 10px;
            }
        }
    }

    .paged-grid-container {
        div.boxed {
            border-bottom: 0 !important;
        }
    }

    .grid-container div.boxed {
        width: fit-content;
    }

    .paging {
        &.boxed {
            border-radius: 0 0 5px 5px;

            .rounded {
                border-radius: 0 0 10px 10px;
            }
        }
    }

    .scrolled-grid-container {
        height: 100%;
    }

    .paged-grid-container {
        height: calc(100% - 26px);
    }

    .scroll-frame {
        -webkit-user-select: none;
        user-select: none;
    }
}

.pane.with-tools {
    .grid-view {
        height: calc(100% - 38px) !important;
    }
}

div.fixed-header {
    background: var(--grid-header-fixed);
    overflow: auto;
    overflow-anchor: none;
    touch-action: pan-y, pan-x;
    overscroll-behavior: none;
    height: 100%;
    box-sizing: border-box;
    border-bottom: 0;
    max-width: 100%;

    &.twothirds {
        min-width: 650px;
    }
}

.pane .fixed-header .table {
    border: none;
}

.table {
    outline: none;
    border: 1px solid var(--grid-border);
    border-top: none;
    border-bottom-color: var(--grid-border-bottom);
    margin: 0;
    transform: translate3d(0, 0, 0);
    table-layout: fixed;
    outline: none;

    &.enclosed {
        border: 1px solid var(--grid-border) !important;
        border-top: 0 !important;

        tr:last-child td {
            border-bottom: 0;
        }

        th:last-child,
        td:last-child {
            border-right: 1px solid var(--grid-border);
        }
    }

    &.editable {
        position: relative;
        background: var(--grid-editable);
        cursor: text;
    }

    &.wrapped td {
        white-space: normal;
    }

    &.gridlines td {
        border-right: 1px solid var(--grid-border);
    }

    thead {
        position: relative;
        top: 0;

        &.fixed-header {
            &.occlude {
                &.small th {
                    box-shadow: 0 -40px 0 10px
                        var(--grid-header-foreground-shadow);
                }

                &.medium th {
                    box-shadow: 0 -50px 0 20px
                        var(--grid-header-foreground-shadow);
                }

                &.large th {
                    box-shadow: 0 -60px 0 30px
                        var(--grid-header-foreground-shadow);
                }
            }

            th {
                position: sticky;
                position: -webkit-sticky;
                top: 0;
                z-index: 3;
            }

            .filterRow {
                td {
                    position: sticky;
                    position: -webkit-sticky;
                    top: 30px;
                    z-index: 3;
                }
            }
        }

        .filterRow {
            td {
                padding: 3px;
                height: 30px;
                text-align: center;
                box-sizing: border-box;
                border-right: 1px solid var(--grid-border);
                border-bottom: 1px solid var(--grid-header-border-bottom);

                &.disabled {
                    background-color: var(--grid-disabled);
                    cursor: not-allowed;
                }

                &:last-child {
                    border-right: none;
                }

                label {
                    display: block;
                    cursor: text;

                    &.checkbox {
                        text-align: center;
                    }
                }

                texteditor,
                addresseditor,
                dateeditor,
                numbereditor,
                selecteditor {
                    width: 100%;
                }

                selecteditor input {
                    border: none;
                }

                &.filterIcon {
                    border-right: none;
                    padding: 0px;
                }

                button.filterIcon {
                    position: absolute;
                    top: 0;
                    left: 3px;
                    border: none;
                    width: calc(100% - 6px);
                    height: 100%;
                    padding: 0px;
                    margin: 0px;
                    background: none;
                    border-radius: 0;
                    box-sizing: border-box;
                    z-index: 1;

                    &:before {
                        content: "filter_list";
                        line-height: 18px;
                        vertical-align: middle;
                        font-family: "Material Icons" !important;
                        font-weight: normal;
                        font-style: normal;
                        font-size: var(--icon-normal-size);
                        /* Preferred icon size */
                        text-transform: none;
                        letter-spacing: normal;
                        word-wrap: normal;
                        white-space: nowrap;
                        direction: ltr;
                        /* Support for all WebKit browsers. */
                        -webkit-font-smoothing: antialiased;
                        /* Support for Safari and Chrome. */
                        text-rendering: optimizeLegibility;
                        /* Support for Firefox. */
                        -moz-osx-font-smoothing: grayscale;
                        /* Support for IE. */
                        font-feature-settings: "liga";
                        color: var(--icon-blue);
                    }
                }

                label.checkbox {
                    margin-top: 0px;
                    cursor: pointer;
                }

                input[type="text"],
                input[type="number"] {
                    display: block;
                    background: var(--main-background);
                    color: var(--foreground-color);
                    padding: 2px 10px;
                    width: calc(100% - 3px);
                    box-sizing: border-box;
                    appearance: none;
                    -moz-appearance: textfield;
                }

                input[type="number"] {
                    min-width: 50px;
                }

                input[type="checkbox"] {
                    cursor: pointer;
                }
            }
        }

        th {
            padding: 5px;
            height: 30px;
            min-height: 30px;
            font-weight: bold;
            text-align: left;
            border-top: 1px solid var(--grid-border);
            border-bottom: 1px solid var(--grid-header-border-bottom);
            top: 0;
            background: var(--grid-header-gradient-end);
            color: var(--grid-header-foreground);
            background: linear-gradient(
                to bottom,
                var(--grid-header-gradient-start),
                var(--grid-header-gradient-end)
            );
            text-shadow: 1px 1px 0 var(--grid-header-foreground-shadow);

            &.bulk-select {
                width: 30px;

                .checkbox {
                    width: fit-content;
                    margin: 0 auto;
                }
            }

            &.sortable {
                cursor: default;
            }

            @media screen {
                &:hover,
                &:focus {
                    background: var(--grid-header-gradient-end-hover);
                    background: linear-gradient(
                        to bottom,
                        var(--grid-header-gradient-start-hover),
                        var(--grid-header-gradient-end-hover)
                    );
                }
            }

            &.boolean {
                width: 40px !important;
            }

            * {
                font-weight: bold;
            }

            i {
                width: 18px;
                height: 18px;
                font-size: 16px !important;
                display: block;
                text-align: center;
                margin: 0px auto;

                &.inline-text {
                    width: 18px;
                    height: 12px;
                    line-height: 16px !important;
                    font-size: var(--icon-normal-size) !important;
                    display: inline-block;
                    overflow: hidden;
                    -webkit-user-select: none;
                    user-select: none;
                }
            }

            select {
                background: transparent;
                background-image: var(--select-icon);
            }
        }
    }

    tbody {
        width: 100%;

        tr {
            &.new-row td {
                background: var(--grid-row-cell-new);

                &.editable {
                    background: var(--grid-row-cell-neweditable);
                }
            }

            &.canAllocate td {
                background: var(--grid-row-cell-allocatable);
            }

            &.mayAllocate {
                background: var(--grid-row-cell-allocations);
            }

            &.searchAllocate {
                background: var(--grid-row-cell-allocSearch);
            }

            &.noAllocate {
                background: var(--grid-row-cell-allocBlockd);
            }

            &.past td,
            &.future td {
                border-right: 1px solid var(--grid-border);
            }

            &.past td,
            &.future td,
            &.split-same-class td,
            &.today td,
            &.replacement td,
            &.stat-over td,
            &.stat-under td,
            &.no-teacher-or-room td,
            &.et-unavailable td,
            &.available td,
            &.absent td,
            &.activity-absent td,
            &.planned-absent td,
            &.room-available td,
            &.et-available-otherDay td,
            &.set-day td,
            &.cycle-start td,
            &.overload td,
            &.restriction td,
            &.underload td,
            &.selecteddate td,
            &.split-class td,
            &.hasAdjustment td,
            &.disabled td {
                &,
                * {
                    color: var(--grid-body-foreground) !important;
                }
            }

            &.activity-unavailable td,
            &.counted-absent td,
            &.conflict td,
            &.closure td,
            &.highlight td,
            &.searchhighlight td,
            &.clash td,
            &.no-assign td,
            &.outstanding td,
            &.issue td,
            &.under-units td,
            &.conflicts-possible td,
            &.excess-units td,
            &.same td {
                &,
                * {
                    color: var(--grid-body-foreground-alt) !important;
                }
            }

            &.past td {
                background: var(--grid-row-cell-past);
            }

            &.future td,
            &.split-same-class td {
                background: var(--grid-row-cell-future);
            }

            &.selecteddate td,
            &.split-class td {
                background: var(--grid-row-cell-selected);
            }

            &.today td {
                background: var(--grid-body-background);
                border: 1px solid var(--grid-row-cell-selected);
            }

            &.replacement td {
                background: var(--grid-row-cell-replacement);
            }

            &.stat-over td {
                background: var(--grid-row-cell-stat-over);
            }

            &.stat-under td {
                background: var(--grid-row-cell-stat-under);
            }

            &.mrcg td {
                background: var(--grid-row-cell-mrcg);
            }

            &.composite:not(.primary-composite) td {
                background: var(--grid-row-cell-composite);
            }

            &.no-teacher-or-room td {
                background: var(--grid-row-cell-noteacherroom);
            }

            &.cancelled td,
            &.edited td,
            &.joined td {
                background: var(--grid-row-cell-cancelled);
            }

            &.unavailable td {
                background: var(--grid-row-cell-unavailable);
            }

            &.closure td,
            &.clash td,
            &.no-assign td {
                background: var(--grid-row-cell-clash);
            }

            &.et-unavailable td {
                background: var(--grid-row-cell-etunavailable);
            }

            &.activity-unavailable td,
            &.et-unavailable-otherDay td {
                background: var(--grid-row-cell-unavailable-activity);
            }

            &.planned-unavailable td {
                background: var(--grid-row-cell-unavailable-planned);
            }

            &.available td {
                background: var(--grid-row-cell-available);
            }

            &.reserve td,
            &.absent td {
                background: var(--grid-row-cell-absent);
            }

            &.missed td {
                background: var(--grid-body-background);
            }

            &.not-at-school td {
                background: var(--grid-row-cell-notatschool);
            }

            &.edit td {
                color: var(--grid-row-cell-edit) !important;
            }

            &.above-default td,
            &.activity-absent td {
                background: var(--grid-row-cell-absent-activity);
            }

            &.planned-absent td {
                background: var(--grid-row-cell-absent-planned);
            }

            &.room-available td {
                background: var(--grid-row-cell-roomavailable);
            }

            &.et-available-otherDay td {
                background: var(--grid-row-cell-etavailother);
            }

            &.set-day td,
            &.cycle-start td {
                background: var(--grid-row-cell-cyclestart);
            }

            &.counted-absent td,
            &.conflict td {
                background: var(--grid-row-cell-countedabsent);
            }

            &.activity-available td {
                background: var(--grid-row-cell-available-activity);
            }

            &.planned-available td {
                background: var(--grid-row-cell-available-planned);
            }

            &.has-change td {
                background: var(--grid-row-cell-has-change);
            }

            &.overload td,
            &.restriction td {
                background: var(--grid-row-cell-overload);

                &.editable {
                    background: var(--grid-row-cell-overload-editable);
                }
            }

            &.underload td {
                background: var(--grid-row-cell-underload);

                &.editable {
                    background: var(--grid-row-cell-underload-editable);
                }
            }

            &.outstanding td {
                background: var(--grid-row-cell-outstanding);
            }

            &.empty td {
                background: var(--grid-disabled);
            }

            &.issue td,
            &.under-units td {
                background: var(--grid-row-cell-issue);
            }

            &.conflicts-possible td,
            &.excess-units td {
                background: var(--grid-row-cell-edit);
            }

            &.same td {
                background: var(--grid-row-cell-same);
            }

            &.missed td {
                background: var(--grid-body-background);
            }

            &.highlight td,
            &.searchhighlight td {
                background: var(--grid-row-cell-highlight) !important;
                font-weight: 500;

                &:hover {
                    background: var(--grid-row-cell-highlight-hover) !important;
                }

                &.selected {
                    background: var(
                        --grid-row-cell-highlight-selected
                    ) !important;
                }
            }

            &.disabled td {
                background: var(--grid-row-cell-disabled) !important;
                cursor: auto;
            }

            &.group-row {
                &,
                &.selectedGridRow {
                    td {
                        background: var(--grid-border);
                        border-top: 1px solid var(--grid-hard-rule) !important;
                        border-bottom: 1px solid var(--grid-hard-rule) !important;
                        border-right: 1px solid var(--grid-hard-rule);
                    }
                }
                td.overload,
                td.restriction {
                    background: var(--grid-row-cell-overload);
                }
            }

            &.selectedGridRow {
                &.overload,
                &.restriction {
                    @media screen {
                        td {
                            background: var(--grid-row-selected-cell-overload);

                            &.selected {
                                background: var(
                                    --grid-row-selected-cell-overload-selected
                                );
                            }

                            &.editable {
                                &.selected {
                                    &,
                                    &:hover,
                                    &:focus {
                                        background: var(
                                            --grid-row-selected-cell-overload-selected
                                        );
                                    }
                                }
                            }
                        }
                    }

                    td {
                        &.editable {
                            background: var(--grid-row-selected-cell-overload);
                        }
                    }
                }

                &.underload {
                    td {
                        &.editable {
                            background: var(--grid-row-cell-underload-editable);
                        }
                    }
                }

                &.hasAdjustment {
                    td {
                        &.editable {
                            background: var(--grid-row-cell-underload-editable);
                        }
                    }
                }

                &.outstanding {
                    td {
                        background: var(--grid-row-cell-outstanding);
                    }
                }

                &.empty {
                    td {
                        background: var(--grid-disabled);
                    }
                }

                &.issue,
                &.under-units {
                    td {
                        background: var(--grid-row-cell-issue);
                    }
                }

                &.conflicts-possible,
                &.excess-units {
                    td {
                        background: var(--grid-row-cell-edit);
                    }
                }

                &.same {
                    td {
                        background: var(--grid-row-cell-same);
                    }
                }

                &.reserve {
                    td {
                        background: var(--grid-row-cell-absent);
                    }
                }

                &.missed {
                    td {
                        background: var(--grid-body-background);
                    }
                }

                &.underload,
                &.overload,
                &.restriction {
                    td div {
                        width: 100%;
                    }
                }

                td {
                    &.selected-column {
                        background: var(--grid-row-cell-selectedcol-selected);

                        &,
                        * {
                            color: var(
                                --grid-row-cell-selectedcol-selected-fore
                            );
                        }
                    }

                    &.yardDutyPeriod {
                        background: var(--grid-row-cell-yarddutyperiod);
                    }

                    &.replacement {
                        background: var(--grid-row-cell-replacement);
                    }

                    &.editable {
                        background: var(--grid-row-selected-cell-editable);
                    }

                    &.past {
                        background: var(--grid-row-cell-past-hover);
                    }

                    &.future,
                    &.split-same-class {
                        background: var(--grid-row-cell-future-hover);
                    }

                    &.selecteddate,
                    &.split-class {
                        background: var(--grid-row-cell-selected-hover);
                    }

                    &.today {
                        background: var(--grid-body-background);
                        border: 1px solid var(--grid-row-cell-selected);
                    }

                    &.stat-over {
                        background: var(--grid-row-cell-stat-over-hover);
                    }

                    &.stat-under {
                        background: var(--grid-row-cell-stat-under-hover);
                    }

                    &.mrcg {
                        background: var(--grid-row-cell-mrcg-hover);
                    }

                    &.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-composite-hover);
                    }

                    &.no-teacher-or-room {
                        background: var(--grid-row-cell-noteacherroom);
                    }

                    &.no-room,
                    &.no-room.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-noroom-hover);
                    }

                    &.room-removed,
                    &.room-removed.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-roomremoved);
                    }

                    &.no-teacher,
                    &.no-teacher.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-noteacher);
                    }

                    &.cancelled,
                    &.cancelled.selected,
                    &.composite.cancelled,
                    &.edited,
                    &.joined {
                        background: var(--grid-row-cell-cancelled-hover);
                    }

                    &.unavailable,
                    &.unavailable.selected,
                    &.unavailable.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-unavailable-hover);
                    }

                    &.closure,
                    &.clash,
                    &.no-assign {
                        background: var(--grid-row-cell-clash);
                    }

                    &.et-unavailable,
                    &.et-unavailable.selected {
                        background: var(--grid-row-cell-etunavailable-hover);
                    }

                    &.activity-unavailable,
                    &.activity-unavailable.selected,
                    &.activity-unavailable.composite:not(.primary-composite) {
                        background: var(
                            --grid-row-cell-unavailable-activity-hover
                        );
                    }

                    &.planned-unavailable,
                    &.planned-unavailable.selected,
                    &.planned-unavailable.composite:not(.primary-composite) {
                        background: var(
                            --grid-row-cell-unavailable-planned-hover
                        );
                    }

                    &.et-unavailable-otherDay,
                    &.et-unavailable-otherDay.selected {
                        background: var(
                            --grid-row-cell-unavailable-activity-hover
                        );
                    }

                    &.available,
                    &.available.selected {
                        background: var(--grid-row-cell-available-hover);
                    }

                    &.reserve,
                    &.absent,
                    &.absent.selected,
                    &.absent.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-absent-hover);
                    }

                    &.not-at-school {
                        background: var(--grid-row-cell-notatschool-hover);
                    }

                    &.edit {
                        color: var(--grid-row-cell-edit) !important;
                    }

                    &.above-default,
                    &.activity-absent,
                    &.activity-absent.selected,
                    &.activity-absent.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-absent-activity-hover);
                    }

                    &.planned-absent,
                    &.planned-absent.selected,
                    &.planned-absent.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-absent-planned-hover);
                    }

                    &.room-available,
                    &.room-available.selected,
                    &.room-available.composite:not(.primary-composite) {
                        background: var(--grid-row-cell-roomavailable-hover);
                    }

                    &.et-available-otherDay,
                    &.et-available-otherDay.selected {
                        background: var(--grid-row-cell-etavailother-hover);
                    }

                    &.set-day,
                    &.cycle-start {
                        background: var(--grid-row-cell-cyclestart);
                    }
                    &.overall-start {
                        background: var(--grid-row-cell-overallstart);
                    }

                    &.counted-absent,
                    &.counted-absent.selected,
                    &.conflict {
                        background: var(--grid-row-cell-countedabsent-hover);
                    }

                    &.activity-available,
                    &.activity-available.selected,
                    &.activity-available.composite:not(.primary-composite) {
                        background: var(
                            --grid-row-cell-available-activity-hover
                        );
                    }

                    &.planned-available,
                    &.planned-available.selected,
                    &.planned-available.composite:not(.primary-composite) {
                        background: var(
                            --grid-row-cell-available-planned-hover
                        );
                    }

                    &.has-change {
                        background: var(--grid-row-cell-has-change);
                    }

                    &.overload,
                    &.selected.overload,
                    &.restriction {
                        background: var(--grid-row-cell-overload-hover);

                        &.editable {
                            background: var(--grid-row-cell-overload-editable);
                        }
                    }

                    &.underload,
                    &.selected.underload {
                        background: var(--grid-row-cell-underload-hover);

                        &.editable {
                            background: var(--grid-row-cell-underload-editable);
                        }
                    }

                    &.hasAdjustment {
                        background: var(--grid-row-cell-underload-hover);

                        &.editable {
                            background: var(--grid-row-cell-underload-editable);
                        }
                    }

                    &.tinted-title {
                        background: var(--grid-row-cell-tintedtitle);
                    }

                    &.tinted-title-dark {
                        background: var(--grid-row-cell-tintedtitledark);
                    }

                    &.outstanding {
                        background: var(--grid-row-cell-outstanding);
                    }

                    &.empty {
                        background: var(--grid-disabled);
                    }

                    &.issue,
                    &.under-units {
                        background: var(--grid-row-cell-issue);
                    }

                    &.conflicts-possible,
                    &.excess-units {
                        background: var(--grid-row-cell-edit);
                    }

                    &.same {
                        background: var(--grid-row-cell-same);
                    }

                    &.missed {
                        background: var(--grid-body-background);
                    }

                    &.faculty {
                        background: var(--grid-row-cell-faculty);
                    }

                    &.possible {
                        background: var(--grid-row-cell-faculty) !important;
                    }

                    &.new-row {
                        &,
                        &.selected {
                            background: var(--grid-row-cell-new);
                        }
                    }

                    &.highlight,
                    &.searchhighlight {
                        background: var(--grid-row-cell-highlight) !important;
                        font-weight: 500;

                        &:hover {
                            background: var(
                                --grid-row-cell-highlight-hover
                            ) !important;
                        }

                        &.selected {
                            background: var(
                                --grid-row-cell-highlight-selected
                            ) !important;
                        }
                    }

                    &.disabled {
                        background: var(--grid-row-cell-disabled) !important;
                    }
                }

                @media screen {
                    td {
                        background: var(--grid-row-selected-cell);

                        &.selected {
                            background: var(--grid-row-selected-cell-selected);

                            &,
                            * {
                                color: var(--grid-body-foreground);
                            }

                            &.highlight,
                            &.highlight * {
                                color: var(
                                    --grid-body-foreground-alt
                                ) !important;
                            }
                        }

                        &.cancelled.corner:after {
                            content: "";
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 0;
                            height: 0;
                            display: block;
                            border-left: 10px solid transparent;
                            border-bottom: 10px solid transparent;
                            border-top: 10px solid var(--foreground-color-error);
                        }

                        &.selected-column.selected {
                            background: var(
                                --grid-row-cell-selectedcol-selected
                            );

                            &,
                            * {
                                color: var(
                                    --grid-row-cell-selectedcol-selected-fore
                                );
                            }
                        }

                        &.selected,
                        &.selected:focus,
                        &.selected.editing {
                            position: relative;
                            box-shadow: 0 0 0 3px var(--focus-outline);
                            z-index: 2;
                        }

                        &.editable {
                            &.selected {
                                background: var(
                                    --grid-row-selected-cell-editable-selected
                                );

                                &:hover,
                                &:focus {
                                    background: var(
                                        --grid-row-selected-cell-editable-selected
                                    );
                                }

                                &.hightlightGrey {
                                    background: var(
                                        --grid-row-cell-highlightgrey
                                    ) !important;

                                    &,
                                    * {
                                        color: var(
                                            --grid-body-foreground
                                        ) !important;
                                    }

                                    &:hover,
                                    &:focus {
                                        background: var(
                                            --grid-row-cell-highlightgrey
                                        ) !important;

                                        &,
                                        * {
                                            color: var(
                                                --grid-body-foreground
                                            ) !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            td {
                &.new-row {
                    background: var(--grid-row-cell-new);

                    &.editable {
                        background: var(--grid-row-cell-neweditable);
                    }
                }

                &.quick-editing {
                    background: var(--grid-row-cell-quickediting) !important;

                    input {
                        background: var(
                            --grid-row-cell-quickediting
                        ) !important;
                    }

                    * {
                        cursor: cell;
                    }
                }
            }
        }
    }

    tfoot {
        &.fixed-footer {
            td {
                position: sticky;
                position: -webkit-sticky;
                bottom: 0;
                z-index: 2;
            }
        }

        td {
            text-align: right;
            border-top: 1px solid var(--grid-border);

            &.footer-label {
                text-align: center;
            }
        }
    }

    thead,
    tbody,
    tfoot {
        tr {
            &:not(:first-child) {
                td,
                th {
                    &.hardTop {
                        border-top: 2px solid var(--grid-hard-rule) !important;
                    }
                }
            }

            &:not(:last-child) {
                td,
                th {
                    &.hardBottom {
                        border-bottom: 2px solid var(--grid-hard-rule) !important;
                    }
                }
            }

            td,
            th {
                &:not(:first-child).hardLeft {
                    border-left: 2px solid var(--grid-hard-rule) !important;
                }

                @media screen {
                    &.frozen {
                        position: sticky !important;
                        left: 0;
                        z-index: 4;

                        &.selected,
                        &.selected:focus,
                        &.selected.editing {
                            z-index: 5;
                        }
                    }

                    &.tooltip-indicator {
                        padding-left: 15px;

                        &:after {
                            right: initial;
                            left: 5px;
                        }
                    }
                }
            }

            th {
                @media screen {
                    &.frozen {
                        position: sticky !important;
                        left: 0;
                        z-index: 5;

                        &.selected,
                        &.selected:focus,
                        &.selected.editing {
                            z-index: 6;
                        }
                    }
                }
            }

            td,
            th {
                &:not(:last-child).hardRight {
                    border-right: 2px solid var(--grid-hard-rule) !important;
                }
            }
        }
    }

    tbody,
    tfoot {
        tr {
            &:last-child {
                td {
                    border-bottom: none;
                }
            }
        }
    }

    button,
    input[type="button"],
    input[type="submit"],
    input[type="clear"] {
        box-shadow: none !important;
    }

    &,
    th,
    td {
        border-spacing: 0px;
        border-collapse: separate;
        word-break: normal;
        outline: none;
        vertical-align: top;
        -webkit-user-select: none;
        user-select: none;
    }

    th,
    td {
        box-sizing: border-box;
        background: var(--grid-body-background);
        color: var(--grid-body-foreground);
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        word-break: break-word;

        &:first-child {
            min-width: 30px;
        }

        &.icon {
            width: 50px;
        }

        &.noBorder {
            border-bottom: none !important;
        }

        &.edited {
            background: var(--grid-row-cell-cancelled) !important;
        }

        div {
            width: 100%;
            min-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    td {
        text-align: left;
        padding: 2px 3px;
        min-height: 25px;
        min-width: 25px;
        border-bottom: 1px solid var(--grid-border);
        border-right: 1px solid var(--grid-header-border-right);
        vertical-align: top;
        overflow: hidden;

        &.dummy {
            border-top: 18.5px solid var(--grid-body-background);
        }

        &.cycle-day {
            &.static-label {
                display: inline-block;
            }

            &.closure,
            &.no-cycle-start {
                label.checkbox {
                    visibility: hidden;
                }
            }

            editor {
                display: block;
                padding-left: 25px;
            }
        }

        &.disabled {
            label.checkbox {
                visibility: hidden;
            }
        }

        &.waiting {
            position: relative;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--grid-row-cell-wait);
            }

            &::after {
                font-family: "Material Icons" !important;
                content: "autorenew";
                animation: spin 1.3s infinite linear;
                cursor: default;
                background: none;
                width: 1em;
                height: 1em;
                position: absolute;
                top: calc(50% - 0.45em);
                right: calc(50% - 0.45em);
                font-size: var(--icon-larger-size);
                color: var(--grid-header-foreground);
            }
        }

        label.checkbox {
            margin: 0 !important;
            text-align: center;
            display: inline-block;
        }

        .static-label {
            display: inline-block;
        }

        &.title {
            label {
                display: block;
                clear: both;
            }
        }

        &.headerTitle span {
            font-weight: bold;
        }

        &.editable {
            position: relative;
            background: var(--grid-row-cell-editable);
            cursor: text;

            @media screen {
                &:hover,
                &:focus {
                    background: var(--grid-row-cell-editable-hover);

                    &,
                    * {
                        color: var(--grid-body-foreground) !important;
                    }
                }
            }

            div.NumberSelector,
            div.DateSelector,
            div.EditableList,
            input[type="text"],
            input[type="number"],
            input[type="date"],
            select,
            textarea {
                background: var(--grid-row-cell-editable-selected);
            }

            div.EditableList,
            div.NumberSelector,
            div.DateSelector,
            & > input[type="text"],
            & > input[type="number"],
            & > input[type="date"],
            & > select,
            & > textarea {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                border: none;
                background: var(--grid-row-cell-editable-selected);
            }

            & > input[type="text"],
            & > input[type="number"],
            & > input[type="date"] {
                padding: 2px 5px;
                top: -0.5px;
                left: 0px;
                box-sizing: border-box;
            }

            div.NumberSelector input[type="text"],
            div.DateSelector input[type="text"] {
                background: transparent;
            }

            editor {
                & > input[type="text"],
                & > input[type="number"],
                & > input[type="date"],
                & > select,
                & > textarea {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                    border: none;
                    background: var(--grid-row-cell-editable-selected);
                }

                & > input[type="text"],
                & > input[type="number"],
                & > input[type="date"] {
                    padding: 2px 5px;
                    top: -0.5px;
                    left: 0px;
                    box-sizing: border-box;
                }
            }

            &.searchhighlight {
                &.selected {
                    & > input[type="text"],
                    & > input[type="number"],
                    & > input[type="date"],
                    & > select,
                    & > textarea,
                    editor > input[type="text"],
                    editor > input[type="number"],
                    editor > input[type="date"],
                    editor > select,
                    editor > textarea,
                    div.NumberSelector,
                    div.DateSelector,
                    div.EditableList {
                        color: var(--grid-body-foreground-alt) !important;
                        background: var(--grid-row-cell-highlight-selected);
                    }
                }
            }

            &.highlight {
                &.selected {
                    & > input[type="text"],
                    & > input[type="number"],
                    & > input[type="date"],
                    & > select,
                    & > textarea,
                    editor > input[type="text"],
                    editor > input[type="number"],
                    editor > input[type="date"],
                    editor > select,
                    editor > textarea,
                    div.NumberSelector,
                    div.DateSelector,
                    div.EditableList {
                        color: var(--grid-body-foreground-alt) !important;
                        background: var(--grid-row-cell-highlight-selected);
                    }
                }
            }
        }

        &.canAllocate {
            background: var(--grid-row-cell-allocatable);
        }

        &.mayAllocate {
            background: var(--grid-row-cell-allocations);
        }

        &.searchAllocate {
            background: var(--grid-row-cell-allocSearch);
        }

        &.noAllocate {
            background: var(--grid-row-cell-allocBlockd);
        }

        &.yardDutyPeriod {
            background: var(--grid-row-cell-yarddutyperiod);
        }

        &.subitem {
            background: var(--grid-row-cell-subitem);
        }

        &.yard-duty {
            background: var(--grid-row-cell-yardduty);
        }

        &.selected-column {
            background: var(--grid-row-cell-selectedcol);
        }

        &.past,
        &.future {
            border-right: 1px solid var(--grid-border);
        }

        &.past,
        &.future,
        &.split-same-class,
        &.today,
        &.replacement,
        &.stat-over,
        &.stat-under,
        &.no-teacher-or-room,
        &.cancelled,
        &.edited,
        &.joined,
        &.unavailable,
        &.et-unavailable,
        &.available,
        &.absent,
        &.activity-absent,
        &.planned-absent,
        &.room-available,
        &.et-available-otherDay,
        &.set-day,
        &.cycle-start,
        &.overload,
        &.restriction,
        &.underload,
        &.selecteddate,
        &.split-class,
        &.hasAdjustment,
        &.disabled {
            &,
            * {
                color: var(--grid-body-foreground) !important;
            }
        }

        &.activity-unavailable,
        &.counted-absent,
        &.conflict,
        &.closure,
        &.highlight,
        &.searchhighlight,
        &.clash,
        &.no-assign,
        &.outstanding,
        &.issue,
        &.under-units,
        &.conflicts-possible,
        &.excess-units,
        &.same {
            &,
            * {
                color: var(--grid-body-foreground-alt) !important;
            }

            &.selected {
                &:not(.same):not(.closure):not(.clash):not(.no-assign) {
                    &,
                    * {
                        color: var(--grid-body-foreground);
                    }
                }
            }
        }

        &.highlight.selected {
            &:not(.same):not(.closure):not(.clash):not(.no-assign) {
                &,
                * {
                    color: var(--grid-body-foreground-alt) !important;
                }
            }
        }

        &.past {
            background: var(--grid-row-cell-past);
        }

        &.future,
        &.split-same-class {
            background: var(--grid-row-cell-future);
        }

        &.selecteddate,
        &.split-class {
            background: var(--grid-row-cell-selected);
        }

        &.today {
            background: var(--grid-body-foreground-alt);
            border: 1px solid var(--grid-row-cell-selected);
        }

        &.replacement {
            background: var(--grid-row-cell-replacement);
        }

        &.stat-over {
            background: var(--grid-row-cell-stat-over);
        }

        &.stat-under {
            background: var(--grid-row-cell-stat-under);
        }

        &.mrcg {
            background: var(--grid-row-cell-mrcg);
        }

        &.composite:not(.primary-composite) {
            background: var(--grid-row-cell-composite);
        }

        &.no-teacher-or-room,
        &.no-teacher-or-room.composite:not(.primary-composite) {
            background: var(--grid-row-cell-noteacherroom);
        }

        &.no-room,
        &.no-room.composite:not(.primary-composite) {
            background: var(--grid-row-cell-noroom);
        }

        &.room-removed,
        &.room-removed.composite:not(.primary-composite) {
            background: var(--grid-row-cell-roomremoved);
        }

        &.no-teacher,
        &.no-teacher.composite:not(.primary-composite) {
            background: var(--grid-row-cell-noteacher);
        }

        &.seat-deficit,
        &.seat-deficit.composite:not(.primary-composite) {
            font-weight: 700;
        }

        &.room-edit-bold {
            &,
            * {
                font-weight: 700;
                color: var(--grid-row-cell-roomedit);
            }
        }

        &.cancelled,
        &.composite.cancelled {
            background: var(--grid-row-cell-cancelled);
        }

        &.edited,
        &.joined {
            background: var(--grid-row-cell-cancelled) !important;
        }

        &.unavailable,
        &.unavailable.composite:not(.primary-composite) {
            background: var(--grid-row-cell-unavailable);
        }

        &.et-unavailable {
            background: var(--grid-row-cell-etunavailable);
        }

        &.activity-unavailable,
        &.activity-unavailable.composite:not(.primary-composite),
        &.et-unavailable-otherDay {
            background: var(--grid-row-cell-unavailable-activity);
        }

        &.planned-unavailable,
        &.planned-unavailable.composite:not(.primary-composite) {
            background: var(--grid-row-cell-unavailable-planned);
        }

        &.available {
            background: var(--grid-row-cell-available);
        }

        &.reserve,
        &.absent,
        &.absent.composite:not(.primary-composite) {
            background: var(--grid-row-cell-absent);
        }

        &.not-at-school {
            background: var(--grid-row-cell-notatschool);
        }

        &.edit {
            &,
            * {
                color: var(--grid-row-cell-edit) !important;
            }
        }

        &.above-default,
        &.activity-absent,
        &.activity-absent.composite:not(.primary-composite) {
            background: var(--grid-row-cell-absent-activity);
        }

        &.planned-absent,
        &.planned-absent.composite:not(.primary-composite) {
            background: var(--grid-row-cell-absent-planned);
        }

        &.room-available,
        &.room-available.composite:not(.primary-composite) {
            background: var(--grid-row-cell-roomavailable);
        }

        &.et-available-otherDay {
            background: var(--grid-row-cell-etavailother);
        }

        &.set-day,
        &.cycle-start {
            background: var(--grid-row-cell-cyclestart);
        }

        &.closure,
        &.clash,
        &.no-assign {
            background: var(--grid-row-cell-clash) !important;
        }

        &.selecteddate {
            background: var(--grid-row-cell-selected);
            border-right: 1px solid var(--grid-border);
        }

        &.split-class {
            background: var(--grid-row-cell-selected);
        }

        &.counted-absent,
        &.conflict {
            background: var(--grid-row-cell-countedabsent);
        }

        &.activity-available,
        &.activity-available.composite:not(.primary-composite) {
            background: var(--grid-row-cell-available-activity);
        }

        &.planned-available,
        &.planned-available.composite:not(.primary-composite) {
            background: var(--grid-row-cell-available-planned);
        }

        &.has-change {
            background: var(--grid-row-cell-has-change);
        }

        &.overload,
        &.restriction {
            background: var(--grid-row-cell-overload);

            &.editable {
                background: var(--grid-row-cell-overload-editable);
            }
        }

        &.underload {
            background: var(--grid-row-cell-underload);

            &.editable {
                background: var(--grid-row-cell-underload-editable);
            }
        }

        &.faculty,
        &.possible {
            background: var(--grid-row-cell-faculty);
        }

        &.hasAdjustment {
            background: var(--grid-row-cell-underload);

            &.editable {
                background: var(--grid-row-cell-underload-editable);
            }
        }

        &.tinted-title {
            background: var(--grid-row-cell-tintedtitle);
        }

        &.tinted-title-dark {
            background: var(--grid-row-cell-tintedtitledark);
        }

        &.outstanding {
            background: var(--grid-row-cell-outstanding);
        }

        &.empty {
            background: var(--grid-disabled);
        }

        &.issue,
        &.under-units {
            background: var(--grid-row-cell-issue);
        }

        &.conflicts-possible,
        &.excess-units {
            background: var(--grid-row-cell-edit);
        }

        &.same {
            background: var(--grid-row-cell-same) !important;
        }

        &.missed {
            background: var(--grid-body-background);
        }

        &.highlight,
        &.searchhighlight {
            background: var(--grid-row-cell-highlight) !important;
            font-weight: 500;

            &:hover {
                background: var(--grid-row-cell-highlight-hover) !important;
            }

            &.selected {
                background: var(--grid-row-cell-highlight-selected) !important;
            }
        }

        &.disabled {
            background: var(--grid-row-cell-disabled) !important;
            cursor: auto;
        }

        &.button {
            background: var(--grid-body-background) !important;
            padding: 0;
            width: 50px !important;
        }

        &.grid-error {
            &,
            &:hover,
            &:focus {
                &,
                * {
                    color: var(--foreground-color-error) !important;
                }
            }
        }

        &.has-check editor {
            width: calc(100% - 25px);
            text-overflow: ellipsis;
        }

        @media screen {
            &.cancelled.corner:after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 0;
                height: 0;
                display: block;
                border-left: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-top: 10px solid var(--foreground-color-error);
            }

            &.selected-column.selected {
                background: var(--grid-row-cell-selectedcol-selected);
                color: var(--grid-row-cell-selectedcol-selected-fore);
            }
        }

        select {
            background: transparent;
            padding-left: 5px;
            box-sizing: border-box;
        }

        span {
            &.button {
                display: block;
                width: 50px;
                height: 30px;
                position: relative;
                overflow: hidden;

                i.button {
                    background: var(--grid-body-background);
                    color: var(--grid-header-foreground);
                    width: 50px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    cursor: pointer;
                    outline: none;

                    &:hover,
                    &:focus {
                        background: var(--grid-body-background-hover);
                        color: var(--grid-body-foreground);
                    }

                    &:focus {
                        box-shadow: 0 0 0 3px var(--focus-outline);
                    }
                }
            }
        }

        label {
            &.cell-check {
                display: inline;
                padding-right: 5px;
            }
        }
    }

    input[type="button"],
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="checkbox"],
    select,
    textarea {
        background: var(--grid-input);
        border-radius: 0 !important;
        border: none !important;
        width: 100%;
        padding: 0;
        margin: 0;

        &:focus {
            outline: 0;
            box-shadow: none !important;
        }
    }

    editor .static {
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        width: initial !important;
        height: initial !important;
        line-height: 18px !important;
        padding: 0.5px 0 0 !important;
        margin: 0 !important;
    }

    input[type="checkbox"] {
        position: relative;
    }

    label {
        input[type="checkbox"] {
            position: relative;
            top: 3px;
            width: auto;
        }
    }

    .selectable {
        cursor: pointer;
    }

    overflow {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 250px;
    }

    &.fixed-header {
        border-left: 0;

        &.full {
            border-top-width: 0 !important;
        }
    }

    &.fixed-footer {
        border-bottom: 0;
    }

    &.boxed {
        border-right: 0;
        border-bottom: 0;
        border-left: 0;

        th {
            border-top: 0;
        }

        thead {
            &.fixed-header {
                .filterRow td {
                    top: 31px;
                }
            }
        }

        tbody tr:last-child td {
            border-bottom: 0;
        }

        th:last-child,
        td:last-child {
            border-right: 0;
        }

        &.enclosed {
            border-bottom: 0 !important;
        }
    }

    &.unboxed thead th {
        border-top: 1px solid transparent;
        top: 0;
    }
}

.paging {
    position: relative;
    min-height: 25px;
    overflow: hidden;
    display: flex;

    &.twothirds {
        min-width: 900px;
    }

    label {
        position: absolute;
        top: 0px;
        right: 0px;
        -webkit-user-select: none;
        user-select: none;
    }

    .paging-shadow {
        position: absolute;
        top: -5px;
        left: 0;
        width: 100%;
        height: 5px;
        box-shadow: 0 0 3px var(--grid-header-foreground-shadow-dark);
        z-index: 9;
    }

    .paging-controls {
        flex: 1;

        .pagination,
        .pagination li {
            flex: 1;
            display: inline-block;
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 1;

            li {
                a {
                    display: inline-block;
                    min-width: 25px;
                    height: 25px;
                    line-height: 25px;
                    padding: 0px 8px;
                    border-right: 1px solid var(--grid-header-border-bottom);
                    border-radius: 0;
                    text-align: center;
                    text-decoration: none;
                    color: var(--input-foreground);
                    box-sizing: border-box;
                    font-size: var(--normal-font-size);
                    background: var(--toolbar-button-gradiant-end-disabled);
                    background: linear-gradient(
                        to bottom,
                        var(--toolbar-button-gradiant-start-disabled),
                        var(--toolbar-button-gradiant-end-disabled)
                    );
                    box-shadow: none;
                    vertical-align: top;
                    -webkit-user-drag: none;

                    &:hover,
                    &:focus {
                        background: var(--toolbar-button-gradiant-end-active);
                        background: linear-gradient(
                            to bottom,
                            var(--toolbar-button-gradiant-start-active),
                            var(--toolbar-button-gradiant-end-active)
                        );
                    }
                }

                &[Title="Previous Page"],
                &[Title="Next Page"] {
                    &,
                    &.disabled {
                        a {
                            &,
                            &:hover,
                            &:focus {
                                padding: 0 3px;
                                min-width: 20px;
                                color: transparent !important;
                            }

                            &::after {
                                content: "chevron_left";
                                font: var(--icon-font) !important;
                                font-size: var(--icon-normal-size) !important;
                                line-height: 25px !important;
                                letter-spacing: -14px !important;
                                color: var(--icon-default);
                                position: relative;
                                left: -10px;
                            }
                        }
                    }
                }

                &[Title="Next Page"] {
                    &,
                    &.disabled {
                        a::after {
                            content: "chevron_right";
                        }
                    }
                }

                &.active {
                    a {
                        background: var(--toolbar-button-gradiant-start);
                        background: linear-gradient(
                            to bottom,
                            var(--toolbar-button-gradiant-start),
                            var(--toolbar-button-gradiant-end)
                        );
                    }
                }

                &.disabled {
                    a {
                        &,
                        &:hover,
                        &:focus {
                            background: var(
                                --toolbar-button-gradiant-end-hover
                            ) !important;
                            background: linear-gradient(
                                to bottom,
                                var(--toolbar-button-gradiant-start-hover),
                                var(--toolbar-button-gradiant-end-hover)
                            ) !important;
                            color: var(--input-foreground-disabled) !important;
                            cursor: default;
                        }
                    }
                }

                &:hover,
                &:focus,
                &:focus-within {
                    z-index: 2;
                }
            }
        }
    }

    .page-size-selector {
        display: flex;
        flex: 0;

        & > span {
            height: 25px;
            line-height: 25px;
        }

        .select-editor-container {
            margin-left: 10px;

            &,
            selecteditor {
                width: 50px;
                height: 25px;

                input {
                    width: 50px;
                    height: 25px;
                    border: 0 !important;
                    border-left: 1px solid var(--grid-header-border-bottom) !important;
                    border-radius: 0;
                    color: var(--grid-body-foreground);
                    box-sizing: border-box;
                    font-size: var(--normal-font-size);
                    background: var(--grid-header-gradient-end);
                    background: linear-gradient(
                        to bottom,
                        var(--grid-header-gradient-start),
                        var(--grid-header-gradient-end)
                    );

                    &:hover,
                    &:focus {
                        border: 0 !important;
                        border-left: 1px solid var(--grid-header-border-bottom) !important;
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 1023px) {
    .grid-view {
        &.full-height {
            .scroll-frame {
                height: 100% !important;
            }
        }
    }
}
.import-dialog {
    .table th select {
        padding: 0 16px 0 5px;
        width: initial;
    }
}
.panels {
    display: flex;
    flex-direction: row;
    overflow-x: auto;

    .list {
        background: var(--main-background);
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        flex: 0;
    }

    .content {
        flex: 1;
    }
}
.legend-container {
    display: inline-flex;
    vertical-align: top;
    position: relative;
    border: 1px solid var(--toolbar-button-border);
    border-radius: 10px;
    box-sizing: border-box;
    min-height: 28px;

    .title {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        height: var(--main-height);
        line-height: 19px;
        background: linear-gradient(
            to bottom,
            var(--button-background-alt) 0%,
            var(--button-background-alt-hover) 100%
        );
        font-weight: 700;
        padding: 5px 15px 0 10px;
        color: var(--header-three);
    }
}

.legend-item {
    display: flex;
    padding: 4px 5px 0;

    .legend-colour {
        position: relative;
        width: 13px;
        height: 13px;
        min-width: 13px;
        flex: 0 !important;
        top: 3px;
        margin-right: 5px;
        border-radius: 7px;
        border: 1px solid var(--main-bordercolor-alt);

        &.squared {
            width: 20px;
            height: 20px;
            top: -1px;
            border-radius: 4px;
            text-align: center;
        }

        &.no-colour {
            width: 0px !important;
            border: 0 !important;
        }

        &.past {
            background: var(--grid-row-cell-past);
        }

        &.future,
        &.split-same-class {
            background: var(--grid-row-cell-future-hover);
        }

        &.selecteddate {
            background: var(--grid-row-cell-selected);
        }

        &.today {
            background: var(--grid-body-background);
        }

        &.replacement {
            background: var(--grid-row-cell-replacement);
        }

        &.stat-over {
            background: var(--grid-row-cell-stat-over);
        }

        &.stat-under {
            background: var(--grid-row-cell-stat-under);
        }

        &.mrcg {
            background: var(--grid-row-cell-mrcg);
        }

        &.composite {
            background: var(--grid-row-cell-composite);
        }

        &.no-teacher-or-room {
            background: var(--grid-row-cell-noteacherroom);
        }

        &.no-room {
            background: var(--grid-row-cell-noroom);
        }

        &.room-removed {
            background: var(--grid-row-cell-roomremoved);
        }

        &.no-teacher {
            background: var(--grid-row-cell-noteacher);
        }

        &.cancelled,
        &.edited,
        &.joined {
            background: var(--grid-row-cell-cancelled);
        }

        &.unavailable {
            background: var(--grid-row-cell-unavailable);
        }

        &.outstanding {
            background: var(--grid-row-cell-outstanding);
        }

        &.empty {
            background: var(--grid-disabled);
        }

        &.possible {
            background: var(--grid-row-cell-faculty);
        }

        &.grid-error {
            color: var(--foreground-color-error) !important;
        }

        &.closure,
        &.clash,
        &.no-assign {
            background: var(--grid-row-cell-clash);
        }

        &.et-unavailable {
            background: var(--grid-row-cell-etunavailable);
        }

        &.activity-unavailable,
        &.et-unavailable-otherDay {
            background: var(--grid-row-cell-unavailable-activity);
        }

        &.planned-unavailable {
            background: var(--grid-row-cell-unavailable-planned);
        }

        &.available {
            background: var(--grid-row-cell-available);
        }

        &.reserve,
        &.absent {
            background: var(--grid-row-cell-absent);
        }

        &.not-at-school {
            background: var(--grid-row-cell-notatschool);
        }

        &.above-default,
        &.activity-absent {
            background: var(--grid-row-cell-absent-activity);
        }

        &.planned-absent {
            background: var(--grid-row-cell-absent-planned);
        }

        &.room-available {
            background: var(--grid-row-cell-roomavailable);
        }

        &.et-available-otherDay {
            background: var(--grid-row-cell-etavailother);
        }

        &.set-day,
        &.cycle-start {
            background: var(--grid-row-cell-cyclestart);
        }

        &.selecteddate,
        &.split-class {
            background: var(--grid-row-cell-selected);
        }

        &.counted-absent,
        &.conflict {
            background: var(--grid-row-cell-countedabsent);
        }

        &.activity-available {
            background: var(--grid-row-cell-available-activity);
        }

        &.planned-available {
            background: var(--grid-row-cell-available-planned);
        }

        &.has-change {
            background: var(--grid-row-cell-has-change);
        }

        &.overload,
        &.restriction {
            background: var(--grid-row-cell-overload);
        }

        &.underload {
            background: var(--grid-row-cell-underload);
        }

        &.missed {
            background: var(--grid-body-background);
        }

        &.faculty {
            background: var(--grid-row-cell-faculty);
        }

        &.issue,
        &.under-units {
            background: var(--grid-row-cell-issue);
        }

        &.conflicts-possible,
        &.excess-units {
            background: var(--grid-row-cell-edit);
        }

        &.hasAdjustment {
            background: var(--grid-row-cell-underload);
        }

        &.tinted-title {
            background: var(--grid-row-cell-tintedtitle);
        }

        &.tinted-title-dark {
            background: var(--grid-row-cell-tintedtitledark);
        }

        &.highlight,
        &.searchhighlight {
            background: var(--grid-row-cell-highlight);
        }

        &.disabled {
            background: var(--grid-row-cell-disabled);
        }
    }

    span {
        white-space: nowrap;

        &.seat-deficit {
            font-weight: 700;
        }

        &.edit {
            color: var(--grid-row-cell-edit);
        }

        &.room-edit-bold {
            color: var(--grid-row-cell-edit);
            font-weight: 700;
        }

        &.error {
            color: var(--foreground-color-error);
        }
    }
}
.list-container {
    width: initial;
    height: 100%;
    flex: 0;
    background: var(--main-background);
    border-right: 1px solid var(--main-bordercolor-alt);
    z-index: 6;
    display: flex;
    flex-direction: column;

    .list-container-header,
    .list-container-footer {
        flex: 0;
        background: var(--background-color);
        color: var(--foreground-color);
        line-height: 30px;
        font-size: 12pt;
        font-weight: 600;
        text-align: left;
        float: left;
        box-sizing: border-box;
    }

    .list-container-header {
        border-bottom: 1px solid var(--main-bordercolor-alt);

        &.content {
            font-size: 10pt;
            font-weight: 500;
            background: var(--main-background);
            border: 0;
            border-top: 1px solid var(--main-bordercolor-alt);
        }
    }

    .list-container-items {
        flex: 1;
        overflow: auto;
        touch-action: pan-y, pan-x;
        overscroll-behavior: none;

        .children {
            &,
            li {
                padding: 0;
                margin: 0;
            }

            li {
                list-style: none;
                background: var(--main-background);

                a {
                    width: 100%;
                    padding: 2px 10px;
                    color: var(--foreground-color);
                    display: block;
                    cursor: pointer;
                    -webkit-user-select: none;
                    user-select: none;
                    outline: 0;
                    white-space: nowrap;
                    box-sizing: border-box;

                    &.current {
                        background: var(--button-background);
                        z-index: 2;

                        &:hover,
                        &:focus {
                            background: var(--button-background-hover);
                        }
                    }

                    &.checkout {
                        &.my {
                            background: var(--button-background-green-disabled);

                            &:hover,
                            &:focus {
                                background: var(
                                    --button-foreground-green-disabled
                                );
                            }

                            &.current {
                                background: var(
                                    --button-background-green-current
                                );
                            }
                        }
                        &:not(.my) {
                            background: var(--button-background-red-disabled);

                            &:hover,
                            &:focus {
                                background: var(
                                    --button-foreground-red-disabled
                                );
                            }

                            &.current {
                                background: var(
                                    --button-background-red-current
                                );
                            }
                        }
                    }

                    &:hover,
                    &:focus {
                        background: var(--background-color);
                        text-decoration: none;
                    }

                    &:focus {
                        background: var(--button-background);
                        box-shadow: 0 0 0 3px var(--focus-outline) !important;
                    }
                }
            }
        }
    }

    .list-container-footer {
        border-top: 1px solid var(--main-bordercolor-alt);
    }
}
body {
    .page-frame {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        background: var(--page-header);
        opacity: 0;

        .mobile-pin {
            display: none;

            &,
            * {
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
            }
        }

        .page-header {
            flex: 0;
            flex-basis: 40px;
            background: var(--page-header);
            box-sizing: border-box;

            &,
            * {
                cursor: default;
            }

            .school-title {
                display: block;
                width: 100%;
                font-weight: normal;
                font-size: var(--heading-font-size);
                font-family: Verdana;
                text-decoration: none !important;
                border: none !important;
                height: 50px;
                line-height: 50px;
            }

            .page-title {
                padding-left: 40px;
                position: relative;
                white-space: nowrap;
                -webkit-user-select: none;
                user-select: none;
                -webkit-transition: padding-right 0.2s;
                transition: padding-right 0.2s;

                p {
                    font-size: var(--largest-font-size);
                    color: var(--foreground-color);
                    line-height: 40px;
                    height: 40px;
                    white-space: nowrap;
                    margin: 0;
                    display: inline-block;
                    background: var(--page-header);
                    vertical-align: top;

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

                    &:last-child {
                        position: sticky;
                        right: 0px;
                        padding: 0 45px 0 5px;
                    }
                }
            }
        }

        .page-body {
            flex: 1;
            display: flex;
            box-sizing: border-box;
            max-height: calc(100% - 32px);
            flex-direction: column;
            border-top-right-radius: 10px;
            overflow: hidden;
            contain: paint;

            .tab-frame {
                flex: 1;
                display: flex;
                border: none;
                padding: 0;
                position: relative;
                color: var(--foreground-color);
                background: var(--page-header);
                box-sizing: border-box;
                border-top-right-radius: 10px;
                overflow: hidden;
                contain: paint;
                touch-action: pan-y, pan-x;
                min-width: 320px;
                box-shadow: 0 0 0 5px var(--background-color);

                &::before {
                    content: "";
                    position: absolute;
                    display: inline-block;
                    z-index: 12;
                    width: calc(100% + 10px);
                    height: calc(100% + 10px);
                    top: 0;
                    left: -10px;
                    pointer-events: none;
                    border-top-right-radius: 10px;
                    box-shadow:
                        inset 0 0 5px 2px var(--main-shadow-frame),
                        0 0 0 5px var(--page-header);
                }

                .tab-content {
                    position: relative;
                    box-sizing: border-box;
                    max-width: 100%;
                    max-height: 100%;
                    overflow: auto;
                    overscroll-behavior: none;
                    background: var(--main-background);
                    flex: 1;
                }
            }
        }
    }

    &.search-open {
        .page-frame {
            .page-body {
                .page-content {
                    .tab-frame {
                        height: calc(100% - 80px);
                    }
                }
            }
        }
    }

    &.sidebar-pinned {
        .page-frame {
            padding: 0;
        }
    }
}

.angular-view.full {
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-anchor: none;
    touch-action: pan-y, pan-x;
    overscroll-behavior: none;
    box-sizing: border-box;

    .docked {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        box-sizing: border-box;
    }
}

.replace-open .tab-frame {
    height: calc(100% - 114px);
}

.dialogs-container {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .page-frame {
        padding-right: 0 !important;
    }

    .mobile-pin {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        background: var(--mobile-pin);
        transition: right 0.2s ease-in-out;
        box-shadow: var(--mobile-pin-shadow);
        border-radius: 10px 0 0 10px;
        outline: none;
        -webkit-user-select: none;
        user-select: none;
        opacity: 0;
        z-index: 16;

        &:focus {
            div {
                box-shadow: 0 0 0 2px var(--focus-outline) !important;
            }
        }

        div {
            position: absolute;
            left: 11px;
            width: 20px;
            height: 3px;
            background: var(--foreground-color);
            border-radius: 3px;

            &:nth-child(1) {
                top: 11px;
            }

            &:nth-child(2) {
                top: 19px;
            }

            &:nth-child(3) {
                top: 27px;
            }
        }
    }
}

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

.legal-container {
    padding-top: 10px;
    text-align: right;
    color: var(--anchor-foreground);

    a {
        &,
        &:visited {
            color: var(--anchor-foreground);
            text-decoration: none;
        }

        &:hover {
            &,
            &:visited {
                text-decoration: underline;
            }
        }
    }
}

.connection-status {
    position: fixed;
    bottom: -40px;
    left: calc(100% / 2 - 75px);
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: 700;
    color: var(--button-foreground-error);
    background: var(--dialog-title-red);
    box-shadow: var(--button-shadow);
    border-radius: 50px;
    z-index: 9999999;
    transition: bottom 0.2s ease-in-out;

    &,
    * {
        font-weight: 700;
        -webkit-user-select: none;
        user-select: none;
    }

    &.offline {
        bottom: 10px;
    }

    &.changes {
        left: calc(50% - 125px);
        width: 300px;
        cursor: pointer;
    }

    i {
        color: var(--button-foreground-error);
        font-size: var(--icon-small-size) !important;
        line-height: 30px !important;
        vertical-align: top;
    }
}

.app-update {
    position: fixed;
    bottom: -60px;
    left: 10px;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    background: var(--button-background-theme);
    box-shadow: var(--button-shadow-theme);
    border-radius: 50px;
    z-index: 998;
    transition: bottom 0.2s ease-in-out;
    animation: background-pulse 2s infinite none;
    cursor: pointer;

    &,
    * {
        -webkit-user-select: none;
        user-select: none;
    }

    &.update {
        bottom: 10px;
    }

    i {
        color: var(--button-foreground-theme);
        font-size: 30px !important;
        line-height: 50px !important;
        vertical-align: top;
    }
}

@media only screen and (max-width: 1023px) {
    body .page-frame .page-body .page-content {
        border-top-right-radius: 0;

        .tab-frame {
            border-top-right-radius: 0;

            &::before {
                border-top-right-radius: 0;
                box-shadow: inset 0 0 5px 2px var(--main-shadow-frame);
                width: calc(100% + 20px);
            }
        }
    }
}
.ui-widget-header {
    top: 0;
}

.ui-datepicker {
    padding: 0px 2px 2px 2px;
    width: initial;
    border: 1px solid var(--main-bordercolor);
    border-radius: 0px;
}

.ui-datepicker-calendar,
.ui-datepicker table {
    margin: 0px 0px;
}

.ui-widget-header {
    position: relative;
    left: -2px;
    width: 102%;
    text-align: center;
    padding: 16px 0px 6px 0px;
    font-size: var(--largest-font-size);
    background: none;
    border: none;
    border-radius: 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid var(--main-bordercolor);
    color: var(--input-foreground);
    overflow: hidden;
}

.ui-datepicker .ui-datepicker-title {
    position: relative;
    top: -2px;
    line-height: 20px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 1px;
    width: 19px;
    height: 19px;
}

.ui-widget-header .ui-icon {
    background-image: url(/graphics/icon-map.png);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    border: 1px solid transparent;
    border-top-width: 2px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next {
    right: 1px;
}

.ui-autocomplete {
    background-color: var(--main-background);
    color: var(--input-foreground);
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow: auto;
    overflow-anchor: none;
    touch-action: pan-y, pan-x;
    overscroll-behavior: none;
    z-index: 1100;
}
.message-dialog {
    height: 530px;
    width: 100%;
    padding: 0 0 10px 0 !important;

    &.broadcast {
        .message-listing {
            display: none;
        }

        .message-thread {
            display: none;
        }

        .broadcast-controls {
            display: block;
        }

        .message-ui {
            &.dragdrop {
                &::after {
                    line-height: 470px;
                }
            }
        }

        .rich-editor {
            ng-quill-editor {
                .ql-container {
                    height: 400px;
                    min-height: 400px;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    border-top: 0;
                }
            }
        }
    }

    &.message-open {
        .message-thread {
            min-height: 150px;
        }
    }

    &.big-edit:not(.broadcast) {
        .rich-editor {
            ng-quill-editor {
                .ql-container {
                    height: 80px;
                    min-height: 80px;
                }
            }
        }
    }

    &.image-edit {
        .rich-editor {
            ng-quill-editor {
                .ql-container {
                    height: 165px;
                    min-height: 165px;
                }
            }
        }
    }

    &:not(.disable-text) {
        .message-ui {
            &.dragdrop {
                &::after {
                    content: "Drop Images Here";
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: calc(100% - 2px);
                    height: calc(100% - 2px);
                    background: var(--item-dragged-mask);
                    backdrop-filter: blur(5px);
                    text-align: center;
                    line-height: 40;
                    border: 1px dashed var(--main-bordercolor);
                    border-radius: 5px;
                    font-weight: 700;
                    color: var(--header-two);
                    z-index: 99;
                }
            }
        }
    }

    &:not(.broadcast) {
        .rich-editor {
            .ql-container {
                border-top: 1px solid var(--rich-editor-border-light);
            }

            ng-quill-toolbar {
                display: none;
            }
        }

        &.image-edit {
            .rich-editor {
                ng-quill-editor {
                    .ql-container img {
                        max-width: 150px;
                        max-height: 150px;
                    }
                }
            }
        }
    }

    h4 {
        line-height: 55px;
    }

    .close-button-tools {
        display: none;
    }

    .new-message {
        display: none;
    }

    .collection-item {
        margin: 0 0 10px 0;
        padding: 0;
    }

    .message-listing {
        max-width: 203px;
        min-width: 203px;
        min-height: 100%;
        margin-right: 10px;
        border-right: 1px solid var(--main-bordercolor);
        padding: 0 3px;

        & > span {
            display: block;
            border-top: 1px solid var(--main-bordercolor);
            padding: 3px;
            overflow: hidden;
            float: left;
            width: 100%;
            box-sizing: border-box;

            &:first-child {
                border-top: 0;

                & > .message {
                    margin-top: 0;
                }
            }

            & > .message {
                display: block;
                position: relative;
                width: 100%;
                min-height: 30px;
                float: left;
                cursor: pointer;
                color: var(--header-three);
                outline: none;
                border-radius: 3px;
                text-decoration: none;
                text-align: left;
                padding: 2px 5px;
                box-sizing: border-box;

                &:hover,
                &:focus {
                    background: var(--button-background-alt-hover);
                }

                &.open {
                    background: var(--button-background-alt);
                }

                .sender {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-weight: bold;
                }

                .message {
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    overflow: hidden;
                    font-size: 9pt;
                }
            }
        }
    }

    .message-toolbar {
        min-height: 30px;
        display: none;
    }

    .message-thread {
        border: 1px solid;
        background: var(--main-background);
        border-color: var(--button-background-hover)
            var(--button-background-alt) var(--button-background-alt);
        border-radius: 5px;
        margin: 0 0 10px 0;
        min-height: 0;
        transition: min-height 0.2s ease-in-out;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column-reverse;

        & > span {
            margin-top: 3px;
            flex-basis: 0;
            outline: none;

            &,
            & > span {
                position: relative;
                display: block;
                float: left;
                clear: both;
            }

            &.mine,
            &.mine > span {
                float: right;

                & > span {
                    &:nth-child(2) {
                        background: var(--message-mine);
                        color: var(--button-foreground-theme);

                        span {
                            background: transparent;
                        }
                    }

                    &:nth-child(3) {
                        &::before {
                            left: initial;
                            right: 0;
                            background: var(--message-mine);
                        }

                        &::after {
                            left: initial;
                            right: -6px;
                        }
                    }
                }

                &:focus {
                    & > span {
                        &:nth-child(2) {
                            background: var(--message-mine-hover);
                        }

                        &:nth-child(3) {
                            &::before {
                                background: var(--message-mine-hover);
                            }
                        }
                    }
                }
            }

            &.image {
                & > span {
                    &:nth-child(2) {
                        padding: 0;
                        overflow: hidden;

                        iframe {
                            margin: 0 -5px -10px 0;
                        }
                    }

                    &:nth-child(3) {
                        &::before,
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            &.emoji {
                & > span {
                    &:nth-child(2) {
                        background: transparent !important;
                    }

                    &:nth-child(3) {
                        &::before,
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            &.broadcast {
                & > span {
                    &:nth-child(2) {
                        max-width: calc(100% - 20px);
                    }

                    &:nth-child(3) {
                        &::before,
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            &:first-child {
                margin-bottom: 10px;
            }

            &:last-child {
                margin-top: 10px;
            }

            &:focus {
                & > span {
                    &:nth-child(2) {
                        background: var(--message-other-hover);
                        box-shadow: 0 0 0 3px var(--focus-outline);
                    }

                    &:nth-child(3) {
                        &::before {
                            background: var(--message-other-hover);
                        }
                    }
                }
            }

            &.loading {
                visibility: hidden;
            }

            & > span {
                &:nth-child(1),
                &:nth-child(3) {
                    font-size: 8pt;
                }

                &:nth-child(1) {
                    margin: 0 5px 5px;
                }

                &:nth-child(2) {
                    background: var(--message-other);
                    padding: 0;
                    margin: 0 10px;
                    border-radius: 15px;
                    position: relative;
                    max-width: calc(100% - 30px);
                    z-index: 1;
                    box-sizing: border-box;
                    contain: paint;

                    & > span {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;

                        .has-link {
                            position: absolute;
                            cursor: pointer;
                            border-radius: 10px;
                        }
                    }

                    & > iframe {
                        border: 0;
                        margin: 5px 0 0;
                        border-radius: 10px;
                        padding: 0 10px;
                        width: 100%;
                        height: 0;
                        position: relative;
                    }
                }

                &:nth-child(3) {
                    margin: 0 10px;
                    z-index: 0;

                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        top: calc(100% - 8px);
                        left: 0;
                        background: var(--message-other);
                        width: 10px;
                        height: 10px;
                        border-radius: 10px;
                        z-index: 0;
                    }

                    &::after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: calc(100% - 8px);
                        left: -6px;
                        background: var(--main-background);
                        width: 10px;
                        height: 10px;
                        border-radius: 10px;
                        z-index: 0;
                    }
                }

                &:nth-child(4) {
                    margin: 2px 10px 0;
                    color: var(--input-foreground-framed-disabled);
                }
            }
        }
    }

    .broadcast-controls {
        display: none;
    }

    .message-input {
        position: relative;

        .ql-editor {
            padding: 7px;
        }
    }

    .rich-editor {
        ng-quill-editor {
            .ql-container {
                height: 32px;
                min-height: 32px;
                border-radius: 5px;
            }
        }
    }

    .theme-button {
        height: 100%;
        margin-left: 5px;
    }

    .message-send-button,
    .message-close-button {
        min-width: 74px;
        padding: 0;
    }

    .broadcast-send {
        .theme-button {
            height: 30px;
        }
    }
}

.email-display {
    iframe {
        background: var(--main-background);

        &,
        * {
            color: var(--foreground-color) !important;
        }
    }
}

@media only screen and (max-width: 1023px) {
    .message-dialog {
        height: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0 0 10px 0;
        position: relative;
        transition: height 0.2s ease-in-out;

        &.message-open {
            height: 100%;

            .dialog-footer {
                display: none;
            }

            .message-listing {
                left: -100%;
            }

            .message-ui {
                left: 0;
            }
        }

        .new-message {
            display: inline-block;
        }

        * {
            font-size: 16px !important;
        }

        .message-listing {
            span {
                .message {
                    .message {
                        font-size: 14px !important;
                    }
                }
            }
        }

        .collection-item {
            margin: 0;
            border-radius: 0;

            .collection-item-entries {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                margin: 0;

                .collection-item-entry {
                    .collection-item-entry-remove {
                        top: 9px;
                    }
                }
            }
        }

        .dialog-scroll,
        .dialog-container,
        .dialog-inner,
        .dialog-content {
            height: 100%;
        }

        .dialog-title {
            display: none;
        }

        .dialog-container {
            overflow: hidden;
        }

        .dialog-mask {
            top: 0;
            height: 100% !important;
        }

        .message-listing,
        .message-ui {
            max-width: 100%;
            width: 100%;
            min-width: 100%;
            border-right: 0;
            padding: 0 3px;
            position: absolute;
            transition: left 0.2s ease-in-out;

            .collection-item {
                box-shadow: none;

                .collection-item-add {
                    width: 120px;
                }
            }

            .message-toolbar {
                display: block;
                padding-bottom: 2px;
                flex: 0;

                button {
                    padding: 0 5px;

                    &,
                    &:focus {
                        background: transparent !important;
                        border: 0 !important;
                        box-shadow: none !important;
                    }

                    i {
                        font-size: 24px !important;
                    }
                }
            }
        }

        .message-listing {
            top: 0;
            left: 0;
        }

        .message-ui {
            top: 0;
            left: 100%;
            height: 100%;

            .message-close {
                display: none;
            }

            .message-toolbar {
                display: block;
                padding-bottom: 2px;
            }
        }

        .message-thread {
            margin: 0;
            border-radius: 0;
            border-top-width: 0;
            border-bottom-width: 0;

            &.broadcasts {
                border-top-width: 1px;
            }

            & > span {
                &.broadcast {
                    & > span {
                        &:nth-child(2) {
                            max-width: calc(100% - 20px);
                            width: calc(100% - 20px);
                        }
                    }
                }

                & > span {
                    &:nth-child(2) {
                        max-width: calc(100% - 20px);
                    }
                }
            }
        }

        .rich-editor {
            ng-quill-editor {
                .ql-container {
                    margin: 0;
                    border-radius: 0;
                    border-bottom-left-radius: 5px;
                    border-right: 0;
                    border-top: 0;

                    &,
                    .ql-editor.ql-blank::before {
                        font-size: 16px;
                    }
                }
            }
        }

        .theme-button {
            margin: 0;
            border-radius: 0;
            border-bottom-right-radius: 5px;
        }
    }
}

@media only screen and (max-width: 500px) {
    .message-dialog {
        display: block !important;

        &.allow-broadcast {
            height: calc(100% - 70px) !important;
        }

        .broadcast-button {
            display: none;
        }

        .message-ui {
            left: calc(100% + 3px);
        }

        &.hold-open {
            .message-listing {
                left: calc(-100% - 3px);
            }

            .message-ui {
                left: 0;
            }
        }

        .close-button-tools {
            display: inline-block;
        }

        .message-input .ql-editor {
            padding: 4px 7px;
        }
    }

    .dialog-footer {
        .message-close-button {
            display: none;
        }
    }
}
.notifications-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    z-index: 90;

    .notification {
        display: flex;
        background: var(--dialog-content-mask);
        backdrop-filter: blur(7px);
        padding: 10px;
        border-radius: 20px;
        width: 300px;
        position: relative;
        left: 10px;
        margin-top: 10px;
        gap: 5px;
        box-shadow: 0 0 5px 1px var(--main-shadow);
        -webkit-transition: left 0.5s ease-in-out; /* Safari */
        transition: left 0.5s ease-in-out;
        color: var(--header-three);
        text-decoration: none;

        &.open {
            left: -310px;
        }

        .remove {
            display: none;
            position: absolute;
            top: 15px;
            right: 15px;
            width: 10px;
            height: 10px;
            min-height: 10px;
            cursor: pointer;

            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 3px;
                width: 3px;
                height: 11px;
                background: var(--button-background-hover);
                border-radius: 3px;
            }

            &:before {
                transform: rotate(45deg);
            }

            &:after {
                transform: rotate(-45deg);
            }
        }

        .icon {
            flex: 0;
            min-width: 30px;
            text-align: center;
            vertical-align: middle;
            line-height: 38px;

            i {
                display: block;
                position: relative;
                top: 2px;
                color: var(--icon-blue);
            }
        }

        .detail {
            flex: 1;
        }

        .sender {
            display: block;
            width: 100%;
            height: 25px;
            line-height: 25px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-weight: bold;
        }

        .message {
            display: block;
            width: 245px;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            line-clamp: 3;
            display: -webkit-box;
            overflow: hidden;
            font-size: 9pt;
        }

        &:hover {
            .remove {
                display: block;

                &:before,
                &:after {
                    background: var(--input-background-error);
                }
            }
        }
    }
}
.onboarding-wizard {
    height: 680px !important;
}

@media only screen and (max-width: 1023px) {
    .onboarding-wizard {
        height: 88vh !important;
    }
}

.onboarding-splash {
    background-image: url(/graphics/onboard-splash.png) !important;
    background-size: cover !important;
    background-position: 77.5% 50% !important;
}

.onboarding-splash-end {
    background-image: url(/graphics/onboard-final.png) !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
}
.organisation-unit {
    width: 100%;
    display: flex;
    flex-direction: column;

    .details {
        display: flex;
        flex-direction: row;
        padding: 3px;

        .toggle-children,
        .type-icon,
        .add-child,
        .remove {
            flex: 0;
            background: none !important;
            border: 0 !important;
            padding: 0 !important;
            width: 25px !important;
            min-width: 25px !important;
            height: 25px !important;
            box-shadow: none !important;

            i {
                font: var(--icon-font) !important;
                line-height: 25px !important;
            }

            &:focus {
                box-shadow: 0 0 0 3px #7facdb !important;
            }
        }

        .type-icon i {
            color: #006ebf !important;
            -webkit-filter: none !important;
            -moz-filter: none !important;
            filter: none !important;
        }

        .name {
            flex: 1;

            input {
                border: 0 !important;

                &:read-only:focus {
                    box-shadow: none !important;
                }
            }
        }

        .add-child,
        .remove {
            visibility: hidden;
        }

        .remove {
            i {
                color: #ed4f4f;
            }
        }

        &:hover,
        &:focus-within {
            & > .add-child,
            & > .remove {
                visibility: visible;
            }
        }
    }

    &:not(.has-children) {
        & > .details {
            & > .toggle-children {
                visibility: hidden;
            }
        }
    }

    &.locked {
        & > .details {
            &:hover,
            &:focus-within {
                & > .remove {
                    visibility: hidden;
                }
            }
        }
    }

    .children {
        padding-left: 10px;
        max-height: 0;
        transition: max-height ease 0.1s;
        overflow: hidden;
    }
}

.editor-dropdown {
    li {
        &.school,
        &.campus,
        &.year-level,
        &.faculty,
        &.department {
            * {
                vertical-align: top;
                line-height: 25px;
            }
            a::before {
                font: var(--icon-font);
                vertical-align: top;
                margin-right: 5px;
            }
        }
        &.school a::before {
            content: "location_city";
        }
        &.campus a::before {
            content: "domain";
        }
        &.year-level a::before {
            content: "signal_cellular_alt";
        }
        &.faculty a::before {
            content: "history_edu";
        }
        &.department a::before {
            content: "group_work";
        }
    }
}
.nav-button {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    background-image: url(/resources/logo_noshadow.svg);
    background-size: contain;
    border: none;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    text-align: center;

    &:hover,
    &:focus {
        background-color: var(--main-hover-mask);
    }

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline);
    }

    span {
        position: absolute;
        top: -5px;
        right: 5px;
        text-decoration: none;
        font-size: 36pt;
        font-weight: bold;
        color: var(--main-brackground);
        background: linear-gradient(
            to top,
            var(--toolbar-button-gradiant-start) 0%,
            var(--toolbar-button-gradiant-end) 100%
        );
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.pane {
    border-radius: 10px;
    color: var(--input-foreground);
    font-size: var(--normal-font-size);
    position: relative;
    box-sizing: border-box;
    box-shadow: var(--button-shadow);

    .sectionHeader {
        border: none;
    }

    .main-toolbar {
        top: 0;
        margin-bottom: 10px;
    }

    .tools.toolbar {
        padding-bottom: 10px;

        h3 {
            line-height: 26px;
        }
    }

    &.inset {
        background: var(--background-color);
        box-shadow: inset 0 1px 2px var(--main-shadow);
    }

    .pane {
        box-shadow: none;

        .sectionHeader {
            color: var(--foreground-color);
            border: none;
        }

        .pane {
            ul.list > li {
                background: var(--input-background-framed);

                &[tabindex="0"]:hover {
                    background: var(--pane-list);
                }
            }

            ul.collection li {
                background: var(--input-background-framed);
            }
        }

        ul.list > li {
            background: var(--pane-list);

            &[tabindex="0"]:hover {
                background: var(--input-background-framed);
            }
        }

        ul.collection li {
            background: var(--background-color);
        }
    }

    button.inline {
        border: none;

        img {
            width: 16px;
            height: 16px;
            filter: grayscale(100%);
        }
    }

    table button.inline.right {
        margin-right: 0;
    }

    ul.list,
    ul.list > li,
    ul.list-pane {
        margin: 0px;
        padding: 0px;
        list-style: none;
        display: block;
        width: 100%;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;
    }

    ul.list {
        padding: 0 5px 3px 5px;

        & > li {
            display: flex;
            flex-wrap: wrap;
            touch-action: pan-y, pan-x;
            padding: 5px 5px 5px 15px;
            margin: 1px 0 0;
            background: var(--main-background);
            border-radius: 0;
            box-shadow: none;

            &[tabindex="0"] {
                cursor: pointer;
                background: var(--pane-list);
            }

            &:first-child {
                margin-top: 0px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            &:last-child {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            li {
                box-shadow: none;
            }

            div.button {
                cursor: pointer;
            }

            * {
                vertical-align: top;
            }

            h1,
            h2,
            h3,
            h4,
            h5 {
                margin: 0;
            }

            &:focus {
                position: relative;
                outline: none;
                box-shadow: 0 0 0 3px var(--focus-outline) !important;
            }

            .children ul.list li {
                background: transparent;
                padding: 0 0 0 10px;

                &[tabindex="0"]:hover {
                    background: transparent;
                }
            }

            &.single-line {
                div {
                    height: 32px;
                    line-height: 32px;
                }

                h3 {
                    margin: 0;
                }

                label.checkbox,
                label.radio {
                    margin-top: 7px;
                }

                input[type="submit"],
                input[type="button"],
                input[type="clear"],
                button,
                input[type="text"],
                input[type="password"],
                input[type="number"],
                input[type="date"],
                input[type="datetime"],
                input[type="file"],
                textarea,
                select {
                    margin: 2px 5px 0 0;
                }
            }

            &.selected,
            &.selected:hover {
                background: var(--main-bordercolor) !important;
            }

            button {
                visibility: hidden;

                &.blank {
                    flex: 0;
                    background: none !important;
                    border: 0 !important;
                    padding: 0 !important;
                    width: 25px !important;
                    min-width: 25px !important;
                    height: 25px !important;
                    box-shadow: none !important;

                    i {
                        font: var(--icon-font) !important;
                        line-height: 25px !important;
                    }

                    &:focus {
                        box-shadow: 0 0 0 3px #7facdb !important;
                    }
                }

                &.remove {
                    i {
                        color: #ed4f4f;
                    }
                }
            }

            &:hover,
            &:focus-within {
                & > button {
                    visibility: visible;
                }
            }
        }

        .children ul.list {
            padding: 0 0 0 5px;
        }
    }

    ul.items,
    ul.items > li {
        list-style: none;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;
    }

    ul.items {
        margin: 0px;
        padding: 0px;

        & > li {
            background: var(--main-background);
            border-radius: 10px;
        }
    }

    ul.collection li {
        background: var(--main-background);
    }

    ul.list-pane > li {
        background: var(--pane-list);
        list-style: none;
        display: block;
        width: 100%;
        overflow: auto;
        border-radius: 10px;
        box-shadow: none;
        touch-action: pan-y, pan-x;
        overscroll-behavior: none;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;

        &.flex {
            display: flex;
        }
    }

    ul.list.grouped,
    ul.list.grouped > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        height: initial !important;
        touch-action: pan-y, pan-x;
        white-space: initial !important;
    }

    ul.list.grouped {
        & > li {
            margin: 0 !important;
            border-top: 1px solid var(--main-bordercolor);
            border-radius: 0 !important;
        }

        & > li:first-child {
            margin: 5px 0 0 0 !important;
            border-top-right-radius: 10px !important;
            border-top-left-radius: 10px !important;
        }

        & > li:last-child {
            border-bottom-right-radius: 10px !important;
            border-bottom-left-radius: 10px !important;
        }
    }

    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="clear"]:hover,
    input[type="button"]:focus,
    input[type="submit"]:focus,
    input[type="clear"]:focus {
        background: var(--background-color);
    }

    button,
    label.button {
        &.section-button {
            position: absolute;
            top: 5px;
            margin: 0 !important;

            &.left {
                left: 5px;
            }

            &.right {
                right: 5px;
            }
        }

        &:hover,
        &:focus {
            background: var(--button-background-hover);
        }

        &.ok {
            &:hover,
            &:focus {
                background: var(--button-background-theme-hover) !important;
            }
        }
    }

    &.extraDetailHeader {
        box-shadow: none;
        border-radius: 0;
    }

    &.noRound {
        border-radius: 0px;
    }

    &.fullHeight {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border: 1px solid var(--main-bordercolor);
    }

    &.window {
        ul.list {
            padding: 0;
            border-radius: 10px;
        }

        ul.list > li,
        ul.list-pane {
            box-shadow: none;
        }

        & > .pane,
        ul.list,
        ul.list-pane > li {
            box-shadow: var(--button-shadow);
        }
    }

    &.stuck {
        position: sticky;
        animation-name: pane-stuck-shadow;
        animation-duration: 1ms; /* Firefox requires this to apply the animation */
        animation-timeline: scroll(block nearest);
    }

    &.inset {
        background: var(--main-background);
        box-shadow: none;

        button {
            background: var(--main-background);
            border-color: var(--main-background);
            box-shadow: none;

            &:hover,
            &:focus {
                background: var(--main-background) !important;
                border-color: var(--main-background);
            }
        }
    }

    &.error {
        background: var(--input-background-error) !important;
        color: var(--foreground-color-error) !important;

        span,
        label,
        h1,
        h2,
        h3,
        h4 {
            color: var(--foreground-color-error) !important;
        }
    }

    &.ok-button {
        .pane {
            background: var(--button-background-theme);

            * {
                color: var(--button-foreground-theme);
            }
        }

        ul.collection li,
        .pane ul.collection li,
        .pane .pane ul.collection li {
            background: var(--button-background-theme);
        }
    }

    &.list-item {
        & > * {
            height: 24px;
            line-height: var(--main-line-height);
        }

        & > i {
            height: initial;
            line-height: var(--main-line-height);
        }

        button {
            height: 24px;
            padding: 2px 4px;
        }

        .remove {
            background: none;
            box-shadow: none;
            visibility: hidden;

            &,
            * {
                color: var(--foreground-color-error);
            }
        }

        &:hover,
        &:focus-within {
            .remove {
                visibility: visible;
            }
        }
    }

    &.no-height {
        height: initial !important;
    }
}

.pane,
.pane .pane .pane,
.pane .pane .pane .pane .pane,
.pane .pane .pane .pane .pane .pane .pane,
.pane .pane .pane .pane .pane .pane .pane .pane .pane {
    background: var(--background-color);
}

.pane .pane,
.pane .pane .pane .pane,
.pane .pane .pane .pane .pane .pane,
.pane .pane .pane .pane .pane .pane .pane .pane {
    background: var(--input-background-framed);
}

.pane.window {
    border-radius: 0;
    border: 0;
    background: var(--main-background);
    box-shadow: none;
}

.half-height .pane.full-height {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.pane-reporting {
    background: var(--pane-list);
}

.pane-split {
    display: block;
    border: none;
    color: var(--main-background);
    height: 100%;
    width: 1px;
    background: var(--foreground-color);
    background: linear-gradient(
        var(--background-color),
        var(--foreground-color),
        var(--background-color)
    );
}

.dialer-button {
    border: none;
    width: 100%;
    height: 37px;
    display: block;
    position: relative;
    cursor: pointer;
    color: var(--input-foreground);
    overflow: hidden;
    box-shadow: var(--button-shadow-dialer);

    &.half-height {
        height: 30px;
    }

    &.double-height {
        height: 84px;
    }

    &.double-height-responsive {
        height: 79px;
    }

    &.triple-height {
        height: 128px;
    }

    &.editable {
        cursor: text;
        padding: 0;

        label.checkbox,
        label.radio {
            top: 7px;
        }

        input[type="text"],
        input[type="number"],
        input[type="datetime"],
        input[type="password"] {
            background: var(--input-background-editable);

            &:hover,
            &:focus {
                background: var(--input-background-editable-hover);
            }
        }
    }

    &.no-height {
        height: auto;
    }

    .title {
        display: block;
        width: 100%;
        font-size: 11t;
        font-weight: bold;
    }

    .subtitle {
        display: block;
        width: 100%;
        font-size: 9pt;
        font-weight: bold;
        color: var(--button-foreground);

        &.sticky {
            position: sticky;
            top: 0;
            z-index: 99;
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: var(--main-background);
        }
    }

    .example .inner .pane {
        &,
        .collection li {
            background: var(--button-background-white);
        }

        &,
        * {
            color: var(--button-foreground-white) !important;
        }
    }

    &:hover,
    &:focus {
        .subtitle.sticky {
            background: var(--button-background-alt);
        }

        &:disabled {
            .subtitle.sticky {
                background: var(--main-background);
            }
        }

        .example .inner .pane {
            &,
            .collection li {
                background: var(--button-background-white-hover);
            }
        }
    }

    &.ok-button {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            &,
            * {
                color: var(--button-foreground-subtitle-theme);
            }
        }

        .subtitle {
            &,
            * {
                color: var(--button-foreground-subtitle-theme);
            }

            &.sticky {
                position: sticky;
                top: 0;
                z-index: 99;
                width: 100%;
                height: 30px;
                line-height: 30px;
                background: var(--button-background-theme);
            }
        }

        &:hover,
        &:focus {
            .subtitle.sticky {
                background: var(--button-background-theme-hover);
            }

            &:disabled {
                .subtitle.sticky {
                    background: var(--button-background-theme-disabled);
                }
            }

            .example .inner .pane {
                &,
                .collection li {
                    background: var(--button-background-white-hover);
                }
            }
        }
    }

    &:disabled,
    &:disabled,
    &:disabled:hover,
    &:disabled:focus {
        color: var(--button-foreground-disabled) !important;
        cursor: default;
        cursor: not-allowed;

        i {
            color: var(--button-foreground-disabled) !important;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        display: block;
    }

    input[type="text"],
    input[type="number"],
    input[type="datetime"],
    input[type="password"] {
        width: 100%;
        height: 100%;
        margin: 0;
        background: var(--input-background-editable);
        border-radius: 0;
        border: none;
        display: inline-block;

        &:hover,
        &:focus {
            background: var(--input-background-editable-hover);
        }
    }
}

.pane .dialer-button,
.pane .pane .pane .dialer-button,
.pane .pane .pane .pane .pane .dialer-button,
.pane .pane .pane .pane .pane .pane .pane .dialer-button {
    background: var(--input-background-framed);

    &:hover,
    &:focus {
        background: var(--input-background-framed-hover);
    }
}

.dialer-button,
.pane .pane .dialer-button,
.pane .pane .pane .pane .dialer-button,
.pane .pane .pane .pane .pane .pane .dialer-button,
.pane .pane .pane .pane .pane .pane .pane .pane .dialer-button {
    background: var(--background-color);

    &:hover,
    &:focus {
        background: var(--background-color-light);
    }
}

.dialer-button {
    &.editable {
        background: var(--input-background-editable) !important;
    }

    &.selected {
        background: var(--button-background-theme-selected) !important;
    }

    &.ok-button {
        background: var(--button-background-theme) !important;

        &,
        * {
            color: var(--button-foreground-theme) !important;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            &,
            * {
                color: var(--button-foreground-subtitle-theme) !important;
            }
        }

        &:hover,
        &:focus {
            background: var(--button-background-theme-hover) !important;
        }
    }

    &.error {
        background: var(--button-background-error) !important;

        &:hover,
        &:focus {
            background: var(--button-background-error-hover) !important;
        }
    }

    &:disabled,
    &:disabled:hover,
    &:disabled:focus {
        background: var(--background-color) !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        display: block;
    }
}

.pane,
.pane.inputForm,
.pane .pane .pane.inputForm,
.pane .pane .pane .pane .pane.inputForm,
.pane.pane.pane .pane .pane .pane .pane.inputForm {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime"],
    textarea,
    select,
    selecteditor input[type="button"],
    selecteditor.readonly.no-grid span {
        background-color: var(--main-background);
        border: 1px solid var(--main-bordercolor);

        &:hover,
        &:focus {
            background-color: var(--main-background);
            border: 1px solid var(--main-bordercolor-alt);
        }

        &.mandatory-field {
            background-color: var(--input-background-mandatory);

            &:hover,
            &:focus {
                background-color: var(--input-background-mandatory-hover);
            }
        }

        &:disabled {
            background-color: var(--input-background) !important;
            border: 1px solid var(--input-background) !important;
        }
    }
}

.pane .pane.inputForm,
.pane .pane .pane .pane.inputForm,
.pane .pane .pane .pane .pane .pane.inputForm,
.pane .pane .pane .pane .pane .pane .pane .pane.inputForm {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime"],
    textarea,
    select {
        background-color: var(--input-background);
        border: none;

        &:hover,
        &:focus {
            background-color: var(--input-background-hover);
            border: none;
        }

        &.mandatory-field {
            background-color: var(--input-background-mandatory);
            border: 1px solid var(--input-background-mandatory);

            &:hover,
            &:focus {
                background-color: var(--input-background-mandatory-hover);
                border: 1px solid var(--main-bordercolor-alt);
            }
        }

        &:disabled {
            background-color: var(--input-background) !important;
            border: none !important;
        }
    }
}

.subpane {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 5px;
    border: 1px solid var(--main-bordercolor);

    .inner {
        position: relative;
        padding: 10px;
        z-index: 0;
    }
}

.container {
    display: inline-block;
}

@keyframes pane-stuck-shadow {
    0% {
        box-shadow: 0 0 0 transparent;
    }
    30% {
        box-shadow: var(--button-shadow);
    }
    100% {
        box-shadow: var(--button-shadow);
    }
}

@media only screen and (max-width: 1023px) {
    @keyframes pane-stuck-shadow {
        0% {
            box-shadow: 0 0 0 transparent;
        }
        10% {
            box-shadow: var(--button-shadow);
        }
        100% {
            box-shadow: var(--button-shadow);
        }
    }
}
.print-dialog {
    width: 100%;
    float: left;
    display: flex;

    & > .leftColumn,
    & > .rightColumn {
        display: flex;
        flex-direction: column;

        & > .majorSection {
            flex: 1 0 auto;

            & > h3 {
                top: -12px;
            }

            & > .majorSection {
                & > h3 {
                    font-size: var(--normal-font-size);
                    top: -10px;
                }
            }
        }
    }

    .leftColumn {
        button {
            width: 200px;
        }

        span {
            top: 0;
        }
    }

    .rightColumn {
        button {
            width: 100%;

            span {
                display: inline-block;
                width: 55px;
            }
        }
    }
}

.fontDialog {
    width: 100%;
    float: left;

    & > .leftColumn,
    & > .rightColumn {
        & > .majorSection {
            & > h3 {
                top: -12px;
            }

            &:focus-within,
            &:first-child:focus-within {
                box-shadow: 0 0 0 3px var(--focus-outline) !important;
            }
        }
    }

    .leftColumn {
        .majorSection {
            flex: 1 0 auto;

            .content {
                padding: 0;
                margin: 10px 0 0 0;
                width: 100%;
                box-sizing: border-box;
                border-radius: 10px;
                overflow: hidden;
            }
        }

        select {
            height: 180px;
            outline: none;
            padding: 0;
            display: block;
        }
    }

    .rightColumn {
        .majorSection {
            flex: 1 0 auto;

            .content {
                padding: 0;
                margin: 10px 0 0 0;
                width: 100%;
                box-sizing: border-box;
                border-radius: 10px;
                overflow: hidden;
            }
        }

        select {
            height: 69.5px;
            outline: none;
            padding: 0;
            display: block;
        }
    }

    select {
        width: 100%;
        overflow: auto;
        overscroll-behavior: none;

        &:focus {
            box-shadow: none !important;
        }
    }

    .buffer {
        width: 100%;
        box-sizing: border-box;
        padding: 0.5em 0.5em 1.7em 0.5em;
    }
}

.print-preview-dialog {
    iframe {
        border: 1px solid var(--main-bordercolor) !important;
        border-bottom-width: 2px !important;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 500px) {
    .print-dialog {
        flex-direction: column;
        gap: 5px;

        .row,
        .flex-row,
        .flex-column {
            gap: 5px;
        }

        & > .col,
        & > .col-pane {
            display: flex;
            flex-direction: column;
            padding: 0 !important;
            margin: 0 !important;
            flex: 1 !important;
            width: 100% !important;
            gap: 5px;
        }

        .row,
        .flex-row {
            flex-direction: column;
            width: 100% !important;
            gap: 5px;
        }

        .half {
            width: 100% !important;
            min-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .pane {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        button.onethird {
            min-width: 45% !important;
            width: 45% !important;
            margin: 0 3% 0 0 !important;

            ~ span {
                display: inline-block;
                width: 52% !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .print-margin {
            display: flex;
            flex-direction: row;
            gap: 5px;

            input {
                flex: 1;
            }
            span {
                flex: 0;
                line-height: 26px;
                min-width: 70px;
            }
        }

        .additional-cell {
            width: 100%;
            margin: 5px 0 0 0 !important;
            padding: 0 !important;
            display: flex;
            flex-direction: row;
            gap: 5px;

            input {
                flex: 1;
            }
            span {
                flex: 0;
                line-height: 26px;
            }
        }

        br {
            display: none;
        }
    }
}
@media print {
    body,
    .page-frame,
    .page-content,
    .tab-content {
        overflow: initial !important;
    }

    .nav-button,
    .user-details,
    .PageFoot,
    .main-toolbar,
    .tree-container,
    .Supplementary,
    .MainMenuContainer,
    .UserMenu,
    .DateControls,
    .main-toolbar,
    .ItemListHead,
    .ItemListFoot,
    .ItemListPane tr,
    .bottom-toolbar,
    .dialog-outer,
    .mask,
    .Sidebar,
    .filterRow,
    .paging {
        display: none !important;
    }

    table thead tr td input[type="checkbox"],
    table thead tr th input[type="checkbox"],
    table tbody tr td input[type="checkbox"],
    table tfoot tr td input[type="checkbox"],
    table.table thead tr td input[type="checkbox"],
    table.table thead tr th input[type="checkbox"],
    table.table tbody tr td input[type="checkbox"],
    table.table tfoot tr td input[type="checkbox"],
    table.table thead tr td span.checkmark,
    table.table thead tr th span.checkmark,
    table.table tbody tr td span.checkmark,
    table.table tfoot tr td span.checkmark {
        visibility: hidden !important;
    }

    .page-body,
    .page-content,
    .page-header,
    .PageHeader,
    .ConfigurationDetail,
    .HeaderDetail,
    .tab-frame,
    .TitleDetail,
    .MenuBar,
    .MenuDetail,
    .MidContainer,
    .file-list,
    .TimetableListPane,
    .ItemSelectionPane,
    .ItemListPane,
    .ItemListPane tr.selectedGridRow,
    .flowContainer,
    .no-details,
    .topSection,
    .bottomSection,
    .replacementsContainer,
    .ItemDetailsDisplayPane,
    .page-title,
    .fixed-header,
    .fixed-header .table thead,
    .fixed-header .table tbody,
    .fixed-header .table th,
    .fixed-header .table td {
        width: initial !important;
        height: initial !important;
        display: initial !important;
        padding: 0px !important;
        margin: 0px !important;
        position: initial !important;
        overflow: initial !important;
        background: transparent !important;
        z-index: initial !important;
    }

    .fixed-header .table {
        display: table !important;
    }

    .fixed-header .table thead {
        display: table-header-group !important;
    }

    .fixed-header .table tbody {
        display: table-row-group !important;
    }

    .fixed-header .table tr {
        display: table-row !important;
    }

    .fixed-header .table tr.filterRow {
        display: none !important;
    }

    .fixed-header .table th,
    .fixed-header .table td {
        display: table-cell !important;
    }

    .page-body,
    .page-content,
    .page-frame,
    .tab-frame {
        width: 100% !important;
    }

    .page-title {
        font-size: var(--title-font-size);
        color: var(--foreground-color);
        clear: both;
        padding-left: 0;
    }

    table {
        border-collapse: collapse !important;
        border-top: 2px solid var(--foreground-color) !important;
        border-left: 2px solid var(--foreground-color) !important;
        border-right: 2px solid var(--foreground-color) !important;
        border-bottom: 2px solid var(--foreground-color) !important;
        margin-top: 10px !important;
        max-width: 100%;
        width: 100%;
    }

    table thead,
    table thead tr,
    table thead tr td,
    table thead tr th,
    table tbody,
    table tbody tr,
    table tbody tr td {
        padding: 0px !important;
        margin: 0px !important;
        position: initial !important;
        overflow: initial !important;
    }

    table tbody {
        display: table-row-group !important;
    }

    table thead {
        display: table-header-group !important;
    }

    table thead tr,
    table tbody tr {
        display: table-row !important;
    }

    table thead tr td,
    table thead tr th,
    table tbody tr td,
    table tfoot tr td,
    table.table thead tr td,
    table.table thead tr th,
    table.table tbody tr td,
    table.table tfoot tr td,
    .fixed-header table.table tbody tr td {
        padding: 1px !important;
        display: table-cell !important;
        border-top: 1px solid var(--foreground-color) !important;
        border-left: 1px solid var(--foreground-color) !important;
        border-right: 1px solid var(--foreground-color) !important;
        border-bottom: 1px solid var(--foreground-color) !important;
        font-weight: normal !important;
        font-size: var(--normal-font-size) !important;
        font-family: Verdana !important;
        background: var(--main-background) !important;
        color: var(--foreground-color) !important;
    }

    table thead tr th,
    table.table thead tr th,
    table thead tr th div,
    table.table thead tr th div,
    .fixed-header table thead tr th div,
    .fixed-header table.table thead tr th div {
        font-weight: bold !important;
        font-size: var(--larger-font-size) !important;
        font-family: Verdana !important;
        text-align: left;
    }

    table.table,
    table thead tr td.title,
    table thead tr th.title,
    table tbody tr td.title,
    table tbody tr:nth-child(even) td.title,
    table tbody tr:nth-child(odd) td.title,
    table tfoot tr td.title,
    table.table thead tr td.title,
    table.table thead tr th.title,
    table.table tbody tr td.title,
    table.table tfoot tr td.title,
    .fixed-header table.table tbody tr td.title,
    table.table tbody:nth-child(even) tr td.title,
    table.table tbody:nth-child(odd) tr td.title,
    table.table tfoot tr td.title {
        background: var(--grid-row-cell-tintedtitle) !important;
    }

    table.table tr.subtitle td,
    table.table tr td.subtitle,
    .fixed-header table.table tbody tr.subtitle td,
    .fixed-header table.table tbody tr td.subtitle {
        background: var(--grid-row-cell-tintedtitle) !important;
    }

    .page-titleContainer,
    .page-header,
    .MenuBar {
        display: block !important;
        width: 100% !important;
        color: var(--foreground-color) !important;
    }

    .TitleDetail,
    .MenuDetail,
    .no-details {
        display: inline-block !important;
        color: var(--foreground-color) !important;
        font-weight: bold !important;
        font-size: var(--larger-font-size) !important;
    }

    .MenuDetail {
        font-weight: bold !important;
        font-size: var(--larger-font-size) !important;
    }

    .no-details {
        font-weight: normal !important;
        padding-top: 10px !important;
    }

    .pageTask,
    .operation {
        display: none;
    }

    .pageTaskPrint,
    .school-title,
    .operationPrint {
        display: initial;
    }

    .MenuDetail {
        margin-right: 20px !important;
    }

    .file-list {
        color: var(--foreground-color) !important;
    }

    .ItemSelectionPane,
    .ItemListPane table,
    .ItemListPane table tbody tr.selectedGridRow,
    .ItemListPane table tbody tr.selectedGridRow:nth-child(even) td.selected,
    .ItemListPane table tbody tr.selectedGridRow:nth-child(odd) td.selected {
        width: 100% !important;
        border: 0px !important;
        background: transparent !important;
        background-color: transparent !important;
        font-size: var(--larger-font-size) !important;
        margin-top: 10px;
    }

    select::-ms-expand {
        display: none;
    }

    select {
        -webkit-appearance: none;
        appearance: none;
        font-weight: bold !important;
        font-size: 11t !important;
    }

    .noPrint,
    table.noPrint,
    table thead tr td.noPrint,
    table thead tr th.noPrint,
    table tbody tr:nth-child(even) td.noPrint,
    table tbody tr:nth-child(odd) td.noPrint,
    table tfoot tr td.noPrint,
    table.table thead tr td.noPrint,
    table.table thead tr th.noPrint,
    table.table tbody:nth-child(even) tr td.noPrint,
    table.table tbody:nth-child(odd) tr td.noPrint,
    table.table tfoot tr td.noPrint {
        display: none !important;
    }
}
.progress-bar {
    width: 100%;
    height: var(--dialog-title-line-height);

    background: var(--input-background);
    border: 1px solid var(--main-bordercolor);
    border-radius: 10px;

    overflow: hidden;

    .progress-bar-progress {
        height: 100%;
        position: relative;
        overflow: hidden;

        background: var(--button-background-green);

        &::after {
            content: "";
            display: block;
            width: 2px;
            height: 110%;
            position: absolute;
            top: -2px;
            left: 20px;
            background: #ffffff77;
            box-shadow: 0 0 25px 20px #ffffff77;
            transform: rotate(15deg);
            -webkit-animation: progress-shine 4s infinite linear;
            animation: progress-shine 4s infinite linear;
        }
    }
}

@-webkit-keyframes progress-shine {
    0% {
        left: -300px;
    }

    50% {
        left: calc(100% + 300px);
    }

    100% {
        left: calc(100% + 300px);
    }
}

@keyframes progress-shine {
    0% {
        left: -300px;
    }

    50% {
        left: calc(100% + 300px);
    }

    100% {
        left: calc(100% + 300px);
    }
}
.tts-report {
    width: 100%;
    height: 100%;
    background: var(--background-color-light);
    overflow-anchor: auto;
    overflow: auto;
    overscroll-behavior: none;

    &.no-preview {
        display: flex;
        flex-direction: column;
        background: var(--grid-body-background);
        overflow: hidden;

        .tts-report-toolbar-mask {
            width: 100%;
        }

        .tts-report-toolbar {
            top: 0;
            z-index: 10;
            overflow-x: auto;
            overflow-y: hidden;
            min-height: fit-content;

            .tts-report-toolbar-container {
                width: 100%;
                min-width: initial;
                max-width: 100%;
                min-height: 35px;
                margin: 0;
                border-radius: 0;
            }
        }

        .tts-report-sidebar {
            margin-top: 90px;
            z-index: 11;
        }

        .tts-report-container {
            flex: 1;
            overflow: hidden;
            height: 100%;
            position: relative;
            z-index: 10;

            &::after {
                content: "";
                position: absolute;
                display: inline-block;
                top: 0;
                left: -10px;
                width: calc(100% + 10px);
                height: calc(100% + 10px);
                pointer-events: none;
                border-top-right-radius: 10px;
                box-shadow:
                    inset 0 0 5px 2px var(--main-shadow-frame),
                    0 0 0 10px var(--page-header);
                z-index: 10;
            }

            .tts-report-toolbar-mask,
            .tts-report-spacer {
                display: none;
            }

            .tts-report-container-doc {
                padding: 0;
                width: 100%;
                height: 100%;
                border-top-right-radius: 10px;
                contain: paint;
                position: relative;
                z-index: 1;

                .tts-report-header {
                    display: none;
                }

                .tts-report-container-content {
                    overflow: auto;
                    overscroll-behavior: none;
                    padding: 20px 0 0 20px;
                    width: 100%;
                    height: 100%;

                    .grid-view {
                        &.full-height:not(.window) {
                            height: initial !important;
                        }

                        &.contained {
                            overflow: initial;
                            max-width: fit-content;
                        }

                        &.window {
                            .fixed-header {
                                overflow: auto;
                                overscroll-behavior: none;
                            }
                        }
                    }
                }
            }
        }

        .tts-report-sidebar ~ .tts-report-container {
            margin-left: 0 !important;
            padding-left: 30px !important;
            transition: padding-left 0.5s ease-in-out;
        }

        &.sidebar-open {
            .tts-report-sidebar {
                margin-top: 90px;

                ~ .tts-report-container {
                    margin-left: 0 !important;
                    padding-left: 250px !important;
                }
            }
        }
    }

    &.is-pdf {
        background: var(--background-color-dark);
    }

    &.landscape {
        .tts-report-preview {
            min-width: 1330px !important;

            .tts-report-toolbar-mask {
                width: 1310px !important;
            }

            .tts-report-container-doc {
                &.tts-report-preview-doc {
                    width: 1312px;
                    background-image: repeating-linear-gradient(
                        var(--grid-body-background),
                        var(--grid-body-background) 810px,
                        var(--grid-border-bottom) 812px,
                        var(--grid-border-bottom) 4px
                    );

                    .tts-report-content {
                        min-height: 580px;
                    }
                }
            }
        }
    }

    &.no-tools {
        .tts-report-header {
            top: -47px;
        }
    }

    &.sidebar-open {
        .tts-report-sidebar {
            left: 20px;
            margin-top: 15px;

            .tts-report-sidebar-toggle {
                &::after {
                    content: "arrow_back_ios";
                }
            }

            ~ .tts-report-container {
                margin-left: 250px !important;
            }

            ~ .tts-report-container.tts-report-preview {
                margin-left: 200px !important;
                width: calc(100% - 200px) !important;
            }
        }
    }

    .tts-report-toolbar {
        position: sticky;
        top: 20px;
        left: 0;
        z-index: 5;

        .tts-report-toolbar-container {
            width: calc(100% - 40px);
            min-width: 798px;
            max-width: 1327px;
            min-height: 35px;
            margin: 20px auto;
            padding: 5px 0 0 5px;
            background: var(--background-color);
            border-radius: 10px;
            box-shadow: 0 1px 5px var(--main-shadow);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;

            .tts-report-toolbar-content,
            .tts-report-toolbar-standard {
                flex: 1;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

                & > * {
                    flex: 1 0 auto;
                    flex-basis: 150px;

                    &.check {
                        flex: 0 3 auto;
                    }
                }

                .group {
                    padding: 5px;
                    margin: 0 5px 5px 0;
                    flex-wrap: wrap;
                    flex: 0 1 auto;
                    background: var(--input-background-disabled);
                    border: 0;
                    gap: 5px;

                    .group-header {
                        height: 25px;
                        line-height: 25px;
                        padding: 0 5px 0 0;
                        box-sizing: border-box;
                        font-weight: 700;
                        background: transparent;
                        box-shadow: none;
                    }

                    .tts-report-filter,
                    .tts-report-button {
                        height: 25px;
                        line-height: 25px;
                        margin: 0;
                        flex: 1 1 auto;

                        & > span {
                            height: 23px;
                            line-height: 23px;
                        }

                        label.boolean-editor,
                        label.option-editor {
                            margin-top: 2px;

                            .checkmark {
                                top: 0 !important;

                                &::before {
                                    top: 3px;
                                }
                            }
                        }
                    }

                    .tts-report-filter {
                        & > span {
                            &:first-child {
                                flex: 1 0 auto;
                            }
                        }
                    }

                    & > .radio,
                    & > .option-editor {
                        contain: initial;

                        .checkmark {
                            display: inline-block;
                        }

                        input:checked {
                            ~ .text {
                                box-shadow: none;
                                color: var(--input-foreground);
                            }
                        }
                    }
                }

                .legend-container {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    flex: 0 1 auto;
                    gap: 5px;
                    height: 35px;
                    padding: 0;
                    margin: -0 5px 5px 0;
                    border-radius: 5px;
                    background: var(--background-color-light);
                    border: 1px solid var(--grid-header-border-bottom);

                    .legend-item {
                        height: 35px;
                        line-height: 20px;
                        padding: 6px 8px;

                        .legend-colour {
                            top: 4px;
                        }
                    }
                }

                .tts-report-blank {
                    flex: 1 0 auto;
                    flex-basis: auto !important;
                }

                .tts-report-label {
                    flex: 0 !important;
                    height: 35px;
                    line-height: 22px;
                    white-space: nowrap;
                    background: var(--background-color);
                    border: 1px solid var(--grid-header-border-bottom);
                    padding: 6px 8px;
                    box-shadow: none;
                    border-radius: 5px;
                    -webkit-user-select: none;
                    user-select: none;
                }

                .tts-report-button {
                    flex: 0 !important;
                    margin: 0 5px 5px 0;

                    button {
                        background: var(--background-color);
                        background: linear-gradient(
                            to bottom,
                            var(--grid-header-gradient-end) 0%,
                            var(--grid-header-gradient-end-hover) 100%
                        );
                        border-radius: 5px;
                        height: 35px;
                        line-height: 35px;
                        vertical-align: top;
                        border: 1px solid var(--grid-header-border-bottom);
                        padding: 6px 8px;
                        margin: 0 auto;
                        box-shadow: none;

                        i {
                            color: var(--icon-grey);
                            font-weight: 500 !important;
                            font-size: 17px !important;
                            text-shadow: 1px 1px 0
                                var(--grid-header-foreground-shadow);
                            vertical-align: top;
                        }

                        img {
                            vertical-align: top;
                        }

                        .text {
                            max-width: 300px;
                            height: 24px;
                            line-height: 24px;
                            display: block;
                            color: var(--grid-body-foreground);
                            font-size: 13px;
                            font-weight: 600;
                            text-shadow: 1px 1px 0
                                var(--grid-header-foreground-shadow);
                            white-space: nowrap;
                            -webkit-user-select: none;
                            user-select: none;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        &.no-icon .text {
                            line-height: 20px;
                        }
                    }
                }

                .tts-report-filter {
                    height: 35px;
                    line-height: 35px;
                    margin: 0 5px 5px 0;
                    vertical-align: top;
                    display: flex;
                    border: 1px solid var(--grid-header-border-bottom);
                    border-radius: 5px;
                    box-sizing: border-box;
                    background: var(--grid-body-background);

                    & > span {
                        flex: 0 0 auto;
                        background: var(--background-color);
                        background: linear-gradient(
                            to bottom,
                            var(--grid-header-gradient-end) 0%,
                            var(--grid-header-gradient-end-hover) 100%
                        );
                        color: var(--grid-body-foreground);
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                        min-width: 50px;
                        height: 33px;
                        line-height: 33px;
                        display: block;
                        padding: 0 5px;
                        border-right: 1px solid var(--grid-header-border-bottom);
                        font-size: 13px;
                        font-weight: 600;
                        text-shadow: 1px 1px 0
                            var(--grid-header-foreground-shadow);
                        white-space: nowrap;
                        -webkit-user-select: none;
                        user-select: none;

                        &:first-child {
                            text-align: right;
                        }
                    }

                    input:not([type="checkbox"]):not([type="radio"]),
                    .select-editor-container {
                        width: 100%;
                        min-width: 100px;
                        background: var(--grid-body-background);
                        color: var(--grid-body-foreground);
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                        height: 33px;
                        line-height: 33px;
                        font-size: 14px;
                        text-align: left;
                        box-sizing: border-box;
                        border: 0;
                        outline: none;

                        &:focus {
                            box-shadow: 0 0 0 3px var(--focus-outline);
                        }
                    }

                    .select-editor-container {
                        width: initial;
                        min-width: initial;
                        flex: 1;
                        padding: 0;

                        &:focus {
                            box-shadow: none;
                        }
                    }

                    .boolean-editor,
                    .option-editor {
                        background: var(--background-color);
                        background: linear-gradient(
                            to bottom,
                            var(--grid-header-gradient-end) 0%,
                            var(--grid-header-gradient-end-hover) 100%
                        );
                        padding: 0 0 0 5px;
                        border: 0;
                        min-width: 0;
                        border-radius: 0;
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;

                        .checkmark {
                            top: 3px !important;

                            &::before {
                                top: 3px;
                                left: 3px;
                                width: 11px;
                                height: 12px;
                                border-radius: 0;
                            }

                            &::after {
                                text-shadow: none;
                            }
                        }
                    }
                }
            }

            .tts-report-toolbar-standard {
                & > hr {
                    min-width: calc(100% - 5px);
                    margin: 0 5px 5px 0;
                    border: 0;
                    border-bottom: 1px solid var(--grid-header-border-bottom);
                }

                .tts-report-button {
                    button {
                        height: 25px;
                        line-height: 25px;
                        padding: 6px 8px;
                    }

                    i {
                        top: -5px;
                        font-size: 14px !important;
                    }

                    img {
                        top: 0px;
                        width: 12px;
                        height: 12px;
                    }
                }

                .tts-report-filter {
                    height: 25px;
                    line-height: 25px;

                    & > span {
                        height: 23px;
                        line-height: 23px;
                        font-size: 11px;
                    }

                    input:not([type="checkbox"]):not([type="radio"]),
                    .select-editor-container {
                        height: 23px;
                        line-height: 23px;
                        font-size: 12px;
                    }

                    .select-editor-container {
                        line-height: 15px;
                    }

                    label.boolean-editor,
                    label.option-editor {
                        margin-top: 2px;

                        .checkmark {
                            top: 0 !important;
                        }
                    }
                }
            }
        }

        ~ .tts-report-preview-doc {
            margin-top: 0;
        }
    }

    .tts-report-sidebar {
        width: 230px;
        position: absolute;
        left: -235px;
        height: 200px;
        margin-top: 15px;
        z-index: 3;
        transition: left 0.5s ease-in-out;

        .tts-report-sidebar-content {
            position: relative;
            height: 100%;
            z-index: 1;
        }

        .tts-report-sidebar-toggle {
            position: absolute;
            bottom: 10px;
            right: -30px;
            width: 30px;
            height: 30px;
            padding: 2px 4px 0 0;
            background: var(--background-color);
            box-shadow: var(--button-shadow);
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 0;

            &::after {
                width: 10px;
                display: inline-block;
                content: "arrow_forward_ios";
                font: var(--icon-font) !important;
                color: var(--header-two);
            }

            &:hover,
            &:focus {
                &::after {
                    color: var(--foreground-color);
                }
            }
        }
    }

    .tts-report-container {
        transition: margin-left 0.5s ease-in-out;

        &.tts-report-preview {
            margin: 40px 0px 20px;
            box-sizing: border-box;
            position: relative;
            width: 100%;
            min-width: 800px;
            transition: margin-left 0.5s ease-in-out;

            .tts-report-header {
                zoom: 95%;
                position: sticky;
            }

            .tts-report-container-content {
                &.tts-report-content {
                    zoom: 95%;
                }
            }

            .tts-report-toolbar-mask {
                width: 830px;
                height: 0;
                margin: 0 auto;
                position: sticky;
                top: 0;
                z-index: 2;

                &::after {
                    content: "";
                    width: 100%;
                    height: 40px;
                    display: block;
                    background: var(--grid-body-background);
                }
            }
        }

        .tts-report-container-doc {
            width: fit-content;
            min-width: 100%;
            box-sizing: border-box;
            padding: 0 20px;

            &.tts-report-preview-doc {
                width: 832px;
                min-width: initial;
                background: var(--grid-body-background);
                border: 1px solid var(--background-color);
                box-shadow: 0 1px 5px var(--main-shadow-dark);
                background-image: repeating-linear-gradient(
                    var(--grid-body-background),
                    var(--grid-body-background) 1280px,
                    var(--grid-border-bottom) 1282px,
                    var(--grid-border-bottom) 4px
                );
                margin: 0 auto;
                contain: paint;

                &,
                table tr th,
                table tr td,
                table tr th span,
                table tr td span {
                    -webkit-user-select: none !important;
                    user-select: none !important;
                }
            }

            .tts-report-header {
                position: sticky;
                background: var(--grid-body-background);
                top: 0;
                margin-bottom: 15px;
                z-index: 1;
                box-shadow: 0 -5px 0 5px var(--grid-body-background);

                h1 {
                    text-decoration: none !important;
                    border: none !important;
                    height: 50px;
                    line-height: 50px;
                    width: 100%;
                }

                h3 {
                    border-bottom: 1px solid var(--report-header-rule);
                    padding-bottom: 20px;
                    width: 100%;
                }
            }

            .tts-report-spacer {
                width: 100%;
                height: 0;
                background: var(--grid-body-background);
                position: sticky;
                top: 50px;
                z-index: 1;
            }

            .tts-report-container-content {
                &.tts-report-content {
                    min-height: 1015px;
                    font:
                        500 var(--larger-font-size) Arial,
                        "San-Serif";

                    .grid-view {
                        font-family: inherit !important;
                        font-weight: inherit !important;
                        font-size: inherit !important;
                        font-style: inherit !important;
                        border-radius: 0 !important;
                        border: 0 !important;
                        overflow: visible !important;

                        .fixed-header {
                            table,
                            table.table {
                                thead {
                                    tr {
                                        td,
                                        th {
                                            position: sticky !important;
                                            top: 60px;
                                        }
                                    }
                                }
                            }
                        }

                        & > div {
                            font-family: inherit !important;
                            font-weight: inherit !important;
                            font-size: inherit !important;
                            font-style: inherit !important;

                            &.scrolled-grid-container {
                                overflow: visible;
                            }

                            & > div {
                                font-family: inherit !important;
                                font-weight: inherit !important;
                                font-size: inherit !important;
                                font-style: inherit !important;
                                border-radius: 0 !important;

                                &.fixed-header {
                                    overflow: visible;
                                    background: transparent !important;
                                    border: 0 !important;
                                    border-radius: 0 !important;
                                }
                            }
                        }
                    }

                    table,
                    table.table {
                        border-top: none;
                        border-right: none;
                        outline: none;
                        background: transparent !important;
                        table-layout: auto;
                        border-radius: 0 !important;

                        &,
                        &.full {
                            border-collapse: separate !important;
                            border-top: 0 !important;
                            border-left: 2px solid var(--foreground-color) !important;
                            border-right: 2px solid var(--foreground-color) !important;
                            border-bottom: 2px solid var(--foreground-color) !important;
                            max-width: 100%;
                            font-family: inherit !important;
                            font-weight: inherit !important;
                            font-size: inherit !important;
                            font-style: inherit !important;
                        }

                        &:not(.table) {
                            thead,
                            tbody,
                            tfoot {
                                tr {
                                    th,
                                    td {
                                        input[type="checkbox"],
                                        input[type="radio"],
                                        span.checkmark {
                                            display: inline-block;
                                            width: 20px !important;
                                            height: 20px !important;
                                        }
                                    }
                                }
                            }
                        }

                        &.print-gridlines {
                            border-top: 2px solid var(--foreground-color) !important;
                            border-left: 2px solid var(--foreground-color) !important;
                            border-right: 2px solid var(--foreground-color) !important;
                            border-bottom: 2px solid var(--foreground-color) !important;
                        }

                        thead,
                        tbody,
                        tfoot {
                            display: table-row-group !important;
                            padding: 0px !important;
                            margin: 0px !important;
                            position: initial !important;
                            overflow: initial !important;
                            font-family: inherit !important;
                            font-weight: inherit !important;
                            font-size: inherit !important;
                            font-style: inherit !important;
                            -webkit-user-select: text !important;
                            user-select: text !important;
                            page-break-inside: avoid;

                            tr {
                                display: table-row !important;
                                padding: 0px !important;
                                margin: 0px !important;
                                position: initial !important;
                                overflow: initial !important;
                                font-family: inherit !important;
                                font-weight: inherit !important;
                                font-size: inherit !important;
                                font-style: inherit !important;
                                -webkit-user-select: text !important;
                                user-select: text !important;
                                page-break-inside: avoid;

                                td,
                                th {
                                    padding: 0px !important;
                                    margin: 0px !important;
                                    position: initial !important;
                                    overflow: initial !important;
                                    font-family: inherit !important;
                                    font-weight: inherit !important;
                                    font-size: inherit !important;
                                    font-style: inherit !important;
                                    -webkit-user-select: text !important;
                                    user-select: text !important;
                                    page-break-inside: avoid;
                                    border-radius: 0 !important;

                                    &.selected {
                                        position: relative !important;
                                    }

                                    &.title {
                                        background: var(
                                            --grid-body-background
                                        ) !important;
                                    }

                                    button {
                                        display: none !important;
                                    }

                                    * {
                                        min-width: initial !important;
                                        width: initial !important;
                                        max-width: initial !important;
                                        min-height: initial !important;
                                        height: initial !important;
                                        max-height: initial !important;
                                        overflow: visible !important;
                                        vertical-align: middle !important;
                                        position: unset !important;
                                        white-space: nowrap;
                                    }

                                    input[type="checkbox"],
                                    input[type="radio"],
                                    span.checkmark {
                                        display: none !important;
                                    }
                                }
                            }

                            tr,
                            tr.group-row {
                                td,
                                th {
                                    padding: 1px !important;
                                    display: table-cell !important;
                                    border-top: 1px solid
                                        var(--foreground-color) !important;
                                    border-left: 0 !important;
                                    border-right: 1px solid
                                        var(--foreground-color) !important;
                                    border-bottom: 0 !important;
                                    font-weight: normal !important;
                                    color: var(--foreground-color) !important;
                                    text-shadow: none !important;
                                }
                            }

                            tr {
                                &:first-child {
                                    th,
                                    td {
                                        border-top: 2px solid
                                            var(--foreground-color) !important;
                                    }
                                }

                                th,
                                td {
                                    height: 25px;
                                    line-height: 25px;
                                    border-bottom: 1px solid
                                        var(--foreground-color) !important;

                                    &:last-child {
                                        border-right: 0 !important;
                                    }

                                    &.dummy {
                                        height: 27px;
                                    }
                                }
                            }
                        }

                        thead {
                            tr {
                                th {
                                    font-weight: bold !important;
                                    text-align: left;

                                    &:last-child {
                                        border-right: 1px solid
                                            var(--main-shadow);
                                    }

                                    &.title {
                                        background: var(
                                            --grid-border-dark
                                        ) !important;
                                    }
                                }

                                &.filterRow {
                                    display: none !important;
                                }

                                .tooltip-indicator:after {
                                    display: none !important;
                                }
                            }
                        }

                        tbody {
                            tr {
                                &:first-child {
                                    td {
                                        border-top: 0 !important;
                                    }
                                }

                                &.past {
                                    td {
                                        background: var(
                                            --grid-row-cell-past
                                        ) !important;
                                    }
                                }

                                &.current,
                                &.selecteddate {
                                    td {
                                        background: var(
                                            --grid-row-cell-selected
                                        ) !important;
                                    }
                                }

                                &.future {
                                    td {
                                        background: var(
                                            --grid-row-cell-future-hover
                                        ) !important;
                                    }
                                }

                                &.subtitle,
                                &.group-row {
                                    td {
                                        background: var(
                                            --grid-row-cell-tintedtitle
                                        ) !important;
                                    }
                                }

                                @media screen {
                                    &.selectedGridRow {
                                        td {
                                            background: var(
                                                --grid-row-selected-cell
                                            );

                                            &.selected {
                                                background: var(
                                                    --grid-row-selected-cell-selected
                                                );
                                                color: var(
                                                    --grid-body-foreground
                                                );
                                            }
                                        }
                                    }
                                }

                                td {
                                    &.past,
                                    &.future,
                                    &.today,
                                    &.replacement,
                                    &.stat-over,
                                    &.stat-under,
                                    &.no-teacher-or-room,
                                    &.cancelled,
                                    &.edited,
                                    &.unavailable,
                                    &.et-unavailable,
                                    &.available,
                                    &.absent,
                                    &.activity-absent,
                                    &.room-available,
                                    &.et-available-otherDay,
                                    &.set-day,
                                    &.cycle-start,
                                    &.overload,
                                    &.underload,
                                    &.selecteddate,
                                    &.hasAdjustment,
                                    &.disabled {
                                        color: var(
                                            --grid-body-foreground
                                        ) !important;
                                    }

                                    &.activity-unavailable,
                                    &.et-unavailable-otherDay,
                                    &.counted-absent,
                                    &.highlight,
                                    &.searchhighlight {
                                        color: var(
                                            --grid-body-foreground-alt
                                        ) !important;
                                    }

                                    &.canAllocate {
                                        background: var(
                                            --grid-row-cell-allocatable
                                        ) !important;
                                    }

                                    &.mayAllocate {
                                        background: var(
                                            --grid-row-cell-allocations
                                        ) !important;
                                    }

                                    &.searchAllocate {
                                        background: var(
                                            --grid-row-cell-allocSearch
                                        ) !important;
                                    }

                                    &.noAllocate {
                                        background: var(
                                            --grid-row-cell-allocBlockd
                                        ) !important;
                                    }

                                    &.selected-column {
                                        background: var(
                                            --grid-row-cell-selectedcol
                                        ) !important;
                                    }

                                    &.yardDutyPeriod {
                                        background: var(
                                            --grid-row-cell-yarddutyperiod
                                        ) !important;
                                    }

                                    &.subitem {
                                        background: var(
                                            --grid-row-cell-subitem
                                        ) !important;
                                    }

                                    &.yard-duty {
                                        background: var(
                                            --grid-row-cell-yardduty
                                        ) !important;
                                    }

                                    &.past {
                                        background: var(
                                            --grid-row-cell-past
                                        ) !important;
                                    }

                                    &.future {
                                        background: var(
                                            --grid-row-cell-future-hover
                                        ) !important;
                                    }

                                    &.selecteddate {
                                        background: var(
                                            --grid-row-cell-selected
                                        ) !important;
                                    }

                                    &.today {
                                        background: var(
                                            --grid-body-background
                                        ) !important;
                                    }

                                    &.replacement {
                                        background: var(
                                            --grid-row-cell-replacement
                                        ) !important;
                                    }

                                    &.stat-over {
                                        background: var(
                                            --grid-row-cell-stat-over
                                        ) !important;
                                    }

                                    &.stat-under {
                                        background: var(
                                            --grid-row-cell-stat-under
                                        ) !important;
                                    }

                                    &.mrcg {
                                        background: var(
                                            --grid-row-cell-mrcg
                                        ) !important;
                                    }

                                    &.composite {
                                        background: var(
                                            --grid-row-cell-composite
                                        ) !important;
                                    }

                                    &.no-teacher-or-room {
                                        background: var(
                                            --grid-row-cell-noteacherroom
                                        ) !important;
                                    }

                                    &.no-room {
                                        background: var(
                                            --grid-row-cell-noroom
                                        ) !important;
                                    }

                                    &.room-removed {
                                        background: var(
                                            --grid-row-cell-roomremoved
                                        ) !important;
                                    }

                                    &.no-teacher {
                                        background: var(
                                            --grid-row-cell-noteacher
                                        ) !important;
                                    }

                                    &.seat-deficit {
                                        font-weight: 700 !important;
                                    }

                                    &.room-edit-bold {
                                        font-weight: 700 !important;
                                        color: var(
                                            --grid-row-cell-roomedit
                                        ) !important;
                                    }

                                    &.cancelled,
                                    &.edited {
                                        background: var(
                                            --grid-row-cell-cancelled-hover
                                        ) !important;
                                    }

                                    &.unavailable {
                                        background: var(
                                            --grid-row-cell-unavailable
                                        ) !important;
                                    }

                                    &.closure,
                                    &.clash {
                                        background: var(
                                            --grid-row-cell-clash
                                        ) !important;
                                    }

                                    &.et-unavailable {
                                        background: var(
                                            --grid-row-cell-etunavailable
                                        ) !important;
                                    }

                                    &.activity-unavailable,
                                    &.et-unavailable-otherDay {
                                        background: var(
                                            --grid-row-cell-unavailable-activity
                                        ) !important;
                                    }

                                    &.available {
                                        background: var(
                                            --grid-row-cell-available
                                        ) !important;
                                    }

                                    &.absent {
                                        background: var(
                                            --grid-row-cell-absent
                                        ) !important;
                                    }

                                    &.not-at-school {
                                        background: var(
                                            --grid-row-cell-notatschool
                                        ) !important;
                                    }

                                    &.edit {
                                        color: var(
                                            --grid-row-cell-edit
                                        ) !important;
                                    }

                                    &.activity-absent {
                                        background: var(
                                            --grid-row-cell-absent-activity
                                        ) !important;
                                    }

                                    &.room-available {
                                        background: var(
                                            --grid-row-cell-roomavailable
                                        ) !important;
                                    }

                                    &.et-available-otherDay {
                                        background: var(
                                            --grid-row-cell-etavailother
                                        ) !important;
                                    }

                                    &.set-day,
                                    &.cycle-start {
                                        background: var(
                                            --grid-row-cell-cyclestart
                                        ) !important;
                                    }

                                    &.selecteddate {
                                        background: var(
                                            --grid-row-cell-selected
                                        ) !important;
                                    }

                                    &.counted-absent {
                                        background: var(
                                            --grid-row-cell-countedabsent
                                        ) !important;
                                    }

                                    &.activity-available {
                                        background: var(
                                            --grid-row-cell-available-activity
                                        ) !important;
                                    }

                                    &.has-change {
                                        background: var(
                                            --grid-row-cell-has-change
                                        ) !important;
                                    }

                                    &.overload {
                                        background: var(
                                            --grid-row-cell-overload
                                        ) !important;
                                    }

                                    &.underload {
                                        background: var(
                                            --grid-row-cell-underload
                                        ) !important;
                                    }

                                    &.faculty {
                                        background: var(
                                            --grid-row-cell-faculty
                                        ) !important;
                                    }

                                    &.hasAdjustment {
                                        background: var(
                                            --grid-row-cell-underload
                                        ) !important;
                                    }

                                    &.tinted-title {
                                        background: var(
                                            --grid-row-cell-tintedtitle
                                        ) !important;
                                    }

                                    &.highlight,
                                    &.searchhighlight {
                                        background: var(
                                            --grid-row-cell-highlight
                                        ) !important;
                                        font-weight: 500;

                                        &:hover {
                                            background: var(
                                                --grid-row-cell-highlight-hover
                                            ) !important;
                                        }

                                        &.selected {
                                            background: var(
                                                --grid-row-cell-highlight-selected
                                            ) !important;
                                        }
                                    }

                                    &.disabled {
                                        background: var(
                                            --grid-row-cell-disabled
                                        ) !important;
                                    }

                                    &.noPrint {
                                        display: none !important;
                                    }
                                }
                            }
                        }

                        tfoot {
                            tr {
                                td {
                                    text-align: center;
                                    border-top: 1px solid
                                        var(--grid-border-bottom);
                                    border-right: 1px solid var(--focus-outline);

                                    &.hardRight {
                                        border-right-width: 2px !important;
                                        border-right-color: var(
                                            --focus-outline
                                        ) !important;
                                    }

                                    &:last-child {
                                        border-right: 1px solid
                                            var(--grid-border-bottom);
                                    }
                                }
                            }
                        }

                        &.print-transparent {
                            &,
                            tbody,
                            thead {
                                &,
                                tr {
                                    &,
                                    th,
                                    td {
                                        border: 0 !important;
                                    }
                                }
                            }
                        }

                        &.no-header {
                            tbody {
                                tr {
                                    &:first-child {
                                        td {
                                            border-top: 2px solid
                                                var(--foreground-color) !important;
                                        }
                                    }
                                }
                            }
                        }

                        .title {
                            background: var(--grid-body-background) !important;
                            cursor: default;
                            outline: none;

                            label {
                                display: block;
                                clear: both;
                            }
                        }

                        input[type="text"],
                        input[type="number"],
                        input[type="date"],
                        input[type="checkbox"],
                        input[type="radio"],
                        select,
                        textarea {
                            background: var(--grid-input) !important;
                            width: 100% !important;
                        }

                        th,
                        td {
                            background: var(--grid-body-background);
                            border-collapse: collapse;
                            border-spacing: 0px;
                            border-collapse: separate;
                            white-space: nowrap;
                            word-break: normal;
                            outline: none;
                            vertical-align: top;
                            padding: 0.2em 0.3em;
                            overflow: hidden;
                        }

                        th {
                            padding-left: 2px;
                            padding-right: 2px;
                            text-align: left;
                            border-right: 1px solid rgb(91, 137, 183) !important;
                            border-bottom: 1px solid rgb(91, 137, 183) !important;
                            box-sizing: border-box;

                            &.hardRight {
                                border-right-width: 2px !important;
                                border-right-color: rgb(
                                    62,
                                    108,
                                    155
                                ) !important;
                            }

                            &.transBorder {
                                border-right-color: transparent !important;
                            }

                            &.sortable {
                                cursor: default;
                            }
                        }

                        td {
                            white-space: normal;
                            word-break: break-all;
                            display: table-cell;
                            border-right: 1px solid var(--grid-border-bottom);
                            border-bottom: 1px solid var(--grid-border-bottom);
                            box-sizing: border-box;

                            &.headerTitle {
                                span {
                                    font-weight: bold;
                                }

                                ul {
                                    list-style: none;
                                    text-align: left;
                                    padding-left: 0px;
                                    margin-top: 0px;
                                    margin-bottom: 0px;
                                }
                            }

                            &.hardRight {
                                border-right-width: 2px !important;
                                border-right-color: var(
                                    --grid-hard-rule
                                ) !important;
                            }

                            &.hardBottom {
                                border-bottom-width: 2px !important;
                                border-bottom-color: var(
                                    --grid-hard-rule
                                ) !important;
                            }

                            &.hardTop {
                                border-top-width: 2px !important;
                                border-top-color: var(
                                    --grid-hard-rule
                                ) !important;
                            }

                            &.selectable {
                                cursor: pointer;

                                &:hover,
                                &:focus {
                                    background: var(--grid-input) !important;
                                    color: var(--foreground-color) !important;
                                }

                                &.editable {
                                    &:hover,
                                    &:focus {
                                        background: var(
                                            --grid-input
                                        ) !important;
                                        color: var(
                                            --foreground-color
                                        ) !important;
                                    }
                                }

                                .rowInfo {
                                    text-align: left;
                                    padding: 0px 0px 0px 0px;

                                    &:hover {
                                        background-color: var(
                                            --grid-body-background
                                        ) !important;
                                    }

                                    ul {
                                        text-align: left;
                                        padding: 0px 0px 0px 0px;
                                        margin: 0px 0px 0px 0px;
                                        height: 18px;

                                        &:hover {
                                            background: var(
                                                --grid-input
                                            ) !important;
                                        }

                                        li {
                                            height: 18px;

                                            &.even {
                                                background-color: var(
                                                    --grid-even
                                                );
                                                height: 18px;

                                                &:hover {
                                                    background: var(
                                                        --grid-input
                                                    ) !important;
                                                }
                                            }

                                            span {
                                                margin-left: 10px;
                                                margin-right: 10px;
                                            }
                                        }
                                    }
                                }
                            }

                            .editable {
                                background: var(--grid-editable);
                                cursor: text;
                                position: relative;

                                &:hover,
                                &:focus {
                                    background: var(--grid-input) !important;
                                    color: var(--foreground-color) !important;
                                }

                                & > input[type="text"],
                                & > input[type="number"],
                                & > input[type="date"],
                                & > select,
                                & > textarea,
                                .NumberSelector,
                                .DateSelector,
                                .EditableList {
                                    position: absolute;
                                    top: 0px;
                                    left: 0px;
                                    width: 100%;
                                    height: 100%;
                                    font-size: var(--icon-small-size);
                                    border: none;
                                    background: var(--grid-input);
                                }

                                & > input[type="text"],
                                & > input[type="number"],
                                & > input[type="date"] {
                                    top: -1px;
                                }

                                .NumberSelector input[type="text"],
                                .DateSelector input[type="text"] {
                                    background: transparent;
                                }
                            }

                            &.quickedit {
                                background: rgba(0, 139, 139, 0.3);
                            }

                            input[type="checkbox"],
                            input[type="radio"] {
                                position: relative;
                            }

                            div {
                                display: block;
                                width: 100%;

                                &.gridTooltip {
                                    width: 100%;
                                }
                            }
                        }

                        tr td.loading,
                        tr.loading td,
                        &.loading tr td {
                            background-size: 630% 180%;
                            background-position: -30px -15px;
                            opacity: 0.4;
                            color: var(--foreground-color);

                            div {
                                color: var(--foreground-color);
                            }
                        }
                    }

                    input[type="text"],
                    input[type="number"],
                    input[type="date"],
                    input[type="checkbox"],
                    input[type="radio"],
                    select,
                    textarea {
                        background: transparent !important;
                        border: none !important;
                        padding: 0 !important;
                        margin: 0 !important;

                        &:focus {
                            outline: 0;
                        }
                    }

                    label {
                        input[type="checkbox"],
                        input[type="radio"] {
                            position: relative;
                            top: 3px;
                            width: auto;
                        }
                    }

                    input[type="checkbox"].noMax,
                    input[type="radio"].noMax {
                        width: auto;
                    }

                    span {
                        .text-editor,
                        .number-editor,
                        .boolean-editor,
                        .option-editor {
                            .print-only {
                                padding-left: 5px;
                            }
                        }
                    }

                    .print-only {
                        display: initial !important;
                    }

                    .noPrint {
                        display: none !important;
                    }
                }

                .fixed-header {
                    overflow: initial;
                }
            }

            .tts-report-footer {
                display: flex;
                flex-direction: row;
                margin: 20px 0 0;

                div {
                    flex: 1;
                    font-weight: 600;

                    &:nth-child(1) {
                        text-align: left;
                    }

                    &:nth-child(2) {
                        flex: 0;
                        text-align: center;
                    }

                    &:nth-child(3) {
                        text-align: right;
                    }
                }
            }
        }
    }

    @media print {
        display: none;
    }
}

@media only screen and (max-width: 800px) {
    .tts-report {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: var(--grid-body-background);
        overflow-anchor: auto;
        overscroll-behavior: none;
        overflow: hidden;

        .tts-report-toolbar-mask {
            width: 100%;
        }

        .tts-report-toolbar {
            top: 0;
            z-index: 10;
            overflow-x: auto;
            overflow-y: hidden;
            min-height: fit-content;

            .tts-report-toolbar-container {
                width: 100%;
                min-width: initial;
                max-width: 100%;
                min-height: 39px;
                margin: 0;
                border-radius: 0;
            }
        }
    }
}
.rich-editor {
    &,
    & > span,
    ng-quill-editor,
    ng-quill-editor > div {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        flex: 1 1 100% !important;
    }

    &,
    ng-quill-editor {
        .ql-container {
            flex: 1;
            min-height: 300px;
            height: calc(100% - 42px);
            background: var(--main-background);

            &.ql-snow {
                border-color: var(--rich-editor-border-dark)
                    var(--rich-editor-border-light)
                    var(--rich-editor-border-light);
                border-top: 0;
            }
        }
    }

    &.min-edit {
        .ql-container {
            min-height: 130px;
        }
    }

    .ql-toolbar {
        &.ql-snow {
            background: var(--background-color);
            border-color: var(--rich-editor-border-light);
            border-bottom: 0;
        }
    }

    .ql-editor {
        .ql-blank {
            &::before {
                color: var(--rich-editor-blank);
            }
        }
    }

    .ql-snow {
        .ql-size {
            width: 118px;
            margin-left: 4px;
        }

        .ql-picker,
        .ql-stroke {
            color: var(--rich-editor-border-stroke);
            stroke: var(--rich-editor-border-stroke);

            &.ql-expanded {
                .ql-picker-label {
                    border-color: var(--rich-editor-border-dark) !important;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                }
            }
        }

        .ql-picker-options {
            padding: 4px;
            background: var(--background-color);
            border-color: var(--rich-editor-border-dark) !important;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .ql-fill {
            &,
            &.ql-stroke {
                fill: var(--rich-editor-border-stroke);
            }
        }

        &,
        &.ql-toolbar {
            button {
                margin: 0 2px;
                background: 0 0;
                box-shadow: none;
            }

            .ql-picker-item,
            .ql-picker-label,
            button {
                color: var(--rich-editor-border-colour);

                &.ql-selected,
                &.ql-active,
                &:hover,
                &:focus {
                    color: var(--rich-editor-border-accent);

                    .ql-stroke,
                    .ql-stroke-miter {
                        stroke: var(--rich-editor-border-accent);
                    }

                    .ql-fill {
                        &,
                        &.ql-stroke {
                            fill: var(--rich-editor-border-accent);
                        }
                    }
                }

                &.ql-selected,
                &.ql-active {
                    background: var(--rich-editor-background-accent);
                    border-radius: 5px;
                }
            }

            .ql-picker-item {
                padding: 2px 5px;
            }
        }
    }
}

.rich-content {
    p,
    ol,
    ul,
    pre,
    blockquote,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        padding: 0;
        counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
            list-9;
    }
}
.search-bar {
    & > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;

        &:last-child {
            & > li {
                margin-bottom: 8px;
            }
        }

        & > li {
            list-style: none;
            padding: 0;
            margin: 4px 2px 0 2px;
            flex: 0;

            &:first-child,
            &:last-child {
                button.blank {
                    i {
                        font-size: var(--icon-small-size) !important;
                    }
                }
            }

            &:first-child {
                margin-left: 3px;
            }

            &:last-child {
                margin-right: 4px;
            }

            &.primary {
                flex: 1;
            }

            button {
                font-weight: 700;
                min-width: 28px;
                margin: 2px 0 0 0;
                padding: 0 3px;

                &.blank {
                    border: none;
                    background: transparent;
                    box-shadow: none;
                }

                &:disabled {
                    background: var(--button-background-disabled);
                    color: var(--button-foreground-disabled) !important;

                    &:disabled i {
                        color: var(--button-foreground-disabled) !important;
                    }
                }

                i {
                    top: 2px;
                    left: 0px;
                    color: var(--icon-grey);
                    width: 20px;
                    height: 15px;
                    vertical-align: top !important;

                    &.upsidedown {
                        top: 3px;
                    }
                }

                span.icon-replace {
                    top: -3px;
                    color: var(--icon-grey);
                }
            }

            .toggle {
                &,
                button {
                    background: var(--toolbar-button-gradiant-end-dark);
                    border: 1px solid var(--toolbar-button-border-dark);

                    .icon-replace,
                    i {
                        color: var(--main-background) !important;
                    }
                }
            }

            & > input {
                background: var(--main-background);
                border: 1px solid var(--main-bordercolor);
                border-radius: 5px;
                padding: 0px 10px 0px 10px;
                height: 30px;
                line-height: 30px;
                width: 100%;
                outline: none;
                resize: none;
                box-sizing: border-box;

                &:focus {
                    box-shadow: 0 0 0 3px var(--focus-outline) !important;
                }
            }
        }
    }

    .replace {
        .spacer:first-child {
            min-width: 92px;
        }
    }
}
selector-dialog,
single-selector-dialog {
    display: none;
}

.selection-item-container {
    clear: both;
}

.selection-item {
    position: relative;
    padding: 0;
    margin: 10px 0 0 0;
    color: var(--header-three);
    font-size: var(--normal-font-size);
    height: 100%;
    display: flex;
    box-sizing: border-box;

    &:first-child {
        margin-top: 0;
    }

    &:not(.columns) {
        .selection-item-list {
            .selection-item-entry-container {
                .selection-item-entries {
                    .selection-item-entry,
                    .selection-item-header {
                        display: block;
                        height: 25px;
                        line-height: 25px;
                        padding: 0 10px;
                        margin-bottom: 1px;
                        box-sizing: border-box;
                        cursor: pointer;
                        outline: none;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        &.hovered {
                            height: 55px !important;
                            transition:
                                height 0.5s ease,
                                padding-top 0.5s ease;
                        }
                    }
                }
            }
        }
    }

    &.single {
        flex-direction: column;

        .selection-item-single {
            flex: 0;
        }

        .selection-item-sub {
            flex: 1;
            margin-top: 10px;
        }

        .selection-item-list {
            .selection-item-entry-container {
                height: 100%;
                top: 0;
            }
        }
    }

    .selection-item-list {
        flex: 1;
        display: inline-block;
        height: 100%;
        border: 1px solid var(--main-bordercolor);
        border-radius: 5px;
        box-sizing: border-box;
        vertical-align: top;
        overflow: hidden;

        &.drag-over {
            border-color: var(--item-dragged-hover);

            .selection-item-title {
                background: var(--item-dragged-hover);
                text-shadow: 1px 1px 0 var(--item-dragged-shadow);

                &:before {
                    text-shadow: 1px 1px 0 var(--item-dragged-shadow);
                }
            }

            .selection-item-entry-container {
                .selection-item-entries {
                    background: var(--item-dragged-shadow);
                }
            }
        }

        .selection-item-title {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            text-align: left;
            color: var(--header-four);
            background: var(--background-color);
            background: -webkit-linear-gradient(
                top,
                var(--toolbar-button-gradiant-start) 0%,
                var(--toolbar-button-gradiant-end) 100%
            );
            text-shadow: 1px 1px 0 var(--grid-header-foreground-shadow);
            border-bottom: 1px solid var(--toolbar-button-border);
            padding: 0 10px;
            box-sizing: border-box;
            text-decoration: none;
            cursor: pointer;
            overflow: hidden;

            &:before {
                content: "checklist";
                position: absolute;
                top: 2px;
                right: 5px;
                width: 20px;
                height: 20px;
                display: block;
                color: var(--grid-header-foreground);
                font: 500 var(--icon-normal-size) "Material Icons";
                text-shadow: 1px 1px 0 var(--grid-header-foreground-shadow);
            }

            &:focus {
                box-shadow: none !important;
                background: var(--grid-header-gradient-start-active);
                background: linear-gradient(
                    to bottom,
                    var(--grid-header-gradient-end-active) 0%,
                    var(--grid-header-gradient-start-active) 100%
                );
            }
        }

        .selection-item-entry-container {
            display: inline-block;
            width: 100%;
            height: calc(100% - 30px);
            position: relative;
            top: -4px;
            overflow: hidden;

            .selection-item-entries {
                display: block;
                width: 100%;
                height: 100%;
                background: var(--background-color);
                overflow-x: hidden;
                overflow-y: auto;

                .selection-item-entry,
                .selection-item-header {
                    width: 100%;
                    background: var(--main-background);
                    -moz-transition: all 0.2s;
                    -o-transition: all 0.2s;
                    -webkit-transition: all 0.2s;
                    transition: all 0.2s;

                    &.unselectable {
                        background: var(--input-background-disabled);
                    }

                    &:not(.unselectable) {
                        &:hover,
                        &:focus {
                            &,
                            td {
                                background: var(--button-background-alt);
                            }
                        }

                        &:focus {
                            &,
                            td {
                                position: relative;
                                box-shadow: none;
                                z-index: 1;
                            }
                        }
                    }

                    &.selected {
                        &,
                        td {
                            background: var(--button-background-alt-hover);
                            cursor: move;
                        }
                    }

                    &.hovered {
                        &,
                        td {
                            padding-top: 30px !important;
                            transition: padding-top 0.5s ease;
                        }
                    }

                    .dragging {
                        width: 100%;
                        height: 25px;
                        line-height: 25px;
                        padding: 0 10px;
                        margin-bottom: 0;
                        background: var(--button-background-alt-hover);
                        box-sizing: border-box;
                        outline: none;
                        border: none;
                        cursor: move;

                        &:first-child {
                            border-top-left-radius: 5px;
                            border-top-right-radius: 5px;
                        }

                        &:last-child {
                            border-bottom-left-radius: 5px;
                            border-bottom-right-radius: 5px;
                        }
                    }
                }

                .selection-item-entry-table {
                    border-collapse: separate;
                    border-spacing: 0;
                    transform: translate3d(0, 0, 0);
                    width: 100%;

                    tr:focus {
                        box-shadow: none !important;
                        outline: none;
                    }

                    th,
                    td {
                        height: 25px;
                        line-height: 25px;
                        padding: 0 5px;
                        text-align: left;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        vertical-align: middle;
                    }

                    th {
                        position: -webkit-sticky;
                        position: sticky;
                        top: 0;
                        color: var(--header-four);
                        background: var(--background-color);
                        background: linear-gradient(
                            to bottom,
                            var(--toolbar-button-gradiant-start-hover) 0%,
                            var(--toolbar-button-gradiant-end-hover) 100%
                        );
                        border-bottom: 1px solid var(--toolbar-button-border);
                        font-weight: bold;
                        text-shadow: 1px 1px 0
                            var(--grid-header-foreground-shadow);
                        outline: none;
                        cursor: pointer;

                        i {
                            position: relative;
                            top: -2px;
                            left: -5px;
                            vertical-align: middle;
                            width: 10px;
                            height: 22px;
                        }
                    }

                    td {
                        border-bottom: 1px solid var(--toolbar-button-border);

                        &.icon {
                            font: var(--icon-font) !important;
                        }
                    }
                }
            }

            table.selection-item-entries {
                border-collapse: collapse;

                td {
                    height: 25px;
                    line-height: 25px;
                    padding: 0 5px;
                    text-align: left;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                }
            }
        }
    }

    .selection-item-controls {
        flex: 0;
        flex-basis: 80px;
        display: inline-block;
        height: 100%;
        padding-top: 100px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;

        .selection-item-add,
        .selection-item-addall,
        .selection-item-remall,
        .selection-item-rem {
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto 10px auto;
            text-align: center;
            background: var(--background-color);
            color: var(--header-three);
            border-radius: 10px;
            box-sizing: border-box;
            cursor: pointer;
            box-shadow: var(--button-shadow);

            &:hover,
            &:focus {
                background: var(--button-background-alt);
                text-decoration: none;
            }

            i {
                height: 40px;
                line-height: 40px !important;
            }
        }

        .selection-item-addall,
        .selection-item-remall {
            i {
                position: relative;
                width: 12px;
                left: -4px;
            }
        }
    }

    .selection-item-sub {
        width: 100%;
        overflow: auto;
        touch-action: pan-y, pan-x;
        overscroll-behavior: none;
        display: flex;
    }
}

.selection-item-entries {
    .selection-item-entry {
        &.dragging {
            width: 100%;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            margin-bottom: 0;
            background: var(--button-background-alt-hover);
            box-sizing: border-box;
            outline: none;
            border: none;
            cursor: move;
            display: inline-block;
            cursor: move;

            &:first-child {
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            &:last-child {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        }
    }
}

table.selection-item-entries {
    border-collapse: collapse;

    .selection-item-entry {
        &.dragging {
            &:first-child {
                td:first-child {
                    border-top-left-radius: 5px;
                }

                td:last-child {
                    border-top-right-radius: 5px;
                }
            }
        }

        td {
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
    }
}
.cal-tooltip {
    .tt-detail,
    .tt-head {
        display: flex;
    }

    .tt-head {
        .headings {
            width: calc(100% - 45px);

            & > div {
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }

    &.mouse {
        animation: fadein 0.2s ease;
    }

    & > div {
        width: 226px !important;
        background: var(--main-background);
        border: 1px solid var(--main-bordercolor);
        background-color: var(--button-background);
        padding: 4px 8px 4px;
        border-radius: 5px;
        box-sizing: border-box;
    }
}

.displaySettingsDialog {
    .pane {
        .swapbox {
            align-items: center;
            margin-left: 7px;
            margin-right: 15px;

            &.disabled {
                color: lightgrey;
                cursor: default;

                i.swapper:hover {
                    color: lightgrey;
                    cursor: default;
                }
            }

            h4 {
                margin: 0px;
                display: block;
                font-weight: 400;
                font-size: 13px;
                grid-column: 1/1;

                &.radioTiles {
                    align-self: start;
                }
            }

            .val {
                display: inline-block;
                font-size: var(--normal-font-size);
                height: var(--main-height);
                line-height: 22px !important;
                padding: 3px 10px;
                background-color: var(--button-background);
                box-shadow: var(--button-shadow);
                box-sizing: border-box;
                border-radius: 5px;

                &.big {
                    font-size: 17px;
                }
            }

            .radioTiles {
                margin-left: 4px;

                .val {
                    cursor: default;
                    position: relative;
                    margin: 3px 2px 3px 2px;

                    &:not(.selected) {
                        color: grey;
                        cursor: pointer;
                    }

                    &::before {
                        font-family: "Material Icons";
                        content: "radio_button_unchecked";
                        padding-right: 6px;
                        vertical-align: top;
                        position: relative;
                        top: 2px;
                    }

                    &.selected::before {
                        content: "radio_button_checked";
                    }
                }
            }

            .horz {
                grid-column: 2 / span 3;
                grid-row: auto;

                .val {
                    margin: 3px 2px 3px 2px;

                    &:first-child {
                        margin-left: 7px;
                    }
                }
            }

            .v-gap {
                margin-top: 20px;
            }

            & > div {
                grid-column: 2/2;
            }

            i {
                grid-column: 3/3;
                grid-row: 1 / span 2;
                font-size: 25px;
                outline: none;

                &:focus {
                    box-shadow: 0 0 0 3px var(--focus-outline) !important;
                }

                &.swapper {
                    position: relative;
                    top: 2px;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }
        }

        & > .flx-0:last-child,
        & > .flx-1:last-child {
            border-left: 1px var(--main-bordercolor) solid;
            padding-left: 15px;
            padding-top: 0;

            .tt-head {
                word-break: break-word;
            }
        }
    }

    .StudInfoOpt {
        display: inline-block;
        width: 49%;
    }

    .examplebox {
        .cal-tooltip {
            position: initial;
        }
    }

    h4 {
        font-weight: 400;
        font-size: 13px;
    }

    .examplebox {
        &.vertical {
            span.example {
                margin-bottom: 10px;
            }
        }

        &.flex {
            &.vertical {
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
            }
        }

        table.table {
            margin: 0px;
            border-top: none;
        }

        .example {
            padding: 5px 10px 0 0;
        }
    }

    label {
        &.radio {
            outline: none !important;

            &:hover {
                background-color: var(--button-background-hover);
            }

            &.selected {
                background-color: var(--button-background-theme);
            }
        }
    }

    .dialer-button .name {
        top: -4px;
        padding-left: 10px;
    }
}

.mode-button {
    padding-right: 5px;

    .mode-example {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 1px 3px var(--main-shadow-dark);
        top: 2px;
        outline: none;

        &.dark {
            background: #666;
        }

        &.light {
            background: #fff;
        }

        &.auto {
            background: #fff;

            &:after {
                content: "";
                display: inline-block;
                width: 20px;
                height: 20px;
                background: #666;
                position: absolute;
                transform: rotate(45deg);
                top: 7px;
                right: -7px;
            }
        }

        &.active {
            box-shadow: 0 0 0 3px var(--button-background-theme);
        }
    }
}
.sidebar {
    flex: 0 0 56px;
    width: 56px;
    height: 100%;
    display: flex;
    padding: 0;
    position: relative;
    background-color: var(--input-background-framed);
    overflow: hidden;
    opacity: 0;
    z-index: 15;

    .sidebar-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-width: 300px;
        height: 100%;
    }

    .sidebar-grip {
        position: absolute;
        top: 83px;
        left: 0;
        width: 5px;
        height: calc(100% - 83px);
        transition: all 0.4s;
        background: transparent;
        cursor: ew-resize;
        z-index: 15;
        -webkit-user-select: none;
        user-select: none;

        &:hover {
            background: var(--scrollbar-color);
        }
    }

    .sidebar-header {
        height: 40px;
        background: var(--background-color);
        display: flex;
        flex-direction: row;
        position: relative;
        z-index: 5;

        &:hover,
        &:focus-within {
            z-index: 6;
        }

        .user {
            max-width: 46px;
        }
    }

    .controls {
        position: relative;
        height: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        background: var(--background-color);

        &:focus-within {
            z-index: 5;
        }

        &.has-filters {
            .view-filters {
                display: block !important;
            }

            .sidebar-container {
                border-radius: 0 0 10px 10px;
            }
        }

        .common-toolbar {
            flex-basis: 0 !important;
            transition: flex-basis 0.5s ease 0s;
            overflow: hidden;
        }

        .view-filters {
            flex: 0;
            width: calc(100% - 10px);
            line-height: 25px;
            font-weight: normal;
            font-size: 12pt;
            color: var(--main-background);
            background-color: var(--toolbar-background);
            border: none;
            box-sizing: border-box;
            margin: 0 5px;
            border-radius: 10px 10px 0 0;
            box-shadow: var(--button-shadow);
            display: none;

            .filter {
                position: relative;
                width: 100%;
                padding-left: 20px;
                height: 25px;
                display: block;
                color: var(--main-background);
                text-decoration: none;
                box-sizing: border-box;

                .filter-type {
                    font-weight: 700;
                }

                .filter-remove {
                    position: absolute;
                    top: 4px;
                    right: 5px;
                    display: block;
                    background: transparent;
                    width: 17px;
                    height: 17px;
                    border-radius: 8.5px;
                    opacity: 1;
                    cursor: pointer;

                    &:before,
                    &:after {
                        content: "";
                        position: absolute;
                        top: 3px;
                        left: 7px;
                        width: 3px;
                        height: 11px;
                        background: var(--main-background);
                        border-radius: 3px;
                    }

                    &:before {
                        transform: rotate(45deg);
                    }

                    &:after {
                        transform: rotate(-45deg);
                    }

                    &:hover {
                        &:before,
                        &:after {
                            background: var(--button-background-red);
                        }
                    }
                }
            }
        }

        .sidebar-container {
            flex: 1;
            margin: 0 5px;
            max-width: 46px;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
            background: var(--menu-background);
            border-radius: 10px;
            box-shadow: var(--button-shadow);
            transition: max-width 0.2s ease-in-out;
            z-index: 5;

            & > * {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--menu-background);
                z-index: 5;
            }

            .slim-scroll-pane {
                overflow-x: hidden !important;

                .tree-menu {
                    width: 100%;
                    margin-left: 0;

                    .menu-item {
                        .button {
                            border-radius: 0;

                            .icon {
                                width: 46px;

                                &::before {
                                    left: 9px;
                                }

                                span {
                                    width: 100%;
                                }
                            }
                        }

                        .child-indicator {
                            width: 10px;

                            &::before {
                                top: 8px;
                                right: 2px;
                                border-width: 3px 3px 3px 0;
                            }
                        }

                        .children {
                            margin-left: 0;
                            padding-left: 0;
                            border-left: 0;
                            border-top: 1px solid var(--main-bordercolor);
                            border-bottom: 1px solid var(--main-bordercolor);
                            background: var(--background-color-light);
                            transition: all 0.2s ease-in-out;
                        }
                    }
                }
            }
        }

        .status {
            flex-basis: 30px;
            display: flex;
            flex-direction: column;
            transition: flex-basis 0.5s ease 0s;
            overflow: hidden;

            .date-container {
                flex: 1;
                position: relative;
                width: 100%;
                max-height: 0px;
                margin-top: 0px;
                display: flex;
                flex-basis: 30px;
                border-bottom: 1px solid var(--main-bordercolor);
                transition:
                    max-height 0.5s ease 0s,
                    all 0.5s ease 0s;

                button {
                    border: 0;
                    border-radius: 0;
                    background: var(--background-color);
                    box-shadow: none !important;

                    span {
                        top: 0;
                        color: var(--foreground-color);
                    }
                }

                .back,
                .forward {
                    flex: 0;
                    flex-basis: 30px;
                    position: relative;
                    display: none;

                    &:disabled:after {
                        border-right-color: var(--main-bordercolor);
                    }
                }

                .back {
                    &:after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 6px;
                        left: 10px;
                        width: 0;
                        height: 0;
                        border-top: 8px solid transparent;
                        border-bottom: 8px solid transparent;
                        border-right: 8px solid var(--foreground-color);
                        border-radius: 8px;
                    }
                }

                .forward {
                    &:after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 6px;
                        right: 10px;
                        width: 0;
                        height: 0;
                        border-top: 8px solid transparent;
                        border-bottom: 8px solid transparent;
                        border-left: 8px solid var(--foreground-color);
                        border-radius: 8px;
                    }
                }

                .display {
                    flex: 1;
                    text-align: center;
                    padding: 3px 0;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    &,
                    * {
                        font-size: var(--larger-font-size);
                    }

                    &::after {
                        content: "today";
                        font-family: "Material Icons";
                        font-size: var(--icon-normal-size);
                        color: var(--main-background);
                        line-height: 1;
                        text-transform: none;
                        letter-spacing: normal;
                        word-wrap: normal;
                        white-space: nowrap;
                    }

                    span {
                        display: none;
                    }
                }
            }

            .expand-button {
                flex: 0 0 56px;
                position: relative;
                cursor: pointer;
                outline: none;
                transition: flex-basis 0.5s;

                &:focus {
                    box-shadow: none;
                    z-index: 1;

                    div {
                        &:nth-child(1),
                        &:nth-child(2) {
                            background: var(--foreground-color);
                        }

                        &:nth-child(3),
                        &:nth-child(4) {
                            box-shadow: 0 0 0 3px var(--focus-outline);
                        }
                    }
                }

                div {
                    position: absolute;
                    width: 13px;
                    height: 2px;
                    left: 8px;
                    background: var(--expand-button-background);
                    border-radius: 1.5px;
                    box-sizing: border-box;
                    background: var(--header-two);
                    z-index: 0;

                    &:nth-child(1),
                    &:nth-child(2) {
                        z-index: 1;
                    }

                    &:nth-child(1),
                    &:nth-child(3) {
                        top: 11px;
                        transform: rotate(315deg);
                    }

                    &:nth-child(2),
                    &:nth-child(4) {
                        top: 19px;
                        transform: rotate(45deg);
                    }
                }
            }

            .file-container {
                flex: 1;
                padding: 0 3px 0 0;
                display: flex;
                background: var(--background-color);

                span {
                    display: block;
                    line-height: 30px;
                    font-weight: bold;
                    font-size: var(--larger-font-size);
                    color: var(--input-foreground);
                    text-align: left;
                    width: 100%;
                    padding: 0 0 0 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    -webkit-user-select: none;
                    user-select: none;
                }

                .file-list {
                    &,
                    selecteditor {
                        width: 100%;
                        height: 30px;
                        padding: 0;

                        input {
                            width: 100%;
                            height: 30px;
                            line-height: 25px;
                            padding-left: 5px;
                            font-weight: 700;
                            font-size: var(--larger-font-size) !important;
                            color: var(--input-foreground);
                            background-color: transparent;
                            border: none;
                            border-radius: 0;
                            outline: none;
                            padding-right: 20px !important;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            box-sizing: border-box;

                            &:focus {
                                box-shadow: 0 0 0 3px var(--focus-outline);
                            }
                        }
                    }
                }
            }
        }
    }
}

.sidebar-open {
    .sidebar {
        flex-basis: 300px;
        width: 300px;

        .sidebar-header {
            .user {
                max-width: initial;
            }
        }

        .sidebar-container {
            max-width: 100%;

            .slim-scroll-pane {
                overflow: scroll;
                height: 100%;

                .tree-menu {
                    width: calc(100% - 5px);
                    margin-left: 5px;

                    .menu-item {
                        .button {
                            border-top-left-radius: 10px;
                            border-bottom-left-radius: 10px;

                            .icon {
                                width: 40px;

                                &::before {
                                    left: 2px;
                                }

                                span {
                                    width: calc(100% - 10px);
                                }
                            }
                        }

                        .child-indicator {
                            width: 22px;

                            &::before {
                                top: 5px;
                                right: 8px;
                                border-width: 6px 6px 6px 0;
                            }
                        }

                        .children {
                            margin: 0 0 0 15px;
                            padding: 0 0 0 5px;
                            border-left: 1px solid var(--main-bordercolor);
                            border-top: 0;
                            border-bottom: 0;
                            background: transparent;
                        }
                    }
                }
            }
        }

        .controls {
            .common-toolbar {
                flex-basis: 39px !important;
                padding-top: 3px;
            }

            .status {
                flex-basis: 30px !important;

                &.has-date {
                    flex-basis: 65px !important;
                }

                .date-container {
                    max-height: 30px;
                    margin-top: 5px;

                    .back,
                    .forward,
                    .display span {
                        display: initial;
                    }

                    .display::after {
                        display: none;
                    }
                }

                .expand-button {
                    flex: 0 0 30px;

                    div {
                        &:nth-child(1),
                        &:nth-child(3) {
                            transform: rotate(45deg);
                        }

                        &:nth-child(2),
                        &:nth-child(4) {
                            transform: rotate(315deg);
                        }
                    }
                }
            }
        }
    }
}

.sidebar-over {
    .sidebar {
        .status {
            .expand-button {
                div {
                    background: var(--foreground-color);
                }
            }
        }
    }
}

body:not(.dragging) {
    .sidebar {
        transition: all 0.2s ease-in-out;
    }
}

.compact {
    .sidebar {
        position: absolute;
        right: 0;
        width: 0;
        box-shadow: var(--menu-shadow);

        .status {
            .expand-button {
                display: none;
            }

            .file-container {
                span {
                    text-align: center;
                }
            }
        }
    }
}
.slim-scroll-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.ui-sortable-handle {
    cursor: move;
}
.stacked-bar-container {
    clear: both;
}

.stacked-bar {
    position: relative;
    padding: 10px;
    margin: 10px 0 0 0;
    background: var(--background-color-light);
    border-radius: 5px;
    color: var(--header-three);
    font-size: var(--normal-font-size);
    outline: none;
    box-shadow: 0 1px 5px -2px var(--main-shadow);

    &.new-stack {
        background: var(--grid-row-cell-new);
    }

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline) !important;
    }

    &:first-child {
        margin-top: 0;
    }

    .stacked-bar-entry-custom {
        display: inline-block;
        padding: 0 10px;
        position: relative;
        top: 5px;
    }

    .stacked-bar-remove {
        position: absolute;
        top: 6px;
        right: 5px;
        display: block;
        background: transparent;
        width: 17px;
        height: 17px;
        border-radius: 8.5px;
        opacity: 1;
        cursor: pointer;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 3px;
            left: 7px;
            width: 3px;
            height: 11px;
            background: var(--icon-grey);
            border-radius: 3px;
        }

        &:before {
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }

    .stacked-bar-name {
        font-weight: bold;
    }

    .stacked-bar-entries {
        display: flex;
        flex-direction: row;
        padding: 10px 10px 0 10px;
        gap: 4px;

        .stacked-bar-entry {
            flex-basis: 1;
            height: 32px;
            line-height: 30px;
            background: var(--main-background);
            border: 1px solid var(--main-bordercolor);
            border-radius: 5px;
            cursor: default;
            box-sizing: border-box;
            text-align: center;
            display: none;
            opacity: 0;
            transition:
                flex-basis 0.2s,
                opacity 0.1s ease-in;

            &:hover {
                background: var(--button-background-hover);
            }

            .stacked-bar-entry-input {
                background: transparent;
                border: none;
                width: calc(100% - 4px);
                height: 26px;
                text-align: center;
                box-sizing: border-box;

                &:focus {
                    outline: none;
                    box-shadow: none;
                }
            }
        }
    }
}
.tab-bar {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    width: fit-content;
    list-style-type: none;
    box-shadow: var(--button-shadow);

    & > .tab-bar-button {
        position: relative;
        flex: 1;
        text-align: center;
        padding: 0 20px;
        width: fit-content;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        background: var(--button-background);
        color: var(--button-foreground);
        border-radius: 0;
        height: var(--main-height);
        line-height: var(--main-line-height);
        white-space: nowrap;

        &:first-child {
            border-radius: 5px 0 0 5px;
        }

        &:last-child {
            border-radius: 0 5px 5px 0;
        }

        &:hover {
            background: var(--button-background-hover);
        }

        &:focus {
            box-shadow: 0 0 0 3px var(--focus-outline);
            z-index: 1;
        }

        &.active {
            background: var(--button-background-theme);
            color: var(--button-foreground-theme);
            box-shadow: var(--button-shadow-theme);

            &:hover {
                background: var(--button-background-theme-hover);
            }

            &:focus {
                box-shadow: 0 0 0 3px var(--focus-outline);
            }
        }
    }
}
.tabContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 0 0 0;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;

    ul.tabs {
        position: relative;
        padding: 0 8px !important;
        display: flex;
        flex-wrap: wrap;
        z-index: 1;

        &,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            flex: 0 0 auto;
            box-shadow: var(--tabs-shadow);

            &.dirty {
                &.selected a,
                a {
                    background: var(--tabs-dirty-start);
                    background-image: linear-gradient(
                        var(--tabs-dirty-start),
                        25%,
                        var(--tabs-dirty-end)
                    );
                    border: 1px solid var(--tabs-border);

                    &:focus,
                    &:hover {
                        outline: none;
                        background: var(--tabs-dirty-start-hover);
                        background-image: linear-gradient(
                            var(--tabs-dirty-start-hover),
                            25%,
                            var(--tabs-dirty-end-hover)
                        );
                    }
                }
            }

            &.selected {
                box-shadow: var(--tabs-shadow-selected);
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                margin: -2px 0 0 -2px;
                z-index: 1;
                position: relative;

                a {
                    background: var(--main-background);
                    border-bottom: 1px solid var(--main-background) !important;
                    height: 32px;
                    line-height: 22px;
                    margin-left: 0;
                    cursor: default;
                    border-left-width: 1px;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    box-shadow: none !important;
                    z-index: 1;
                }
            }

            &.first {
                &,
                a {
                    border-top-left-radius: 5px;
                }

                a {
                    border-left-width: 1px;
                }
            }

            &.last {
                &,
                a {
                    border-top-right-radius: 5px;
                }
            }

            a {
                position: relative;
                width: 100%;
                padding: 4px 8px;
                display: block;
                float: left;
                font-size: var(--normal-font-size);
                height: 30px;
                line-height: 20px;
                background: var(--tabs-dirty-end);
                border: 1px solid var(--tabs-border);
                border-left-width: 0;
                color: var(--foreground-color);
                text-decoration: none;
                cursor: pointer;

                &:focus,
                &:hover {
                    outline: none;
                    background: var(--tabs-dirty-end-hover);
                }
            }
        }
    }
}

.tabContainer {
    &.boxed {
        .tabContentOuter {
            .tabContent {
                border-left: 1px solid var(--tabs-border);
                border-right: 1px solid var(--tabs-border);
                border-bottom: 1px solid var(--tabs-border);
            }
        }
    }

    .tabContentOuter {
        position: relative;
        top: -1px;
        width: 100%;
        margin: 0 0 -1px 0;
        box-sizing: border-box;
        z-index: 0;
        background: var(--main-background);
        overflow: hidden;
        border-top: 1px solid var(--tabs-border);
        border-radius: 10px;
        contain: paint;
        display: none;

        &.selected {
            display: block;
        }

        .tabContent {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            border: 0;
            overflow: auto;
            touch-action: pan-y, pan-x;
            overscroll-behavior: none;
            border-radius: 10px;

            &.flush-base {
                padding-bottom: 0;
            }

            & > .pane {
                border-radius: 0;
                border: 0;
                background: var(--main-background);
                box-shadow: none;
                height: 100%;
                overflow: auto;
                touch-action: pan-y, pan-x;
                overscroll-behavior: none;

                & > .pane {
                    height: initial;
                }

                &.buffer.with-tools {
                    & > .tools.toolbar {
                        position: sticky;
                        top: 0;
                        z-index: 5;
                        background: var(--main-background);
                        box-shadow: 0 -10px 0 10px var(--main-background);

                        animation-name: pane-toolbar-shadow;
                        animation-duration: 1ms; /* Firefox requires this to apply the animation */
                        animation-timeline: scroll(block nearest);
                    }
                }

                .pane .pane,
                .pane .pane .pane,
                .pane .pane .pane .pane .pane .pane,
                .pane .pane .pane .pane .pane .pane .pane .pane {
                    background: var(--main-background);
                }

                .pane,
                .pane .pane .pane,
                .pane .pane .pane .pane .pane,
                .pane .pane .pane .pane .pane .pane .pane {
                    background: var(--background-color);
                }
            }
        }
    }
}

@keyframes pane-toolbar-shadow {
    0% {
        box-shadow:
            0 -10px 0 10px var(--main-background),
            0 -15px 0 15px transparent,
            0 2px 5px transparent;
    }
    1% {
        box-shadow:
            0 -10px 0 10px var(--main-background),
            0 -15px 0 15px var(--main-shadow-dark),
            0 2px 5px var(--main-shadow-dark);
    }
    100% {
        box-shadow:
            0 -10px 0 10px var(--main-background),
            0 -15px 0 15px var(--main-shadow-dark),
            0 2px 5px var(--main-shadow-dark);
    }
}

@media only screen and (max-width: 767px) {
    .tabContainer {
        ul.tabs {
            li {
                flex: 1 0 auto;
            }
        }
    }
}
.time-picker {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 26px;
    max-width: 120px;

    &.mandatory-field {
        & > input {
            background-color: var(--input-background-mandatory);
            border: 1px solid var(--input-background-mandatory);
            color: var(--input-foreground-mandatory);

            &:hover,
            &:focus {
                background-color: var(
                    --input-background-mandatory-hover
                ) !important;
            }

            &.open,
            &.open:hover,
            &.open:focus {
                background: var(--main-background) !important;
                border-color: transparent !important;
            }

            &:disabled {
                background-color: var(--input-background-disabled) !important;
                color: var(--input-foreground-disabled) !important;
                -webkit-user-select: none;
                user-select: none;

                ~ .time-button {
                    pointer-events: none;

                    i {
                        color: var(--input-foreground-disabled) !important;
                    }
                }
            }
        }
    }

    & > input {
        width: 100% !important;
        text-align: left;

        &.open {
            background: var(--main-background) !important;
            border-color: transparent !important;

            ~ .time-button {
                i {
                    display: none;
                }
            }
        }
    }

    &.text-center {
        & > input {
            text-align: center;
        }
    }

    .time-button {
        position: absolute;
        top: 3px;
        right: 5px;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        background: 0 0 !important;
        border: 0 !important;
        box-shadow: none !important;

        i {
            font-size: var(--icon-smaller-size) !important;
            color: var(--icon-grey);
            line-height: 20px;
        }
    }
}

.time-picker-display {
    border: none;
    border-radius: 5px;
    box-shadow: 3px 3px 20px var(--dialog-shadow);
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    display: none;
    z-index: 999;
    -webkit-user-select: none;
    user-select: none;
    transform: scale(0);
    transform-origin: 0 0;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);

    * {
        box-sizing: border-box;
    }

    &.open {
        display: flex;

        &.visible {
            transform: scale(1);
        }
    }

    .input-mask {
        height: 40px;
        width: 326px;
        position: relative;
        overflow: hidden;
        background: 0 0;
        cursor: text;

        .input-mask-opaque {
            position: absolute;
            left: 20px;
            top: 7px;
            width: 40px;
            height: 20px;
            box-shadow: 0 0 0 9999px var(--main-background);
        }
    }

    &.no-head {
        .input-mask {
            display: none;
        }
    }

    .input-border {
        height: 5px;
        background: var(--main-bordercolor);
    }

    .time-display {
        display: flex;
        flex-direction: row;
        background: var(--main-background);
        padding: 20px;
    }

    .space {
        min-width: 20px;
    }

    .hours,
    .minutes,
    .period {
        padding: 10px;
        background: var(--main-background);
        border: 1px solid var(--main-bordercolor);
        border-radius: 5px;
        text-align: center;

        & > span {
            font-size: 12px;
            font-weight: 700;
            margin-top: -10px;
            display: block;
        }

        .hours-up,
        .minutes-up,
        .period-up {
            width: 60px;
            height: 30px;
            line-height: 30px;
            background: var(--input-background);
            border: 1px solid var(--main-bordercolor-alt);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            cursor: pointer;
            position: relative;
            z-index: 1;

            i {
                margin-top: 2px;
            }

            &:hover {
                background: var(--input-background-hover);
            }

            &:focus {
                box-shadow: 0 0 0 3px var(--focus-outline);
            }
        }

        .hours-down,
        .minutes-down,
        .period-down {
            width: 60px;
            height: 30px;
            line-height: 30px;
            background: var(--input-background);
            border: 1px solid var(--main-bordercolor-alt);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            cursor: pointer;
            position: relative;
            z-index: 1;

            i {
                margin-top: 2px;
            }

            &:hover {
                background: var(--input-background-hover);
            }

            &:focus {
                box-shadow: 0 0 0 3px var(--focus-outline);
            }
        }

        .hours-display,
        .minutes-display,
        .period-display {
            height: 70px;
            border: 1px solid var(--main-bordercolor-alt);
            border-top: 0;
            border-bottom: 0;
            overflow: hidden;
            background: var(--main-background);
            position: relative;

            &::before,
            &::after {
                position: absolute;
                left: -10px;
                width: calc(100% + 20px);
                height: 5px;
                z-index: 1;
                content: "";
                box-shadow: 0 0 10px 5px var(--main-shadow);
            }

            &::before {
                top: -5px;
            }
            &::after {
                bottom: -5px;
            }

            .hours-list,
            .minutes-list,
            .period-list {
                position: relative;
                transition: top 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);

                & > span {
                    display: block;
                    width: 58px;
                    height: 30px;
                    line-height: 30px;
                    border-bottom: 1px solid var(--main-bordercolor);
                    color: var(--header-four);

                    &.main {
                        color: var(--foreground-color);
                    }

                    &.empty {
                        color: var(--main-background);
                    }
                }
            }

            & > span:first-child {
                border-top: 0;
            }

            & > span:last-child {
                border-bottom: 0;
            }
        }
    }

    .dialog-ok {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        height: 30px;
        box-shadow: none;
    }
}
.toggle-switch {
    position: relative;
    display: inline-block;
    min-width: 48px;
    height: 26px;

    input {
        opacity: 0;
        width: 0;
        height: 0;
        display: none;
    }

    .slider {
        display: block;
        position: relative;
        cursor: pointer;
        background-color: var(--main-bordercolor);

        &:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: var(--main-background);
            box-shadow: var(--button-shadow);
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }

        &.round {
            border-radius: 27px;

            &:before {
                border-radius: 50%;
            }
        }

        .label {
            line-height: 24px;
            margin: 0 10px 0 30px;
            padding: 0;
            font-weight: 500;
            color: var(--input-foreground);
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }
    }

    input {
        &:checked {
            + .slider {
                background-color: var(--button-background-theme);

                &:before {
                    left: calc(100% - 23px);
                }

                .label {
                    margin: 0 30px 0 10px;
                }
            }
        }

        &:focus {
            + .slider {
                box-shadow: 0 0 0 3px var(--focus-outline);
            }
        }
    }
}
.main-toolbar {
    position: relative;
    flex: 0 1 auto;
    max-height: 144px;
    width: 100%;
    max-width: 100%;
    background: var(--background-color);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    z-index: 10;
}

.common-toolbar,
.custom-tools,
.bottom-toolbar {
    max-width: 100%;
    max-height: 144px;
    margin: 0;
    background: var(--background-color);
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    z-index: 1;

    .tool-scroll {
        margin: 0 !important;
        padding: 0 0 0 10px !important;
        max-height: 144px;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        box-sizing: border-box;

        &::-webkit-scrollbar {
            display: none;
        }

        &.need-scroll {
            position: static;
            padding-left: 30px !important;

            .prev,
            .next {
                display: block;

                &:after,
                &:before {
                    content: "";
                    display: block;
                    position: absolute;
                    background: var(--input-foreground-framed);
                    width: 3px;
                    height: 12px;
                    border-radius: 5px;
                    left: 9px;
                }

                &:hover {
                    background-color: var(--input-foreground-framed-hover);
                }
            }

            .prev {
                left: 0;
            }

            .next {
                right: 0;
            }

            .prev:after,
            .next:before {
                transform: rotate(-45deg);
            }

            .prev:before,
            .next:after {
                transform: rotate(45deg);
            }

            .prev:before,
            .next:before {
                top: calc(50% - 9px);
            }

            .prev:after,
            .next:after {
                top: calc(50% - 2px);
            }
        }

        .prev,
        .next {
            display: none;
            position: absolute;
            top: 0;
            width: 20px;
            height: 100%;
            z-index: 2;
            cursor: pointer;
            background: var(--background-color);
            box-shadow: 0 5px 5px 1px var(--main-shadow);
        }

        .tools {
            position: relative;
            margin: 0 !important;
            padding: 0 !important;
            padding-right: 30px !important;
            transition: left 0.5s ease-out;
            width: fit-content;
            height: 39px;

            &.auto-height {
                height: initial;
            }

            &.none {
                height: 0px;
            }

            &.double {
                height: 72px;
            }

            &.triple {
                height: 108px;
            }

            &.quadruple {
                height: 144px;
            }
        }
    }

    a {
        flex: 1;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        &:hover,
        &:focus {
            background: var(--main-background);
            text-decoration: none;
        }

        &:focus {
            z-index: 10;
        }

        i {
            display: block;
            width: fit-content;
            margin: 6px auto 2px;
        }

        &.open {
            background: var(--toolbar-background);

            &:hover,
            &:focus {
                background: var(--toolbar-background-hover);
            }

            i {
                color: var(--foreground-color-invert) !important;
                text-shadow: none;
            }
        }

        &.notification {
            &::after {
                content: "";
                display: block;
                position: absolute;
                top: 3px;
                right: 8px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: var(--foreground-color-error);
            }

            &.emphasized::after {
                animation: notification-pulse 2s infinite none;
            }
        }
    }

    button,
    select,
    .button {
        background: var(--background-color);
        background: linear-gradient(
            to bottom,
            var(--toolbar-button-gradiant-start) 0%,
            var(--toolbar-button-gradiant-end) 100%
        );
        color: var(--input-foreground);
        border-radius: 8px;
        border: 1px solid var(--toolbar-button-border);
        font-weight: 700;
        height: 26px;
        line-height: 26px;
        margin: 5px 5px 5px 0;
        padding: 0 13px 0 10px;
        vertical-align: top;
        box-shadow: none;
        cursor: pointer;
        font:
            500 var(--normal-font-size) "Open Sans",
            Arial,
            Sans-Serif !important;

        &:hover {
            background: linear-gradient(
                to bottom,
                var(--toolbar-button-gradiant-start-hover) 0%,
                var(--toolbar-button-gradiant-end-hover) 100%
            );
        }

        &:focus {
            box-shadow: 0 0 0 3px var(--focus-outline);
        }

        &:last-child {
            margin-right: 10px;
        }

        &.active {
            background: var(--button-background-theme) !important;
            background: linear-gradient(
                to bottom,
                var(--button-background-theme-hover) 0%,
                var(--button-background-theme) 100%
            ) !important;
            border-color: var(--button-background-theme);

            &:hover,
            &:focus {
                background: var(--button-background-theme-hover) !important;

                &:disabled {
                    background: var(
                        --button-background-theme-disabled
                    ) !important;
                    color: var(--button-foreground-theme-disabled) !important;

                    i {
                        color: var(
                            --button-foreground-theme-disabled
                        ) !important;
                        text-shadow: none;
                    }

                    span {
                        color: var(--button-foreground-theme);
                    }
                }
            }

            &:disabled {
                background: var(--button-background-theme-disabled) !important;
                color: var(--button-foreground-theme-disabled) !important;

                i {
                    color: var(--button-foreground-theme-disabled) !important;
                    text-shadow: none;
                }

                span {
                    color: var(--button-foreground-theme);
                }
            }

            i {
                color: var(--button-foreground-theme);
                text-shadow: -1px -1px 0 var(--button-foreground-shadow);
            }

            span {
                color: var(--button-foreground-theme);
            }
        }

        &.icon-only {
            padding: 0 13px;
        }

        &:last-of-type {
            margin-right: 5px;
        }

        &.link-btn {
            display: inline-block;
            padding: 0em 10px;
            color: var(--anchor-foreground);
            text-decoration: underline;
            border: 0;
            outline: none;
            vertical-align: top;

            &:hover,
            &:focus {
                color: var(--anchor-foreground-hover);
                outline: none;
                box-shadow: 0 0 0 3px var(--focus-outline);
            }
        }

        .off {
            color: var(--foreground-color-error);
            font-weight: bold;
        }

        input[type="checkbox"],
        input[type="radio"] {
            top: 2px !important;
        }

        &.boolean-editor {
            .boolean-editor {
                margin: 0 !important;
                padding: 0 !important;
            }
        }

        &.checkbox .checkmark,
        &.boolean-editor .checkbox .checkmark {
            top: 3px !important;
        }

        &.checkbox .text,
        &.boolean-editor .checkbox .text {
            margin: 1px 0 0 0 !important;
        }

        &.radio .checkmark,
        &.option-editor .radio .checkmark {
            top: 3px !important;
        }

        &.radio .text,
        &.option-editor .radio .text {
            margin: 1px 0 0 0 !important;
            padding: 0 !important;
        }

        input[type="text"] {
            border: 0;
        }

        .text {
            line-height: 22px !important;
            vertical-align: top;
            margin: 0;
        }

        i {
            font-weight: 500 !important;
            font-size: var(--icon-smaller-size) !important;
            text-shadow: 1px 1px 0 var(--main-background);
            color: var(--icon-grey);
            line-height: 22px !important;

            &.flip-y {
                text-shadow: 1px -1px 0 var(--main-background);
            }
        }

        span {
            font-weight: 500 !important;
            line-height: 22px !important;
            color: var(--input-foreground);
        }

        img {
            width: 16px;
            height: 16px;
            filter: grayscale(100%);
        }

        &:disabled {
            box-shadow: none;
            cursor: not-allowed;
            background: var(--button-background-disabled) !important;
            color: var(--button-foreground-disabled) !important;
            border: 1px solid var(--toolbar-button-border-disabled) !important;

            i {
                color: var(--button-foreground-disabled) !important;
                text-shadow: none;
            }

            span {
                color: var(--button-foreground-disabled);
            }

            img {
                filter: grayscale(100%) brightness(110%);
            }
        }
    }

    .button {
        display: inline-block;
    }

    select {
        width: initial;
        padding-right: 20px;
        background: var(--select-background) !important;
        background-image: var(--select-icon) !important;
        appearance: none;
        background-repeat: no-repeat !important;
        background-position: center right !important;
        border: 1px solid var(--main-bordercolor) !important;
    }

    .toggle-switch {
        margin: 5px 5px 5px 0;
        border: 1px solid var(--toolbar-button-border);
        border-radius: 27px;

        &.active {
            border-color: var(--button-foreground-shadow);

            .label {
                color: var(--button-foreground-theme);
            }
        }

        .slider {
            &::before {
                bottom: 2px;
            }
        }
    }

    .tab-bar {
        display: inline-flex;
        box-shadow: none;
        margin: 5px 5px 5px 0;

        & > .tab-bar-button {
            height: 26px;
            line-height: 24px;
            background: var(--background-color);
            background: linear-gradient(
                to bottom,
                var(--toolbar-button-gradiant-start) 0%,
                var(--toolbar-button-gradiant-end) 100%
            );
            border: 1px solid var(--toolbar-button-border);
            border-right-width: 0;
            box-shadow: none;

            &:first-child {
                border-radius: 8px 0 0 8px;
            }

            &:last-child {
                border-right-width: 1px;
                border-radius: 0 8px 8px 0;
            }

            &:hover {
                background: linear-gradient(
                    to bottom,
                    var(--toolbar-button-gradiant-start-hover) 0%,
                    var(--toolbar-button-gradiant-end-hover) 100%
                );
            }

            &:focus {
                box-shadow: 0 0 0 3px var(--focus-outline);
            }

            &.active {
                background: var(--button-background-theme);
                color: var(--button-foreground-theme);
                border-color: var(--button-foreground-shadow);
                box-shadow: none;

                &:hover {
                    background: var(--button-background-theme-hover);
                }

                &:focus {
                    box-shadow: 0 0 0 3px var(--focus-outline);
                }
            }
        }
    }

    .tts-editor {
        height: 26px;
        line-height: 26px;
        margin: 5px 0;
        padding: 0 5px 0 0;
        box-sizing: border-box;
        display: inline-block;

        input {
            height: 26px !important;
            line-height: 26px !important;
            padding: 1px 15px 0 10px !important;
        }
    }

    .select-editor {
        input {
            line-height: 24px !important;
            padding: 0px 20px 0 10px !important;
            background-position-y: 55% !important;
        }
    }

    h2 {
        margin: 0.2em;
        padding: 0;
        color: var(--header-two);
        font-weight: 500;
        font-size: var(--icon-large-size);
        display: none;
    }

    .info-message {
        display: inline-block;
        height: 26px;
        line-height: 26px;
        color: var(--foreground-color);
        padding-right: 10px;
        font-weight: 700;
        margin: 5px 0 0 0;
        vertical-align: top;
    }

    .group {
        vertical-align: top;
        display: inline-flex;
        border: none !important;
        background: none !important;
        padding: 0 !important;
        margin-right: 4px;

        .group-header {
            display: inline-block;
            vertical-align: top;
            box-sizing: border-box;
            line-height: 21px !important;
            background: linear-gradient(
                to bottom,
                var(--toolbar-button-gradiant-start) 0%,
                var(--toolbar-button-gradiant-end) 100%
            );
            border-right: 5px solid var(--toolbar-button-border) !important;
            margin-right: 0 !important;
            font-weight: 600 !important;
            color: var(--button-foreground);
            filter: var(--group-filter);
            cursor: default !important;
        }

        .button {
            margin: 5px -4px 5px 0 !important;
            padding-top: 1px;
            border-radius: 0 !important;
            border: 1px solid var(--toolbar-button-border);
            border-left-width: 0;
            border-right-width: 0;

            &:first-child {
                border-left-width: 1px !important;
                border-top-left-radius: 8px !important;
                border-bottom-left-radius: 8px !important;
            }

            &:last-child {
                margin-right: 5px !important;
                border-right: solid 1px var(--toolbar-button-border) !important;
                border-top-right-radius: 8px !important;
                border-bottom-right-radius: 8px !important;
            }
        }

        & > .radio,
        & > .button.radio,
        & > .option-editor {
            contain: initial;

            .checkmark {
                display: inline-block;
            }

            .text {
                margin: 0 !important;
            }

            input:checked {
                ~ .text {
                    box-shadow: none;
                    color: var(--input-foreground);
                }
            }
        }
    }

    .legend-container {
        display: inline-flex;
        margin: 5px 5px 5px 0;

        .legend-item .legend-colour {
            box-sizing: border-box;
            border: 1px solid var(--main-bordercolor-alt);
        }
    }
}

.custom-tools {
    overflow-y: hidden;
}

.mid-toolbar {
    position: relative;
    float: initial;
    background: var(--background-color);
    border-top: 1px solid var(--main-bordercolor-alt);
    border-bottom: 1px solid var(--main-bordercolor);
    box-shadow: 0 0 5px 1px var(--main-shadow);
    padding: 0 0 0 5px;
    overflow: hidden;
    max-height: 36px;
    -webkit-user-select: none;
    user-select: none;
}

.common-toolbar {
    padding: 0 13px;
    display: flex;

    a {
        &:hover,
        &:focus {
            i {
                color: var(--header-three);
            }
        }

        i {
            color: var(--header-two);
            text-shadow: 1px 1px 0 var(--main-background);
        }
    }
}

.custom-toolbar {
    display: none;
    float: right;
    margin: 10px 10px 0 10px;
    box-sizing: border-box;
    z-index: 1;
}

/*Tools*/

.tools {
    &.toolbar {
        width: 100%;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        gap: 10px;

        &.reverse {
            flex-direction: row-reverse;
        }

        * {
            flex: 0;
            float: none !important;
        }

        spacer {
            flex: 1;
        }

        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"] {
            padding: 2px 6.5px;

            i ~ span {
                padding-right: 10px;
            }
        }
    }

    &.noFloat {
        float: initial;
    }

    .minorSection,
    .content {
        margin-top: 0.9em;
        margin-left: 0.7em;
    }

    .childTools {
        float: right;
        z-index: 3;
        position: relative;
        padding-right: 10px;
    }
}

.subTools h4 {
    background-color: rgba(209, 232, 255, 1);
}

@keyframes notification-pulse {
    0% {
        filter: var(--notification-brightness-1);
    }

    50% {
        filter: var(--notification-brightness-2);
    }
}

@media only screen and (max-width: 500px) {
    .tools {
        &.toolbar {
            flex-wrap: wrap;

            * {
                flex: 1 1 auto;
            }

            spacer {
                display: none;
            }
        }
    }
}
.tts-tooltip {
    position: absolute;
    opacity: 0;
    left: 0;
    top: -1000px;
    border: none;
    padding: 0;
    z-index: 999;

    &.tts-tooltip-open {
        animation: show-tooltip 0.3s ease forwards;
    }

    &.tts-tooltip-left {
        margin-left: -8px;
    }

    .tts-tooltip-title {
        position: relative;
        max-width: 300px;
        clear: both;
        z-index: 8;
        border-radius: 5px;
        background: var(--tooltip-background);
        padding: 4px 10px;

        &,
        * {
            color: var(--tooltip-foreground);
            font-weight: 600;
        }
    }

    ul {
        &,
        li {
            margin: 0;
            padding: 0;
        }
    }
}

.tts-tooltip-hide {
    display: none;
}

@keyframes show-tooltip {
    0% {
        opacity: 0;
        margin-top: 5px;
    }

    100% {
        opacity: 1;
        margin-top: 0;
    }
}
.profile-photo-wrapper,
.app-logo-wrapper {
    width: 210px;
    height: 210px;
    box-sizing: border-box;
    overflow: hidden;

    &:hover,
    &.enabled:hover {
        .select-mask {
            display: block;
        }
    }

    .select-mask {
        display: none;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        border-radius: 125px;
        background: transparent url(/graphics/image-select-mask.png) no-repeat
            center center;
        background-size: contain;
        position: absolute;
        top: -2px;
        left: -2px;
        cursor: pointer;
        box-sizing: border-box;
    }

    .profile-picture,
    .app-logo {
        display: block;
        position: relative;
        top: -3px;
        left: -3px;
        margin: 0px;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        border-radius: 125px;
        color: transparent;
        box-sizing: border-box;
    }
    .profile-image-remove,
    .app-logo-remove {
        width: 100%;
        position: relative;
        top: -10px;
        border-radius: 0px;
        display: none;

        &:hover,
        &:focus {
            box-shadow: none;
        }
    }
}

.profile-photo-wrapper {
    border-radius: 125px;
    width: 150px;
    height: 150px;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 1px 10px var(--main-shadow);
}

.app-logo-wrapper {
    width: 50px;
    height: 50px;
    top: 20px;
    left: 10px;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 1px 5px var(--main-shadow);
    background: var(--main-background);

    .select-mask {
        width: 50px;
        height: 50px;
        border-radius: 0px;
        top: 0px;
        left: 0px;
    }

    .app-logo {
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-radius: 0px;
    }
}

.profile-details-wrapper {
    .user-name {
        color: var(--icon-blue);
    }

    .editable-subtitle {
        width: 100% !important;

        input {
            font-size: var(--largest-font-size);
            padding: 5px;
            position: relative;
            left: -5px;
            background: var(--background-color) !important;
            border: 1px solid transparent !important;
            border-bottom-width: 2px !important;
            border-radius: 0 !important;
            width: 100% !important;
            height: 30px;

            &:hover,
            &:focus {
                box-shadow: none !important;
                border-bottom: dashed 2px var(--main-bordercolor-alt) !important;
            }
        }
    }

    h1,
    h3 {
        margin: 0;
    }

    label,
    .edit-controls a.link {
        font-weight: 700;
        font-size: var(--normal-font-size);
        color: var(--button-foreground);
    }

    .basic-information {
        label {
            line-height: 30px;
        }

        td:nth-child(2) {
            padding-left: 15px;
        }
    }

    .contact-information {
        hr {
            margin-top: 0;
        }

        .edit-controls {
            display: block;
            float: right;

            a.link {
                color: var(--anchor-foreground);
                text-decoration: none;
            }
        }

        ul {
            padding: 0;
            margin: 0;

            li {
                list-style-type: none;
                clear: both;
                margin-bottom: 5px;

                .edit-controls a.link {
                    line-height: normal;
                }

                .title {
                    font-size: var(--normal-font-size);
                    font-weight: 700;
                    color: var(--header-four);
                    width: 55px;
                    margin-right: 10px;
                }

                div {
                    display: inline-block;
                }
            }
        }
    }
}

.profile-picture-wrapper,
.app-logo-pick-wrapper {
    width: 245px;
    height: 35px;
    margin: 0px auto 0px auto;
    overflow: hidden;

    button {
        width: 225px;
        height: 30px;
        margin: 0px 10px;
        padding: 0;
        opacity: 1;
    }

    input[type="file"] {
        position: relative;
        width: 225px;
        height: 30px;
        top: -30px;
        left: 9px;
        opacity: 0;
    }
}

.auth-code {
    input {
        font-family: monospace;
        font-size: 28pt !important;
        height: 55px;
        width: 160px;
        padding: 0 11px;

        &,
        &::placeholder {
            font-style: normal;
        }
    }
}

.password {
    input {
        font-size: 12pt !important;
        height: 45px;
        padding: 0 11px;

        &,
        &::placeholder {
            font-style: normal;
        }
    }
}
.user {
    flex: 1;
    font-weight: normal;
    font-size: var(--larger-font-size);
    color: var(--foreground-color);
    border-radius: 10px;
    line-height: 40px;
    margin: 3px 5px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 100;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    user-select: none;

    &:hover,
    &:focus {
        text-decoration: none;
        background: var(--user-menu-hover);
        box-shadow: var(--button-shadow);

        .profile-image .default {
            box-shadow: none;
        }
    }

    &:focus {
        box-shadow: 0 0 0 3px var(--focus-outline);
    }

    &.open {
        background: var(--main-background);
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

        &:hover,
        &:focus {
            background: var(--background-color-dark);
            box-shadow: var(--button-shadow);
        }
    }

    span {
        font-size: var(--larger-font-size);
    }

    .profile-image {
        flex: 0 0 46px;
        min-width: 46px;
        max-width: 46px;
        margin-right: 5px;

        .default {
            width: 30px;
            height: 30px;
            margin: 4px auto;
            background: var(--foreground-color-invert);
            border-radius: 15px;
            border: 1px solid var(--menu-icon-color-info);
            overflow: hidden;

            img {
                position: relative;
                top: 1px;
                left: 1px;
                width: 26px;
                height: 26px;
            }
        }
    }

    & > .user-details {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        -webkit-user-select: none;
        user-select: none;
        width: 100%;

        & > .username-display,
        & > .school-display {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & > .username-display {
            font-size: var(--larger-font-size);
            min-height: 23px;
            line-height: 21px;
        }

        & > .school-display {
            font-size: var(--small-font-size);
            min-height: 16px;
            line-height: 10px;
        }
    }
}

.user-details-container {
    position: absolute;
    top: 38px;
    left: 0px;
    width: 100%;
    height: calc(100% - 38px);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    z-index: 999;

    .user-menu-container {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 100%;
        width: 100%;

        .user-menu-display {
            width: 100%;
            height: 100%;
            background: var(--main-background);
            border-radius: 0;

            .user-details {
                width: 300px;
                box-sizing: border-box;

                .impersonate {
                    display: block;
                    height: 30px;
                    width: 100%;
                    padding: 0 5px;
                    background: var(--input-background-error);
                    color: var(--button-foreground-theme);
                    outline: none;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    box-sizing: border-box;

                    &:hover,
                    &:focus {
                        background: var(--input-background-error-hover);
                    }

                    &:focus {
                        box-shadow: 0 0 0 3px var(--focus-outline) !important;
                    }

                    * {
                        line-height: 30px !important;
                    }

                    & > i {
                        font-size: 18px;
                        color: var(--button-foreground-theme);
                        position: relative;
                    }

                    & > span {
                        color: var(--button-foreground-theme);
                        width: calc(100% - 25px);
                        padding-left: 5px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        position: relative;
                        vertical-align: top;
                        top: -1px;
                    }
                }

                .detail {
                    display: block;
                    color: var(--header-three);
                    text-decoration: none;
                    text-align: left;
                    padding: 10px;

                    .profile-image {
                        position: relative;
                        left: 0px;
                        top: 0px;
                        width: 60px;
                        height: 60px;
                        display: inline-block;
                        margin-right: 10px;
                        background-color: var(--foreground-color-invert);
                        border-radius: 35px;
                        border: 1px solid var(--menu-icon-color-info);
                        overflow: hidden;
                        vertical-align: top;

                        img {
                            position: relative;
                            top: 1px;
                            left: 1px;
                            width: 56px;
                            height: 56px;
                        }
                    }

                    span,
                    a {
                        display: inline-block;
                    }

                    .profile-link {
                        height: 18px;
                        line-height: 25px;
                        font-size: var(--normal-font-size);
                        color: var(--header-three);
                        border-bottom: 1px solid transparent;

                        i {
                            font-size: var(--largest-font-size) !important;
                            line-height: 18px !important;
                            vertical-align: middle;
                            position: relative;
                            top: -1px;
                        }
                    }

                    .information,
                    .name {
                        clear: unset;
                    }

                    .information {
                        width: 190px;
                    }

                    .name {
                        margin-right: 5px;
                        line-height: 20px;
                        display: inline-block;
                    }

                    .support {
                        &.checkbox {
                            margin-top: 0;

                            .checkmark {
                                width: 18px;
                                height: 18px;

                                &::after,
                                &:hover,
                                &:focus {
                                    &,
                                    &::after {
                                        top: 1px;
                                        left: -1px;
                                        font-size: var(--icon-small-size);
                                        color: var(--icon-red);
                                    }
                                }

                                &::before {
                                    top: 4px;
                                    left: 3px;
                                    width: 11px;
                                    height: 11px;
                                    background: var(--icon-red);
                                    border-radius: 1px;
                                }

                                &::after {
                                    left: -1px;
                                    color: var(--icon-red);
                                }
                            }

                            input[type="checkbox"]:checked {
                                ~ .checkmark {
                                    &::before,
                                    &:hover::before,
                                    &:focus::before {
                                        background: var(--header-three);
                                    }

                                    &::after,
                                    &:hover::after,
                                    &:focus::after {
                                        color: var(--icon-green);
                                        font-variation-settings: "FILL" 1;
                                    }
                                }
                            }

                            .text {
                                font-size: var(--normal-font-size);
                                line-height: 18px;
                                margin: 1px 0 0 2px;
                                color: var(--header-three);
                            }
                        }
                    }
                }

                & > span {
                    .title,
                    .groups {
                        width: 100%;
                        font-size: var(--smaller-font-size);
                        line-height: 15px;
                        display: inline-block;
                    }

                    .groups {
                        display: -webkit-box;
                        max-height: 50px;
                        overflow-y: hidden;
                        -webkit-line-clamp: 3;
                        line-clamp: 3;
                        -webkit-box-orient: vertical;

                        &::before {
                            content: "Member of: ";
                            white-space: nowrap;
                        }
                    }

                    a.profile-link {
                        &:hover,
                        &:focus {
                            border-bottom-color: var(--main-background);

                            &,
                            i {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }

            .user-menu-scroll-container {
                clear: both;
                height: calc(100% - 110px);

                .user-menu-scroll-title {
                    position: relative;
                    display: block;
                    text-align: left;
                    font-weight: 700;
                    padding: 2px 10px;
                    line-height: 25px;
                    box-sizing: border-box;
                    background: var(--menu-icon-color-info);
                    color: var(--button-foreground-theme);

                    .user-menu-logout {
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        background: transparent;
                        height: 29px;
                        line-height: 22px;
                        border: none;
                        border-radius: 0px;
                        color: var(--button-foreground-theme);
                        box-shadow: none !important;

                        &:hover,
                        &:focus {
                            position: absolute;
                            background: var(--user-menu-hover);
                        }
                    }
                }

                .user-menu-school-search-container {
                    padding: 5px;

                    .user-menu-school-search-box {
                        height: 30px !important;
                        line-height: 30px !important;
                        padding: 0 5px !important;
                        border: 0 !important;
                        border-radius: 3px !important;
                        background: var(--background-color-dark) !important;
                        color: var(--header-three) !important;
                        font-weight: 700;
                    }
                }

                .user-menu-scroll {
                    height: calc(100% - 72px);

                    .user-menu-scroll-inner {
                        height: 100%;

                        .user-menu {
                            min-width: 300px;

                            &,
                            li {
                                display: block;
                                list-style: none;
                                margin: 0px;
                                padding: 0px;
                                width: 100%;
                            }

                            li {
                                width: 100%;
                                border-top: 1px solid var(--main-bordercolor);
                                border-bottom: 1px solid
                                    var(--main-bordercolor-alt);
                                position: relative;

                                &:first-child {
                                    border-top: none;
                                }

                                &:last-child {
                                    border-bottom: none;
                                }

                                &.selected {
                                    background: var(--user-menu-school-hover);
                                }

                                &:hover,
                                &:focus {
                                    .pin.unpinned {
                                        display: block;
                                    }
                                }

                                a {
                                    display: block;
                                    padding: 10px 20px 10px 10px;
                                    width: 100%;
                                    height: 60px;
                                    box-sizing: border-box;
                                    cursor: pointer;
                                    outline: 0px;

                                    &:hover,
                                    &:focus {
                                        background: var(
                                            --user-menu-school-hover
                                        );

                                        span.pin.unpinned {
                                            display: block;
                                        }
                                    }

                                    i {
                                        display: block;
                                        float: left;
                                        width: 40px;
                                        height: 40px;
                                        font-size: var(--icon-largest-size);
                                        color: var(
                                            --menu-icon-color-info
                                        ) !important;
                                        filter: drop-shadow(
                                            1px 1px 1px var(--user-menu-icon)
                                        );
                                    }

                                    span {
                                        color: var(--menu-icon-color-info);
                                        display: block;
                                        float: left;
                                        line-height: 20px;

                                        span {
                                            &:first-of-type {
                                                display: inline-block;
                                                font-size: var(
                                                    --largest-font-size
                                                );
                                                vertical-align: top;
                                                text-align: left;
                                                white-space: nowrap;
                                                width: 220px;
                                                height: 23px;
                                                line-height: 20px;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            }

                                            &:last-of-type {
                                                position: relative;
                                                font-size: var(
                                                    --larger-font-size
                                                );
                                                display: block;
                                                float: left;
                                                clear: left;
                                                color: var(--header-three);
                                                text-align: left;
                                                white-space: nowrap;
                                                width: 220px;
                                                top: -3px;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            }
                                        }
                                    }

                                    & > span {
                                        margin-left: 10px;
                                    }
                                }

                                .pin {
                                    display: block;
                                    position: absolute;
                                    top: 10px;
                                    right: 10px;
                                    width: 11px;
                                    height: 11px;

                                    &.unpinned {
                                        display: none;

                                        span {
                                            &:nth-child(1),
                                            &:nth-child(4) {
                                                transform: rotate(45deg);
                                            }

                                            &:nth-child(2),
                                            &:nth-child(3) {
                                                transform: rotate(315deg);
                                            }

                                            &:nth-child(1) {
                                                top: 6px;
                                                right: 3px;
                                                width: 8px;
                                            }

                                            &:nth-child(2) {
                                                top: 7px;
                                                right: 5px;
                                            }

                                            &:nth-child(3) {
                                                top: 2px;
                                                right: 2px;
                                                height: 5px;
                                            }

                                            &:nth-child(4) {
                                                top: 2px;
                                                right: 0;
                                                width: 6px;
                                            }
                                        }
                                    }

                                    span {
                                        display: block;
                                        position: absolute;
                                        background: var(--menu-icon-color-info);
                                        height: 1px;
                                        width: 6px;

                                        &:nth-child(1),
                                        &:nth-child(4) {
                                            transform: rotate(0deg);
                                        }

                                        &:nth-child(2),
                                        &:nth-child(3) {
                                            transform: rotate(90deg);
                                        }

                                        &:nth-child(1) {
                                            top: 7px;
                                            right: 1px;
                                            width: 10px;
                                        }

                                        &:nth-child(2) {
                                            top: 7px;
                                            right: 3px;
                                        }

                                        &:nth-child(3) {
                                            top: 1px;
                                            right: 3px;
                                            height: 6px;
                                        }

                                        &:nth-child(4) {
                                            top: 0;
                                            right: 2px;
                                            width: 8px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.sidebar-open {
    .user {
        &.impersonated {
            &::after {
                position: absolute;
                top: 5px;
                right: 5px;
                content: "assignment_ind";
                font: var(--icon-font) !important;
                font-variation-settings: "FILL" 0 !important;
                color: var(--icon-red);
                line-height: 1;
                text-transform: none;
                letter-spacing: normal;
                word-wrap: normal;
                white-space: nowrap;
            }

            & > span {
                padding-right: 25px;
            }
        }
    }
}
.wizard {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    &.flat {
        article {
            &::before {
                box-shadow: none;
            }
        }
    }

    article {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 40px;
        overflow: hidden;
        contain: paint;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            display: inline-block;
            z-index: 10;
            width: calc(100% + 0px);
            height: calc(100% + 0px);
            top: 0;
            left: 0px;
            pointer-events: none;
            border-radius: 10px;
            box-shadow:
                inset 0 0 5px 2px var(--main-shadow-frame),
                0 0 0 5px var(--page-header);
        }

        .wizard-step {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 40px;
            overflow: auto;
            overscroll-behavior: none;
            contain: paint;
            position: absolute;
            top: 0;
            left: 0;

            &.from-left {
                transform: translateX(-100%);
                animation: wizard-from-left 0.5s ease-in-out forwards;
            }
            &.from-right {
                transform: translateX(100%);
                animation: wizard-from-right 0.5s ease-in-out forwards;
            }
            &.to-left {
                animation: wizard-to-left 0.5s ease-in-out forwards;
            }

            &.to-right {
                animation: wizard-to-right 0.5s ease-in-out forwards;
            }
        }
    }

    footer {
        height: 30px;

        button {
            padding: 0 5px;
            border-radius: 50%;

            &.abort {
                background: var(--button-background-red);

                &,
                * {
                    color: var(--button-foreground-red);
                }

                &:hover,
                &:focus {
                    background: var(--button-background-red-hover);
                }
            }

            &.next {
                background: var(--button-background-theme);

                &,
                * {
                    color: var(--button-foreground-theme);
                }

                &:hover,
                &:focus {
                    background: var(--button-background-theme-hover);
                }
            }

            &.complete {
                background: var(--button-background-green);

                &,
                * {
                    color: var(--button-foreground-green);
                }

                &:hover,
                &:focus {
                    background: var(--button-background-green-hover);
                }
            }
        }
    }
}

@keyframes wizard-from-left {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes wizard-from-right {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes wizard-to-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes wizard-to-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
.error-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: 999;
    width: 100vw;
    height: 100vh;
}

.error-box {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--overlay-icon-shadw);
    margin: 0 auto 20px auto;
}

.error-banner {
    position: relative;
    width: 500px;
    height: 120px;
    background: var(--pane-list);
}

.error-banner:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 10px;
    background: url(/graphics/tts-logo.svg) no-repeat center center;
    background-size: contain;
}

.error-frame {
    width: 500px;
    position: relative;
    background: var(--pane-list);
    color: var(--foreground-color);
    padding: 0 20px 20px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

.page-title.error-title {
    font-family: "Titillium Web", sans-serif;
    font-size: 24pt;
    font-weight: 500;
    vertical-align: middle;
    white-space: normal;
    height: 45px;
    line-height: 45px;
    padding: 0 !important;
    color: var(--brand-color);
}

.error-detail {
    font-size: var(--larger-font-size);
    line-height: 24pt;
    letter-spacing: 0.8px;
    color: var(--header-three);
}

.error-button {
    box-sizing: border-box;
    display: block;
    font-size: var(--larger-font-size);
    font-weight: 600;
    text-decoration: none;
    width: 80%;
    height: 45px;
    line-height: 45px;
    margin: 10px auto 0;
    padding: 0 10px;
    border: 0;
    background: var(--button-background-theme) !important;
    color: var(--button-foreground-theme) !important;
    text-shadow: none;
    border-radius: 10px;
}

.error-button:hover,
.error-button:focus {
    background: var(--button-background-theme-hover) !important;
    border: 0 !important;
}
/**
 * md-color-picker - Angular-Material inspired color picker.
 * @version v0.2.6
 * @link https://github.com/brianpkelley/md-color-picker
 * @license MIT
 */
[md-color-picker] .md-color-picker-input-container,
md-color-picker .md-color-picker-input-container {
    position: relative;
}
[md-color-picker]
    .md-color-picker-input-container
    .md-color-picker-input::-ms-clear,
md-color-picker
    .md-color-picker-input-container
    .md-color-picker-input::-ms-clear {
    display: none;
}
[md-color-picker] .md-color-picker-input-container .md-color-picker-preview,
md-color-picker .md-color-picker-input-container .md-color-picker-preview {
    content: "";
    width: 24px;
    height: 24px;
    margin: 0 5px 0 0;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 3px 1px -2px rgba(0, 0, 0, 0.14),
        0 2px 2px 0 rgba(0, 0, 0, 0.098),
        0 1px 5px 0 rgba(0, 0, 0, 0.084);
    position: relative;
    overflow: hidden;
    background-color: #fff;
    background-image:
        -webkit-linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        ),
        -webkit-linear-gradient(45deg, #ddd 25%, transparent 0, transparent 75%, #ddd
                    0, #ddd);
    background-image: linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        ),
        linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        );
    background-size: 8px 8px;
    background-position:
        0 0,
        4px 4px;
    cursor: pointer;
}
[md-color-picker]
    .md-color-picker-input-container
    .md-color-picker-preview
    .md-color-picker-result,
md-color-picker
    .md-color-picker-input-container
    .md-color-picker-preview
    .md-color-picker-result {
    width: 100%;
    height: 100%;
}
[md-color-picker] .md-color-picker-input-container .md-color-picker-clear,
md-color-picker .md-color-picker-input-container .md-color-picker-clear {
    position: absolute;
    bottom: 42px;
    right: -16px;
    color: rgba(0, 0, 0, 0.26);
}
.md-color-picker-container {
    padding: 8px;
    background: #fff;
    outline: none;
    height: 397px;
    width: 347px;
    opacity: 1;
    overflow: hidden;
    z-index: 1000;
}
.md-color-picker-container .md-color-picker-arrow {
    border: 0 solid transparent;
    border-right-width: 30px;
    border-bottom-width: 0;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition:
        border-bottom-width cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
    transition:
        border-bottom-width cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
}
.md-color-picker-container canvas {
    width: 100%;
    height: 100%;
}
.md-color-picker-container .md-color-picker-preview {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    margin: -8px -8px 0;
    position: relative;
}
.md-color-picker-container .md-color-picker-preview .md-color-picker-result {
    position: absolute;
    height: 100%;
    opacity: 1;
    background: red;
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-result
    > input {
    position: relative;
    top: -15px;
    opacity: 0;
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-result
    > div {
    position: relative;
    width: 100%;
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-result
    > div
    > input {
    border-width: 0;
    background: transparent;
    text-align: center;
    position: absolute;
    top: -15px;
    bottom: 0;
    left: 0;
    right: 0;
    color: #eee;
    outline: none;
    opacity: 0;
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-result
    > div
    > input.switch {
    -webkit-transition:
        top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        0.25s opacity ease-out;
    transition:
        top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        0.25s opacity ease-out;
    top: 0;
    opacity: 1;
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-tabs
    .md-tab,
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-tabs
    md-pagination-wrapper,
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-tabs
    md-tabs-canvas,
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-tabs
    md-tabs-wrapper {
    max-height: var(--main-height);
    height: var(--main-height);
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-tabs
    md-ink-bar {
    background: hsla(0, 0%, 100%, 0.5);
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-tabs
    .md-tab {
    padding-top: 2px;
    background: hsla(0, 0%, 100%, 0.25);
    color: #eee;
    max-width: none !important;
}
.md-color-picker-container
    .md-color-picker-preview
    .md-color-picker-tabs
    .md-tab.md-active {
    background: transparent;
}
.md-color-picker-container .md-color-picker-preview.dark,
.md-color-picker-container
    .md-color-picker-preview.dark
    .md-color-picker-preview-input {
    color: #333;
}
.md-color-picker-container .md-color-picker-preview.dark .md-tab {
    background: rgba(0, 0, 0, 0.25);
    color: #333;
}
.md-color-picker-container .md-color-picker-preview.dark .md-tab.md-active {
    background: transparent;
}
.md-color-picker-container .md-color-picker-preview.dark md-ink-bar {
    background: rgba(0, 0, 0, 0.5);
}
.md-color-picker-container .md-color-picker-tabs {
    margin: 0 -8px;
}
.md-color-picker-container
    .md-color-picker-tabs
    md-tabs[md-align-tabs="bottom"] {
    padding-bottom: 0;
}
.md-color-picker-container .md-color-picker-tabs .md-tab,
.md-color-picker-container .md-color-picker-tabs md-pagination-wrapper,
.md-color-picker-container .md-color-picker-tabs md-tabs-canvas,
.md-color-picker-container .md-color-picker-tabs md-tabs-wrapper {
    max-height: 36px;
    height: 36px;
}
.md-color-picker-container .md-color-picker-tabs .md-tab {
    padding: 7px 24px;
    background: transparent;
}
.md-color-picker-container .md-color-picker-tabs .md-tab:last-of-type {
    margin-right: -2px;
}
.md-color-picker-container
    .md-color-picker-tabs
    md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: 298px;
}
.md-color-picker-container
    .md-color-picker-tabs
    md-tabs:not(.md-no-tab-content):not(.md-dynamic-height)
    md-tabs-content-wrapper {
    height: 255px;
    margin-bottom: 8px;
}
.md-color-picker-container
    .md-color-picker-tabs
    md-tabs:not(.md-no-tab-content):not(.md-dynamic-height)
    md-tabs-content-wrapper
    md-tab-content {
    height: 255px;
    padding: 0 8px;
}
.md-color-picker-container
    .md-color-picker-tabs
    md-tabs:not(.md-no-tab-content):not(.md-dynamic-height)
    md-tabs-content-wrapper
    md-tab-content
    [md-tabs-template] {
    height: 100%;
}
.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors {
    margin: 8px -8px -8px;
}
.md-color-picker-container
    .md-color-picker-tabs.md-color-picker-colors
    md-ink-bar {
    top: auto;
}
.md-color-picker-container
    .md-color-picker-tabs.md-color-picker-colors
    .md-tab {
    background: rgba(0, 0, 0, 0.075);
}
.md-color-picker-container
    .md-color-picker-tabs.md-color-picker-colors
    .md-tab.md-active {
    background: #fff;
}
.md-color-picker-container .md-color-picker-colors {
    overflow: hidden;
    margin-top: 8px;
}
.md-color-picker-container .md-color-picker-colors .md-color-picker-marker {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
}
.md-color-picker-container .md-color-picker-colors [md-color-picker-spectrum] {
    position: relative;
    cursor: crosshair;
    overflow: hidden;
    height: 255px;
    width: 255px;
}
.md-color-picker-container
    .md-color-picker-colors
    [md-color-picker-spectrum]
    .md-color-picker-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow:
        0 0 2px 0 rgba(0, 0, 0, 0.5),
        inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
    top: -5px;
    left: calc(100% - 5px);
}
.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha],
.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] {
    position: relative;
    cursor: crosshair;
    overflow: hidden;
    width: 30px;
}
.md-color-picker-container
    .md-color-picker-colors
    [md-color-picker-alpha].md-color-picker-wide,
.md-color-picker-container
    .md-color-picker-colors
    [md-color-picker-hue].md-color-picker-wide {
    width: 67px;
}
.md-color-picker-container
    .md-color-picker-colors
    [md-color-picker-alpha]
    .md-color-picker-marker,
.md-color-picker-container
    .md-color-picker-colors
    [md-color-picker-hue]
    .md-color-picker-marker {
    height: 5px;
    width: 100%;
    border-left: 0;
    border-right: 0;
    top: -2px;
    left: 0;
}
.md-color-picker-container
    .md-color-picker-sliders
    md-slider.red-slider
    .md-track-fill {
    background: #d01515;
}
.md-color-picker-container
    .md-color-picker-sliders
    md-slider.red-slider
    .md-thumb:after {
    background-color: #d01515;
    border-color: #d01515;
}
.md-color-picker-container
    .md-color-picker-sliders
    md-slider.green-slider
    .md-track-fill {
    background: #19d015;
}
.md-color-picker-container
    .md-color-picker-sliders
    md-slider.green-slider
    .md-thumb:after {
    background-color: #19d015;
    border-color: #19d015;
}
.md-color-picker-container
    .md-color-picker-sliders
    md-slider.blue-slider
    .md-track-fill {
    background: #1560d0;
}
.md-color-picker-container
    .md-color-picker-sliders
    md-slider.blue-slider
    .md-thumb:after {
    background-color: #1560d0;
    border-color: #1560d0;
}
.md-color-picker-container
    .md-color-picker-material-palette
    .md-color-picker-material-title {
    font-size: 22px;
    line-height: 75px;
    padding: 0 15px;
    color: rgba(0, 0, 0, 0.85);
    text-transform: capitalize;
}
.md-color-picker-container
    .md-color-picker-material-palette
    .md-color-picker-material-title.dark {
    color: hsla(0, 0%, 100%, 0.85);
}
.md-color-picker-container
    .md-color-picker-material-palette
    .md-color-picker-material-title:not(:first-child) {
    margin-top: 16px;
}
.md-color-picker-container
    .md-color-picker-material-palette
    .md-color-picker-with-label {
    font-size: 12px;
    line-height: 33px;
    padding: 0 5px;
    color: rgba(0, 0, 0, 0.7);
}
.md-color-picker-container
    .md-color-picker-material-palette
    .md-color-picker-with-label.dark {
    color: hsla(0, 0%, 100%, 0.7);
}
.md-color-picker-container
    .md-color-picker-material-palette
    .md-color-picker-material-colors {
    position: absolute;
    -webkit-transition:
        left cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        right cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        bottom cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
    transition:
        left cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        right cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s,
        bottom cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
}
.md-color-picker-container .md-color-picker-history > div > div {
    height: 20px;
    margin: 4px;
    background-color: #fff;
    background-image:
        -webkit-linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        ),
        -webkit-linear-gradient(45deg, #ddd 25%, transparent 0, transparent 75%, #ddd
                    0, #ddd);
    background-image: linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        ),
        linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        );
    background-size: 8px 8px;
    background-position:
        0 0,
        4px 4px;
}
.md-color-picker-container .md-color-picker-history > div > div > div {
    width: 100%;
    height: 100%;
}
.md-color-picker-container .md-color-picker-history button {
    margin-top: auto;
    margin-left: auto;
}
.md-color-picker-checkered-bg {
    background-color: #fff;
    background-image:
        -webkit-linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        ),
        -webkit-linear-gradient(45deg, #ddd 25%, transparent 0, transparent 75%, #ddd
                    0, #ddd);
    background-image: linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        ),
        linear-gradient(
            45deg,
            #ddd 25%,
            transparent 0,
            transparent 75%,
            #ddd 0,
            #ddd
        );
    background-size: 8px 8px;
    background-position:
        0 0,
        4px 4px;
}

.md-color-picker-dialog {
    & md-actions {
        & button {
            margin: 5px;

            &:last-child {
                background: var(--button-background-theme) !important;
                color: var(--button-foreground-theme) !important;

                &:hover,
                &:focus {
                    background: var(--button-background-theme-hover) !important;

                    &:disabled {
                        background: var(
                            --button-background-theme-disabled
                        ) !important;
                        color: var(
                            --button-foreground-theme-disabled
                        ) !important;
                    }
                }

                &:disabled {
                    background: var(
                        --button-background-theme-disabled
                    ) !important;
                    color: var(--button-foreground-theme-disabled) !important;
                }
            }
        }
    }
}
/*!
 * AngularJS Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.1.20
 */
body,
html {
    height: 100%;
    position: relative;
}
body {
    margin: 0;
    padding: 0;
}
[tabindex="-1"]:focus {
    outline: none;
}
.inset {
    padding: 10px;
}
a.md-no-style,
button.md-no-style {
    font-weight: 400;
    background-color: inherit;
    text-align: left;
    border: none;
    padding: 0;
    margin: 0;
}
button,
input,
select,
textarea {
    vertical-align: baseline;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}
button[disabled],
html input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled] {
    cursor: default;
}
textarea {
    vertical-align: top;
    overflow: auto;
}
input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
input:-webkit-autofill {
    text-shadow: none;
}
.md-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-transform: none;
    width: 1px;
}
.md-shadow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: inherit;
    pointer-events: none;
}
.md-shadow-bottom-z-1 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.md-shadow-bottom-z-2 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}
.md-shadow-animated.md-shadow {
    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.md-ripple-container {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.md-ripple {
    position: absolute;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    opacity: 0;
    border-radius: 50%;
}
.md-ripple.md-ripple-placed {
    transition:
        margin 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        border 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        height 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        margin 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        border 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        height 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        margin 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        border 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        height 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.md-ripple.md-ripple-scaled {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}
.md-ripple.md-ripple-active,
.md-ripple.md-ripple-full,
.md-ripple.md-ripple-visible {
    opacity: 0.2;
}
.md-ripple.md-ripple-remove {
    -webkit-animation: md-remove-ripple 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: md-remove-ripple 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@-webkit-keyframes md-remove-ripple {
    0% {
        opacity: 0.15;
    }
    to {
        opacity: 0;
    }
}
@keyframes md-remove-ripple {
    0% {
        opacity: 0.15;
    }
    to {
        opacity: 0;
    }
}
.md-padding {
    padding: 8px;
}
.md-margin {
    margin: 8px;
}
.md-scroll-mask {
    position: absolute;
    background-color: transparent;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
}
.md-scroll-mask > .md-scroll-mask-bar {
    display: block;
    position: absolute;
    background-color: #fafafa;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 65;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
}
.md-no-momentum {
    -webkit-overflow-scrolling: auto;
}
.md-no-flicker {
    filter: blur(0);
}
@media (min-width: 960px) {
    .md-padding {
        padding: 16px;
    }
}
body[dir="ltr"],
body[dir="rtl"],
html[dir="ltr"],
html[dir="rtl"] {
    unicode-bidi: embed;
}
bdo[dir="rtl"] {
    direction: rtl;
}
bdo[dir="ltr"],
bdo[dir="rtl"] {
    unicode-bidi: bidi-override;
}
bdo[dir="ltr"] {
    direction: ltr;
}
body,
html {
    -webkit-touch-callout: none;
    min-height: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.md-display-4 {
    font-size: 112px;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 112px;
}
.md-display-3 {
    font-size: 56px;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 56px;
}
.md-display-2 {
    font-size: 45px;
    font-weight: 400;
    line-height: 64px;
}
.md-display-1 {
    font-size: 34px;
    font-weight: 400;
    line-height: 40px;
}
.md-headline {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}
.md-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.005em;
}
.md-subhead {
    font-size: 16px;
    line-height: 24px;
}
.md-body-1,
.md-subhead {
    font-weight: 400;
    letter-spacing: 0.01em;
}
.md-body-1 {
    font-size: 14px;
    line-height: 20px;
}
.md-body-2 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 24px;
}
.md-caption {
    font-size: 12px;
    letter-spacing: 0.02em;
}
.md-button {
    letter-spacing: 0.01em;
}
button,
html,
input,
select,
textarea {
    font-family:
        Roboto,
        Helvetica Neue,
        sans-serif;
}
button,
input,
select,
textarea {
    font-size: 100%;
}
.md-panel-outer-wrapper {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
._md-panel-hidden {
    display: none;
}
._md-panel-offscreen {
    left: -9999px;
}
._md-panel-fullscreen {
    border-radius: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    top: 0;
}
._md-panel-shown .md-panel {
    opacity: 1;
    transition: none;
}
.md-panel {
    opacity: 0;
    position: fixed;
}
.md-panel._md-panel-shown {
    opacity: 1;
    transition: none;
}
.md-panel._md-panel-animate-enter {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.md-panel._md-panel-animate-leave {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.md-panel._md-panel-animate-fade-out,
.md-panel._md-panel-animate-scale-out {
    opacity: 0;
}
.md-panel._md-panel-backdrop {
    height: 100%;
    position: absolute;
    width: 100%;
}
.md-panel._md-opaque-enter {
    opacity: 0.48;
    transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.md-panel._md-opaque-leave {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
}
md-autocomplete {
    border-radius: 2px;
    display: block;
    height: 40px;
    position: relative;
    overflow: visible;
    min-width: 190px;
}
md-autocomplete[disabled] input {
    cursor: default;
}
md-autocomplete[md-floating-label] {
    border-radius: 0;
    background: transparent;
    height: auto;
}
md-autocomplete[md-floating-label] md-input-container {
    padding-bottom: 0;
}
md-autocomplete[md-floating-label] md-autocomplete-wrap {
    height: auto;
}
md-autocomplete[md-floating-label] .md-show-clear-button button {
    display: block;
    position: absolute;
    right: 0;
    top: 20px;
    width: 30px;
    height: 30px;
}
md-autocomplete[md-floating-label] .md-show-clear-button input {
    padding-right: 30px;
}
[dir="rtl"] md-autocomplete[md-floating-label] .md-show-clear-button input {
    padding-right: 0;
    padding-left: 30px;
}
md-autocomplete md-autocomplete-wrap {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    height: 40px;
}
md-autocomplete md-autocomplete-wrap.md-menu-showing {
    z-index: 51;
}
md-autocomplete md-autocomplete-wrap input,
md-autocomplete md-autocomplete-wrap md-input-container {
    flex: 1 1 0%;
    box-sizing: border-box;
    min-width: 0;
}
md-autocomplete md-autocomplete-wrap md-progress-linear {
    position: absolute;
    bottom: -2px;
    left: 0;
}
md-autocomplete md-autocomplete-wrap md-progress-linear.md-inline {
    bottom: 40px;
    right: 2px;
    left: 2px;
    width: auto;
}
md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transition: none;
}
md-autocomplete
    md-autocomplete-wrap
    md-progress-linear
    .md-mode-indeterminate
    .md-container {
    transition: none;
    height: 3px;
}
md-autocomplete
    md-autocomplete-wrap
    md-progress-linear
    .md-mode-indeterminate.ng-enter {
    transition: opacity 0.15s linear;
}
md-autocomplete
    md-autocomplete-wrap
    md-progress-linear
    .md-mode-indeterminate.ng-enter.ng-enter-active {
    opacity: 1;
}
md-autocomplete
    md-autocomplete-wrap
    md-progress-linear
    .md-mode-indeterminate.ng-leave {
    transition: opacity 0.15s linear;
}
md-autocomplete
    md-autocomplete-wrap
    md-progress-linear
    .md-mode-indeterminate.ng-leave.ng-leave-active {
    opacity: 0;
}
md-autocomplete input:not(.md-input) {
    font-size: 14px;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 0 15px;
    line-height: 40px;
    height: 40px;
}
md-autocomplete input:not(.md-input)::-ms-clear {
    display: none;
}
md-autocomplete .md-show-clear-button button {
    position: relative;
    line-height: 20px;
    text-align: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    padding: 0;
    font-size: 12px;
    background: transparent;
    margin: auto 5px;
}
md-autocomplete .md-show-clear-button button:after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    border-radius: 50%;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
md-autocomplete .md-show-clear-button button:focus {
    outline: none;
}
md-autocomplete .md-show-clear-button button:focus:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
md-autocomplete .md-show-clear-button button md-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.9);
    transform: translate3d(-50%, -50%, 0) scale(0.9);
}
md-autocomplete .md-show-clear-button button md-icon path {
    stroke-width: 0;
}
md-autocomplete .md-show-clear-button button.ng-enter {
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
    transition:
        transform 0.15s ease-out,
        -webkit-transform 0.15s ease-out;
}
md-autocomplete .md-show-clear-button button.ng-enter.ng-enter-active {
    -webkit-transform: scale(1);
    transform: scale(1);
}
md-autocomplete .md-show-clear-button button.ng-leave {
    transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
    transition:
        transform 0.15s ease-out,
        -webkit-transform 0.15s ease-out;
}
md-autocomplete .md-show-clear-button button.ng-leave.ng-leave-active {
    -webkit-transform: scale(0);
    transform: scale(0);
}
@media screen and (-ms-high-contrast: active) {
    md-autocomplete input {
        border: 1px solid #fff;
    }
    md-autocomplete li:focus {
        color: #fff;
    }
}
.md-standard-list-container.md-autocomplete-suggestions-container,
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    position: absolute;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    z-index: 100;
    height: 100%;
}
.md-standard-list-container.md-autocomplete-suggestions-container .highlight,
.md-virtual-repeat-container.md-autocomplete-suggestions-container .highlight {
    font-weight: 700;
}
.md-standard-list-container {
    box-sizing: border-box;
    display: block;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
    padding: 0;
}
.md-standard-list-container.md-not-found,
.md-virtual-repeat-container.md-not-found {
    height: 48px;
}
.md-autocomplete-suggestions {
    margin: 0;
    list-style: none;
    padding: 0;
}
.md-autocomplete-suggestions li {
    font-size: 14px;
    overflow: hidden;
    padding: 0 15px;
    line-height: 48px;
    height: 48px;
    transition: background 0.15s linear;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.md-autocomplete-suggestions li:focus {
    outline: none;
}
.md-autocomplete-suggestions li:not(.md-not-found-wrapper) {
    cursor: pointer;
}
@media screen and (-ms-high-contrast: active) {
    .md-autocomplete-suggestions,
    md-autocomplete {
        border: 1px solid #fff;
    }
}
md-backdrop {
    transition: opacity 0.45s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
md-backdrop.md-menu-backdrop {
    position: fixed !important;
    z-index: 99;
}
md-backdrop.md-select-backdrop {
    z-index: 81;
    transition-duration: 0;
}
md-backdrop.md-dialog-backdrop {
    z-index: 79;
}
md-backdrop.md-bottom-sheet-backdrop {
    z-index: 69;
}
md-backdrop.md-sidenav-backdrop {
    z-index: 59;
}
md-backdrop.md-click-catcher {
    position: absolute;
}
md-backdrop.md-opaque {
    opacity: 0.48;
}
md-backdrop.md-opaque.ng-enter {
    opacity: 0;
}
md-backdrop.md-opaque.ng-enter.md-opaque.ng-enter-active {
    opacity: 0.48;
}
md-backdrop.md-opaque.ng-leave {
    opacity: 0.48;
    transition: opacity 0.4s;
}
md-backdrop.md-opaque.ng-leave.md-opaque.ng-leave-active {
    opacity: 0;
}
md-bottom-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 16px 88px;
    z-index: 70;
    border-top-width: 1px;
    border-top-style: solid;
    -webkit-transform: translate3d(0, 80px, 0);
    transform: translate3d(0, 80px, 0);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property:
        transform,
        -webkit-transform;
}
md-bottom-sheet.md-has-header {
    padding-top: 0;
}
md-bottom-sheet.ng-enter {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
md-bottom-sheet.ng-enter-active {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(0, 80px, 0) !important;
    transform: translate3d(0, 80px, 0) !important;
}
md-bottom-sheet.ng-leave-active {
    -webkit-transform: translate3d(0, 100%, 0) !important;
    transform: translate3d(0, 100%, 0) !important;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-bottom-sheet .md-subheader {
    background-color: transparent;
    font-family:
        Roboto,
        Helvetica Neue,
        sans-serif;
    line-height: 56px;
    padding: 0;
    white-space: nowrap;
}
md-bottom-sheet md-inline-icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    fill: #444;
}
md-bottom-sheet md-list-item {
    display: flex;
    outline: none;
}
md-bottom-sheet md-list-item:hover {
    cursor: pointer;
}
md-bottom-sheet.md-list md-list-item {
    padding: 0;
    align-items: center;
    height: 48px;
}
md-bottom-sheet.md-grid {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 0;
}
md-bottom-sheet.md-grid md-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: all 0.5s;
    align-items: center;
}
md-bottom-sheet.md-grid md-list-item {
    flex-direction: column;
    align-items: center;
    transition: all 0.5s;
    height: 96px;
    margin-top: 8px;
    margin-bottom: 8px;
}
@media (max-width: 960px) {
    md-bottom-sheet.md-grid md-list-item {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
    }
    md-bottom-sheet.md-grid md-list-item:nth-of-type(3n + 1) {
        align-items: flex-start;
    }
    md-bottom-sheet.md-grid md-list-item:nth-of-type(3n) {
        align-items: flex-end;
    }
}
@media (min-width: 960px) and (max-width: 1279px) {
    md-bottom-sheet.md-grid md-list-item {
        flex: 1 1 25%;
        max-width: 25%;
    }
}
@media (min-width: 1280px) and (max-width: 1919px) {
    md-bottom-sheet.md-grid md-list-item {
        flex: 1 1 16.66667%;
        max-width: 16.66667%;
    }
}
@media (min-width: 1920px) {
    md-bottom-sheet.md-grid md-list-item {
        flex: 1 1 14.28571%;
        max-width: 14.28571%;
    }
}
md-bottom-sheet.md-grid md-list-item:before {
    display: none;
}
md-bottom-sheet.md-grid md-list-item .md-list-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    padding-bottom: 16px;
}
md-bottom-sheet.md-grid md-list-item .md-grid-item-content {
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}
md-bottom-sheet.md-grid md-list-item .md-grid-text {
    font-weight: 400;
    line-height: 16px;
    font-size: 13px;
    margin: 0;
    white-space: nowrap;
    width: 64px;
    text-align: center;
    text-transform: none;
    padding-top: 8px;
}
@media screen and (-ms-high-contrast: active) {
    md-bottom-sheet {
        border: 1px solid #fff;
    }
}
.md-toast-open-top .md-button.md-fab-top-left,
.md-toast-open-top .md-button.md-fab-top-right {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform: translate3d(0, 42px, 0);
    transform: translate3d(0, 42px, 0);
}
.md-toast-open-top .md-button.md-fab-top-left:not([disabled]).md-focused,
.md-toast-open-top .md-button.md-fab-top-left:not([disabled]):hover,
.md-toast-open-top .md-button.md-fab-top-right:not([disabled]).md-focused,
.md-toast-open-top .md-button.md-fab-top-right:not([disabled]):hover {
    -webkit-transform: translate3d(0, 41px, 0);
    transform: translate3d(0, 41px, 0);
}
.md-toast-open-bottom .md-button.md-fab-bottom-left,
.md-toast-open-bottom .md-button.md-fab-bottom-right {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform: translate3d(0, -42px, 0);
    transform: translate3d(0, -42px, 0);
}
.md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]).md-focused,
.md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]):hover,
.md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]).md-focused,
.md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]):hover {
    -webkit-transform: translate3d(0, -43px, 0);
    transform: translate3d(0, -43px, 0);
}
.md-button-group {
    display: flex;
    flex: 1;
    width: 100%;
}
.md-button-group > .md-button {
    flex: 1;
    display: block;
    overflow: hidden;
    width: 0;
    border-width: 1px 0 1px 1px;
    border-radius: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-button-group > .md-button:first-child {
    border-radius: 2px 0 0 2px;
}
.md-button-group > .md-button:last-child {
    border-right-width: 1px;
    border-radius: 0 2px 2px 0;
}
@media screen and (-ms-high-contrast: active) {
    .md-button.md-fab,
    .md-button.md-raised {
        border: 1px solid #fff;
    }
}
md-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 8px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
md-card md-card-header {
    padding: 16px;
    display: flex;
    flex-direction: row;
}
md-card md-card-header:first-child md-card-avatar {
    margin-right: 12px;
}
[dir="rtl"] md-card md-card-header:first-child md-card-avatar {
    margin-right: auto;
    margin-left: 12px;
}
md-card md-card-header:last-child md-card-avatar {
    margin-left: 12px;
}
[dir="rtl"] md-card md-card-header:last-child md-card-avatar {
    margin-left: auto;
    margin-right: 12px;
}
md-card md-card-header md-card-avatar {
    width: 40px;
    height: 40px;
}
md-card md-card-header md-card-avatar .md-user-avatar,
md-card md-card-header md-card-avatar md-icon {
    border-radius: 50%;
}
md-card md-card-header md-card-avatar md-icon {
    padding: 8px;
}
md-card md-card-header md-card-avatar md-icon > svg {
    height: inherit;
    width: inherit;
}
md-card md-card-header md-card-avatar + md-card-header-text {
    max-height: 40px;
}
md-card md-card-header md-card-avatar + md-card-header-text .md-title {
    font-size: 14px;
}
md-card md-card-header md-card-header-text {
    display: flex;
    flex: 1;
    flex-direction: column;
}
md-card md-card-header md-card-header-text .md-subhead {
    font-size: 14px;
}
md-card > img,
md-card > md-card-header img,
md-card md-card-title-media img {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
}
md-card md-card-title {
    padding: 24px 16px 16px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
}
md-card md-card-title + md-card-content {
    padding-top: 0;
}
md-card md-card-title md-card-title-text {
    flex: 1;
    flex-direction: column;
    display: flex;
}
md-card md-card-title md-card-title-text .md-subhead {
    padding-top: 0;
    font-size: 14px;
}
md-card md-card-title md-card-title-text:only-child .md-subhead {
    padding-top: 12px;
}
md-card md-card-title md-card-title-media {
    margin-top: -8px;
}
md-card md-card-title md-card-title-media .md-media-sm {
    height: 80px;
    width: 80px;
}
md-card md-card-title md-card-title-media .md-media-md {
    height: 112px;
    width: 112px;
}
md-card md-card-title md-card-title-media .md-media-lg {
    height: 152px;
    width: 152px;
}
md-card md-card-content {
    display: block;
    padding: 16px;
}
md-card md-card-content > p:first-child {
    margin-top: 0;
}
md-card md-card-content > p:last-child {
    margin-bottom: 0;
}
md-card md-card-content .md-media-xl {
    height: 240px;
    width: 240px;
}
md-card .md-actions,
md-card md-card-actions {
    margin: 8px;
}
md-card .md-actions.layout-column .md-button:not(.md-icon-button),
md-card md-card-actions.layout-column .md-button:not(.md-icon-button) {
    margin: 2px 0;
}
md-card .md-actions.layout-column .md-button:not(.md-icon-button):first-of-type,
md-card
    md-card-actions.layout-column
    .md-button:not(.md-icon-button):first-of-type {
    margin-top: 0;
}
md-card .md-actions.layout-column .md-button:not(.md-icon-button):last-of-type,
md-card
    md-card-actions.layout-column
    .md-button:not(.md-icon-button):last-of-type {
    margin-bottom: 0;
}
md-card .md-actions.layout-column .md-button.md-icon-button,
md-card md-card-actions.layout-column .md-button.md-icon-button {
    margin-top: 6px;
    margin-bottom: 6px;
}
md-card .md-actions md-card-icon-actions,
md-card md-card-actions md-card-icon-actions {
    flex: 1;
    justify-content: flex-start;
    display: flex;
    flex-direction: row;
}
md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button),
md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button) {
    margin: 0 4px;
}
md-card
    .md-actions:not(.layout-column)
    .md-button:not(.md-icon-button):first-of-type,
md-card
    md-card-actions:not(.layout-column)
    .md-button:not(.md-icon-button):first-of-type {
    margin-left: 0;
}
[dir="rtl"]
    md-card
    .md-actions:not(.layout-column)
    .md-button:not(.md-icon-button):first-of-type,
[dir="rtl"]
    md-card
    md-card-actions:not(.layout-column)
    .md-button:not(.md-icon-button):first-of-type {
    margin-left: auto;
    margin-right: 0;
}
md-card
    .md-actions:not(.layout-column)
    .md-button:not(.md-icon-button):last-of-type,
md-card
    md-card-actions:not(.layout-column)
    .md-button:not(.md-icon-button):last-of-type {
    margin-right: 0;
}
[dir="rtl"]
    md-card
    .md-actions:not(.layout-column)
    .md-button:not(.md-icon-button):last-of-type,
[dir="rtl"]
    md-card
    md-card-actions:not(.layout-column)
    .md-button:not(.md-icon-button):last-of-type {
    margin-right: auto;
    margin-left: 0;
}
md-card .md-actions:not(.layout-column) .md-button.md-icon-button,
md-card md-card-actions:not(.layout-column) .md-button.md-icon-button {
    margin-left: 6px;
    margin-right: 6px;
}
md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type,
md-card
    md-card-actions:not(.layout-column)
    .md-button.md-icon-button:first-of-type {
    margin-left: 12px;
}
[dir="rtl"]
    md-card
    .md-actions:not(.layout-column)
    .md-button.md-icon-button:first-of-type,
[dir="rtl"]
    md-card
    md-card-actions:not(.layout-column)
    .md-button.md-icon-button:first-of-type {
    margin-left: auto;
    margin-right: 12px;
}
md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type,
md-card
    md-card-actions:not(.layout-column)
    .md-button.md-icon-button:last-of-type {
    margin-right: 12px;
}
[dir="rtl"]
    md-card
    .md-actions:not(.layout-column)
    .md-button.md-icon-button:last-of-type,
[dir="rtl"]
    md-card
    md-card-actions:not(.layout-column)
    .md-button.md-icon-button:last-of-type {
    margin-right: auto;
    margin-left: 12px;
}
md-card .md-actions:not(.layout-column) .md-button + md-card-icon-actions,
md-card md-card-actions:not(.layout-column) .md-button + md-card-icon-actions {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    flex-direction: row;
}
md-card md-card-footer {
    margin-top: auto;
    padding: 16px;
}
@media screen and (-ms-high-contrast: active) {
    md-card {
        border: 1px solid #fff;
    }
}
.md-image-no-fill > img {
    width: auto;
    height: auto;
}
.md-inline-form md-checkbox {
    margin: 19px 0 18px;
}
md-checkbox {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 16px;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    min-width: 20px;
    min-height: 20px;
    margin-left: 0;
    margin-right: 16px;
}
[dir="rtl"] md-checkbox {
    margin-left: 16px;
    margin-right: 0;
}
md-checkbox:last-of-type {
    margin-left: 0;
    margin-right: 0;
}
md-checkbox.md-focused:not([disabled]) .md-container:before {
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px;
}
md-checkbox.md-focused:not([disabled]):not(.md-checked) .md-container:before {
    background-color: rgba(0, 0, 0, 0.12);
}
md-checkbox.md-align-top-left > div.md-container {
    top: 12px;
}
md-checkbox .md-container {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: 0;
    right: auto;
}
[dir="rtl"] md-checkbox .md-container {
    left: auto;
    right: 0;
}
md-checkbox .md-container:before {
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 50%;
    content: "";
    position: absolute;
    display: block;
    height: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: all 0.5s;
    width: auto;
}
md-checkbox .md-container:after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}
md-checkbox .md-container .md-ripple-container {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    left: -15px;
    top: -15px;
    right: -15px;
    bottom: -15px;
}
md-checkbox .md-icon {
    box-sizing: border-box;
    transition: 0.24s;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 2px;
}
md-checkbox.md-checked .md-icon {
    border-color: transparent;
}
md-checkbox.md-checked .md-icon:after {
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 4.66667px;
    top: 0.22222px;
    display: table;
    width: 6.66667px;
    height: 13.33333px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: "";
}
md-checkbox[disabled] {
    cursor: default;
}
md-checkbox.md-indeterminate .md-icon:after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: table;
    width: 12px;
    height: 2px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: "";
}
md-checkbox .md-label {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    margin-left: 30px;
    margin-right: 0;
}
[dir="rtl"] md-checkbox .md-label {
    margin-left: 0;
    margin-right: 30px;
}
.md-contact-chips .md-chips md-chip {
    padding: 0 25px 0 0;
}
[dir="rtl"] .md-contact-chips .md-chips md-chip {
    padding: 0 0 0 25px;
}
.md-contact-chips .md-chips md-chip .md-contact-avatar {
    float: left;
}
[dir="rtl"] .md-contact-chips .md-chips md-chip .md-contact-avatar {
    float: right;
}
.md-contact-chips .md-chips md-chip .md-contact-avatar img {
    height: 32px;
    border-radius: 16px;
}
.md-contact-chips .md-chips md-chip .md-contact-name {
    display: inline-block;
    height: 32px;
    margin-left: 8px;
}
[dir="rtl"] .md-contact-chips .md-chips md-chip .md-contact-name {
    margin-left: auto;
    margin-right: 8px;
}
.md-contact-suggestion {
    height: 56px;
}
.md-contact-suggestion img {
    height: 40px;
    border-radius: 20px;
    margin-top: 8px;
}
.md-contact-suggestion .md-contact-name {
    margin-left: 8px;
    width: 120px;
}
[dir="rtl"] .md-contact-suggestion .md-contact-name {
    margin-left: auto;
    margin-right: 8px;
}
.md-contact-suggestion .md-contact-email,
.md-contact-suggestion .md-contact-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-contact-chips-suggestions li {
    height: 100%;
}
.md-chips {
    display: block;
    font-family:
        Roboto,
        Helvetica Neue,
        sans-serif;
    font-size: 16px;
    padding: 0 0 8px 3px;
    vertical-align: middle;
}
.md-chips:after {
    content: "";
    display: table;
    clear: both;
}
[dir="rtl"] .md-chips {
    padding: 0 3px 8px 0;
}
.md-chips.md-readonly .md-chip-input-container {
    min-height: 32px;
}
.md-chips:not(.md-readonly) {
    cursor: text;
}
.md-chips.md-removable md-chip {
    padding-right: 22px;
}
[dir="rtl"] .md-chips.md-removable md-chip {
    padding-right: 0;
    padding-left: 22px;
}
.md-chips.md-removable md-chip .md-chip-content {
    padding-right: 4px;
}
[dir="rtl"] .md-chips.md-removable md-chip .md-chip-content {
    padding-right: 0;
    padding-left: 4px;
}
.md-chips md-chip {
    cursor: default;
    border-radius: 16px;
    display: block;
    height: 32px;
    line-height: 32px;
    margin: 8px 8px 0 0;
    padding: 0 12px;
    float: left;
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
}
[dir="rtl"] .md-chips md-chip {
    margin: 8px 0 0 8px;
    float: right;
}
.md-chips md-chip .md-chip-content {
    display: block;
    float: left;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
[dir="rtl"] .md-chips md-chip .md-chip-content {
    float: right;
}
.md-chips md-chip .md-chip-content:focus {
    outline: none;
}
.md-chips md-chip._md-chip-content-edit-is-enabled {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}
.md-chips md-chip .md-chip-remove-container {
    position: absolute;
    right: 0;
    line-height: 22px;
}
[dir="rtl"] .md-chips md-chip .md-chip-remove-container {
    right: auto;
    left: 0;
}
.md-chips md-chip .md-chip-remove {
    text-align: center;
    width: 32px;
    height: 32px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    position: relative;
}
.md-chips md-chip .md-chip-remove md-icon {
    height: 18px;
    width: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}
.md-chips .md-chip-input-container {
    display: block;
    line-height: 32px;
    margin: 8px 8px 0 0;
    padding: 0;
    float: left;
}
[dir="rtl"] .md-chips .md-chip-input-container {
    margin: 8px 0 0 8px;
    float: right;
}
.md-chips .md-chip-input-container input:not([type]),
.md-chips .md-chip-input-container input[type="email"],
.md-chips .md-chip-input-container input[type="number"],
.md-chips .md-chip-input-container input[type="tel"],
.md-chips .md-chip-input-container input[type="text"],
.md-chips .md-chip-input-container input[type="url"] {
    border: 0;
    height: 32px;
    line-height: 32px;
    padding: 0;
}
.md-chips .md-chip-input-container input:not([type]):focus,
.md-chips .md-chip-input-container input[type="email"]:focus,
.md-chips .md-chip-input-container input[type="number"]:focus,
.md-chips .md-chip-input-container input[type="tel"]:focus,
.md-chips .md-chip-input-container input[type="text"]:focus,
.md-chips .md-chip-input-container input[type="url"]:focus {
    outline: none;
}
.md-chips .md-chip-input-container md-autocomplete,
.md-chips .md-chip-input-container md-autocomplete-wrap {
    background: transparent;
}
.md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap {
    box-shadow: none;
}
.md-chips .md-chip-input-container input {
    border: 0;
    height: 32px;
    line-height: 32px;
    padding: 0;
}
.md-chips .md-chip-input-container input:focus {
    outline: none;
}
.md-chips .md-chip-input-container md-autocomplete,
.md-chips .md-chip-input-container md-autocomplete-wrap {
    height: 32px;
}
.md-chips .md-chip-input-container md-autocomplete {
    box-shadow: none;
}
.md-chips .md-chip-input-container md-autocomplete input {
    position: relative;
}
.md-chips .md-chip-input-container:not(:first-child) {
    margin: 8px 8px 0 0;
}
[dir="rtl"] .md-chips .md-chip-input-container:not(:first-child) {
    margin: 8px 0 0 8px;
}
.md-chips .md-chip-input-container input {
    background: transparent;
    border-width: 0;
}
.md-chips md-autocomplete button {
    display: none;
}
@media screen and (-ms-high-contrast: active) {
    .md-chip-input-container,
    md-chip {
        border: 1px solid #fff;
    }
    .md-chip-input-container md-autocomplete {
        border: none;
    }
}
md-content {
    display: block;
    position: relative;
    overflow: auto;
}
md-content[md-scroll-y] {
    overflow-y: auto;
    overflow-x: hidden;
}
md-content[md-scroll-x] {
    overflow-x: auto;
    overflow-y: hidden;
}
@media print {
    md-content {
        overflow: visible !important;
    }
}
md-calendar {
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.md-calendar-scroll-mask {
    display: inline-block;
    overflow: hidden;
    height: 308px;
}
.md-calendar-scroll-mask .md-virtual-repeat-scroller {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar {
    display: none;
}
.md-calendar-scroll-mask .md-virtual-repeat-offsetter {
    width: 100%;
}
.md-calendar-scroll-container {
    box-shadow: inset -3px 3px 6px rgba(0, 0, 0, 0.2);
    display: inline-block;
    height: 308px;
    width: 346px;
}
.md-calendar-date {
    height: 44px;
    width: 44px;
    text-align: center;
    padding: 0;
    border: none;
    box-sizing: content-box;
}
.md-calendar-date:first-child {
    padding-left: 16px;
}
[dir="rtl"] .md-calendar-date:first-child {
    padding-left: 0;
    padding-right: 16px;
}
.md-calendar-date:last-child {
    padding-right: 16px;
}
[dir="rtl"] .md-calendar-date:last-child {
    padding-right: 0;
    padding-left: 16px;
}
.md-calendar-date.md-calendar-date-disabled {
    cursor: default;
}
.md-calendar-date-selection-indicator {
    transition:
        background-color,
        color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 50%;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
}
.md-calendar-date:not(.md-disabled) .md-calendar-date-selection-indicator {
    cursor: pointer;
}
.md-calendar-month-label {
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    padding: 0 0 0 24px;
}
[dir="rtl"] .md-calendar-month-label {
    padding: 0 24px 0 0;
}
.md-calendar-month-label.md-calendar-label-clickable {
    cursor: pointer;
}
.md-calendar-month-label md-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
[dir="rtl"] .md-calendar-month-label md-icon {
    -webkit-transform: none;
    transform: none;
}
.md-calendar-month-label span {
    vertical-align: middle;
}
.md-calendar-day-header {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}
.md-calendar-day-header th {
    height: 40px;
    width: 44px;
    text-align: center;
    padding: 0;
    border: none;
    box-sizing: content-box;
    font-weight: 400;
}
.md-calendar-day-header th:first-child {
    padding-left: 16px;
}
[dir="rtl"] .md-calendar-day-header th:first-child {
    padding-left: 0;
    padding-right: 16px;
}
.md-calendar-day-header th:last-child {
    padding-right: 16px;
}
[dir="rtl"] .md-calendar-day-header th:last-child {
    padding-right: 0;
    padding-left: 16px;
}
.md-calendar {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}
.md-calendar tr:last-child td {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.md-calendar:first-child {
    border-top: 1px solid transparent;
}
.md-calendar tbody,
.md-calendar td,
.md-calendar tr {
    vertical-align: middle;
    box-sizing: content-box;
}
md-datepicker {
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}
.md-inline-form md-datepicker {
    margin-top: 12px;
}
.md-datepicker-button {
    display: inline-block;
    box-sizing: border-box;
    background: none;
    vertical-align: middle;
    position: relative;
}
.md-datepicker-button:before {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    content: "";
    speak: none;
}
.md-datepicker-input {
    font-size: 14px;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    min-width: 120px;
    max-width: 328px;
    padding: 0 0 5px;
}
.md-datepicker-input::-ms-clear {
    display: none;
}
._md-datepicker-floating-label > md-datepicker {
    overflow: visible;
}
._md-datepicker-floating-label > md-datepicker .md-datepicker-input-container {
    border: none;
}
._md-datepicker-floating-label > md-datepicker .md-datepicker-button {
    float: left;
    margin-top: -12px;
    top: 9.5px;
}
[dir="rtl"]
    ._md-datepicker-floating-label
    > md-datepicker
    .md-datepicker-button {
    float: right;
}
._md-datepicker-floating-label .md-input {
    float: none;
}
._md-datepicker-floating-label._md-datepicker-has-calendar-icon
    > label:not(.md-no-float):not(.md-container-ignore) {
    right: 18px;
    left: auto;
    width: calc(100% - 84px);
}
[dir="rtl"]
    ._md-datepicker-floating-label._md-datepicker-has-calendar-icon
    > label:not(.md-no-float):not(.md-container-ignore) {
    right: auto;
    left: 18px;
}
._md-datepicker-floating-label._md-datepicker-has-calendar-icon
    .md-input-message-animation {
    margin-left: 64px;
}
[dir="rtl"]
    ._md-datepicker-floating-label._md-datepicker-has-calendar-icon
    .md-input-message-animation {
    margin-left: auto;
    margin-right: 64px;
}
._md-datepicker-has-triangle-icon {
    padding-right: 18px;
    margin-right: -18px;
}
[dir="rtl"] ._md-datepicker-has-triangle-icon {
    padding-right: 0;
    padding-left: 18px;
    margin-right: auto;
    margin-left: -18px;
}
.md-datepicker-input-container {
    position: relative;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: inline-block;
    width: auto;
}
.md-icon-button + .md-datepicker-input-container {
    margin-left: 12px;
}
[dir="rtl"] .md-icon-button + .md-datepicker-input-container {
    margin-left: auto;
    margin-right: 12px;
}
.md-datepicker-input-container.md-datepicker-focused {
    border-bottom-width: 2px;
}
.md-datepicker-is-showing .md-scroll-mask {
    z-index: 99;
}
.md-datepicker-calendar-pane {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 100;
    border-width: 1px;
    border-style: solid;
    background: transparent;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.md-datepicker-calendar-pane.md-pane-open {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.md-datepicker-input-mask {
    height: 40px;
    width: 340px;
    position: relative;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    cursor: text;
}
.md-datepicker-calendar {
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1);
}
.md-pane-open .md-datepicker-calendar {
    opacity: 1;
}
.md-datepicker-calendar md-calendar:focus {
    outline: none;
}
.md-datepicker-expand-triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
}
.md-datepicker-triangle-button {
    position: absolute;
    right: 0;
    bottom: -2.5px;
    -webkit-transform: translateX(45%);
    transform: translateX(45%);
}
[dir="rtl"] .md-datepicker-triangle-button {
    right: auto;
    left: 0;
    -webkit-transform: translateX(-45%);
    transform: translateX(-45%);
}
.md-datepicker-triangle-button.md-button.md-icon-button {
    height: 36px;
    width: 36px;
    position: absolute;
    padding: 8px;
}
md-datepicker[disabled] .md-datepicker-input-container {
    border-bottom-color: transparent;
}
md-datepicker[disabled] .md-datepicker-triangle-button {
    display: none;
}
.md-datepicker-open {
    overflow: hidden;
}
.md-datepicker-open .md-datepicker-input-container,
.md-datepicker-open input.md-input {
    border-bottom-color: transparent;
}
.md-datepicker-open .md-datepicker-triangle-button,
.md-datepicker-open.md-input-has-placeholder > label,
.md-datepicker-open.md-input-has-value > label,
.md-datepicker-pos-adjusted .md-datepicker-input-mask {
    display: none;
}
.md-datepicker-calendar-pane .md-calendar {
    -webkit-transform: translateY(-85px);
    transform: translateY(-85px);
    transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-delay: 0.125s;
}
.md-datepicker-calendar-pane.md-pane-open .md-calendar {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.md-dialog-is-showing {
    max-height: 100%;
}
.md-dialog-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 80;
    overflow: hidden;
}
md-dialog {
    opacity: 0;
    min-width: 240px;
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px !important;
    position: relative;
    overflow: auto;
    box-shadow: 0px 1px 10px var(--dialog-shadow);
    display: flex;
    flex-direction: column;
}
md-dialog.md-transition-in {
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
}
md-dialog.md-transition-out {
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform: translate(0, 100%) scale(0.2);
    transform: translate(0, 100%) scale(0.2);
}
md-dialog > form {
    display: flex;
    flex-direction: column;
    overflow: auto;
}
md-dialog .md-dialog-content {
    padding: 24px;
}
md-dialog md-dialog-content {
    order: 1;
    flex-direction: column;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
md-dialog
    md-dialog-content:not([layout="row"])
    > :first-child:not(.md-subheader) {
    margin-top: 0;
}
md-dialog md-dialog-content:focus {
    outline: none;
}
md-dialog md-dialog-content .md-subheader {
    margin: 0;
}
md-dialog md-dialog-content .md-dialog-content-body {
    width: 100%;
}
md-dialog md-dialog-content .md-prompt-input-container {
    width: 100%;
    box-sizing: border-box;
}
md-dialog .md-actions,
md-dialog md-dialog-actions {
    display: flex;
    order: 2;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
    padding-right: 8px;
    padding-left: 16px;
    min-height: 52px;
    overflow: hidden;
}
[dir="rtl"] md-dialog .md-actions,
[dir="rtl"] md-dialog md-dialog-actions {
    padding-right: 16px;
    padding-left: 8px;
}
md-dialog .md-actions .md-button,
md-dialog md-dialog-actions .md-button {
    margin: 8px 0 8px 8px;
}
[dir="rtl"] md-dialog .md-actions .md-button,
[dir="rtl"] md-dialog md-dialog-actions .md-button {
    margin-left: 0;
    margin-right: 8px;
}
md-dialog.md-content-overflow .md-actions,
md-dialog.md-content-overflow md-dialog-actions {
    border-top-width: 1px;
    border-top-style: solid;
}
@media screen and (-ms-high-contrast: active) {
    md-dialog {
        border: 1px solid #fff;
    }
}
@media (max-width: 959px) {
    md-dialog.md-dialog-fullscreen {
        min-height: 100%;
        min-width: 100%;
        border-radius: 0;
    }
}
md-divider {
    display: block;
    border-top-width: 1px;
    border-top-style: solid;
    margin: 0;
}
md-divider[md-inset] {
    margin-left: 80px;
}
[dir="rtl"] md-divider[md-inset] {
    margin-left: auto;
    margin-right: 80px;
}
.layout-gt-lg-row > md-divider,
.layout-gt-md-row > md-divider,
.layout-gt-sm-row > md-divider,
.layout-gt-xs-row > md-divider,
.layout-lg-row > md-divider,
.layout-md-row > md-divider,
.layout-row > md-divider,
.layout-sm-row > md-divider,
.layout-xl-row > md-divider,
.layout-xs-row > md-divider {
    border-top-width: 0;
    border-right-width: 1px;
    border-right-style: solid;
}
md-fab-speed-dial {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 20;
}
md-fab-speed-dial.md-fab-bottom-right {
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    position: absolute;
}
md-fab-speed-dial.md-fab-bottom-left {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
    position: absolute;
}
md-fab-speed-dial.md-fab-top-right {
    top: 20px;
    right: 20px;
    bottom: auto;
    left: auto;
    position: absolute;
}
md-fab-speed-dial.md-fab-top-left {
    top: 20px;
    right: auto;
    bottom: auto;
    left: 20px;
    position: absolute;
}
md-fab-speed-dial:not(.md-hover-full) {
    pointer-events: none;
}
md-fab-speed-dial:not(.md-hover-full) .md-fab-action-item,
md-fab-speed-dial:not(.md-hover-full).md-is-open,
md-fab-speed-dial:not(.md-hover-full) md-fab-trigger {
    pointer-events: auto;
}
md-fab-speed-dial ._md-css-variables {
    z-index: 20;
}
md-fab-speed-dial.md-is-open .md-fab-action-item {
    align-items: center;
}
md-fab-speed-dial md-fab-actions {
    display: flex;
    height: auto;
}
md-fab-speed-dial md-fab-actions .md-fab-action-item {
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-fab-speed-dial.md-down {
    flex-direction: column;
}
md-fab-speed-dial.md-down md-fab-trigger {
    order: 1;
}
md-fab-speed-dial.md-down md-fab-actions {
    flex-direction: column;
    order: 2;
}
md-fab-speed-dial.md-up {
    flex-direction: column;
}
md-fab-speed-dial.md-up md-fab-trigger {
    order: 2;
}
md-fab-speed-dial.md-up md-fab-actions {
    flex-direction: column-reverse;
    order: 1;
}
md-fab-speed-dial.md-left {
    flex-direction: row;
}
md-fab-speed-dial.md-left md-fab-trigger {
    order: 2;
}
md-fab-speed-dial.md-left md-fab-actions {
    flex-direction: row-reverse;
    order: 1;
}
md-fab-speed-dial.md-left md-fab-actions .md-fab-action-item {
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-fab-speed-dial.md-right {
    flex-direction: row;
}
md-fab-speed-dial.md-right md-fab-trigger {
    order: 1;
}
md-fab-speed-dial.md-right md-fab-actions {
    flex-direction: row;
    order: 2;
}
md-fab-speed-dial.md-right md-fab-actions .md-fab-action-item {
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-fab-speed-dial.md-fling-remove .md-fab-action-item > *,
md-fab-speed-dial.md-scale-remove .md-fab-action-item > * {
    visibility: hidden;
}
md-fab-speed-dial.md-fling .md-fab-action-item {
    opacity: 1;
}
md-fab-speed-dial.md-fling.md-animations-waiting .md-fab-action-item {
    opacity: 0;
    transition-duration: 0s;
}
md-fab-speed-dial.md-scale .md-fab-action-item {
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 0.14286s;
}
md-fab-toolbar {
    display: block;
}
md-fab-toolbar.md-fab-bottom-right {
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    position: absolute;
}
md-fab-toolbar.md-fab-bottom-left {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
    position: absolute;
}
md-fab-toolbar.md-fab-top-right {
    top: 20px;
    right: 20px;
    bottom: auto;
    left: auto;
    position: absolute;
}
md-fab-toolbar.md-fab-top-left {
    top: 20px;
    right: auto;
    bottom: auto;
    left: 20px;
    position: absolute;
}
md-fab-toolbar .md-fab-toolbar-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
    height: 68px;
}
md-fab-toolbar md-fab-trigger {
    position: absolute;
    z-index: 20;
}
md-fab-toolbar md-fab-trigger button {
    overflow: visible !important;
}
md-fab-toolbar md-fab-trigger .md-fab-toolbar-background {
    display: block;
    position: absolute;
    z-index: 21;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-fab-toolbar md-fab-trigger md-icon {
    position: relative;
    z-index: 22;
    opacity: 1;
    transition: all 0.2s ease-in;
}
md-fab-toolbar.md-left md-fab-trigger {
    right: 0;
}
[dir="rtl"] md-fab-toolbar.md-left md-fab-trigger {
    right: auto;
    left: 0;
}
md-fab-toolbar.md-left .md-toolbar-tools {
    flex-direction: row-reverse;
}
md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
    margin-right: 0.6rem;
}
[dir="rtl"] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
    margin-right: auto;
    margin-left: 0.6rem;
}
md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
    margin-left: -0.8rem;
}
[dir="rtl"] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
    margin-left: auto;
    margin-right: -0.8rem;
}
md-fab-toolbar.md-left .md-toolbar-tools > .md-button:last-child {
    margin-right: 8px;
}
[dir="rtl"] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:last-child {
    margin-right: auto;
    margin-left: 8px;
}
md-fab-toolbar.md-right md-fab-trigger {
    left: 0;
}
[dir="rtl"] md-fab-toolbar.md-right md-fab-trigger {
    left: auto;
    right: 0;
}
md-fab-toolbar.md-right .md-toolbar-tools {
    flex-direction: row;
}
md-fab-toolbar md-toolbar {
    background-color: transparent !important;
    pointer-events: none;
    z-index: 23;
}
md-fab-toolbar md-toolbar .md-toolbar-tools {
    padding: 0 20px;
    margin-top: 3px;
}
md-fab-toolbar md-toolbar .md-fab-action-item {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 0.15s;
}
md-fab-toolbar.md-is-open md-fab-trigger > button {
    box-shadow: none;
}
md-fab-toolbar.md-is-open md-fab-trigger > button md-icon {
    opacity: 0;
}
md-fab-toolbar.md-is-open .md-fab-action-item {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
md-grid-list {
    display: block;
    position: relative;
}
md-grid-list,
md-grid-list md-grid-tile,
md-grid-list md-grid-tile-footer,
md-grid-list md-grid-tile-header,
md-grid-list md-grid-tile > figure {
    box-sizing: border-box;
}
md-grid-list md-grid-tile {
    display: block;
    position: absolute;
}
md-grid-list md-grid-tile figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
}
md-grid-list md-grid-tile md-grid-tile-footer,
md-grid-list md-grid-tile md-grid-tile-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48px;
    color: #fff;
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
}
md-grid-list md-grid-tile md-grid-tile-footer h3,
md-grid-list md-grid-tile md-grid-tile-footer h4,
md-grid-list md-grid-tile md-grid-tile-header h3,
md-grid-list md-grid-tile md-grid-tile-header h4 {
    font-weight: 400;
    margin: 0 0 0 16px;
}
md-grid-list md-grid-tile md-grid-tile-footer h3,
md-grid-list md-grid-tile md-grid-tile-header h3 {
    font-size: 14px;
}
md-grid-list md-grid-tile md-grid-tile-footer h4,
md-grid-list md-grid-tile md-grid-tile-header h4 {
    font-size: 12px;
}
md-grid-list md-grid-tile md-grid-tile-header {
    top: 0;
}
md-grid-list md-grid-tile md-grid-tile-footer {
    bottom: 0;
}
@media screen and (-ms-high-contrast: active) {
    md-grid-tile {
        border: 1px solid #fff;
    }
    md-grid-tile-footer {
        border-top: 1px solid #fff;
    }
}
md-icon {
    margin: auto;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    height: 24px;
    width: 24px;
    min-height: 24px;
    min-width: 24px;
}
md-icon svg {
    pointer-events: none;
    display: block;
}
md-icon[md-font-icon] {
    line-height: 24px;
    width: auto;
}
md-input-container {
    display: inline-block;
    position: relative;
    padding: 2px;
    margin: 18px 0;
    vertical-align: middle;
}
md-input-container:after {
    content: "";
    display: table;
    clear: both;
}
md-input-container.md-block {
    display: block;
}
md-input-container .md-errors-spacer {
    float: right;
    min-height: 24px;
    min-width: 1px;
}
[dir="rtl"] md-input-container .md-errors-spacer {
    float: left;
}
md-input-container > md-icon {
    position: absolute;
    top: 8px;
    left: 2px;
    right: auto;
}
[dir="rtl"] md-input-container > md-icon {
    left: auto;
    right: 2px;
}
md-input-container input[type="color"],
md-input-container input[type="date"],
md-input-container input[type="datetime-local"],
md-input-container input[type="datetime"],
md-input-container input[type="email"],
md-input-container input[type="month"],
md-input-container input[type="number"],
md-input-container input[type="password"],
md-input-container input[type="search"],
md-input-container input[type="tel"],
md-input-container input[type="text"],
md-input-container input[type="time"],
md-input-container input[type="url"],
md-input-container input[type="week"],
md-input-container textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
}
md-input-container input[type="date"],
md-input-container input[type="datetime-local"],
md-input-container input[type="month"],
md-input-container input[type="time"],
md-input-container input[type="week"] {
    min-height: 26px;
}
md-input-container textarea {
    resize: none;
    overflow: hidden;
}
md-input-container textarea.md-input {
    min-height: 26px;
    -ms-flex-preferred-size: auto;
}
md-input-container textarea[md-no-autogrow] {
    height: auto;
    overflow: auto;
}
md-input-container label:not(.md-container-ignore) {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;
}
[dir="rtl"] md-input-container label:not(.md-container-ignore) {
    left: auto;
    right: 0;
}
md-input-container label:not(.md-container-ignore).md-required:after {
    content: " *";
    font-size: 13px;
    vertical-align: top;
}
md-input-container .md-placeholder,
md-input-container label:not(.md-no-float):not(.md-container-ignore) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    order: 1;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    padding-left: 3px;
    padding-right: 0;
    z-index: 1;
    -webkit-transform: translate3d(0, 28px, 0) scale(1);
    transform: translate3d(0, 28px, 0) scale(1);
    transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-width: 100%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
[dir="rtl"] md-input-container .md-placeholder,
[dir="rtl"]
    md-input-container
    label:not(.md-no-float):not(.md-container-ignore) {
    padding-left: 0;
    padding-right: 3px;
    -webkit-transform-origin: right top;
    transform-origin: right top;
}
md-input-container .md-placeholder {
    position: absolute;
    top: 0;
    opacity: 0;
    transition-property:
        opacity,
        -webkit-transform;
    transition-property: opacity, transform;
    transition-property:
        opacity,
        transform,
        -webkit-transform;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
}
md-input-container.md-input-focused .md-placeholder {
    opacity: 1;
    -webkit-transform: translate3d(0, 24px, 0);
    transform: translate3d(0, 24px, 0);
}
md-input-container.md-input-has-value .md-placeholder {
    transition: none;
    opacity: 0;
}
md-input-container:not(.md-input-has-value):not(.md-input-has-placeholder)
    input:not(:focus) {
    color: transparent;
}
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-ampm-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-day-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-hour-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-millisecond-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-minute-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-month-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-second-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-text,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-week-field,
md-input-container:not(.md-input-has-value)
    input:not(:focus)::-webkit-datetime-edit-year-field {
    color: transparent;
}
md-input-container .md-input {
    order: 2;
    display: block;
    margin-top: 0;
    background: none;
    padding: 2px 2px 1px;
    border-width: 0 0 1px;
    line-height: 26px;
    height: 30px;
    -ms-flex-preferred-size: 26px;
    border-radius: 0;
    border-style: solid;
    width: 100%;
    box-sizing: border-box;
    float: left;
}
[dir="rtl"] md-input-container .md-input {
    float: right;
}
md-input-container .md-input:focus {
    outline: none;
}
md-input-container .md-input:invalid {
    outline: none;
    box-shadow: none;
}
md-input-container .md-input.md-no-flex {
    flex: none !important;
}
md-input-container .md-char-counter {
    text-align: right;
    padding-right: 2px;
    padding-left: 0;
}
[dir="rtl"] md-input-container .md-char-counter {
    text-align: left;
    padding-right: 0;
    padding-left: 2px;
}
md-input-container .md-input-messages-animation {
    position: relative;
    order: 4;
    overflow: hidden;
    clear: left;
}
[dir="rtl"] md-input-container .md-input-messages-animation {
    clear: right;
}
md-input-container .md-char-counter,
md-input-container .md-input-message-animation {
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    opacity: 1;
    margin-top: 0;
    padding-top: 5px;
}
md-input-container .md-char-counter:not(.md-char-counter),
md-input-container .md-input-message-animation:not(.md-char-counter) {
    padding-right: 5px;
    padding-left: 0;
}
[dir="rtl"] md-input-container .md-char-counter:not(.md-char-counter),
[dir="rtl"]
    md-input-container
    .md-input-message-animation:not(.md-char-counter) {
    padding-right: 0;
    padding-left: 5px;
}
md-input-container .md-input-message-animation.ng-enter-prepare,
md-input-container .md-input-message-animation.ng-enter:not(.ng-enter-active),
md-input-container:not(.md-input-invalid)
    .md-auto-hide
    .md-input-message-animation {
    opacity: 0;
    margin-top: -100px;
}
md-input-container.md-input-focused label:not(.md-no-float),
md-input-container.md-input-has-placeholder label:not(.md-no-float),
md-input-container.md-input-has-value label:not(.md-no-float) {
    -webkit-transform: translate3d(0, 6px, 0) scale(0.75);
    transform: translate3d(0, 6px, 0) scale(0.75);
    transition:
        width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
md-input-container.md-input-has-value label {
    transition: none;
}
md-input-container.md-input-resized .md-input,
md-input-container .md-input.ng-invalid.ng-dirty {
    padding-bottom: 0;
    border-width: 0 0 2px;
}
[disabled] md-input-container .md-input,
md-input-container .md-input[disabled] {
    background-position: bottom -1px left 0;
    background-size: 4px 1px;
    background-repeat: repeat-x;
}
md-input-container.md-icon-float {
    transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
md-input-container.md-icon-float > label {
    pointer-events: none;
    position: absolute;
}
md-input-container.md-icon-float > md-icon {
    top: 8px;
    left: 2px;
    right: auto;
}
[dir="rtl"] md-input-container.md-icon-float > md-icon {
    left: auto;
    right: 2px;
}
md-input-container.md-icon-left > label .md-placeholder,
md-input-container.md-icon-left
    > label:not(.md-no-float):not(.md-container-ignore),
md-input-container.md-icon-right > label .md-placeholder,
md-input-container.md-icon-right
    > label:not(.md-no-float):not(.md-container-ignore) {
    width: calc(100% - 36px - 18px);
}
md-input-container.md-icon-left {
    padding-left: 36px;
    padding-right: 0;
}
[dir="rtl"] md-input-container.md-icon-left {
    padding-left: 0;
    padding-right: 36px;
}
md-input-container.md-icon-left > label {
    left: 36px;
    right: auto;
}
[dir="rtl"] md-input-container.md-icon-left > label {
    left: auto;
    right: 36px;
}
md-input-container.md-icon-right {
    padding-left: 0;
    padding-right: 36px;
}
[dir="rtl"] md-input-container.md-icon-right {
    padding-left: 36px;
    padding-right: 0;
}
md-input-container.md-icon-right > md-icon:last-of-type {
    margin: 0;
    right: 2px;
    left: auto;
}
[dir="rtl"] md-input-container.md-icon-right > md-icon:last-of-type {
    right: auto;
    left: 2px;
}
md-input-container.md-icon-left.md-icon-right {
    padding-left: 36px;
    padding-right: 36px;
}
md-input-container.md-icon-left.md-icon-right > label .md-placeholder,
md-input-container.md-icon-left.md-icon-right
    > label:not(.md-no-float):not(.md-container-ignore) {
    width: calc(100% - 72px);
}
.md-resize-wrapper {
    position: relative;
}
.md-resize-wrapper:after {
    content: "";
    display: table;
    clear: both;
}
.md-resize-handle {
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 10px;
    background: transparent;
    width: 100%;
    cursor: ns-resize;
}
@media screen and (-ms-high-contrast: active) {
    md-input-container.md-default-theme > md-icon {
        fill: #fff;
    }
}
md-list {
    display: block;
    padding: 8px 0;
}
md-list .md-subheader {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2em;
}
md-list.md-dense md-list-item,
md-list.md-dense md-list-item .md-list-item-inner {
    min-height: 48px;
}
md-list.md-dense md-list-item .md-list-item-inner:before,
md-list.md-dense md-list-item:before {
    content: "";
    min-height: 48px;
    visibility: hidden;
    display: inline-block;
}
md-list.md-dense md-list-item .md-list-item-inner md-icon:first-child,
md-list.md-dense md-list-item md-icon:first-child {
    width: 20px;
    height: 20px;
}
md-list.md-dense
    md-list-item
    .md-list-item-inner
    > md-icon:first-child:not(.md-avatar-icon),
md-list.md-dense md-list-item > md-icon:first-child:not(.md-avatar-icon) {
    margin-right: 36px;
}
[dir="rtl"]
    md-list.md-dense
    md-list-item
    .md-list-item-inner
    > md-icon:first-child:not(.md-avatar-icon),
[dir="rtl"]
    md-list.md-dense
    md-list-item
    > md-icon:first-child:not(.md-avatar-icon) {
    margin-right: auto;
    margin-left: 36px;
}
md-list.md-dense md-list-item .md-avatar,
md-list.md-dense md-list-item .md-avatar-icon,
md-list.md-dense md-list-item .md-list-item-inner .md-avatar,
md-list.md-dense md-list-item .md-list-item-inner .md-avatar-icon {
    margin-right: 20px;
}
[dir="rtl"] md-list.md-dense md-list-item .md-avatar,
[dir="rtl"] md-list.md-dense md-list-item .md-avatar-icon,
[dir="rtl"] md-list.md-dense md-list-item .md-list-item-inner .md-avatar,
[dir="rtl"] md-list.md-dense md-list-item .md-list-item-inner .md-avatar-icon {
    margin-right: auto;
    margin-left: 20px;
}
md-list.md-dense md-list-item .md-avatar,
md-list.md-dense md-list-item .md-list-item-inner .md-avatar {
    flex: none;
    width: 36px;
    height: 36px;
}
md-list.md-dense md-list-item.md-2-line .md-list-item-text.md-offset,
md-list.md-dense
    md-list-item.md-2-line
    > .md-no-style
    .md-list-item-text.md-offset,
md-list.md-dense md-list-item.md-3-line .md-list-item-text.md-offset,
md-list.md-dense
    md-list-item.md-3-line
    > .md-no-style
    .md-list-item-text.md-offset {
    margin-left: 56px;
}
[dir="rtl"]
    md-list.md-dense
    md-list-item.md-2-line
    .md-list-item-text.md-offset,
[dir="rtl"]
    md-list.md-dense
    md-list-item.md-2-line
    > .md-no-style
    .md-list-item-text.md-offset,
[dir="rtl"]
    md-list.md-dense
    md-list-item.md-3-line
    .md-list-item-text.md-offset,
[dir="rtl"]
    md-list.md-dense
    md-list-item.md-3-line
    > .md-no-style
    .md-list-item-text.md-offset {
    margin-left: auto;
    margin-right: 56px;
}
md-list.md-dense md-list-item.md-2-line .md-list-item-text h3,
md-list.md-dense md-list-item.md-2-line .md-list-item-text h4,
md-list.md-dense md-list-item.md-2-line .md-list-item-text p,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h4,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text p,
md-list.md-dense md-list-item.md-3-line .md-list-item-text h3,
md-list.md-dense md-list-item.md-3-line .md-list-item-text h4,
md-list.md-dense md-list-item.md-3-line .md-list-item-text p,
md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3,
md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h4,
md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text p {
    line-height: 1.05;
    font-size: 12px;
}
md-list.md-dense md-list-item.md-2-line .md-list-item-text h3,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3,
md-list.md-dense md-list-item.md-3-line .md-list-item-text h3,
md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
    font-size: 13px;
}
md-list.md-dense md-list-item.md-2-line,
md-list.md-dense md-list-item.md-2-line > .md-no-style {
    min-height: 60px;
}
md-list.md-dense md-list-item.md-2-line:before,
md-list.md-dense md-list-item.md-2-line > .md-no-style:before {
    content: "";
    min-height: 60px;
    visibility: hidden;
    display: inline-block;
}
md-list.md-dense md-list-item.md-2-line .md-avatar-icon,
md-list.md-dense md-list-item.md-2-line > .md-avatar,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-avatar-icon,
md-list.md-dense md-list-item.md-2-line > .md-no-style > .md-avatar {
    margin-top: 12px;
}
md-list.md-dense md-list-item.md-3-line,
md-list.md-dense md-list-item.md-3-line > .md-no-style {
    min-height: 76px;
}
md-list.md-dense md-list-item.md-3-line:before,
md-list.md-dense md-list-item.md-3-line > .md-no-style:before {
    content: "";
    min-height: 76px;
    visibility: hidden;
    display: inline-block;
}
md-list.md-dense md-list-item.md-3-line > .md-avatar,
md-list.md-dense md-list-item.md-3-line > .md-no-style > .md-avatar,
md-list.md-dense md-list-item.md-3-line > .md-no-style > md-icon:first-child,
md-list.md-dense md-list-item.md-3-line > md-icon:first-child {
    margin-top: 16px;
}
md-list-item {
    position: relative;
}
md-list-item.md-proxy-focus.md-focused .md-no-style {
    transition: background-color 0.15s linear;
}
md-list-item._md-button-wrap {
    position: relative;
}
md-list-item._md-button-wrap > div.md-button:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    margin: 0;
    font-weight: 400;
    text-align: left;
    border: medium none;
}
[dir="rtl"] md-list-item._md-button-wrap > div.md-button:first-child {
    text-align: right;
}
md-list-item._md-button-wrap
    > div.md-button:first-child
    > .md-button:first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin: 0;
    padding: 0;
}
md-list-item._md-button-wrap > div.md-button:first-child .md-list-item-inner {
    width: 100%;
}
md-list-item._md-button-wrap
    > div.md-button:first-child
    .md-list-item-inner:before {
    content: "";
    min-height: inherit;
    visibility: hidden;
    display: inline-block;
}
md-list-item.md-no-proxy,
md-list-item .md-no-style {
    position: relative;
    padding: 0 16px;
    flex: 1 1 auto;
}
md-list-item.md-no-proxy.md-button,
md-list-item .md-no-style.md-button {
    font-size: inherit;
    height: inherit;
    text-align: left;
    text-transform: none;
    width: 100%;
    white-space: normal;
    flex-direction: inherit;
    align-items: inherit;
    border-radius: 0;
    margin: 0;
}
[dir="rtl"] md-list-item.md-no-proxy.md-button,
[dir="rtl"] md-list-item .md-no-style.md-button {
    text-align: right;
}
md-list-item.md-no-proxy.md-button > .md-ripple-container,
md-list-item .md-no-style.md-button > .md-ripple-container {
    border-radius: 0;
}
md-list-item.md-no-proxy:focus,
md-list-item .md-no-style:focus {
    outline: none;
}
md-list-item.md-clickable:hover {
    cursor: pointer;
}
md-list-item md-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
[dir="rtl"] md-list-item md-divider {
    left: auto;
    right: 0;
}
md-list-item md-divider[md-inset] {
    left: 72px;
    width: calc(100% - 72px);
    margin: 0 !important;
}
[dir="rtl"] md-list-item md-divider[md-inset] {
    left: auto;
    right: 72px;
}
md-list-item,
md-list-item .md-list-item-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 48px;
    height: auto;
}
md-list-item .md-list-item-inner:before,
md-list-item:before {
    content: "";
    min-height: 48px;
    visibility: hidden;
    display: inline-block;
}
md-list-item
    .md-list-item-inner
    > div.md-primary
    > md-icon:not(.md-avatar-icon),
md-list-item
    .md-list-item-inner
    > div.md-secondary
    > md-icon:not(.md-avatar-icon),
md-list-item .md-list-item-inner > md-icon.md-secondary:not(.md-avatar-icon),
md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon),
md-list-item > div.md-primary > md-icon:not(.md-avatar-icon),
md-list-item > div.md-secondary > md-icon:not(.md-avatar-icon),
md-list-item > md-icon.md-secondary:not(.md-avatar-icon),
md-list-item > md-icon:first-child:not(.md-avatar-icon) {
    width: 24px;
    margin-top: 16px;
    margin-bottom: 12px;
    box-sizing: content-box;
}
md-list-item .md-list-item-inner > div.md-primary > md-checkbox,
md-list-item .md-list-item-inner > div.md-secondary > md-checkbox,
md-list-item .md-list-item-inner > md-checkbox,
md-list-item .md-list-item-inner md-checkbox.md-secondary,
md-list-item > div.md-primary > md-checkbox,
md-list-item > div.md-secondary > md-checkbox,
md-list-item > md-checkbox,
md-list-item md-checkbox.md-secondary {
    align-self: center;
}
md-list-item .md-list-item-inner > div.md-primary > md-checkbox .md-label,
md-list-item .md-list-item-inner > div.md-secondary > md-checkbox .md-label,
md-list-item .md-list-item-inner > md-checkbox .md-label,
md-list-item .md-list-item-inner md-checkbox.md-secondary .md-label,
md-list-item > div.md-primary > md-checkbox .md-label,
md-list-item > div.md-secondary > md-checkbox .md-label,
md-list-item > md-checkbox .md-label,
md-list-item md-checkbox.md-secondary .md-label {
    display: none;
}
md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon),
md-list-item > md-icon:first-child:not(.md-avatar-icon) {
    margin-right: 32px;
}
[dir="rtl"]
    md-list-item
    .md-list-item-inner
    > md-icon:first-child:not(.md-avatar-icon),
[dir="rtl"] md-list-item > md-icon:first-child:not(.md-avatar-icon) {
    margin-right: auto;
    margin-left: 32px;
}
md-list-item .md-avatar,
md-list-item .md-avatar-icon,
md-list-item .md-list-item-inner .md-avatar,
md-list-item .md-list-item-inner .md-avatar-icon {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-right: 16px;
    border-radius: 50%;
    box-sizing: content-box;
}
[dir="rtl"] md-list-item .md-avatar,
[dir="rtl"] md-list-item .md-avatar-icon,
[dir="rtl"] md-list-item .md-list-item-inner .md-avatar,
[dir="rtl"] md-list-item .md-list-item-inner .md-avatar-icon {
    margin-right: auto;
    margin-left: 16px;
}
md-list-item .md-avatar,
md-list-item .md-list-item-inner .md-avatar {
    flex: none;
    width: 40px;
    height: 40px;
}
md-list-item .md-avatar-icon,
md-list-item .md-list-item-inner .md-avatar-icon {
    padding: 8px;
}
md-list-item .md-avatar-icon svg,
md-list-item .md-list-item-inner .md-avatar-icon svg {
    width: 24px;
    height: 24px;
}
md-list-item .md-list-item-inner > md-checkbox,
md-list-item > md-checkbox {
    width: 24px;
    margin-left: 3px;
    margin-right: 29px;
    margin-top: 16px;
}
[dir="rtl"] md-list-item .md-list-item-inner > md-checkbox,
[dir="rtl"] md-list-item > md-checkbox {
    margin-left: 29px;
    margin-right: 3px;
}
md-list-item .md-list-item-inner .md-secondary-container,
md-list-item .md-secondary-container {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    margin: auto;
    margin-right: 0;
    margin-left: auto;
}
[dir="rtl"] md-list-item .md-list-item-inner .md-secondary-container,
[dir="rtl"] md-list-item .md-secondary-container {
    margin-right: auto;
    margin-left: 0;
}
md-list-item
    .md-list-item-inner
    .md-secondary-container
    .md-button:last-of-type,
md-list-item
    .md-list-item-inner
    .md-secondary-container
    .md-icon-button:last-of-type,
md-list-item .md-secondary-container .md-button:last-of-type,
md-list-item .md-secondary-container .md-icon-button:last-of-type {
    margin-right: 0;
}
[dir="rtl"]
    md-list-item
    .md-list-item-inner
    .md-secondary-container
    .md-button:last-of-type,
[dir="rtl"]
    md-list-item
    .md-list-item-inner
    .md-secondary-container
    .md-icon-button:last-of-type,
[dir="rtl"] md-list-item .md-secondary-container .md-button:last-of-type,
[dir="rtl"] md-list-item .md-secondary-container .md-icon-button:last-of-type {
    margin-right: auto;
    margin-left: 0;
}
md-list-item .md-list-item-inner .md-secondary-container md-checkbox,
md-list-item .md-secondary-container md-checkbox {
    margin-top: 0;
    margin-bottom: 0;
}
md-list-item .md-list-item-inner .md-secondary-container md-checkbox:last-child,
md-list-item .md-secondary-container md-checkbox:last-child {
    width: 24px;
    margin-right: 0;
}
[dir="rtl"]
    md-list-item
    .md-list-item-inner
    .md-secondary-container
    md-checkbox:last-child,
[dir="rtl"] md-list-item .md-secondary-container md-checkbox:last-child {
    margin-right: auto;
    margin-left: 0;
}
md-list-item .md-list-item-inner .md-secondary-container md-switch,
md-list-item .md-secondary-container md-switch {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: -6px;
}
[dir="rtl"] md-list-item .md-list-item-inner .md-secondary-container md-switch,
[dir="rtl"] md-list-item .md-secondary-container md-switch {
    margin-right: auto;
    margin-left: -6px;
}
md-list-item .md-list-item-inner > .md-list-item-inner > p,
md-list-item .md-list-item-inner > p,
md-list-item > .md-list-item-inner > p,
md-list-item > p {
    flex: 1 1 auto;
    margin: 0;
}
md-list-item.md-2-line,
md-list-item.md-2-line > .md-no-style,
md-list-item.md-3-line,
md-list-item.md-3-line > .md-no-style {
    align-items: flex-start;
    justify-content: center;
}
md-list-item.md-2-line.md-long-text,
md-list-item.md-2-line > .md-no-style.md-long-text,
md-list-item.md-3-line.md-long-text,
md-list-item.md-3-line > .md-no-style.md-long-text {
    margin-top: 8px;
    margin-bottom: 8px;
}
md-list-item.md-2-line .md-list-item-text,
md-list-item.md-2-line > .md-no-style .md-list-item-text,
md-list-item.md-3-line .md-list-item-text,
md-list-item.md-3-line > .md-no-style .md-list-item-text {
    flex: 1 1 auto;
    margin: auto;
    text-overflow: ellipsis;
    overflow: hidden;
}
md-list-item.md-2-line .md-list-item-text.md-offset,
md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset,
md-list-item.md-3-line .md-list-item-text.md-offset,
md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
    margin-left: 56px;
}
[dir="rtl"] md-list-item.md-2-line .md-list-item-text.md-offset,
[dir="rtl"] md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset,
[dir="rtl"] md-list-item.md-3-line .md-list-item-text.md-offset,
[dir="rtl"] md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
    margin-left: auto;
    margin-right: 56px;
}
md-list-item.md-2-line .md-list-item-text h3,
md-list-item.md-2-line > .md-no-style .md-list-item-text h3,
md-list-item.md-3-line .md-list-item-text h3,
md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
md-list-item.md-2-line .md-list-item-text h4,
md-list-item.md-2-line > .md-no-style .md-list-item-text h4,
md-list-item.md-3-line .md-list-item-text h4,
md-list-item.md-3-line > .md-no-style .md-list-item-text h4 {
    font-size: 14px;
    letter-spacing: 0.01em;
    margin: 3px 0 1px;
    font-weight: 400;
    line-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
md-list-item.md-2-line .md-list-item-text p,
md-list-item.md-2-line > .md-no-style .md-list-item-text p,
md-list-item.md-3-line .md-list-item-text p,
md-list-item.md-3-line > .md-no-style .md-list-item-text p {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.6em;
}
md-list-item.md-2-line,
md-list-item.md-2-line > .md-no-style {
    height: auto;
    min-height: 72px;
}
md-list-item.md-2-line:before,
md-list-item.md-2-line > .md-no-style:before {
    content: "";
    min-height: 72px;
    visibility: hidden;
    display: inline-block;
}
md-list-item.md-2-line .md-avatar-icon,
md-list-item.md-2-line > .md-avatar,
md-list-item.md-2-line > .md-no-style .md-avatar-icon,
md-list-item.md-2-line > .md-no-style > .md-avatar {
    margin-top: 12px;
}
md-list-item.md-2-line > .md-no-style > md-icon:first-child,
md-list-item.md-2-line > md-icon:first-child {
    align-self: flex-start;
}
md-list-item.md-2-line .md-list-item-text,
md-list-item.md-2-line > .md-no-style .md-list-item-text {
    flex: 1 1 auto;
}
md-list-item.md-3-line,
md-list-item.md-3-line > .md-no-style {
    height: auto;
    min-height: 88px;
}
md-list-item.md-3-line:before,
md-list-item.md-3-line > .md-no-style:before {
    content: "";
    min-height: 88px;
    visibility: hidden;
    display: inline-block;
}
md-list-item.md-3-line > .md-avatar,
md-list-item.md-3-line > .md-no-style > .md-avatar,
md-list-item.md-3-line > .md-no-style > md-icon:first-child,
md-list-item.md-3-line > md-icon:first-child {
    margin-top: 16px;
}
.md-open-menu-container {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    opacity: 0;
    border-radius: 2px;
    max-height: calc(100vh - 10px);
    overflow: auto;
}
.md-open-menu-container md-menu-divider {
    margin-top: 4px;
    margin-bottom: 4px;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    width: 100%;
}
.md-open-menu-container md-menu-content > * {
    opacity: 0;
}
.md-open-menu-container:not(.md-clickable) {
    pointer-events: none;
}
.md-open-menu-container.md-active {
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 0.2s;
}
.md-open-menu-container.md-active > md-menu-content > * {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 0.2s;
    transition-delay: 0.1s;
}
.md-open-menu-container.md-leave {
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 0.25s;
}
md-menu-content {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    max-height: 304px;
    overflow-y: auto;
}
md-menu-content.md-dense {
    max-height: 208px;
}
md-menu-content.md-dense md-menu-item {
    height: 32px;
    min-height: 32px;
}
md-menu-item {
    display: flex;
    flex-direction: row;
    min-height: 48px;
    height: 48px;
    align-content: center;
    justify-content: flex-start;
}
md-menu-item > * {
    width: 100%;
    margin: auto 0;
    padding-left: 16px;
    padding-right: 16px;
}
md-menu-item > a.md-button {
    padding-top: 5px;
}
md-menu-item > .md-button {
    text-align: left;
    display: inline-block;
    border-radius: 0;
    margin: auto 0;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
}
md-menu-item > .md-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
[dir="rtl"] md-menu-item > .md-button {
    text-align: right;
}
md-menu-item > .md-button md-icon {
    margin: auto 16px auto 0;
}
[dir="rtl"] md-menu-item > .md-button md-icon {
    margin: auto 0 auto 16px;
}
md-menu-item > .md-button p {
    display: inline-block;
    margin: auto;
}
md-menu-item > .md-button span {
    margin-top: auto;
    margin-bottom: auto;
}
md-menu-item > .md-button .md-ripple-container {
    border-radius: inherit;
}
md-toolbar .md-menu {
    height: auto;
    margin: auto;
    padding: 0;
}
@media (max-width: 959px) {
    md-menu-content {
        min-width: 112px;
    }
    md-menu-content[width="3"] {
        min-width: 168px;
    }
    md-menu-content[width="4"] {
        min-width: 224px;
    }
    md-menu-content[width="5"] {
        min-width: 280px;
    }
    md-menu-content[width="6"] {
        min-width: 336px;
    }
    md-menu-content[width="7"] {
        min-width: 392px;
    }
}
@media (min-width: 960px) {
    md-menu-content {
        min-width: 96px;
    }
    md-menu-content[width="3"] {
        min-width: 192px;
    }
    md-menu-content[width="4"] {
        min-width: 256px;
    }
    md-menu-content[width="5"] {
        min-width: 320px;
    }
    md-menu-content[width="6"] {
        min-width: 384px;
    }
    md-menu-content[width="7"] {
        min-width: 448px;
    }
}
md-toolbar.md-menu-toolbar h2.md-toolbar-tools {
    line-height: 1rem;
    height: auto;
    padding: 28px;
    padding-bottom: 12px;
}
md-toolbar.md-has-open-menu {
    position: relative;
    z-index: 100;
}
md-menu-bar {
    padding: 0 20px;
    display: block;
    position: relative;
    z-index: 2;
}
md-menu-bar .md-menu {
    display: inline-block;
    padding: 0;
    position: relative;
}
md-menu-bar button {
    font-size: 14px;
    padding: 0 10px;
    margin: 0;
    border: 0;
    background-color: transparent;
    height: 40px;
}
md-menu-bar md-backdrop.md-menu-backdrop {
    z-index: -2;
}
md-menu-content.md-menu-bar-menu.md-dense {
    max-height: none;
    padding: 16px 0;
}
md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent {
    position: relative;
}
md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent > md-icon {
    position: absolute;
    padding: 0;
    width: 24px;
    top: 6px;
    left: 24px;
}
[dir="rtl"]
    md-menu-content.md-menu-bar-menu.md-dense
    md-menu-item.md-indent
    > md-icon {
    left: auto;
    right: 24px;
}
md-menu-content.md-menu-bar-menu.md-dense
    md-menu-item.md-indent
    .md-menu
    > .md-button,
md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent > .md-button {
    padding: 0 32px 0 64px;
}
[dir="rtl"]
    md-menu-content.md-menu-bar-menu.md-dense
    md-menu-item.md-indent
    .md-menu
    > .md-button,
[dir="rtl"]
    md-menu-content.md-menu-bar-menu.md-dense
    md-menu-item.md-indent
    > .md-button {
    padding: 0 64px 0 32px;
}
md-menu-content.md-menu-bar-menu.md-dense .md-button {
    min-height: 0;
    height: 32px;
}
md-menu-content.md-menu-bar-menu.md-dense .md-button span {
    float: left;
}
[dir="rtl"] md-menu-content.md-menu-bar-menu.md-dense .md-button span {
    float: right;
}
md-menu-content.md-menu-bar-menu.md-dense .md-button span.md-alt-text {
    float: right;
    margin: 0 8px;
}
[dir="rtl"]
    md-menu-content.md-menu-bar-menu.md-dense
    .md-button
    span.md-alt-text {
    float: left;
}
md-menu-content.md-menu-bar-menu.md-dense md-menu-divider {
    margin: 8px 0;
}
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button,
md-menu-content.md-menu-bar-menu.md-dense md-menu-item > .md-button {
    text-align: left;
}
[dir="rtl"] md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button,
[dir="rtl"]
    md-menu-content.md-menu-bar-menu.md-dense
    md-menu-item
    > .md-button {
    text-align: right;
}
md-menu-content.md-menu-bar-menu.md-dense .md-menu {
    padding: 0;
}
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button {
    position: relative;
    margin: 0;
    width: 100%;
    text-transform: none;
    font-weight: 400;
    border-radius: 0;
    padding-left: 16px;
}
[dir="rtl"] md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button {
    padding-left: 0;
    padding-right: 16px;
}
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after {
    display: block;
    content: "\25BC";
    position: absolute;
    top: 0;
    speak: none;
    -webkit-transform: rotate(270deg) scaleY(0.45) scaleX(0.9);
    transform: rotate(270deg) scaleY(0.45) scaleX(0.9);
    right: 28px;
}
[dir="rtl"]
    md-menu-content.md-menu-bar-menu.md-dense
    .md-menu
    > .md-button:after {
    -webkit-transform: rotate(90deg) scaleY(0.45) scaleX(0.9);
    transform: rotate(90deg) scaleY(0.45) scaleX(0.9);
    right: auto;
    left: 28px;
}
.md-nav-bar {
    border-style: solid;
    border-width: 0 0 1px;
    height: 48px;
    position: relative;
}
._md-nav-bar-list {
    outline: none;
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}
.md-nav-item:first-of-type {
    margin-left: 8px;
}
.md-button._md-nav-button {
    line-height: 24px;
    margin: 0 4px;
    padding: 12px 16px;
    transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
}
.md-button._md-nav-button:focus {
    outline: none;
}
md-nav-ink-bar {
    bottom: 0;
    height: 2px;
    left: auto;
    position: absolute;
    right: auto;
    background-color: #000;
}
md-nav-ink-bar._md-left {
    transition:
        left 0.125s cubic-bezier(0.35, 0, 0.25, 1),
        right 0.25s cubic-bezier(0.35, 0, 0.25, 1);
}
md-nav-ink-bar._md-right {
    transition:
        left 0.25s cubic-bezier(0.35, 0, 0.25, 1),
        right 0.125s cubic-bezier(0.35, 0, 0.25, 1);
}
md-nav-ink-bar.ng-animate {
    transition: none;
}
md-nav-extra-content {
    min-height: 48px;
    padding-right: 12px;
}
@-webkit-keyframes indeterminate-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}
@keyframes indeterminate-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}
md-progress-circular {
    position: relative;
    display: block;
}
md-progress-circular._md-progress-circular-disabled {
    visibility: hidden;
}
md-progress-circular.md-mode-indeterminate svg {
    -webkit-animation: indeterminate-rotate 1568.63ms linear infinite;
    animation: indeterminate-rotate 1568.63ms linear infinite;
}
md-progress-circular svg {
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0;
}
md-progress-linear {
    display: block;
    position: relative;
    width: 100%;
    height: 5px;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}
md-progress-linear._md-progress-linear-disabled {
    visibility: hidden;
}
md-progress-linear .md-container {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 5px;
    -webkit-transform: translate(0, 0) scale(1, 1);
    transform: translate(0, 0) scale(1, 1);
}
md-progress-linear .md-container .md-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
}
md-progress-linear .md-container .md-dashed:before {
    content: "";
    display: none;
    position: absolute;
    margin-top: 0;
    height: 5px;
    width: 100%;
    background-color: transparent;
    background-size: 10px 10px !important;
    background-position: 0 -23px;
}
md-progress-linear .md-container .md-bar1,
md-progress-linear .md-container .md-bar2 {
    transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
    transition:
        transform 0.2s linear,
        -webkit-transform 0.2s linear;
}
md-progress-linear .md-container.md-mode-query .md-bar1 {
    display: none;
}
md-progress-linear .md-container.md-mode-query .md-bar2 {
    transition: all 0.2s linear;
    -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
    animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
}
md-progress-linear .md-container.md-mode-determinate .md-bar1 {
    display: none;
}
md-progress-linear .md-container.md-mode-indeterminate .md-bar1 {
    -webkit-animation:
        md-progress-linear-indeterminate-scale-1 4s infinite,
        md-progress-linear-indeterminate-1 4s infinite;
    animation:
        md-progress-linear-indeterminate-scale-1 4s infinite,
        md-progress-linear-indeterminate-1 4s infinite;
}
md-progress-linear .md-container.md-mode-indeterminate .md-bar2 {
    -webkit-animation:
        md-progress-linear-indeterminate-scale-2 4s infinite,
        md-progress-linear-indeterminate-2 4s infinite;
    animation:
        md-progress-linear-indeterminate-scale-2 4s infinite,
        md-progress-linear-indeterminate-2 4s infinite;
}
md-progress-linear
    .md-container.ng-hide
    ._md-progress-linear-disabled
    md-progress-linear
    .md-container {
    -webkit-animation: none;
    animation: none;
}
md-progress-linear
    .md-container.ng-hide
    ._md-progress-linear-disabled
    md-progress-linear
    .md-container
    .md-bar1,
md-progress-linear
    .md-container.ng-hide
    ._md-progress-linear-disabled
    md-progress-linear
    .md-container
    .md-bar2 {
    -webkit-animation-name: none;
    animation-name: none;
}
md-progress-linear .md-container.md-mode-buffer {
    background-color: transparent !important;
    transition: all 0.2s linear;
}
md-progress-linear .md-container.md-mode-buffer .md-dashed:before {
    display: block;
    -webkit-animation: buffer 3s infinite linear;
    animation: buffer 3s infinite linear;
}
@-webkit-keyframes query {
    0% {
        opacity: 1;
        -webkit-transform: translateX(35%) scale(0.3, 1);
        transform: translateX(35%) scale(0.3, 1);
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-50%) scale(0, 1);
        transform: translateX(-50%) scale(0, 1);
    }
}
@keyframes query {
    0% {
        opacity: 1;
        -webkit-transform: translateX(35%) scale(0.3, 1);
        transform: translateX(35%) scale(0.3, 1);
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-50%) scale(0, 1);
        transform: translateX(-50%) scale(0, 1);
    }
}
@-webkit-keyframes buffer {
    0% {
        opacity: 1;
        background-position: 0 -23px;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        background-position: -200px -23px;
    }
}
@keyframes buffer {
    0% {
        opacity: 1;
        background-position: 0 -23px;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
        background-position: -200px -23px;
    }
}
@-webkit-keyframes md-progress-linear-indeterminate-scale-1 {
    0% {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    36.6% {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
        -webkit-animation-timing-function: cubic-bezier(
            0.33473,
            0.12482,
            0.78584,
            1
        );
        animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
    }
    69.15% {
        -webkit-transform: scaleX(0.83);
        transform: scaleX(0.83);
        -webkit-animation-timing-function: cubic-bezier(
            0.22573,
            0,
            0.23365,
            1.37098
        );
        animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
    }
    to {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
    }
}
@keyframes md-progress-linear-indeterminate-scale-1 {
    0% {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    36.6% {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
        -webkit-animation-timing-function: cubic-bezier(
            0.33473,
            0.12482,
            0.78584,
            1
        );
        animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
    }
    69.15% {
        -webkit-transform: scaleX(0.83);
        transform: scaleX(0.83);
        -webkit-animation-timing-function: cubic-bezier(
            0.22573,
            0,
            0.23365,
            1.37098
        );
        animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
    }
    to {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
    }
}
@-webkit-keyframes md-progress-linear-indeterminate-1 {
    0% {
        left: -105.16667%;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    20% {
        left: -105.16667%;
        -webkit-animation-timing-function: cubic-bezier(
            0.5,
            0,
            0.70173,
            0.49582
        );
        animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
    }
    69.15% {
        left: 21.5%;
        -webkit-animation-timing-function: cubic-bezier(
            0.30244,
            0.38135,
            0.55,
            0.95635
        );
        animation-timing-function: cubic-bezier(
            0.30244,
            0.38135,
            0.55,
            0.95635
        );
    }
    to {
        left: 95.44444%;
    }
}
@keyframes md-progress-linear-indeterminate-1 {
    0% {
        left: -105.16667%;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    20% {
        left: -105.16667%;
        -webkit-animation-timing-function: cubic-bezier(
            0.5,
            0,
            0.70173,
            0.49582
        );
        animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
    }
    69.15% {
        left: 21.5%;
        -webkit-animation-timing-function: cubic-bezier(
            0.30244,
            0.38135,
            0.55,
            0.95635
        );
        animation-timing-function: cubic-bezier(
            0.30244,
            0.38135,
            0.55,
            0.95635
        );
    }
    to {
        left: 95.44444%;
    }
}
@-webkit-keyframes md-progress-linear-indeterminate-scale-2 {
    0% {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
        -webkit-animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
        animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
    }
    19.15% {
        -webkit-transform: scaleX(0.57);
        transform: scaleX(0.57);
        -webkit-animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
        animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
    }
    44.15% {
        -webkit-transform: scaleX(0.91);
        transform: scaleX(0.91);
        -webkit-animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
        animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
    }
    to {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
    }
}
@keyframes md-progress-linear-indeterminate-scale-2 {
    0% {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
        -webkit-animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
        animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
    }
    19.15% {
        -webkit-transform: scaleX(0.57);
        transform: scaleX(0.57);
        -webkit-animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
        animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
    }
    44.15% {
        -webkit-transform: scaleX(0.91);
        transform: scaleX(0.91);
        -webkit-animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
        animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
    }
    to {
        -webkit-transform: scaleX(0.1);
        transform: scaleX(0.1);
    }
}
@-webkit-keyframes md-progress-linear-indeterminate-2 {
    0% {
        left: -54.88889%;
        -webkit-animation-timing-function: cubic-bezier(
            0.15,
            0,
            0.51506,
            0.40968
        );
        animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
    }
    25% {
        left: -17.25%;
        -webkit-animation-timing-function: cubic-bezier(
            0.31033,
            0.28406,
            0.8,
            0.73372
        );
        animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
    }
    48.35% {
        left: 29.5%;
        -webkit-animation-timing-function: cubic-bezier(
            0.4,
            0.62703,
            0.6,
            0.90203
        );
        animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
    }
    to {
        left: 117.38889%;
    }
}
@keyframes md-progress-linear-indeterminate-2 {
    0% {
        left: -54.88889%;
        -webkit-animation-timing-function: cubic-bezier(
            0.15,
            0,
            0.51506,
            0.40968
        );
        animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
    }
    25% {
        left: -17.25%;
        -webkit-animation-timing-function: cubic-bezier(
            0.31033,
            0.28406,
            0.8,
            0.73372
        );
        animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
    }
    48.35% {
        left: 29.5%;
        -webkit-animation-timing-function: cubic-bezier(
            0.4,
            0.62703,
            0.6,
            0.90203
        );
        animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
    }
    to {
        left: 117.38889%;
    }
}
md-radio-button {
    box-sizing: border-box;
    display: block;
    margin-bottom: 16px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}
md-radio-button[disabled],
md-radio-button[disabled] .md-container {
    cursor: default;
}
md-radio-button .md-container {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    left: 0;
    right: auto;
}
[dir="rtl"] md-radio-button .md-container {
    left: auto;
    right: 0;
}
md-radio-button .md-container .md-ripple-container {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    left: -15px;
    top: -15px;
    right: -15px;
    bottom: -15px;
}
md-radio-button .md-container:before {
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 50%;
    content: "";
    position: absolute;
    display: block;
    height: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: all 0.5s;
    width: auto;
}
md-radio-button.md-align-top-left > div.md-container {
    top: 12px;
}
md-radio-button .md-off {
    border-style: solid;
    border-width: 2px;
    transition: border-color 0.28s ease;
}
md-radio-button .md-off,
md-radio-button .md-on {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
md-radio-button .md-on {
    transition: -webkit-transform 0.28s ease;
    transition: transform 0.28s ease;
    transition:
        transform 0.28s ease,
        -webkit-transform 0.28s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
}
md-radio-button.md-checked .md-on {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
md-radio-button .md-label {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    margin-left: 30px;
    margin-right: 0;
    vertical-align: middle;
    white-space: normal;
    pointer-events: none;
    width: auto;
}
[dir="rtl"] md-radio-button .md-label {
    margin-left: 0;
    margin-right: 30px;
}
md-radio-group.layout-column md-radio-button,
md-radio-group.layout-gt-lg-column md-radio-button,
md-radio-group.layout-gt-md-column md-radio-button,
md-radio-group.layout-gt-sm-column md-radio-button,
md-radio-group.layout-gt-xs-column md-radio-button,
md-radio-group.layout-lg-column md-radio-button,
md-radio-group.layout-md-column md-radio-button,
md-radio-group.layout-sm-column md-radio-button,
md-radio-group.layout-xl-column md-radio-button,
md-radio-group.layout-xs-column md-radio-button {
    margin-bottom: 16px;
}
md-radio-group.layout-gt-lg-row md-radio-button,
md-radio-group.layout-gt-md-row md-radio-button,
md-radio-group.layout-gt-sm-row md-radio-button,
md-radio-group.layout-gt-xs-row md-radio-button,
md-radio-group.layout-lg-row md-radio-button,
md-radio-group.layout-md-row md-radio-button,
md-radio-group.layout-row md-radio-button,
md-radio-group.layout-sm-row md-radio-button,
md-radio-group.layout-xl-row md-radio-button,
md-radio-group.layout-xs-row md-radio-button {
    margin: 0 16px 0 0;
}
[dir="rtl"] md-radio-group.layout-gt-lg-row md-radio-button,
[dir="rtl"] md-radio-group.layout-gt-md-row md-radio-button,
[dir="rtl"] md-radio-group.layout-gt-sm-row md-radio-button,
[dir="rtl"] md-radio-group.layout-gt-xs-row md-radio-button,
[dir="rtl"] md-radio-group.layout-lg-row md-radio-button,
[dir="rtl"] md-radio-group.layout-md-row md-radio-button,
[dir="rtl"] md-radio-group.layout-row md-radio-button,
[dir="rtl"] md-radio-group.layout-sm-row md-radio-button,
[dir="rtl"] md-radio-group.layout-xl-row md-radio-button,
[dir="rtl"] md-radio-group.layout-xs-row md-radio-button {
    margin-left: 16px;
    margin-right: 0;
}
md-radio-group.layout-gt-lg-row md-radio-button:last-of-type,
md-radio-group.layout-gt-md-row md-radio-button:last-of-type,
md-radio-group.layout-gt-sm-row md-radio-button:last-of-type,
md-radio-group.layout-gt-xs-row md-radio-button:last-of-type,
md-radio-group.layout-lg-row md-radio-button:last-of-type,
md-radio-group.layout-md-row md-radio-button:last-of-type,
md-radio-group.layout-row md-radio-button:last-of-type,
md-radio-group.layout-sm-row md-radio-button:last-of-type,
md-radio-group.layout-xl-row md-radio-button:last-of-type,
md-radio-group.layout-xs-row md-radio-button:last-of-type {
    margin-left: 0;
    margin-right: 0;
}
md-radio-group:focus {
    outline: none;
}
md-radio-group.md-focused.ng-empty
    > md-radio-button:first-child
    .md-container:before,
md-radio-group.md-focused.ng-not-empty .md-checked .md-container:before {
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px;
}
md-radio-group[disabled] md-radio-button,
md-radio-group[disabled] md-radio-button .md-container {
    cursor: default;
}
.md-inline-form md-radio-group {
    margin: 18px 0 19px;
}
.md-inline-form md-radio-group md-radio-button {
    display: inline-block;
    height: 30px;
    padding: 2px;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
}
@media screen and (-ms-high-contrast: active) {
    md-radio-button.md-default-theme .md-on {
        background-color: #fff;
    }
}
md-input-container:not([md-no-float]) .md-select-placeholder span:first-child {
    transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
[dir="rtl"]
    md-input-container:not([md-no-float])
    .md-select-placeholder
    span:first-child {
    -webkit-transform-origin: right top;
    transform-origin: right top;
}
md-input-container.md-input-focused:not([md-no-float])
    .md-select-placeholder
    span:first-child {
    -webkit-transform: translateY(-22px) translateX(-2px) scale(0.75);
    transform: translateY(-22px) translateX(-2px) scale(0.75);
}
.md-select-menu-container {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    opacity: 0;
    display: none;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}
.md-select-menu-container:not(.md-clickable) {
    pointer-events: none;
}
.md-select-menu-container md-progress-circular {
    display: table;
    margin: 24px auto !important;
}
.md-select-menu-container.md-active {
    display: block;
    opacity: 1;
}
.md-select-menu-container.md-active md-select-menu {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 0.15s;
}
.md-select-menu-container.md-active md-select-menu > * {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 0.15s;
    transition-delay: 0.1s;
}
.md-select-menu-container.md-leave {
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 0.25s;
}
md-input-container > md-select {
    margin: 0;
    order: 2;
}
md-input-container:not(.md-input-has-value)
    md-select.ng-required:not(.md-no-asterisk)
    .md-select-value
    span:first-child:after,
md-input-container:not(.md-input-has-value)
    md-select[required]:not(.md-no-asterisk)
    .md-select-value
    span:first-child:after {
    content: " *";
    font-size: 13px;
    vertical-align: top;
}
md-input-container.md-input-invalid md-select .md-select-value {
    border-bottom-style: solid;
    padding-bottom: 1px;
}
md-select {
    display: flex;
    margin: 20px 0 26px;
}
md-select.ng-required.ng-empty.ng-invalid:not(.md-no-asterisk)
    .md-select-value
    span:first-child:after,
md-select[required].ng-empty.ng-invalid:not(.md-no-asterisk)
    .md-select-value
    span:first-child:after {
    content: " *";
    font-size: 13px;
    vertical-align: top;
}
md-select[disabled] .md-select-value {
    background-position: 0 bottom;
    background-size: 4px 1px;
    background-repeat: repeat-x;
    margin-bottom: -1px;
}
md-select:focus {
    outline: none;
}
md-select[disabled]:hover {
    cursor: default;
}
md-select:not([disabled]):hover {
    cursor: pointer;
}
md-select:not([disabled]).ng-invalid.ng-touched .md-select-value {
    border-bottom-style: solid;
    padding-bottom: 1px;
}
md-select:not([disabled]):focus .md-select-value {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    padding-bottom: 0;
}
md-select:not([disabled]):focus.ng-invalid.ng-touched .md-select-value {
    padding-bottom: 0;
}
md-input-container.md-input-has-value
    .md-select-value
    > span:not(.md-select-icon) {
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
}
.md-select-value {
    display: flex;
    align-items: center;
    padding: 2px 2px 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: transparent;
    position: relative;
    box-sizing: content-box;
    min-width: 64px;
    min-height: 26px;
    flex-grow: 1;
}
.md-select-value > span:not(.md-select-icon) {
    max-width: 100%;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.md-select-value > span:not(.md-select-icon) .md-text {
    display: inline;
}
.md-select-value .md-select-icon {
    display: block;
    align-items: flex-end;
    text-align: right;
    width: 24px;
    margin: 0 4px;
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
    font-size: 1.2rem;
}
[dir="rtl"] .md-select-value .md-select-icon {
    align-items: flex-start;
    text-align: left;
}
.md-select-value .md-select-icon:after {
    display: block;
    content: "\25BC";
    position: relative;
    top: 2px;
    speak: none;
    font-size: 13px;
    -webkit-transform: scaleY(0.5) scaleX(1);
    transform: scaleY(0.5) scaleX(1);
}
.md-select-value.md-select-placeholder {
    display: flex;
    order: 1;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    padding-left: 2px;
    z-index: 1;
}
md-select-menu {
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    max-height: 256px;
    min-height: 48px;
    overflow-y: hidden;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1);
    transform: scale(1);
}
md-select-menu.md-reverse {
    flex-direction: column-reverse;
}
md-select-menu:not(.md-overflow) md-content {
    padding-top: 8px;
    padding-bottom: 8px;
}
[dir="rtl"] md-select-menu {
    -webkit-transform-origin: right top;
    transform-origin: right top;
}
md-select-menu md-content {
    min-width: 136px;
    min-height: 48px;
    max-height: 256px;
    overflow-y: auto;
}
md-select-menu > * {
    opacity: 0;
}
md-option {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    transition: background 0.15s linear;
    padding: 0 16px;
    height: 48px;
}
md-option[disabled] {
    cursor: default;
}
md-option:focus {
    outline: none;
}
md-option .md-text {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
md-optgroup {
    display: block;
}
md-optgroup label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    padding: 16px;
    font-weight: 500;
}
md-optgroup md-option {
    padding-left: 32px;
    padding-right: 32px;
}
@media screen and (-ms-high-contrast: active) {
    .md-select-backdrop {
        background-color: transparent;
    }
    md-select-menu {
        border: 1px solid #fff;
    }
}
md-select-menu[multiple] md-option.md-checkbox-enabled {
    padding-left: 40px;
    padding-right: 16px;
}
[dir="rtl"] md-select-menu[multiple] md-option.md-checkbox-enabled {
    padding-left: 16px;
    padding-right: 40px;
}
md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: 0;
    right: auto;
}
[dir="rtl"]
    md-select-menu[multiple]
    md-option.md-checkbox-enabled
    .md-container {
    left: auto;
    right: 0;
}
md-select-menu[multiple] md-option.md-checkbox-enabled .md-container:before {
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 50%;
    content: "";
    position: absolute;
    display: block;
    height: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: all 0.5s;
    width: auto;
}
md-select-menu[multiple] md-option.md-checkbox-enabled .md-container:after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}
md-select-menu[multiple]
    md-option.md-checkbox-enabled
    .md-container
    .md-ripple-container {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    left: -15px;
    top: -15px;
    right: -15px;
    bottom: -15px;
}
md-select-menu[multiple] md-option.md-checkbox-enabled .md-icon {
    box-sizing: border-box;
    transition: 0.24s;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 2px;
}
md-select-menu[multiple] md-option.md-checkbox-enabled[selected] .md-icon {
    border-color: transparent;
}
md-select-menu[multiple]
    md-option.md-checkbox-enabled[selected]
    .md-icon:after {
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 4.66667px;
    top: 0.22222px;
    display: table;
    width: 6.66667px;
    height: 13.33333px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: "";
}
md-select-menu[multiple] md-option.md-checkbox-enabled[disabled] {
    cursor: default;
}
md-select-menu[multiple]
    md-option.md-checkbox-enabled.md-indeterminate
    .md-icon:after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: table;
    width: 12px;
    height: 2px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: "";
}
md-select-menu[multiple] md-option.md-checkbox-enabled .md-container {
    margin-left: 10.66667px;
    margin-right: auto;
}
[dir="rtl"]
    md-select-menu[multiple]
    md-option.md-checkbox-enabled
    .md-container {
    margin-left: auto;
    margin-right: 10.66667px;
}
md-sidenav {
    box-sizing: border-box;
    position: absolute;
    flex-direction: column;
    z-index: 60;
    width: 320px;
    max-width: 320px;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
md-sidenav ul {
    list-style: none;
}
md-sidenav.md-closed {
    display: none;
}
md-sidenav.md-closed-add,
md-sidenav.md-closed-remove {
    display: flex;
    transition: all 0.2s ease-in;
}
md-sidenav.md-closed-add.md-closed-add-active,
md-sidenav.md-closed-remove.md-closed-remove-active {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
md-sidenav.md-closed.md-locked-open-add,
md-sidenav.md-locked-open,
md-sidenav.md-locked-open-add,
md-sidenav.md-locked-open-remove,
md-sidenav.md-locked-open-remove.md-closed,
md-sidenav.md-locked-open.md-closed,
md-sidenav.md-locked-open.md-closed.md-sidenav-left,
md-sidenav.md-locked-open.md-closed.md-sidenav-right {
    position: static;
    display: flex;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
md-sidenav.md-closed.md-locked-open-add:not(.md-locked-open-add-active) {
    width: 0 !important;
    min-width: 0 !important;
}
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add:not(.md-locked-open-add-active),
md-sidenav.md-locked-open-remove-active {
    transition:
        width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2),
        min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-sidenav.md-locked-open-remove-active {
    width: 0 !important;
    min-width: 0 !important;
}
.md-sidenav-backdrop.md-locked-open {
    display: none;
}
.md-sidenav-left,
md-sidenav {
    left: 0;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.md-sidenav-left.md-closed,
md-sidenav.md-closed {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
.md-sidenav-right {
    left: 100%;
    top: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
.md-sidenav-right.md-closed {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
@media (min-width: 600px) {
    md-sidenav {
        max-width: 400px;
    }
}
@media (max-width: 456px) {
    md-sidenav {
        width: calc(100% - 56px);
        min-width: calc(100% - 56px);
        max-width: calc(100% - 56px);
    }
}
@media screen and (-ms-high-contrast: active) {
    .md-sidenav-left,
    md-sidenav {
        border-right: 1px solid #fff;
    }
    .md-sidenav-right {
        border-left: 1px solid #fff;
    }
}
@-webkit-keyframes sliderFocusThumb {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
    30% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}
@keyframes sliderFocusThumb {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
    30% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}
@-webkit-keyframes sliderDiscreteFocusThumb {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@keyframes sliderDiscreteFocusThumb {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@-webkit-keyframes sliderDiscreteFocusRing {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        opacity: 0;
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@keyframes sliderDiscreteFocusRing {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        opacity: 0;
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
md-slider {
    height: 48px;
    min-width: 128px;
    position: relative;
    margin-left: 4px;
    margin-right: 4px;
    padding: 0;
    display: block;
    flex-direction: row;
}
md-slider *,
md-slider :after {
    box-sizing: border-box;
}
md-slider .md-slider-wrapper {
    outline: none;
    width: 100%;
    height: 100%;
}
md-slider .md-slider-content {
    position: relative;
}
md-slider .md-track-container {
    width: 100%;
    position: absolute;
    top: 23px;
    height: 2px;
}
md-slider .md-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
}
md-slider .md-track-fill {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: width, height;
}
md-slider .md-track-ticks {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
}
md-slider .md-track-ticks canvas {
    width: 100%;
    height: 100%;
}
md-slider .md-thumb-container {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: left, right, bottom;
}
[dir="rtl"] md-slider .md-thumb-container {
    left: auto;
    right: 0;
}
md-slider .md-thumb {
    z-index: 1;
    position: absolute;
    left: -10px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[dir="rtl"] md-slider .md-thumb {
    left: auto;
    right: -10px;
}
md-slider .md-thumb:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border-width: 3px;
    border-style: solid;
    transition: inherit;
}
md-slider .md-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -14px;
    top: -17px;
    width: 28px;
    height: var(--main-height);
    border-radius: 28px;
    -webkit-transform: scale(0.4) translate3d(0, 67.5px, 0);
    transform: scale(0.4) translate3d(0, 67.5px, 0);
    transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}
md-slider .md-sign:after {
    position: absolute;
    content: "";
    left: 0;
    border-radius: 16px;
    top: 19px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top-width: 16px;
    border-top-style: solid;
    opacity: 0;
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
    transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1);
}
[dir="rtl"] md-slider .md-sign:after {
    left: auto;
    right: 0;
}
md-slider .md-sign .md-thumb-text {
    z-index: 1;
    font-size: 12px;
    font-weight: 700;
}
md-slider .md-focus-ring {
    position: absolute;
    left: -17px;
    top: 7px;
    width: 34px;
    height: 34px;
    border-radius: 34px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1);
}
[dir="rtl"] md-slider .md-focus-ring {
    left: auto;
    right: -17px;
}
md-slider .md-disabled-thumb {
    position: absolute;
    left: -14px;
    top: 10px;
    width: 28px;
    height: var(--main-height);
    border-radius: 28px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-width: 4px;
    border-style: solid;
    display: none;
}
[dir="rtl"] md-slider .md-disabled-thumb {
    left: auto;
    right: -14px;
}
md-slider.md-min .md-sign {
    opacity: 0;
}
md-slider:focus {
    outline: none;
}
md-slider.md-dragging .md-thumb-container,
md-slider.md-dragging .md-track-fill {
    transition: none;
}
md-slider:not([md-discrete]) .md-sign,
md-slider:not([md-discrete]) .md-track-ticks {
    display: none;
}
md-slider:not([md-discrete]):not([disabled])
    .md-slider-wrapper
    .md-thumb:hover {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
md-slider:not([md-discrete]):not([disabled])
    .md-slider-wrapper.md-focused
    .md-focus-ring {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
md-slider:not([md-discrete]):not([disabled])
    .md-slider-wrapper.md-focused
    .md-thumb {
    -webkit-animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1);
    animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1);
}
md-slider:not([md-discrete]):not([disabled]).md-active
    .md-slider-wrapper
    .md-thumb {
    -webkit-transform: scale(1);
    transform: scale(1);
}
md-slider[md-discrete]:not([disabled])
    .md-slider-wrapper.md-focused
    .md-focus-ring {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: sliderDiscreteFocusRing 0.5s
        cubic-bezier(0.35, 0, 0.25, 1);
    animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1);
}
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
    -webkit-animation: sliderDiscreteFocusThumb 0.5s
        cubic-bezier(0.35, 0, 0.25, 1);
    animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1);
}
md-slider[md-discrete]:not([disabled]).md-active .md-thumb,
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
    -webkit-transform: scale(0);
    transform: scale(0);
}
md-slider[md-discrete]:not([disabled]).md-active .md-sign,
md-slider[md-discrete]:not([disabled]).md-active .md-sign:after,
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-sign,
md-slider[md-discrete]:not([disabled])
    .md-slider-wrapper.md-focused
    .md-sign:after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}
md-slider[md-discrete][disabled][readonly] .md-thumb {
    -webkit-transform: scale(0);
    transform: scale(0);
}
md-slider[md-discrete][disabled][readonly] .md-sign,
md-slider[md-discrete][disabled][readonly] .md-sign:after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}
md-slider[disabled] .md-track-fill {
    display: none;
}
md-slider[disabled] .md-track-ticks,
md-slider[disabled]:not([readonly]) .md-sign {
    opacity: 0;
}
md-slider[disabled] .md-thumb {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
md-slider[disabled] .md-disabled-thumb {
    display: block;
}
md-slider[md-vertical] {
    flex-direction: column;
    min-height: 128px;
    min-width: 0;
}
md-slider[md-vertical] .md-slider-wrapper {
    flex: 1;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 48px;
    align-self: center;
    display: flex;
    justify-content: center;
}
md-slider[md-vertical] .md-track-container {
    height: 100%;
    width: 2px;
    top: 0;
    left: calc(50% - 1px);
}
md-slider[md-vertical] .md-thumb-container {
    top: auto;
    margin-bottom: 23px;
    left: calc(50% - 1px);
    bottom: 0;
}
md-slider[md-vertical] .md-thumb-container .md-thumb:after {
    left: 1px;
}
md-slider[md-vertical] .md-thumb-container .md-focus-ring {
    left: -16px;
}
md-slider[md-vertical] .md-track-fill {
    bottom: 0;
}
md-slider[md-vertical][md-discrete] .md-sign {
    left: -40px;
    top: 9.5px;
    -webkit-transform: scale(0.4) translate3d(67.5px, 0, 0);
    transform: scale(0.4) translate3d(67.5px, 0, 0);
}
md-slider[md-vertical][md-discrete] .md-sign:after {
    top: 9.5px;
    left: 19px;
    border-top: 14px solid transparent;
    border-right: 0;
    border-bottom: 14px solid transparent;
    border-left-width: 16px;
    border-left-style: solid;
    opacity: 0;
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
    transition: all 0.2s ease-in-out;
}
md-slider[md-vertical][md-discrete] .md-sign .md-thumb-text {
    z-index: 1;
    font-size: 12px;
    font-weight: 700;
}
md-slider[md-vertical][md-discrete].md-active .md-sign:after,
md-slider[md-vertical][md-discrete] .md-focused .md-sign:after,
md-slider[md-vertical][md-discrete][disabled][readonly] .md-sign:after {
    top: 0;
}
md-slider[md-vertical][disabled][readonly] .md-thumb {
    -webkit-transform: scale(0);
    transform: scale(0);
}
md-slider[md-vertical][disabled][readonly] .md-sign,
md-slider[md-vertical][disabled][readonly] .md-sign:after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}
md-slider[md-invert]:not([md-vertical]) .md-track-fill {
    left: auto;
    right: 0;
}
[dir="rtl"] md-slider[md-invert]:not([md-vertical]) .md-track-fill {
    left: 0;
    right: auto;
}
md-slider[md-invert][md-vertical] .md-track-fill {
    bottom: auto;
    top: 0;
}
md-slider-container {
    display: flex;
    align-items: center;
    flex-direction: row;
}
md-slider-container > :first-child:not(md-slider),
md-slider-container > :last-child:not(md-slider) {
    min-width: 25px;
    max-width: 42px;
    height: 25px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: color, max-width;
}
md-slider-container > :first-child:not(md-slider) {
    margin-right: 16px;
}
[dir="rtl"] md-slider-container > :first-child:not(md-slider) {
    margin-right: auto;
    margin-left: 16px;
}
md-slider-container > :last-child:not(md-slider) {
    margin-left: 16px;
}
[dir="rtl"] md-slider-container > :last-child:not(md-slider) {
    margin-left: auto;
    margin-right: 16px;
}
md-slider-container[md-vertical] {
    flex-direction: column;
}
md-slider-container[md-vertical] > :first-child:not(md-slider),
md-slider-container[md-vertical] > :last-child:not(md-slider) {
    margin-right: 0;
    margin-left: 0;
    text-align: center;
}
md-slider-container md-input-container input[type="number"] {
    text-align: center;
    padding-left: 15px;
    height: 50px;
    margin-top: -25px;
}
[dir="rtl"] md-slider-container md-input-container input[type="number"] {
    padding-left: 0;
    padding-right: 15px;
}
@media screen and (-ms-high-contrast: active) {
    md-slider.md-default-theme .md-track {
        border-bottom: 1px solid #fff;
    }
}
.md-sticky-clone {
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    position: absolute !important;
    -webkit-transform: translate3d(-9999px, -9999px, 0);
    transform: translate3d(-9999px, -9999px, 0);
}
.md-sticky-clone[sticky-state="active"] {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.md-sticky-clone[sticky-state="active"]:not(.md-sticky-no-effect)
    .md-subheader-inner {
    -webkit-animation: subheaderStickyHoverIn 0.3s ease-out both;
    animation: subheaderStickyHoverIn 0.3s ease-out both;
}
@-webkit-keyframes subheaderStickyHoverIn {
    0% {
        box-shadow: 0 0 0 0 transparent;
    }
    to {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    }
}
@keyframes subheaderStickyHoverIn {
    0% {
        box-shadow: 0 0 0 0 transparent;
    }
    to {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    }
}
@-webkit-keyframes subheaderStickyHoverOut {
    0% {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    }
    to {
        box-shadow: 0 0 0 0 transparent;
    }
}
@keyframes subheaderStickyHoverOut {
    0% {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    }
    to {
        box-shadow: 0 0 0 0 transparent;
    }
}
.md-subheader-wrapper:not(.md-sticky-no-effect) {
    transition: margin 0.2s ease-out;
}
.md-subheader-wrapper:not(.md-sticky-no-effect) .md-subheader {
    margin: 0;
}
.md-subheader-wrapper:not(.md-sticky-no-effect).md-sticky-clone {
    z-index: 2;
}
.md-subheader-wrapper:not(.md-sticky-no-effect)[sticky-state="active"] {
    margin-top: -2px;
}
.md-subheader-wrapper:not(.md-sticky-no-effect):not(
        .md-sticky-clone
    )[sticky-prev-state="active"]
    .md-subheader-inner:after {
    -webkit-animation: subheaderStickyHoverOut 0.3s ease-out both;
    animation: subheaderStickyHoverOut 0.3s ease-out both;
}
.md-subheader {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
    margin: 0;
    position: relative;
}
.md-subheader .md-subheader-inner {
    display: block;
    padding: 16px;
}
.md-subheader .md-subheader-content {
    display: block;
    z-index: 1;
    position: relative;
}
[md-swipe-left],
[md-swipe-right] {
    touch-action: pan-y;
}
[md-swipe-down],
[md-swipe-up] {
    touch-action: pan-x;
}
.md-inline-form md-switch {
    margin-top: 18px;
    margin-bottom: 19px;
}
md-switch {
    margin: 16px 0;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 30px;
    line-height: var(--main-line-height);
    align-items: center;
    display: flex;
    margin-left: inherit;
    margin-right: 16px;
}
[dir="rtl"] md-switch {
    margin-left: 16px;
    margin-right: inherit;
}
md-switch:last-of-type {
    margin-left: inherit;
    margin-right: 0;
}
[dir="rtl"] md-switch:last-of-type {
    margin-left: 0;
    margin-right: inherit;
}
md-switch[disabled],
md-switch[disabled] .md-container {
    cursor: default;
}
md-switch .md-container {
    cursor: -webkit-grab;
    cursor: grab;
    width: 36px;
    height: 24px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 8px;
    float: left;
}
[dir="rtl"] md-switch .md-container,
md-switch.md-inverted .md-container {
    margin-right: 0;
    margin-left: 8px;
}
[dir="rtl"] md-switch.md-inverted .md-container {
    margin-right: 8px;
    margin-left: 0;
}
md-switch:not([disabled]) .md-dragging,
md-switch:not([disabled]).md-dragging .md-container {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
md-switch.md-focused .md-thumb:before {
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px;
}
md-switch .md-label {
    border-color: transparent;
    border-width: 0;
    float: left;
}
md-switch .md-bar {
    left: 1px;
    width: 34px;
    top: 5px;
    height: 14px;
    border-radius: 8px;
    position: absolute;
}
md-switch .md-thumb-container {
    top: 2px;
    left: 0;
    width: 16px;
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 1;
}
md-switch.md-checked .md-thumb-container {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
md-switch .md-thumb {
    margin: 0;
    outline: none;
    height: 20px;
    width: 20px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
md-switch .md-thumb,
md-switch .md-thumb:before {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}
md-switch .md-thumb:before {
    background-color: transparent;
    content: "";
    display: block;
    height: auto;
    right: 0;
    bottom: 0;
    transition: all 0.5s;
    width: auto;
}
md-switch .md-thumb .md-ripple-container {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    left: -20px;
    top: -20px;
    right: -20px;
    bottom: -20px;
}
md-switch:not(.md-dragging) .md-bar,
md-switch:not(.md-dragging) .md-thumb,
md-switch:not(.md-dragging) .md-thumb-container {
    transition: all 0.08s linear;
    transition-property:
        background-color,
        -webkit-transform;
    transition-property: transform, background-color;
    transition-property:
        transform,
        background-color,
        -webkit-transform;
}
md-switch:not(.md-dragging) .md-bar,
md-switch:not(.md-dragging) .md-thumb {
    transition-delay: 0.05s;
}
@media screen and (-ms-high-contrast: active) {
    md-switch.md-default-theme .md-bar {
        background-color: #666;
    }
    md-switch.md-default-theme.md-checked .md-bar {
        background-color: #9e9e9e;
    }
    md-switch.md-default-theme .md-thumb {
        background-color: #fff;
    }
}
@-webkit-keyframes md-tab-content-hide {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes md-tab-content-hide {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
md-tab-data {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
}
md-tabs {
    display: block;
    margin: 0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: 248px;
}
md-tabs[md-align-tabs="bottom"] {
    padding-bottom: 48px;
}
md-tabs[md-align-tabs="bottom"] md-tabs-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    z-index: 2;
}
md-tabs[md-align-tabs="bottom"] md-tabs-content-wrapper {
    top: 0;
    bottom: 48px;
}
md-tabs.md-dynamic-height md-tabs-content-wrapper {
    min-height: 0;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    overflow: visible;
}
md-tabs.md-dynamic-height md-tab-content.md-active {
    position: relative;
}
md-tabs[md-border-bottom] md-tabs-wrapper {
    border-width: 0 0 1px;
    border-style: solid;
}
md-tabs[md-border-bottom]:not(.md-dynamic-height) md-tabs-content-wrapper {
    top: 49px;
}
md-tabs-wrapper {
    display: block;
    position: relative;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
md-tabs-wrapper md-next-button,
md-tabs-wrapper md-prev-button {
    height: 100%;
    width: 32px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 1em;
    z-index: 2;
    cursor: pointer;
    font-size: 16px;
    background: transparent no-repeat 50%;
    transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1);
}
md-tabs-wrapper md-next-button:focus,
md-tabs-wrapper md-prev-button:focus {
    outline: none;
}
md-tabs-wrapper md-next-button.md-disabled,
md-tabs-wrapper md-prev-button.md-disabled {
    opacity: 0.25;
    cursor: default;
}
md-tabs-wrapper md-next-button.ng-leave,
md-tabs-wrapper md-prev-button.ng-leave {
    transition: none;
}
md-tabs-wrapper md-next-button md-icon,
md-tabs-wrapper md-prev-button md-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
[dir="rtl"] md-tabs-wrapper md-next-button,
[dir="rtl"] md-tabs-wrapper md-prev-button {
    -webkit-transform: rotateY(180deg) translateY(-50%);
    transform: rotateY(180deg) translateY(-50%);
}
md-tabs-wrapper md-prev-button {
    left: 0;
    background-image: url(/graphics/md-back.svg);
}
[dir="rtl"] md-tabs-wrapper md-prev-button {
    left: auto;
    right: 0;
}
md-tabs-wrapper md-next-button {
    right: 0;
    background-image: url(/graphics/md-next.svg);
}
[dir="rtl"] md-tabs-wrapper md-next-button {
    right: auto;
    left: 0;
}
md-tabs-wrapper md-next-button md-icon {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
}
md-tabs-wrapper.md-stretch-tabs md-pagination-wrapper {
    width: 100%;
    flex-direction: row;
}
md-tabs-wrapper.md-stretch-tabs md-pagination-wrapper md-tab-item {
    flex-grow: 1;
}
md-tabs-canvas {
    position: relative;
    overflow: hidden;
    display: block;
    height: 48px;
}
md-tabs-canvas:after {
    content: "";
    display: table;
    clear: both;
}
md-tabs-canvas .md-dummy-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}
[dir="rtl"] md-tabs-canvas .md-dummy-wrapper {
    left: auto;
    right: 0;
}
md-tabs-canvas.md-paginated {
    margin: 0 32px;
}
md-tabs-canvas.md-center-tabs {
    display: flex;
    flex-direction: column;
    text-align: center;
}
md-tabs-canvas.md-center-tabs .md-tab {
    float: none;
    display: inline-block;
}
md-pagination-wrapper {
    height: 48px;
    display: flex;
    transition: -webkit-transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
    transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
    transition:
        transform 0.5s cubic-bezier(0.35, 0, 0.25, 1),
        -webkit-transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
    position: absolute;
    left: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
md-pagination-wrapper:after {
    content: "";
    display: table;
    clear: both;
}
[dir="rtl"] md-pagination-wrapper {
    left: auto;
    right: 0;
}
md-pagination-wrapper.md-center-tabs {
    position: relative;
    justify-content: center;
}
md-tabs-content-wrapper {
    display: block;
    top: 48px;
    overflow: hidden;
}
md-tab-content,
md-tabs-content-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
md-tab-content {
    display: flex;
    top: 0;
    transition: -webkit-transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
    transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
    transition:
        transform 0.5s cubic-bezier(0.35, 0, 0.25, 1),
        -webkit-transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
    overflow: auto;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
md-tab-content.md-no-scroll {
    bottom: auto;
    overflow: hidden;
}
md-tab-content.md-no-transition,
md-tab-content.ng-leave {
    transition: none;
}
md-tab-content.md-left:not(.md-active) {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-animation: 1s md-tab-content-hide;
    animation: 1s md-tab-content-hide;
    visibility: hidden;
}
[dir="rtl"] md-tab-content.md-left:not(.md-active) {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
md-tab-content.md-left:not(.md-active) * {
    transition: visibility 0s linear;
    transition-delay: 0.5s;
    visibility: hidden;
}
md-tab-content.md-right:not(.md-active) {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-animation: 1s md-tab-content-hide;
    animation: 1s md-tab-content-hide;
    visibility: hidden;
}
[dir="rtl"] md-tab-content.md-right:not(.md-active) {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
md-tab-content.md-right:not(.md-active) * {
    transition: visibility 0s linear;
    transition-delay: 0.5s;
    visibility: hidden;
}
md-tab-content > div {
    flex: 1 0 100%;
    min-width: 0;
}
md-tab-content > div.ng-leave {
    -webkit-animation: 1s md-tab-content-hide;
    animation: 1s md-tab-content-hide;
}
md-ink-bar {
    position: absolute;
    left: auto;
    right: auto;
    bottom: 0;
    height: 2px;
}
md-ink-bar.md-left {
    transition:
        left 0.125s cubic-bezier(0.35, 0, 0.25, 1),
        right 0.25s cubic-bezier(0.35, 0, 0.25, 1);
}
md-ink-bar.md-right {
    transition:
        left 0.25s cubic-bezier(0.35, 0, 0.25, 1),
        right 0.125s cubic-bezier(0.35, 0, 0.25, 1);
}
md-tab {
    position: absolute;
    z-index: -1;
    left: -9999px;
}
.md-tab {
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    padding: 12px 24px;
    transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    text-transform: uppercase;
    float: left;
    font-weight: 500;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}
[dir="rtl"] .md-tab {
    float: right;
}
.md-tab.md-focused,
.md-tab:focus {
    box-shadow: none;
    outline: none;
}
.md-tab.md-active {
    cursor: default;
}
.md-tab.md-disabled {
    pointer-events: none;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    opacity: 0.5;
    cursor: default;
}
.md-tab.ng-leave {
    transition: none;
}
md-toolbar + md-dialog-content md-tabs,
md-toolbar + md-tabs {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.md-toast-text {
    padding: 0 6px;
}
md-toast {
    position: absolute;
    z-index: 105;
    box-sizing: border-box;
    cursor: default;
    padding: 8px;
    opacity: 1;
}
md-toast,
md-toast .md-toast-content {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
md-toast .md-toast-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-height: 168px;
    max-width: 100%;
    min-height: 48px;
    padding: 0 18px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    border-radius: 2px;
    font-size: 14px;
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg);
    transform: translate3d(0, 0, 0) rotateZ(0deg);
    justify-content: flex-start;
}
md-toast .md-toast-content:before {
    content: "";
    min-height: 48px;
    visibility: hidden;
    display: inline-block;
}
[dir="rtl"] md-toast .md-toast-content {
    justify-content: flex-end;
}
md-toast .md-toast-content span {
    flex: 1 1 0%;
    box-sizing: border-box;
    min-width: 0;
}
md-toast.md-capsule,
md-toast.md-capsule .md-toast-content {
    border-radius: 24px;
}
md-toast.ng-leave-active .md-toast-content {
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}
md-toast.md-swipedown .md-toast-content,
md-toast.md-swipeleft .md-toast-content,
md-toast.md-swiperight .md-toast-content,
md-toast.md-swipeup .md-toast-content {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
md-toast.ng-enter {
    opacity: 0;
}
md-toast.ng-enter .md-toast-content {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
md-toast.ng-enter.md-top .md-toast-content {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
md-toast.ng-enter.ng-enter-active {
    opacity: 1;
}
md-toast.ng-enter.ng-enter-active .md-toast-content {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
md-toast.ng-leave.ng-leave-active .md-toast-content {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}
md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
}
md-toast.ng-leave.ng-leave-active.md-top .md-toast-content {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
md-toast .md-action {
    line-height: 19px;
    margin-left: 24px;
    margin-right: 0;
    cursor: pointer;
    text-transform: uppercase;
    float: right;
}
md-toast .md-button {
    min-width: 0;
    margin-right: 0;
    margin-left: 12px;
}
[dir="rtl"] md-toast .md-button {
    margin-right: 12px;
    margin-left: 0;
}
@media (max-width: 959px) {
    md-toast {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 0;
        bottom: 0;
        padding: 0;
    }
    md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
    md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content {
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }
}
@media (min-width: 960px) {
    md-toast {
        min-width: 304px;
    }
    md-toast.md-bottom {
        bottom: 0;
    }
    md-toast.md-left {
        left: 0;
    }
    md-toast.md-right {
        right: 0;
    }
    md-toast.md-top {
        top: 0;
    }
    md-toast._md-start {
        left: 0;
    }
    [dir="rtl"] md-toast._md-start {
        left: auto;
        right: 0;
    }
    md-toast._md-end {
        right: 0;
    }
    [dir="rtl"] md-toast._md-end {
        right: auto;
        left: 0;
    }
    md-toast.ng-leave.ng-leave-active.md-swipeleft .md-toast-content {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    md-toast.ng-leave.ng-leave-active.md-swiperight .md-toast-content {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }
}
@media (min-width: 1920px) {
    md-toast .md-toast-content {
        max-width: 568px;
    }
}
@media screen and (-ms-high-contrast: active) {
    md-toast {
        border: 1px solid #fff;
    }
}
.md-toast-animating {
    overflow: hidden !important;
}
md-toolbar {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    font-size: 20px;
    min-height: 64px;
    width: 100%;
}
md-toolbar._md-toolbar-transitions {
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    transition-property: background-color, fill, color;
}
md-toolbar.md-whiteframe-z1-add,
md-toolbar.md-whiteframe-z1-remove {
    transition: box-shadow 0.5s linear;
}
md-toolbar md-toolbar-filler {
    width: 72px;
}
md-toolbar *,
md-toolbar :after,
md-toolbar :before {
    box-sizing: border-box;
}
md-toolbar.ng-animate {
    transition: none;
}
md-toolbar.md-tall {
    height: 128px;
    min-height: 128px;
    max-height: 128px;
}
md-toolbar.md-medium-tall {
    height: 88px;
    min-height: 88px;
    max-height: 88px;
}
md-toolbar.md-medium-tall .md-toolbar-tools {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
}
md-toolbar > .md-indent {
    margin-left: 64px;
}
[dir="rtl"] md-toolbar > .md-indent {
    margin-left: auto;
    margin-right: 64px;
}
md-toolbar ~ md-content > md-list {
    padding: 0;
}
md-toolbar ~ md-content > md-list md-list-item:last-child md-divider {
    display: none;
}
.md-toolbar-tools {
    font-size: 20px;
    letter-spacing: 0.005em;
    box-sizing: border-box;
    font-weight: 400;
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 64px;
    max-height: 64px;
    padding: 0 16px;
    margin: 0;
}
.md-toolbar-tools h1,
.md-toolbar-tools h2,
.md-toolbar-tools h3 {
    font-size: inherit;
    font-weight: inherit;
    margin: inherit;
}
.md-toolbar-tools a {
    color: inherit;
    text-decoration: none;
}
.md-toolbar-tools .fill-height {
    display: flex;
    align-items: center;
}
.md-toolbar-tools md-checkbox {
    margin: inherit;
}
.md-toolbar-tools .md-button {
    margin-top: 0;
    margin-bottom: 0;
}
.md-toolbar-tools .md-button,
.md-toolbar-tools .md-button.md-icon-button md-icon {
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    transition-property: background-color, fill, color;
}
.md-toolbar-tools .md-button.md-icon-button md-icon.ng-animate,
.md-toolbar-tools .md-button.ng-animate {
    transition: none;
}
.md-toolbar-tools > .md-button:first-child {
    margin-left: -8px;
}
[dir="rtl"] .md-toolbar-tools > .md-button:first-child {
    margin-left: auto;
    margin-right: -8px;
}
.md-toolbar-tools > .md-button:last-child {
    margin-right: -8px;
}
[dir="rtl"] .md-toolbar-tools > .md-button:last-child {
    margin-right: auto;
    margin-left: -8px;
}
.md-toolbar-tools > md-menu:last-child {
    margin-right: -8px;
}
[dir="rtl"] .md-toolbar-tools > md-menu:last-child {
    margin-right: auto;
    margin-left: -8px;
}
.md-toolbar-tools > md-menu:last-child > .md-button {
    margin-right: 0;
}
[dir="rtl"] .md-toolbar-tools > md-menu:last-child > .md-button {
    margin-right: auto;
    margin-left: 0;
}
@media screen and (-ms-high-contrast: active) {
    .md-toolbar-tools {
        border-bottom: 1px solid #fff;
    }
}
@media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
    md-toolbar {
        min-height: 56px;
    }
    .md-toolbar-tools {
        height: 56px;
        max-height: 56px;
    }
}
@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
    md-toolbar {
        min-height: 48px;
    }
    .md-toolbar-tools {
        height: 48px;
        max-height: 48px;
    }
}
.md-tooltip {
    pointer-events: none;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 32px;
    line-height: 32px;
    padding-right: 16px;
    padding-left: 16px;
}
.md-tooltip.md-origin-top {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    margin-top: -24px;
}
.md-tooltip.md-origin-right {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    margin-left: 24px;
}
.md-tooltip.md-origin-bottom {
    -webkit-transform-origin: center top;
    transform-origin: center top;
    margin-top: 24px;
}
.md-tooltip.md-origin-left {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    margin-left: -24px;
}
@media (min-width: 960px) {
    .md-tooltip {
        font-size: 10px;
        height: 22px;
        line-height: 22px;
        padding-right: 8px;
        padding-left: 8px;
    }
    .md-tooltip.md-origin-top {
        margin-top: -14px;
    }
    .md-tooltip.md-origin-right {
        margin-left: 14px;
    }
    .md-tooltip.md-origin-bottom {
        margin-top: 14px;
    }
    .md-tooltip.md-origin-left {
        margin-left: -14px;
    }
}
.md-tooltip.md-show-add {
    -webkit-transform: scale(0);
    transform: scale(0);
}
.md-tooltip.md-show {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 0.15s;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.9;
}
.md-tooltip.md-hide {
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 0.15s;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.md-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.md-truncate.md-clip {
    text-overflow: clip;
}
.md-truncate.flex {
    width: 0;
}
.md-virtual-repeat-container {
    box-sizing: border-box;
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.md-virtual-repeat-container .md-virtual-repeat-scroller {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
}
.md-virtual-repeat-container .md-virtual-repeat-sizer {
    box-sizing: border-box;
    height: 1px;
    display: block;
    margin: 0;
    padding: 0;
    width: 1px;
}
.md-virtual-repeat-container .md-virtual-repeat-offsetter {
    box-sizing: border-box;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.md-virtual-repeat-container.md-orient-horizontal .md-virtual-repeat-scroller {
    overflow-x: auto;
    overflow-y: hidden;
}
.md-virtual-repeat-container.md-orient-horizontal .md-virtual-repeat-offsetter {
    bottom: 16px;
    right: auto;
    white-space: nowrap;
}
[dir="rtl"]
    .md-virtual-repeat-container.md-orient-horizontal
    .md-virtual-repeat-offsetter {
    right: auto;
    left: auto;
}
.md-whiteframe-1dp,
.md-whiteframe-z1 {
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-2dp {
    box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-3dp {
    box-shadow:
        0 1px 8px 0 rgba(0, 0, 0, 0.2),
        0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 3px 3px -2px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-4dp,
.md-whiteframe-z2 {
    box-shadow:
        0 2px 4px -1px rgba(0, 0, 0, 0.2),
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.md-whiteframe-5dp {
    box-shadow:
        0 3px 5px -1px rgba(0, 0, 0, 0.2),
        0 5px 8px 0 rgba(0, 0, 0, 0.14),
        0 1px 14px 0 rgba(0, 0, 0, 0.12);
}
.md-whiteframe-6dp {
    box-shadow:
        0 3px 5px -1px rgba(0, 0, 0, 0.2),
        0 6px 10px 0 rgba(0, 0, 0, 0.14),
        0 1px 18px 0 rgba(0, 0, 0, 0.12);
}
.md-whiteframe-7dp,
.md-whiteframe-z3 {
    box-shadow:
        0 4px 5px -2px rgba(0, 0, 0, 0.2),
        0 7px 10px 1px rgba(0, 0, 0, 0.14),
        0 2px 16px 1px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-8dp {
    box-shadow:
        0 5px 5px -3px rgba(0, 0, 0, 0.2),
        0 8px 10px 1px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-9dp {
    box-shadow:
        0 5px 6px -3px rgba(0, 0, 0, 0.2),
        0 9px 12px 1px rgba(0, 0, 0, 0.14),
        0 3px 16px 2px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-10dp,
.md-whiteframe-z4 {
    box-shadow:
        0 6px 6px -3px rgba(0, 0, 0, 0.2),
        0 10px 14px 1px rgba(0, 0, 0, 0.14),
        0 4px 18px 3px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-11dp {
    box-shadow:
        0 6px 7px -4px rgba(0, 0, 0, 0.2),
        0 11px 15px 1px rgba(0, 0, 0, 0.14),
        0 4px 20px 3px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-12dp {
    box-shadow:
        0 7px 8px -4px rgba(0, 0, 0, 0.2),
        0 12px 17px 2px rgba(0, 0, 0, 0.14),
        0 5px 22px 4px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-13dp,
.md-whiteframe-z5 {
    box-shadow:
        0 7px 8px -4px rgba(0, 0, 0, 0.2),
        0 13px 19px 2px rgba(0, 0, 0, 0.14),
        0 5px 24px 4px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-14dp {
    box-shadow:
        0 7px 9px -4px rgba(0, 0, 0, 0.2),
        0 14px 21px 2px rgba(0, 0, 0, 0.14),
        0 5px 26px 4px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-15dp {
    box-shadow:
        0 8px 9px -5px rgba(0, 0, 0, 0.2),
        0 15px 22px 2px rgba(0, 0, 0, 0.14),
        0 6px 28px 5px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-16dp {
    box-shadow:
        0 8px 10px -5px rgba(0, 0, 0, 0.2),
        0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0 6px 30px 5px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-17dp {
    box-shadow:
        0 8px 11px -5px rgba(0, 0, 0, 0.2),
        0 17px 26px 2px rgba(0, 0, 0, 0.14),
        0 6px 32px 5px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-18dp {
    box-shadow:
        0 9px 11px -5px rgba(0, 0, 0, 0.2),
        0 18px 28px 2px rgba(0, 0, 0, 0.14),
        0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-19dp {
    box-shadow:
        0 9px 12px -6px rgba(0, 0, 0, 0.2),
        0 19px 29px 2px rgba(0, 0, 0, 0.14),
        0 7px 36px 6px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-20dp {
    box-shadow:
        0 10px 13px -6px rgba(0, 0, 0, 0.2),
        0 20px 31px 3px rgba(0, 0, 0, 0.14),
        0 8px 38px 7px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-21dp {
    box-shadow:
        0 10px 13px -6px rgba(0, 0, 0, 0.2),
        0 21px 33px 3px rgba(0, 0, 0, 0.14),
        0 8px 40px 7px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-22dp {
    box-shadow:
        0 10px 14px -6px rgba(0, 0, 0, 0.2),
        0 22px 35px 3px rgba(0, 0, 0, 0.14),
        0 8px 42px 7px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-23dp {
    box-shadow:
        0 11px 14px -7px rgba(0, 0, 0, 0.2),
        0 23px 36px 3px rgba(0, 0, 0, 0.14),
        0 9px 44px 8px rgba(0, 0, 0, 0.12);
}
.md-whiteframe-24dp {
    box-shadow:
        0 11px 15px -7px rgba(0, 0, 0, 0.2),
        0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12);
}
@media screen and (-ms-high-contrast: active) {
    md-whiteframe {
        border: 1px solid #fff;
    }
}
@media print {
    [md-whiteframe],
    md-whiteframe {
        background-color: #fff;
    }
}
.ng-cloak,
.x-ng-cloak,
[data-ng-cloak],
[ng-cloak],
[ng\:cloak],
[x-ng-cloak] {
    display: none !important;
}
.flex-order {
    order: 0;
}
.flex-order--20 {
    order: -20;
}
.flex-order--19 {
    order: -19;
}
.flex-order--18 {
    order: -18;
}
.flex-order--17 {
    order: -17;
}
.flex-order--16 {
    order: -16;
}
.flex-order--15 {
    order: -15;
}
.flex-order--14 {
    order: -14;
}
.flex-order--13 {
    order: -13;
}
.flex-order--12 {
    order: -12;
}
.flex-order--11 {
    order: -11;
}
.flex-order--10 {
    order: -10;
}
.flex-order--9 {
    order: -9;
}
.flex-order--8 {
    order: -8;
}
.flex-order--7 {
    order: -7;
}
.flex-order--6 {
    order: -6;
}
.flex-order--5 {
    order: -5;
}
.flex-order--4 {
    order: -4;
}
.flex-order--3 {
    order: -3;
}
.flex-order--2 {
    order: -2;
}
.flex-order--1 {
    order: -1;
}
.flex-order-0 {
    order: 0;
}
.flex-order-1 {
    order: 1;
}
.flex-order-2 {
    order: 2;
}
.flex-order-3 {
    order: 3;
}
.flex-order-4 {
    order: 4;
}
.flex-order-5 {
    order: 5;
}
.flex-order-6 {
    order: 6;
}
.flex-order-7 {
    order: 7;
}
.flex-order-8 {
    order: 8;
}
.flex-order-9 {
    order: 9;
}
.flex-order-10 {
    order: 10;
}
.flex-order-11 {
    order: 11;
}
.flex-order-12 {
    order: 12;
}
.flex-order-13 {
    order: 13;
}
.flex-order-14 {
    order: 14;
}
.flex-order-15 {
    order: 15;
}
.flex-order-16 {
    order: 16;
}
.flex-order-17 {
    order: 17;
}
.flex-order-18 {
    order: 18;
}
.flex-order-19 {
    order: 19;
}
.flex-order-20 {
    order: 20;
}
.flex-offset-0,
.layout-margin .flex-offset-0,
.layout-margin .offset-0,
.offset-0 {
    margin-left: 0;
}
[dir="rtl"] .flex-offset-0,
[dir="rtl"] .layout-margin .flex-offset-0,
[dir="rtl"] .layout-margin .offset-0,
[dir="rtl"] .offset-0 {
    margin-left: auto;
    margin-right: 0;
}
.flex-offset-5,
.layout-margin .flex-offset-5,
.layout-margin .offset-5,
.offset-5 {
    margin-left: 5%;
}
[dir="rtl"] .flex-offset-5,
[dir="rtl"] .layout-margin .flex-offset-5,
[dir="rtl"] .layout-margin .offset-5,
[dir="rtl"] .offset-5 {
    margin-left: auto;
    margin-right: 5%;
}
.flex-offset-10,
.layout-margin .flex-offset-10,
.layout-margin .offset-10,
.offset-10 {
    margin-left: 10%;
}
[dir="rtl"] .flex-offset-10,
[dir="rtl"] .layout-margin .flex-offset-10,
[dir="rtl"] .layout-margin .offset-10,
[dir="rtl"] .offset-10 {
    margin-left: auto;
    margin-right: 10%;
}
.flex-offset-15,
.layout-margin .flex-offset-15,
.layout-margin .offset-15,
.offset-15 {
    margin-left: 15%;
}
[dir="rtl"] .flex-offset-15,
[dir="rtl"] .layout-margin .flex-offset-15,
[dir="rtl"] .layout-margin .offset-15,
[dir="rtl"] .offset-15 {
    margin-left: auto;
    margin-right: 15%;
}
.flex-offset-20,
.layout-margin .flex-offset-20,
.layout-margin .offset-20,
.offset-20 {
    margin-left: 20%;
}
[dir="rtl"] .flex-offset-20,
[dir="rtl"] .layout-margin .flex-offset-20,
[dir="rtl"] .layout-margin .offset-20,
[dir="rtl"] .offset-20 {
    margin-left: auto;
    margin-right: 20%;
}
.flex-offset-25,
.layout-margin .flex-offset-25,
.layout-margin .offset-25,
.offset-25 {
    margin-left: 25%;
}
[dir="rtl"] .flex-offset-25,
[dir="rtl"] .layout-margin .flex-offset-25,
[dir="rtl"] .layout-margin .offset-25,
[dir="rtl"] .offset-25 {
    margin-left: auto;
    margin-right: 25%;
}
.flex-offset-30,
.layout-margin .flex-offset-30,
.layout-margin .offset-30,
.offset-30 {
    margin-left: 30%;
}
[dir="rtl"] .flex-offset-30,
[dir="rtl"] .layout-margin .flex-offset-30,
[dir="rtl"] .layout-margin .offset-30,
[dir="rtl"] .offset-30 {
    margin-left: auto;
    margin-right: 30%;
}
.flex-offset-35,
.layout-margin .flex-offset-35,
.layout-margin .offset-35,
.offset-35 {
    margin-left: 35%;
}
[dir="rtl"] .flex-offset-35,
[dir="rtl"] .layout-margin .flex-offset-35,
[dir="rtl"] .layout-margin .offset-35,
[dir="rtl"] .offset-35 {
    margin-left: auto;
    margin-right: 35%;
}
.flex-offset-40,
.layout-margin .flex-offset-40,
.layout-margin .offset-40,
.offset-40 {
    margin-left: 40%;
}
[dir="rtl"] .flex-offset-40,
[dir="rtl"] .layout-margin .flex-offset-40,
[dir="rtl"] .layout-margin .offset-40,
[dir="rtl"] .offset-40 {
    margin-left: auto;
    margin-right: 40%;
}
.flex-offset-45,
.layout-margin .flex-offset-45,
.layout-margin .offset-45,
.offset-45 {
    margin-left: 45%;
}
[dir="rtl"] .flex-offset-45,
[dir="rtl"] .layout-margin .flex-offset-45,
[dir="rtl"] .layout-margin .offset-45,
[dir="rtl"] .offset-45 {
    margin-left: auto;
    margin-right: 45%;
}
.flex-offset-50,
.layout-margin .flex-offset-50,
.layout-margin .offset-50,
.offset-50 {
    margin-left: 50%;
}
[dir="rtl"] .flex-offset-50,
[dir="rtl"] .layout-margin .flex-offset-50,
[dir="rtl"] .layout-margin .offset-50,
[dir="rtl"] .offset-50 {
    margin-left: auto;
    margin-right: 50%;
}
.flex-offset-55,
.layout-margin .flex-offset-55,
.layout-margin .offset-55,
.offset-55 {
    margin-left: 55%;
}
[dir="rtl"] .flex-offset-55,
[dir="rtl"] .layout-margin .flex-offset-55,
[dir="rtl"] .layout-margin .offset-55,
[dir="rtl"] .offset-55 {
    margin-left: auto;
    margin-right: 55%;
}
.flex-offset-60,
.layout-margin .flex-offset-60,
.layout-margin .offset-60,
.offset-60 {
    margin-left: 60%;
}
[dir="rtl"] .flex-offset-60,
[dir="rtl"] .layout-margin .flex-offset-60,
[dir="rtl"] .layout-margin .offset-60,
[dir="rtl"] .offset-60 {
    margin-left: auto;
    margin-right: 60%;
}
.flex-offset-65,
.layout-margin .flex-offset-65,
.layout-margin .offset-65,
.offset-65 {
    margin-left: 65%;
}
[dir="rtl"] .flex-offset-65,
[dir="rtl"] .layout-margin .flex-offset-65,
[dir="rtl"] .layout-margin .offset-65,
[dir="rtl"] .offset-65 {
    margin-left: auto;
    margin-right: 65%;
}
.flex-offset-70,
.layout-margin .flex-offset-70,
.layout-margin .offset-70,
.offset-70 {
    margin-left: 70%;
}
[dir="rtl"] .flex-offset-70,
[dir="rtl"] .layout-margin .flex-offset-70,
[dir="rtl"] .layout-margin .offset-70,
[dir="rtl"] .offset-70 {
    margin-left: auto;
    margin-right: 70%;
}
.flex-offset-75,
.layout-margin .flex-offset-75,
.layout-margin .offset-75,
.offset-75 {
    margin-left: 75%;
}
[dir="rtl"] .flex-offset-75,
[dir="rtl"] .layout-margin .flex-offset-75,
[dir="rtl"] .layout-margin .offset-75,
[dir="rtl"] .offset-75 {
    margin-left: auto;
    margin-right: 75%;
}
.flex-offset-80,
.layout-margin .flex-offset-80,
.layout-margin .offset-80,
.offset-80 {
    margin-left: 80%;
}
[dir="rtl"] .flex-offset-80,
[dir="rtl"] .layout-margin .flex-offset-80,
[dir="rtl"] .layout-margin .offset-80,
[dir="rtl"] .offset-80 {
    margin-left: auto;
    margin-right: 80%;
}
.flex-offset-85,
.layout-margin .flex-offset-85,
.layout-margin .offset-85,
.offset-85 {
    margin-left: 85%;
}
[dir="rtl"] .flex-offset-85,
[dir="rtl"] .layout-margin .flex-offset-85,
[dir="rtl"] .layout-margin .offset-85,
[dir="rtl"] .offset-85 {
    margin-left: auto;
    margin-right: 85%;
}
.flex-offset-90,
.layout-margin .flex-offset-90,
.layout-margin .offset-90,
.offset-90 {
    margin-left: 90%;
}
[dir="rtl"] .flex-offset-90,
[dir="rtl"] .layout-margin .flex-offset-90,
[dir="rtl"] .layout-margin .offset-90,
[dir="rtl"] .offset-90 {
    margin-left: auto;
    margin-right: 90%;
}
.flex-offset-95,
.layout-margin .flex-offset-95,
.layout-margin .offset-95,
.offset-95 {
    margin-left: 95%;
}
[dir="rtl"] .flex-offset-95,
[dir="rtl"] .layout-margin .flex-offset-95,
[dir="rtl"] .layout-margin .offset-95,
[dir="rtl"] .offset-95 {
    margin-left: auto;
    margin-right: 95%;
}
.flex-offset-33,
.layout-margin .flex-offset-33,
.layout-margin .offset-33,
.offset-33 {
    margin-left: 33.33333%;
}
.flex-offset-66,
.layout-margin .flex-offset-66,
.layout-margin .offset-66,
.offset-66 {
    margin-left: 66.66667%;
}
[dir="rtl"] .flex-offset-66,
[dir="rtl"] .layout-margin .flex-offset-66,
[dir="rtl"] .layout-margin .offset-66,
[dir="rtl"] .offset-66 {
    margin-left: auto;
    margin-right: 66.66667%;
}
.layout-align,
.layout-align-start-stretch {
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}
.layout-align-start,
.layout-align-start-center,
.layout-align-start-end,
.layout-align-start-start,
.layout-align-start-stretch {
    justify-content: flex-start;
}
.layout-align-center,
.layout-align-center-center,
.layout-align-center-end,
.layout-align-center-start,
.layout-align-center-stretch {
    justify-content: center;
}
.layout-align-end,
.layout-align-end-center,
.layout-align-end-end,
.layout-align-end-start,
.layout-align-end-stretch {
    justify-content: flex-end;
}
.layout-align-space-around,
.layout-align-space-around-center,
.layout-align-space-around-end,
.layout-align-space-around-start,
.layout-align-space-around-stretch {
    justify-content: space-around;
}
.layout-align-space-between,
.layout-align-space-between-center,
.layout-align-space-between-end,
.layout-align-space-between-start,
.layout-align-space-between-stretch {
    justify-content: space-between;
}
.layout-align-center-start,
.layout-align-end-start,
.layout-align-space-around-start,
.layout-align-space-between-start,
.layout-align-start-start {
    align-items: flex-start;
    align-content: flex-start;
}
.layout-align-center-center,
.layout-align-end-center,
.layout-align-space-around-center,
.layout-align-space-between-center,
.layout-align-start-center {
    align-items: center;
    align-content: center;
    max-width: 100%;
}
.layout-align-center-center > *,
.layout-align-end-center > *,
.layout-align-space-around-center > *,
.layout-align-space-between-center > *,
.layout-align-start-center > * {
    max-width: 100%;
    box-sizing: border-box;
}
.layout-align-center-end,
.layout-align-end-end,
.layout-align-space-around-end,
.layout-align-space-between-end,
.layout-align-start-end {
    align-items: flex-end;
    align-content: flex-end;
}
.layout-align-center-stretch,
.layout-align-end-stretch,
.layout-align-space-around-stretch,
.layout-align-space-between-stretch,
.layout-align-start-stretch {
    align-items: stretch;
    align-content: stretch;
}
.flex {
    flex: 1;
}
.flex,
.flex-grow {
    box-sizing: border-box;
}
.flex-grow {
    flex: 1 1 100%;
}
.flex-initial {
    flex: 0 1 auto;
    box-sizing: border-box;
}
.flex-auto {
    flex: 1 1 auto;
    box-sizing: border-box;
}
.flex-none {
    flex: 0 0 auto;
    box-sizing: border-box;
}
.flex-noshrink {
    flex: 1 0 auto;
    box-sizing: border-box;
}
.flex-nogrow {
    flex: 0 1 auto;
    box-sizing: border-box;
}
.flex-0,
.layout-row > .flex-0 {
    flex: 1 1 100%;
    max-width: 0;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-row > .flex-0 {
    min-width: 0;
}
.layout-column > .flex-0 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 0%;
    box-sizing: border-box;
}
.flex-5,
.layout-row > .flex-5 {
    flex: 1 1 100%;
    max-width: 5%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-5 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 5%;
    box-sizing: border-box;
}
.flex-10,
.layout-row > .flex-10 {
    flex: 1 1 100%;
    max-width: 10%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-10 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 10%;
    box-sizing: border-box;
}
.flex-15,
.layout-row > .flex-15 {
    flex: 1 1 100%;
    max-width: 15%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-15 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 15%;
    box-sizing: border-box;
}
.flex-20,
.layout-row > .flex-20 {
    flex: 1 1 100%;
    max-width: 20%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-20 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 20%;
    box-sizing: border-box;
}
.flex-25,
.layout-row > .flex-25 {
    flex: 1 1 100%;
    max-width: 25%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-25 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 25%;
    box-sizing: border-box;
}
.flex-30,
.layout-row > .flex-30 {
    flex: 1 1 100%;
    max-width: 30%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-30 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 30%;
    box-sizing: border-box;
}
.flex-35,
.layout-row > .flex-35 {
    flex: 1 1 100%;
    max-width: 35%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-35 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 35%;
    box-sizing: border-box;
}
.flex-40,
.layout-row > .flex-40 {
    flex: 1 1 100%;
    max-width: 40%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-40 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 40%;
    box-sizing: border-box;
}
.flex-45,
.layout-row > .flex-45 {
    flex: 1 1 100%;
    max-width: 45%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-45 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 45%;
    box-sizing: border-box;
}
.flex-50,
.layout-row > .flex-50 {
    flex: 1 1 100%;
    max-width: 50%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-50 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 50%;
    box-sizing: border-box;
}
.flex-55,
.layout-row > .flex-55 {
    flex: 1 1 100%;
    max-width: 55%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-55 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 55%;
    box-sizing: border-box;
}
.flex-60,
.layout-row > .flex-60 {
    flex: 1 1 100%;
    max-width: 60%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-60 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 60%;
    box-sizing: border-box;
}
.flex-65,
.layout-row > .flex-65 {
    flex: 1 1 100%;
    max-width: 65%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-65 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 65%;
    box-sizing: border-box;
}
.flex-70,
.layout-row > .flex-70 {
    flex: 1 1 100%;
    max-width: 70%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-70 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 70%;
    box-sizing: border-box;
}
.flex-75,
.layout-row > .flex-75 {
    flex: 1 1 100%;
    max-width: 75%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-75 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 75%;
    box-sizing: border-box;
}
.flex-80,
.layout-row > .flex-80 {
    flex: 1 1 100%;
    max-width: 80%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-80 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 80%;
    box-sizing: border-box;
}
.flex-85,
.layout-row > .flex-85 {
    flex: 1 1 100%;
    max-width: 85%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-85 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 85%;
    box-sizing: border-box;
}
.flex-90,
.layout-row > .flex-90 {
    flex: 1 1 100%;
    max-width: 90%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-90 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 90%;
    box-sizing: border-box;
}
.flex-95,
.layout-row > .flex-95 {
    flex: 1 1 100%;
    max-width: 95%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-95 {
    max-height: 95%;
}
.flex-100,
.layout-column > .flex-95 {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.flex-100 {
    max-height: 100%;
}
.layout-column > .flex-100,
.layout-row > .flex-100 {
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}
.flex-33 {
    max-width: 33.33%;
}
.flex-33,
.flex-66 {
    flex: 1 1 100%;
    max-height: 100%;
    box-sizing: border-box;
}
.flex-66 {
    max-width: 66.66%;
}
.layout-row > .flex-33 {
    flex: 1 1 33.33%;
}
.layout-row > .flex-66 {
    flex: 1 1 66.66%;
}
.layout-column > .flex-33 {
    flex: 1 1 33.33%;
}
.layout-column > .flex-66 {
    flex: 1 1 66.66%;
}
.layout-row > .flex-33 {
    max-width: 33.33%;
}
.layout-row > .flex-33,
.layout-row > .flex-66 {
    flex: 1 1 100%;
    max-height: 100%;
    box-sizing: border-box;
}
.layout-row > .flex-66 {
    max-width: 66.66%;
}
.layout-row > .flex {
    min-width: 0;
}
.layout-column > .flex-33 {
    max-height: 33.33%;
}
.layout-column > .flex-33,
.layout-column > .flex-66 {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.layout-column > .flex-66 {
    max-height: 66.66%;
}
.layout-column > .flex {
    min-height: 0;
}
.layout,
.layout-column,
.layout-row {
    box-sizing: border-box;
    display: flex;
}
.layout-column {
    flex-direction: column;
}
.layout-row {
    flex-direction: row;
}
.layout-padding-sm > *,
.layout-padding > .flex-sm {
    padding: 4px;
}
.layout-padding,
.layout-padding-gt-sm,
.layout-padding-gt-sm > *,
.layout-padding-md,
.layout-padding-md > *,
.layout-padding > *,
.layout-padding > .flex,
.layout-padding > .flex-gt-sm,
.layout-padding > .flex-md {
    padding: 8px;
}
.layout-padding-gt-lg > *,
.layout-padding-gt-md > *,
.layout-padding-lg > *,
.layout-padding > .flex-gt-lg,
.layout-padding > .flex-gt-md,
.layout-padding > .flex-lg {
    padding: 16px;
}
.layout-margin-sm > *,
.layout-margin > .flex-sm {
    margin: 4px;
}
.layout-margin,
.layout-margin-gt-sm,
.layout-margin-gt-sm > *,
.layout-margin-md,
.layout-margin-md > *,
.layout-margin > *,
.layout-margin > .flex,
.layout-margin > .flex-gt-sm,
.layout-margin > .flex-md {
    margin: 8px;
}
.layout-margin-gt-lg > *,
.layout-margin-gt-md > *,
.layout-margin-lg > *,
.layout-margin > .flex-gt-lg,
.layout-margin > .flex-gt-md,
.layout-margin > .flex-lg {
    margin: 16px;
}
.layout-wrap {
    flex-wrap: wrap;
}
.layout-nowrap {
    flex-wrap: nowrap;
}
.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}
@media (max-width: 599px) {
    .hide-xs:not(.show-xs):not(.show),
    .hide:not(.show-xs):not(.show) {
        display: none;
    }
    .flex-order-xs--20 {
        order: -20;
    }
    .flex-order-xs--19 {
        order: -19;
    }
    .flex-order-xs--18 {
        order: -18;
    }
    .flex-order-xs--17 {
        order: -17;
    }
    .flex-order-xs--16 {
        order: -16;
    }
    .flex-order-xs--15 {
        order: -15;
    }
    .flex-order-xs--14 {
        order: -14;
    }
    .flex-order-xs--13 {
        order: -13;
    }
    .flex-order-xs--12 {
        order: -12;
    }
    .flex-order-xs--11 {
        order: -11;
    }
    .flex-order-xs--10 {
        order: -10;
    }
    .flex-order-xs--9 {
        order: -9;
    }
    .flex-order-xs--8 {
        order: -8;
    }
    .flex-order-xs--7 {
        order: -7;
    }
    .flex-order-xs--6 {
        order: -6;
    }
    .flex-order-xs--5 {
        order: -5;
    }
    .flex-order-xs--4 {
        order: -4;
    }
    .flex-order-xs--3 {
        order: -3;
    }
    .flex-order-xs--2 {
        order: -2;
    }
    .flex-order-xs--1 {
        order: -1;
    }
    .flex-order-xs-0 {
        order: 0;
    }
    .flex-order-xs-1 {
        order: 1;
    }
    .flex-order-xs-2 {
        order: 2;
    }
    .flex-order-xs-3 {
        order: 3;
    }
    .flex-order-xs-4 {
        order: 4;
    }
    .flex-order-xs-5 {
        order: 5;
    }
    .flex-order-xs-6 {
        order: 6;
    }
    .flex-order-xs-7 {
        order: 7;
    }
    .flex-order-xs-8 {
        order: 8;
    }
    .flex-order-xs-9 {
        order: 9;
    }
    .flex-order-xs-10 {
        order: 10;
    }
    .flex-order-xs-11 {
        order: 11;
    }
    .flex-order-xs-12 {
        order: 12;
    }
    .flex-order-xs-13 {
        order: 13;
    }
    .flex-order-xs-14 {
        order: 14;
    }
    .flex-order-xs-15 {
        order: 15;
    }
    .flex-order-xs-16 {
        order: 16;
    }
    .flex-order-xs-17 {
        order: 17;
    }
    .flex-order-xs-18 {
        order: 18;
    }
    .flex-order-xs-19 {
        order: 19;
    }
    .flex-order-xs-20 {
        order: 20;
    }
    .flex-offset-xs-0,
    .layout-margin .flex-offset-xs-0,
    .layout-margin .offset-xs-0,
    .offset-xs-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-xs-0,
    [dir="rtl"] .layout-margin .flex-offset-xs-0,
    [dir="rtl"] .layout-margin .offset-xs-0,
    [dir="rtl"] .offset-xs-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-xs-5,
    .layout-margin .flex-offset-xs-5,
    .layout-margin .offset-xs-5,
    .offset-xs-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-xs-5,
    [dir="rtl"] .layout-margin .flex-offset-xs-5,
    [dir="rtl"] .layout-margin .offset-xs-5,
    [dir="rtl"] .offset-xs-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-xs-10,
    .layout-margin .flex-offset-xs-10,
    .layout-margin .offset-xs-10,
    .offset-xs-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-xs-10,
    [dir="rtl"] .layout-margin .flex-offset-xs-10,
    [dir="rtl"] .layout-margin .offset-xs-10,
    [dir="rtl"] .offset-xs-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-xs-15,
    .layout-margin .flex-offset-xs-15,
    .layout-margin .offset-xs-15,
    .offset-xs-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-xs-15,
    [dir="rtl"] .layout-margin .flex-offset-xs-15,
    [dir="rtl"] .layout-margin .offset-xs-15,
    [dir="rtl"] .offset-xs-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-xs-20,
    .layout-margin .flex-offset-xs-20,
    .layout-margin .offset-xs-20,
    .offset-xs-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-xs-20,
    [dir="rtl"] .layout-margin .flex-offset-xs-20,
    [dir="rtl"] .layout-margin .offset-xs-20,
    [dir="rtl"] .offset-xs-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-xs-25,
    .layout-margin .flex-offset-xs-25,
    .layout-margin .offset-xs-25,
    .offset-xs-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-xs-25,
    [dir="rtl"] .layout-margin .flex-offset-xs-25,
    [dir="rtl"] .layout-margin .offset-xs-25,
    [dir="rtl"] .offset-xs-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-xs-30,
    .layout-margin .flex-offset-xs-30,
    .layout-margin .offset-xs-30,
    .offset-xs-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-xs-30,
    [dir="rtl"] .layout-margin .flex-offset-xs-30,
    [dir="rtl"] .layout-margin .offset-xs-30,
    [dir="rtl"] .offset-xs-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-xs-35,
    .layout-margin .flex-offset-xs-35,
    .layout-margin .offset-xs-35,
    .offset-xs-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-xs-35,
    [dir="rtl"] .layout-margin .flex-offset-xs-35,
    [dir="rtl"] .layout-margin .offset-xs-35,
    [dir="rtl"] .offset-xs-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-xs-40,
    .layout-margin .flex-offset-xs-40,
    .layout-margin .offset-xs-40,
    .offset-xs-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-xs-40,
    [dir="rtl"] .layout-margin .flex-offset-xs-40,
    [dir="rtl"] .layout-margin .offset-xs-40,
    [dir="rtl"] .offset-xs-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-xs-45,
    .layout-margin .flex-offset-xs-45,
    .layout-margin .offset-xs-45,
    .offset-xs-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-xs-45,
    [dir="rtl"] .layout-margin .flex-offset-xs-45,
    [dir="rtl"] .layout-margin .offset-xs-45,
    [dir="rtl"] .offset-xs-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-xs-50,
    .layout-margin .flex-offset-xs-50,
    .layout-margin .offset-xs-50,
    .offset-xs-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-xs-50,
    [dir="rtl"] .layout-margin .flex-offset-xs-50,
    [dir="rtl"] .layout-margin .offset-xs-50,
    [dir="rtl"] .offset-xs-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-xs-55,
    .layout-margin .flex-offset-xs-55,
    .layout-margin .offset-xs-55,
    .offset-xs-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-xs-55,
    [dir="rtl"] .layout-margin .flex-offset-xs-55,
    [dir="rtl"] .layout-margin .offset-xs-55,
    [dir="rtl"] .offset-xs-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-xs-60,
    .layout-margin .flex-offset-xs-60,
    .layout-margin .offset-xs-60,
    .offset-xs-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-xs-60,
    [dir="rtl"] .layout-margin .flex-offset-xs-60,
    [dir="rtl"] .layout-margin .offset-xs-60,
    [dir="rtl"] .offset-xs-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-xs-65,
    .layout-margin .flex-offset-xs-65,
    .layout-margin .offset-xs-65,
    .offset-xs-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-xs-65,
    [dir="rtl"] .layout-margin .flex-offset-xs-65,
    [dir="rtl"] .layout-margin .offset-xs-65,
    [dir="rtl"] .offset-xs-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-xs-70,
    .layout-margin .flex-offset-xs-70,
    .layout-margin .offset-xs-70,
    .offset-xs-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-xs-70,
    [dir="rtl"] .layout-margin .flex-offset-xs-70,
    [dir="rtl"] .layout-margin .offset-xs-70,
    [dir="rtl"] .offset-xs-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-xs-75,
    .layout-margin .flex-offset-xs-75,
    .layout-margin .offset-xs-75,
    .offset-xs-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-xs-75,
    [dir="rtl"] .layout-margin .flex-offset-xs-75,
    [dir="rtl"] .layout-margin .offset-xs-75,
    [dir="rtl"] .offset-xs-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-xs-80,
    .layout-margin .flex-offset-xs-80,
    .layout-margin .offset-xs-80,
    .offset-xs-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-xs-80,
    [dir="rtl"] .layout-margin .flex-offset-xs-80,
    [dir="rtl"] .layout-margin .offset-xs-80,
    [dir="rtl"] .offset-xs-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-xs-85,
    .layout-margin .flex-offset-xs-85,
    .layout-margin .offset-xs-85,
    .offset-xs-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-xs-85,
    [dir="rtl"] .layout-margin .flex-offset-xs-85,
    [dir="rtl"] .layout-margin .offset-xs-85,
    [dir="rtl"] .offset-xs-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-xs-90,
    .layout-margin .flex-offset-xs-90,
    .layout-margin .offset-xs-90,
    .offset-xs-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-xs-90,
    [dir="rtl"] .layout-margin .flex-offset-xs-90,
    [dir="rtl"] .layout-margin .offset-xs-90,
    [dir="rtl"] .offset-xs-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-xs-95,
    .layout-margin .flex-offset-xs-95,
    .layout-margin .offset-xs-95,
    .offset-xs-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-xs-95,
    [dir="rtl"] .layout-margin .flex-offset-xs-95,
    [dir="rtl"] .layout-margin .offset-xs-95,
    [dir="rtl"] .offset-xs-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-xs-33,
    .layout-margin .flex-offset-xs-33,
    .layout-margin .offset-xs-33,
    .offset-xs-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-xs-66,
    .layout-margin .flex-offset-xs-66,
    .layout-margin .offset-xs-66,
    .offset-xs-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-xs-66,
    [dir="rtl"] .layout-margin .flex-offset-xs-66,
    [dir="rtl"] .layout-margin .offset-xs-66,
    [dir="rtl"] .offset-xs-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-xs,
    .layout-align-xs-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-xs-start,
    .layout-align-xs-start-center,
    .layout-align-xs-start-end,
    .layout-align-xs-start-start,
    .layout-align-xs-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-xs-center,
    .layout-align-xs-center-center,
    .layout-align-xs-center-end,
    .layout-align-xs-center-start,
    .layout-align-xs-center-stretch {
        justify-content: center;
    }
    .layout-align-xs-end,
    .layout-align-xs-end-center,
    .layout-align-xs-end-end,
    .layout-align-xs-end-start,
    .layout-align-xs-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-xs-space-around,
    .layout-align-xs-space-around-center,
    .layout-align-xs-space-around-end,
    .layout-align-xs-space-around-start,
    .layout-align-xs-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-xs-space-between,
    .layout-align-xs-space-between-center,
    .layout-align-xs-space-between-end,
    .layout-align-xs-space-between-start,
    .layout-align-xs-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-xs-center-start,
    .layout-align-xs-end-start,
    .layout-align-xs-space-around-start,
    .layout-align-xs-space-between-start,
    .layout-align-xs-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-xs-center-center,
    .layout-align-xs-end-center,
    .layout-align-xs-space-around-center,
    .layout-align-xs-space-between-center,
    .layout-align-xs-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-xs-center-center > *,
    .layout-align-xs-end-center > *,
    .layout-align-xs-space-around-center > *,
    .layout-align-xs-space-between-center > *,
    .layout-align-xs-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-xs-center-end,
    .layout-align-xs-end-end,
    .layout-align-xs-space-around-end,
    .layout-align-xs-space-between-end,
    .layout-align-xs-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-xs-center-stretch,
    .layout-align-xs-end-stretch,
    .layout-align-xs-space-around-stretch,
    .layout-align-xs-space-between-stretch,
    .layout-align-xs-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-xs {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-xs-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-xs-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-xs-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-xs-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-xs-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-xs-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-xs-0,
    .layout-row > .flex-xs-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-xs-0 {
        min-width: 0;
    }
    .layout-column > .flex-xs-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-xs-column > .flex-xs-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-xs-5,
    .layout-row > .flex-xs-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-xs-10,
    .layout-row > .flex-xs-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-xs-15,
    .layout-row > .flex-xs-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-xs-20,
    .layout-row > .flex-xs-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-xs-25,
    .layout-row > .flex-xs-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-xs-30,
    .layout-row > .flex-xs-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-xs-35,
    .layout-row > .flex-xs-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-xs-40,
    .layout-row > .flex-xs-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-xs-45,
    .layout-row > .flex-xs-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-xs-50,
    .layout-row > .flex-xs-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-xs-55,
    .layout-row > .flex-xs-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-xs-60,
    .layout-row > .flex-xs-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-xs-65,
    .layout-row > .flex-xs-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-xs-70,
    .layout-row > .flex-xs-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-xs-75,
    .layout-row > .flex-xs-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-xs-80,
    .layout-row > .flex-xs-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-xs-85,
    .layout-row > .flex-xs-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-xs-90,
    .layout-row > .flex-xs-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-xs-95,
    .layout-row > .flex-xs-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-95 {
        max-height: 95%;
    }
    .flex-xs-100,
    .layout-xs-column > .flex-xs-95 {
        flex: 1 1 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .flex-xs-100 {
        max-height: 100%;
    }
    .layout-column > .flex-xs-100,
    .layout-row > .flex-xs-100,
    .layout-xs-column > .flex-xs-100,
    .layout-xs-row > .flex-xs-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-xs-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-xs-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xs-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex-xs-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xs-row > .flex {
        min-width: 0;
    }
    .layout-xs-column > .flex-xs-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex-xs-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-xs-column > .flex {
        min-height: 0;
    }
    .layout-xs,
    .layout-xs-column,
    .layout-xs-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-xs-column {
        flex-direction: column;
    }
    .layout-xs-row {
        flex-direction: row;
    }
}
@media (min-width: 600px) {
    .flex-order-gt-xs--20 {
        order: -20;
    }
    .flex-order-gt-xs--19 {
        order: -19;
    }
    .flex-order-gt-xs--18 {
        order: -18;
    }
    .flex-order-gt-xs--17 {
        order: -17;
    }
    .flex-order-gt-xs--16 {
        order: -16;
    }
    .flex-order-gt-xs--15 {
        order: -15;
    }
    .flex-order-gt-xs--14 {
        order: -14;
    }
    .flex-order-gt-xs--13 {
        order: -13;
    }
    .flex-order-gt-xs--12 {
        order: -12;
    }
    .flex-order-gt-xs--11 {
        order: -11;
    }
    .flex-order-gt-xs--10 {
        order: -10;
    }
    .flex-order-gt-xs--9 {
        order: -9;
    }
    .flex-order-gt-xs--8 {
        order: -8;
    }
    .flex-order-gt-xs--7 {
        order: -7;
    }
    .flex-order-gt-xs--6 {
        order: -6;
    }
    .flex-order-gt-xs--5 {
        order: -5;
    }
    .flex-order-gt-xs--4 {
        order: -4;
    }
    .flex-order-gt-xs--3 {
        order: -3;
    }
    .flex-order-gt-xs--2 {
        order: -2;
    }
    .flex-order-gt-xs--1 {
        order: -1;
    }
    .flex-order-gt-xs-0 {
        order: 0;
    }
    .flex-order-gt-xs-1 {
        order: 1;
    }
    .flex-order-gt-xs-2 {
        order: 2;
    }
    .flex-order-gt-xs-3 {
        order: 3;
    }
    .flex-order-gt-xs-4 {
        order: 4;
    }
    .flex-order-gt-xs-5 {
        order: 5;
    }
    .flex-order-gt-xs-6 {
        order: 6;
    }
    .flex-order-gt-xs-7 {
        order: 7;
    }
    .flex-order-gt-xs-8 {
        order: 8;
    }
    .flex-order-gt-xs-9 {
        order: 9;
    }
    .flex-order-gt-xs-10 {
        order: 10;
    }
    .flex-order-gt-xs-11 {
        order: 11;
    }
    .flex-order-gt-xs-12 {
        order: 12;
    }
    .flex-order-gt-xs-13 {
        order: 13;
    }
    .flex-order-gt-xs-14 {
        order: 14;
    }
    .flex-order-gt-xs-15 {
        order: 15;
    }
    .flex-order-gt-xs-16 {
        order: 16;
    }
    .flex-order-gt-xs-17 {
        order: 17;
    }
    .flex-order-gt-xs-18 {
        order: 18;
    }
    .flex-order-gt-xs-19 {
        order: 19;
    }
    .flex-order-gt-xs-20 {
        order: 20;
    }
    .flex-offset-gt-xs-0,
    .layout-margin .flex-offset-gt-xs-0,
    .layout-margin .offset-gt-xs-0,
    .offset-gt-xs-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-gt-xs-0,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-0,
    [dir="rtl"] .layout-margin .offset-gt-xs-0,
    [dir="rtl"] .offset-gt-xs-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-gt-xs-5,
    .layout-margin .flex-offset-gt-xs-5,
    .layout-margin .offset-gt-xs-5,
    .offset-gt-xs-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-gt-xs-5,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-5,
    [dir="rtl"] .layout-margin .offset-gt-xs-5,
    [dir="rtl"] .offset-gt-xs-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-gt-xs-10,
    .layout-margin .flex-offset-gt-xs-10,
    .layout-margin .offset-gt-xs-10,
    .offset-gt-xs-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-gt-xs-10,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-10,
    [dir="rtl"] .layout-margin .offset-gt-xs-10,
    [dir="rtl"] .offset-gt-xs-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-gt-xs-15,
    .layout-margin .flex-offset-gt-xs-15,
    .layout-margin .offset-gt-xs-15,
    .offset-gt-xs-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-gt-xs-15,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-15,
    [dir="rtl"] .layout-margin .offset-gt-xs-15,
    [dir="rtl"] .offset-gt-xs-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-gt-xs-20,
    .layout-margin .flex-offset-gt-xs-20,
    .layout-margin .offset-gt-xs-20,
    .offset-gt-xs-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-gt-xs-20,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-20,
    [dir="rtl"] .layout-margin .offset-gt-xs-20,
    [dir="rtl"] .offset-gt-xs-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-gt-xs-25,
    .layout-margin .flex-offset-gt-xs-25,
    .layout-margin .offset-gt-xs-25,
    .offset-gt-xs-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-gt-xs-25,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-25,
    [dir="rtl"] .layout-margin .offset-gt-xs-25,
    [dir="rtl"] .offset-gt-xs-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-gt-xs-30,
    .layout-margin .flex-offset-gt-xs-30,
    .layout-margin .offset-gt-xs-30,
    .offset-gt-xs-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-gt-xs-30,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-30,
    [dir="rtl"] .layout-margin .offset-gt-xs-30,
    [dir="rtl"] .offset-gt-xs-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-gt-xs-35,
    .layout-margin .flex-offset-gt-xs-35,
    .layout-margin .offset-gt-xs-35,
    .offset-gt-xs-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-gt-xs-35,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-35,
    [dir="rtl"] .layout-margin .offset-gt-xs-35,
    [dir="rtl"] .offset-gt-xs-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-gt-xs-40,
    .layout-margin .flex-offset-gt-xs-40,
    .layout-margin .offset-gt-xs-40,
    .offset-gt-xs-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-gt-xs-40,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-40,
    [dir="rtl"] .layout-margin .offset-gt-xs-40,
    [dir="rtl"] .offset-gt-xs-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-gt-xs-45,
    .layout-margin .flex-offset-gt-xs-45,
    .layout-margin .offset-gt-xs-45,
    .offset-gt-xs-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-gt-xs-45,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-45,
    [dir="rtl"] .layout-margin .offset-gt-xs-45,
    [dir="rtl"] .offset-gt-xs-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-gt-xs-50,
    .layout-margin .flex-offset-gt-xs-50,
    .layout-margin .offset-gt-xs-50,
    .offset-gt-xs-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-gt-xs-50,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-50,
    [dir="rtl"] .layout-margin .offset-gt-xs-50,
    [dir="rtl"] .offset-gt-xs-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-gt-xs-55,
    .layout-margin .flex-offset-gt-xs-55,
    .layout-margin .offset-gt-xs-55,
    .offset-gt-xs-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-gt-xs-55,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-55,
    [dir="rtl"] .layout-margin .offset-gt-xs-55,
    [dir="rtl"] .offset-gt-xs-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-gt-xs-60,
    .layout-margin .flex-offset-gt-xs-60,
    .layout-margin .offset-gt-xs-60,
    .offset-gt-xs-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-gt-xs-60,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-60,
    [dir="rtl"] .layout-margin .offset-gt-xs-60,
    [dir="rtl"] .offset-gt-xs-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-gt-xs-65,
    .layout-margin .flex-offset-gt-xs-65,
    .layout-margin .offset-gt-xs-65,
    .offset-gt-xs-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-gt-xs-65,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-65,
    [dir="rtl"] .layout-margin .offset-gt-xs-65,
    [dir="rtl"] .offset-gt-xs-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-gt-xs-70,
    .layout-margin .flex-offset-gt-xs-70,
    .layout-margin .offset-gt-xs-70,
    .offset-gt-xs-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-gt-xs-70,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-70,
    [dir="rtl"] .layout-margin .offset-gt-xs-70,
    [dir="rtl"] .offset-gt-xs-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-gt-xs-75,
    .layout-margin .flex-offset-gt-xs-75,
    .layout-margin .offset-gt-xs-75,
    .offset-gt-xs-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-gt-xs-75,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-75,
    [dir="rtl"] .layout-margin .offset-gt-xs-75,
    [dir="rtl"] .offset-gt-xs-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-gt-xs-80,
    .layout-margin .flex-offset-gt-xs-80,
    .layout-margin .offset-gt-xs-80,
    .offset-gt-xs-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-gt-xs-80,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-80,
    [dir="rtl"] .layout-margin .offset-gt-xs-80,
    [dir="rtl"] .offset-gt-xs-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-gt-xs-85,
    .layout-margin .flex-offset-gt-xs-85,
    .layout-margin .offset-gt-xs-85,
    .offset-gt-xs-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-gt-xs-85,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-85,
    [dir="rtl"] .layout-margin .offset-gt-xs-85,
    [dir="rtl"] .offset-gt-xs-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-gt-xs-90,
    .layout-margin .flex-offset-gt-xs-90,
    .layout-margin .offset-gt-xs-90,
    .offset-gt-xs-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-gt-xs-90,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-90,
    [dir="rtl"] .layout-margin .offset-gt-xs-90,
    [dir="rtl"] .offset-gt-xs-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-gt-xs-95,
    .layout-margin .flex-offset-gt-xs-95,
    .layout-margin .offset-gt-xs-95,
    .offset-gt-xs-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-gt-xs-95,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-95,
    [dir="rtl"] .layout-margin .offset-gt-xs-95,
    [dir="rtl"] .offset-gt-xs-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-gt-xs-33,
    .layout-margin .flex-offset-gt-xs-33,
    .layout-margin .offset-gt-xs-33,
    .offset-gt-xs-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-gt-xs-66,
    .layout-margin .flex-offset-gt-xs-66,
    .layout-margin .offset-gt-xs-66,
    .offset-gt-xs-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-gt-xs-66,
    [dir="rtl"] .layout-margin .flex-offset-gt-xs-66,
    [dir="rtl"] .layout-margin .offset-gt-xs-66,
    [dir="rtl"] .offset-gt-xs-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-gt-xs,
    .layout-align-gt-xs-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-gt-xs-start,
    .layout-align-gt-xs-start-center,
    .layout-align-gt-xs-start-end,
    .layout-align-gt-xs-start-start,
    .layout-align-gt-xs-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-gt-xs-center,
    .layout-align-gt-xs-center-center,
    .layout-align-gt-xs-center-end,
    .layout-align-gt-xs-center-start,
    .layout-align-gt-xs-center-stretch {
        justify-content: center;
    }
    .layout-align-gt-xs-end,
    .layout-align-gt-xs-end-center,
    .layout-align-gt-xs-end-end,
    .layout-align-gt-xs-end-start,
    .layout-align-gt-xs-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-gt-xs-space-around,
    .layout-align-gt-xs-space-around-center,
    .layout-align-gt-xs-space-around-end,
    .layout-align-gt-xs-space-around-start,
    .layout-align-gt-xs-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-gt-xs-space-between,
    .layout-align-gt-xs-space-between-center,
    .layout-align-gt-xs-space-between-end,
    .layout-align-gt-xs-space-between-start,
    .layout-align-gt-xs-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-gt-xs-center-start,
    .layout-align-gt-xs-end-start,
    .layout-align-gt-xs-space-around-start,
    .layout-align-gt-xs-space-between-start,
    .layout-align-gt-xs-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-gt-xs-center-center,
    .layout-align-gt-xs-end-center,
    .layout-align-gt-xs-space-around-center,
    .layout-align-gt-xs-space-between-center,
    .layout-align-gt-xs-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-gt-xs-center-center > *,
    .layout-align-gt-xs-end-center > *,
    .layout-align-gt-xs-space-around-center > *,
    .layout-align-gt-xs-space-between-center > *,
    .layout-align-gt-xs-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-gt-xs-center-end,
    .layout-align-gt-xs-end-end,
    .layout-align-gt-xs-space-around-end,
    .layout-align-gt-xs-space-between-end,
    .layout-align-gt-xs-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-gt-xs-center-stretch,
    .layout-align-gt-xs-end-stretch,
    .layout-align-gt-xs-space-around-stretch,
    .layout-align-gt-xs-space-between-stretch,
    .layout-align-gt-xs-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-gt-xs {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-gt-xs-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-gt-xs-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-xs-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-xs-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-xs-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-xs-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-xs-0,
    .layout-row > .flex-gt-xs-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-xs-0 {
        min-width: 0;
    }
    .layout-column > .flex-gt-xs-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-gt-xs-column > .flex-gt-xs-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-gt-xs-5,
    .layout-row > .flex-gt-xs-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-gt-xs-10,
    .layout-row > .flex-gt-xs-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-gt-xs-15,
    .layout-row > .flex-gt-xs-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-gt-xs-20,
    .layout-row > .flex-gt-xs-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-gt-xs-25,
    .layout-row > .flex-gt-xs-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-gt-xs-30,
    .layout-row > .flex-gt-xs-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-gt-xs-35,
    .layout-row > .flex-gt-xs-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-gt-xs-40,
    .layout-row > .flex-gt-xs-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-gt-xs-45,
    .layout-row > .flex-gt-xs-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-gt-xs-50,
    .layout-row > .flex-gt-xs-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-gt-xs-55,
    .layout-row > .flex-gt-xs-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-gt-xs-60,
    .layout-row > .flex-gt-xs-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-gt-xs-65,
    .layout-row > .flex-gt-xs-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-gt-xs-70,
    .layout-row > .flex-gt-xs-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-gt-xs-75,
    .layout-row > .flex-gt-xs-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-gt-xs-80,
    .layout-row > .flex-gt-xs-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-gt-xs-85,
    .layout-row > .flex-gt-xs-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-gt-xs-90,
    .layout-row > .flex-gt-xs-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-gt-xs-95,
    .layout-row > .flex-gt-xs-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .flex-gt-xs-100,
    .layout-column > .flex-gt-xs-100,
    .layout-gt-xs-column > .flex-gt-xs-100,
    .layout-gt-xs-row > .flex-gt-xs-100,
    .layout-row > .flex-gt-xs-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-xs-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-xs-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-xs-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex-gt-xs-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-xs-row > .flex {
        min-width: 0;
    }
    .layout-gt-xs-column > .flex-gt-xs-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex-gt-xs-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-xs-column > .flex {
        min-height: 0;
    }
    .layout-gt-xs,
    .layout-gt-xs-column,
    .layout-gt-xs-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-gt-xs-column {
        flex-direction: column;
    }
    .layout-gt-xs-row {
        flex-direction: row;
    }
}
@media (min-width: 600px) and (max-width: 959px) {
    .hide-gt-xs:not(.show-gt-xs):not(.show-sm):not(.show),
    .hide-sm:not(.show-gt-xs):not(.show-sm):not(.show),
    .hide:not(.show-gt-xs):not(.show-sm):not(.show) {
        display: none;
    }
    .flex-order-sm--20 {
        order: -20;
    }
    .flex-order-sm--19 {
        order: -19;
    }
    .flex-order-sm--18 {
        order: -18;
    }
    .flex-order-sm--17 {
        order: -17;
    }
    .flex-order-sm--16 {
        order: -16;
    }
    .flex-order-sm--15 {
        order: -15;
    }
    .flex-order-sm--14 {
        order: -14;
    }
    .flex-order-sm--13 {
        order: -13;
    }
    .flex-order-sm--12 {
        order: -12;
    }
    .flex-order-sm--11 {
        order: -11;
    }
    .flex-order-sm--10 {
        order: -10;
    }
    .flex-order-sm--9 {
        order: -9;
    }
    .flex-order-sm--8 {
        order: -8;
    }
    .flex-order-sm--7 {
        order: -7;
    }
    .flex-order-sm--6 {
        order: -6;
    }
    .flex-order-sm--5 {
        order: -5;
    }
    .flex-order-sm--4 {
        order: -4;
    }
    .flex-order-sm--3 {
        order: -3;
    }
    .flex-order-sm--2 {
        order: -2;
    }
    .flex-order-sm--1 {
        order: -1;
    }
    .flex-order-sm-0 {
        order: 0;
    }
    .flex-order-sm-1 {
        order: 1;
    }
    .flex-order-sm-2 {
        order: 2;
    }
    .flex-order-sm-3 {
        order: 3;
    }
    .flex-order-sm-4 {
        order: 4;
    }
    .flex-order-sm-5 {
        order: 5;
    }
    .flex-order-sm-6 {
        order: 6;
    }
    .flex-order-sm-7 {
        order: 7;
    }
    .flex-order-sm-8 {
        order: 8;
    }
    .flex-order-sm-9 {
        order: 9;
    }
    .flex-order-sm-10 {
        order: 10;
    }
    .flex-order-sm-11 {
        order: 11;
    }
    .flex-order-sm-12 {
        order: 12;
    }
    .flex-order-sm-13 {
        order: 13;
    }
    .flex-order-sm-14 {
        order: 14;
    }
    .flex-order-sm-15 {
        order: 15;
    }
    .flex-order-sm-16 {
        order: 16;
    }
    .flex-order-sm-17 {
        order: 17;
    }
    .flex-order-sm-18 {
        order: 18;
    }
    .flex-order-sm-19 {
        order: 19;
    }
    .flex-order-sm-20 {
        order: 20;
    }
    .flex-offset-sm-0,
    .layout-margin .flex-offset-sm-0,
    .layout-margin .offset-sm-0,
    .offset-sm-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-sm-0,
    [dir="rtl"] .layout-margin .flex-offset-sm-0,
    [dir="rtl"] .layout-margin .offset-sm-0,
    [dir="rtl"] .offset-sm-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-sm-5,
    .layout-margin .flex-offset-sm-5,
    .layout-margin .offset-sm-5,
    .offset-sm-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-sm-5,
    [dir="rtl"] .layout-margin .flex-offset-sm-5,
    [dir="rtl"] .layout-margin .offset-sm-5,
    [dir="rtl"] .offset-sm-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-sm-10,
    .layout-margin .flex-offset-sm-10,
    .layout-margin .offset-sm-10,
    .offset-sm-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-sm-10,
    [dir="rtl"] .layout-margin .flex-offset-sm-10,
    [dir="rtl"] .layout-margin .offset-sm-10,
    [dir="rtl"] .offset-sm-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-sm-15,
    .layout-margin .flex-offset-sm-15,
    .layout-margin .offset-sm-15,
    .offset-sm-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-sm-15,
    [dir="rtl"] .layout-margin .flex-offset-sm-15,
    [dir="rtl"] .layout-margin .offset-sm-15,
    [dir="rtl"] .offset-sm-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-sm-20,
    .layout-margin .flex-offset-sm-20,
    .layout-margin .offset-sm-20,
    .offset-sm-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-sm-20,
    [dir="rtl"] .layout-margin .flex-offset-sm-20,
    [dir="rtl"] .layout-margin .offset-sm-20,
    [dir="rtl"] .offset-sm-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-sm-25,
    .layout-margin .flex-offset-sm-25,
    .layout-margin .offset-sm-25,
    .offset-sm-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-sm-25,
    [dir="rtl"] .layout-margin .flex-offset-sm-25,
    [dir="rtl"] .layout-margin .offset-sm-25,
    [dir="rtl"] .offset-sm-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-sm-30,
    .layout-margin .flex-offset-sm-30,
    .layout-margin .offset-sm-30,
    .offset-sm-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-sm-30,
    [dir="rtl"] .layout-margin .flex-offset-sm-30,
    [dir="rtl"] .layout-margin .offset-sm-30,
    [dir="rtl"] .offset-sm-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-sm-35,
    .layout-margin .flex-offset-sm-35,
    .layout-margin .offset-sm-35,
    .offset-sm-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-sm-35,
    [dir="rtl"] .layout-margin .flex-offset-sm-35,
    [dir="rtl"] .layout-margin .offset-sm-35,
    [dir="rtl"] .offset-sm-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-sm-40,
    .layout-margin .flex-offset-sm-40,
    .layout-margin .offset-sm-40,
    .offset-sm-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-sm-40,
    [dir="rtl"] .layout-margin .flex-offset-sm-40,
    [dir="rtl"] .layout-margin .offset-sm-40,
    [dir="rtl"] .offset-sm-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-sm-45,
    .layout-margin .flex-offset-sm-45,
    .layout-margin .offset-sm-45,
    .offset-sm-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-sm-45,
    [dir="rtl"] .layout-margin .flex-offset-sm-45,
    [dir="rtl"] .layout-margin .offset-sm-45,
    [dir="rtl"] .offset-sm-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-sm-50,
    .layout-margin .flex-offset-sm-50,
    .layout-margin .offset-sm-50,
    .offset-sm-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-sm-50,
    [dir="rtl"] .layout-margin .flex-offset-sm-50,
    [dir="rtl"] .layout-margin .offset-sm-50,
    [dir="rtl"] .offset-sm-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-sm-55,
    .layout-margin .flex-offset-sm-55,
    .layout-margin .offset-sm-55,
    .offset-sm-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-sm-55,
    [dir="rtl"] .layout-margin .flex-offset-sm-55,
    [dir="rtl"] .layout-margin .offset-sm-55,
    [dir="rtl"] .offset-sm-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-sm-60,
    .layout-margin .flex-offset-sm-60,
    .layout-margin .offset-sm-60,
    .offset-sm-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-sm-60,
    [dir="rtl"] .layout-margin .flex-offset-sm-60,
    [dir="rtl"] .layout-margin .offset-sm-60,
    [dir="rtl"] .offset-sm-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-sm-65,
    .layout-margin .flex-offset-sm-65,
    .layout-margin .offset-sm-65,
    .offset-sm-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-sm-65,
    [dir="rtl"] .layout-margin .flex-offset-sm-65,
    [dir="rtl"] .layout-margin .offset-sm-65,
    [dir="rtl"] .offset-sm-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-sm-70,
    .layout-margin .flex-offset-sm-70,
    .layout-margin .offset-sm-70,
    .offset-sm-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-sm-70,
    [dir="rtl"] .layout-margin .flex-offset-sm-70,
    [dir="rtl"] .layout-margin .offset-sm-70,
    [dir="rtl"] .offset-sm-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-sm-75,
    .layout-margin .flex-offset-sm-75,
    .layout-margin .offset-sm-75,
    .offset-sm-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-sm-75,
    [dir="rtl"] .layout-margin .flex-offset-sm-75,
    [dir="rtl"] .layout-margin .offset-sm-75,
    [dir="rtl"] .offset-sm-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-sm-80,
    .layout-margin .flex-offset-sm-80,
    .layout-margin .offset-sm-80,
    .offset-sm-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-sm-80,
    [dir="rtl"] .layout-margin .flex-offset-sm-80,
    [dir="rtl"] .layout-margin .offset-sm-80,
    [dir="rtl"] .offset-sm-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-sm-85,
    .layout-margin .flex-offset-sm-85,
    .layout-margin .offset-sm-85,
    .offset-sm-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-sm-85,
    [dir="rtl"] .layout-margin .flex-offset-sm-85,
    [dir="rtl"] .layout-margin .offset-sm-85,
    [dir="rtl"] .offset-sm-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-sm-90,
    .layout-margin .flex-offset-sm-90,
    .layout-margin .offset-sm-90,
    .offset-sm-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-sm-90,
    [dir="rtl"] .layout-margin .flex-offset-sm-90,
    [dir="rtl"] .layout-margin .offset-sm-90,
    [dir="rtl"] .offset-sm-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-sm-95,
    .layout-margin .flex-offset-sm-95,
    .layout-margin .offset-sm-95,
    .offset-sm-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-sm-95,
    [dir="rtl"] .layout-margin .flex-offset-sm-95,
    [dir="rtl"] .layout-margin .offset-sm-95,
    [dir="rtl"] .offset-sm-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-sm-33,
    .layout-margin .flex-offset-sm-33,
    .layout-margin .offset-sm-33,
    .offset-sm-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-sm-66,
    .layout-margin .flex-offset-sm-66,
    .layout-margin .offset-sm-66,
    .offset-sm-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-sm-66,
    [dir="rtl"] .layout-margin .flex-offset-sm-66,
    [dir="rtl"] .layout-margin .offset-sm-66,
    [dir="rtl"] .offset-sm-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-sm,
    .layout-align-sm-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-sm-start,
    .layout-align-sm-start-center,
    .layout-align-sm-start-end,
    .layout-align-sm-start-start,
    .layout-align-sm-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-sm-center,
    .layout-align-sm-center-center,
    .layout-align-sm-center-end,
    .layout-align-sm-center-start,
    .layout-align-sm-center-stretch {
        justify-content: center;
    }
    .layout-align-sm-end,
    .layout-align-sm-end-center,
    .layout-align-sm-end-end,
    .layout-align-sm-end-start,
    .layout-align-sm-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-sm-space-around,
    .layout-align-sm-space-around-center,
    .layout-align-sm-space-around-end,
    .layout-align-sm-space-around-start,
    .layout-align-sm-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-sm-space-between,
    .layout-align-sm-space-between-center,
    .layout-align-sm-space-between-end,
    .layout-align-sm-space-between-start,
    .layout-align-sm-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-sm-center-start,
    .layout-align-sm-end-start,
    .layout-align-sm-space-around-start,
    .layout-align-sm-space-between-start,
    .layout-align-sm-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-sm-center-center,
    .layout-align-sm-end-center,
    .layout-align-sm-space-around-center,
    .layout-align-sm-space-between-center,
    .layout-align-sm-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-sm-center-center > *,
    .layout-align-sm-end-center > *,
    .layout-align-sm-space-around-center > *,
    .layout-align-sm-space-between-center > *,
    .layout-align-sm-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-sm-center-end,
    .layout-align-sm-end-end,
    .layout-align-sm-space-around-end,
    .layout-align-sm-space-between-end,
    .layout-align-sm-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-sm-center-stretch,
    .layout-align-sm-end-stretch,
    .layout-align-sm-space-around-stretch,
    .layout-align-sm-space-between-stretch,
    .layout-align-sm-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-sm {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-sm-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-sm-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-sm-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-sm-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-sm-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-sm-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-sm-0,
    .layout-row > .flex-sm-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-sm-0 {
        min-width: 0;
    }
    .layout-column > .flex-sm-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-sm-column > .flex-sm-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-sm-5,
    .layout-row > .flex-sm-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-sm-10,
    .layout-row > .flex-sm-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-sm-15,
    .layout-row > .flex-sm-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-sm-20,
    .layout-row > .flex-sm-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-sm-25,
    .layout-row > .flex-sm-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-sm-30,
    .layout-row > .flex-sm-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-sm-35,
    .layout-row > .flex-sm-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-sm-40,
    .layout-row > .flex-sm-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-sm-45,
    .layout-row > .flex-sm-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-sm-50,
    .layout-row > .flex-sm-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-sm-55,
    .layout-row > .flex-sm-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-sm-60,
    .layout-row > .flex-sm-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-sm-65,
    .layout-row > .flex-sm-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-sm-70,
    .layout-row > .flex-sm-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-sm-75,
    .layout-row > .flex-sm-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-sm-80,
    .layout-row > .flex-sm-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-sm-85,
    .layout-row > .flex-sm-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-sm-90,
    .layout-row > .flex-sm-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-sm-95,
    .layout-row > .flex-sm-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-95 {
        max-height: 95%;
    }
    .flex-sm-100,
    .layout-sm-column > .flex-sm-95 {
        flex: 1 1 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .flex-sm-100 {
        max-height: 100%;
    }
    .layout-column > .flex-sm-100,
    .layout-row > .flex-sm-100,
    .layout-sm-column > .flex-sm-100,
    .layout-sm-row > .flex-sm-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-sm-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-sm-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-sm-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex-sm-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-sm-row > .flex {
        min-width: 0;
    }
    .layout-sm-column > .flex-sm-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex-sm-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-sm-column > .flex {
        min-height: 0;
    }
    .layout-sm,
    .layout-sm-column,
    .layout-sm-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-sm-column {
        flex-direction: column;
    }
    .layout-sm-row {
        flex-direction: row;
    }
}
@media (min-width: 960px) {
    .flex-order-gt-sm--20 {
        order: -20;
    }
    .flex-order-gt-sm--19 {
        order: -19;
    }
    .flex-order-gt-sm--18 {
        order: -18;
    }
    .flex-order-gt-sm--17 {
        order: -17;
    }
    .flex-order-gt-sm--16 {
        order: -16;
    }
    .flex-order-gt-sm--15 {
        order: -15;
    }
    .flex-order-gt-sm--14 {
        order: -14;
    }
    .flex-order-gt-sm--13 {
        order: -13;
    }
    .flex-order-gt-sm--12 {
        order: -12;
    }
    .flex-order-gt-sm--11 {
        order: -11;
    }
    .flex-order-gt-sm--10 {
        order: -10;
    }
    .flex-order-gt-sm--9 {
        order: -9;
    }
    .flex-order-gt-sm--8 {
        order: -8;
    }
    .flex-order-gt-sm--7 {
        order: -7;
    }
    .flex-order-gt-sm--6 {
        order: -6;
    }
    .flex-order-gt-sm--5 {
        order: -5;
    }
    .flex-order-gt-sm--4 {
        order: -4;
    }
    .flex-order-gt-sm--3 {
        order: -3;
    }
    .flex-order-gt-sm--2 {
        order: -2;
    }
    .flex-order-gt-sm--1 {
        order: -1;
    }
    .flex-order-gt-sm-0 {
        order: 0;
    }
    .flex-order-gt-sm-1 {
        order: 1;
    }
    .flex-order-gt-sm-2 {
        order: 2;
    }
    .flex-order-gt-sm-3 {
        order: 3;
    }
    .flex-order-gt-sm-4 {
        order: 4;
    }
    .flex-order-gt-sm-5 {
        order: 5;
    }
    .flex-order-gt-sm-6 {
        order: 6;
    }
    .flex-order-gt-sm-7 {
        order: 7;
    }
    .flex-order-gt-sm-8 {
        order: 8;
    }
    .flex-order-gt-sm-9 {
        order: 9;
    }
    .flex-order-gt-sm-10 {
        order: 10;
    }
    .flex-order-gt-sm-11 {
        order: 11;
    }
    .flex-order-gt-sm-12 {
        order: 12;
    }
    .flex-order-gt-sm-13 {
        order: 13;
    }
    .flex-order-gt-sm-14 {
        order: 14;
    }
    .flex-order-gt-sm-15 {
        order: 15;
    }
    .flex-order-gt-sm-16 {
        order: 16;
    }
    .flex-order-gt-sm-17 {
        order: 17;
    }
    .flex-order-gt-sm-18 {
        order: 18;
    }
    .flex-order-gt-sm-19 {
        order: 19;
    }
    .flex-order-gt-sm-20 {
        order: 20;
    }
    .flex-offset-gt-sm-0,
    .layout-margin .flex-offset-gt-sm-0,
    .layout-margin .offset-gt-sm-0,
    .offset-gt-sm-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-gt-sm-0,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-0,
    [dir="rtl"] .layout-margin .offset-gt-sm-0,
    [dir="rtl"] .offset-gt-sm-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-gt-sm-5,
    .layout-margin .flex-offset-gt-sm-5,
    .layout-margin .offset-gt-sm-5,
    .offset-gt-sm-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-gt-sm-5,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-5,
    [dir="rtl"] .layout-margin .offset-gt-sm-5,
    [dir="rtl"] .offset-gt-sm-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-gt-sm-10,
    .layout-margin .flex-offset-gt-sm-10,
    .layout-margin .offset-gt-sm-10,
    .offset-gt-sm-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-gt-sm-10,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-10,
    [dir="rtl"] .layout-margin .offset-gt-sm-10,
    [dir="rtl"] .offset-gt-sm-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-gt-sm-15,
    .layout-margin .flex-offset-gt-sm-15,
    .layout-margin .offset-gt-sm-15,
    .offset-gt-sm-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-gt-sm-15,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-15,
    [dir="rtl"] .layout-margin .offset-gt-sm-15,
    [dir="rtl"] .offset-gt-sm-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-gt-sm-20,
    .layout-margin .flex-offset-gt-sm-20,
    .layout-margin .offset-gt-sm-20,
    .offset-gt-sm-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-gt-sm-20,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-20,
    [dir="rtl"] .layout-margin .offset-gt-sm-20,
    [dir="rtl"] .offset-gt-sm-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-gt-sm-25,
    .layout-margin .flex-offset-gt-sm-25,
    .layout-margin .offset-gt-sm-25,
    .offset-gt-sm-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-gt-sm-25,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-25,
    [dir="rtl"] .layout-margin .offset-gt-sm-25,
    [dir="rtl"] .offset-gt-sm-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-gt-sm-30,
    .layout-margin .flex-offset-gt-sm-30,
    .layout-margin .offset-gt-sm-30,
    .offset-gt-sm-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-gt-sm-30,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-30,
    [dir="rtl"] .layout-margin .offset-gt-sm-30,
    [dir="rtl"] .offset-gt-sm-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-gt-sm-35,
    .layout-margin .flex-offset-gt-sm-35,
    .layout-margin .offset-gt-sm-35,
    .offset-gt-sm-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-gt-sm-35,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-35,
    [dir="rtl"] .layout-margin .offset-gt-sm-35,
    [dir="rtl"] .offset-gt-sm-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-gt-sm-40,
    .layout-margin .flex-offset-gt-sm-40,
    .layout-margin .offset-gt-sm-40,
    .offset-gt-sm-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-gt-sm-40,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-40,
    [dir="rtl"] .layout-margin .offset-gt-sm-40,
    [dir="rtl"] .offset-gt-sm-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-gt-sm-45,
    .layout-margin .flex-offset-gt-sm-45,
    .layout-margin .offset-gt-sm-45,
    .offset-gt-sm-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-gt-sm-45,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-45,
    [dir="rtl"] .layout-margin .offset-gt-sm-45,
    [dir="rtl"] .offset-gt-sm-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-gt-sm-50,
    .layout-margin .flex-offset-gt-sm-50,
    .layout-margin .offset-gt-sm-50,
    .offset-gt-sm-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-gt-sm-50,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-50,
    [dir="rtl"] .layout-margin .offset-gt-sm-50,
    [dir="rtl"] .offset-gt-sm-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-gt-sm-55,
    .layout-margin .flex-offset-gt-sm-55,
    .layout-margin .offset-gt-sm-55,
    .offset-gt-sm-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-gt-sm-55,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-55,
    [dir="rtl"] .layout-margin .offset-gt-sm-55,
    [dir="rtl"] .offset-gt-sm-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-gt-sm-60,
    .layout-margin .flex-offset-gt-sm-60,
    .layout-margin .offset-gt-sm-60,
    .offset-gt-sm-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-gt-sm-60,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-60,
    [dir="rtl"] .layout-margin .offset-gt-sm-60,
    [dir="rtl"] .offset-gt-sm-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-gt-sm-65,
    .layout-margin .flex-offset-gt-sm-65,
    .layout-margin .offset-gt-sm-65,
    .offset-gt-sm-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-gt-sm-65,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-65,
    [dir="rtl"] .layout-margin .offset-gt-sm-65,
    [dir="rtl"] .offset-gt-sm-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-gt-sm-70,
    .layout-margin .flex-offset-gt-sm-70,
    .layout-margin .offset-gt-sm-70,
    .offset-gt-sm-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-gt-sm-70,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-70,
    [dir="rtl"] .layout-margin .offset-gt-sm-70,
    [dir="rtl"] .offset-gt-sm-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-gt-sm-75,
    .layout-margin .flex-offset-gt-sm-75,
    .layout-margin .offset-gt-sm-75,
    .offset-gt-sm-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-gt-sm-75,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-75,
    [dir="rtl"] .layout-margin .offset-gt-sm-75,
    [dir="rtl"] .offset-gt-sm-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-gt-sm-80,
    .layout-margin .flex-offset-gt-sm-80,
    .layout-margin .offset-gt-sm-80,
    .offset-gt-sm-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-gt-sm-80,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-80,
    [dir="rtl"] .layout-margin .offset-gt-sm-80,
    [dir="rtl"] .offset-gt-sm-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-gt-sm-85,
    .layout-margin .flex-offset-gt-sm-85,
    .layout-margin .offset-gt-sm-85,
    .offset-gt-sm-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-gt-sm-85,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-85,
    [dir="rtl"] .layout-margin .offset-gt-sm-85,
    [dir="rtl"] .offset-gt-sm-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-gt-sm-90,
    .layout-margin .flex-offset-gt-sm-90,
    .layout-margin .offset-gt-sm-90,
    .offset-gt-sm-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-gt-sm-90,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-90,
    [dir="rtl"] .layout-margin .offset-gt-sm-90,
    [dir="rtl"] .offset-gt-sm-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-gt-sm-95,
    .layout-margin .flex-offset-gt-sm-95,
    .layout-margin .offset-gt-sm-95,
    .offset-gt-sm-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-gt-sm-95,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-95,
    [dir="rtl"] .layout-margin .offset-gt-sm-95,
    [dir="rtl"] .offset-gt-sm-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-gt-sm-33,
    .layout-margin .flex-offset-gt-sm-33,
    .layout-margin .offset-gt-sm-33,
    .offset-gt-sm-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-gt-sm-66,
    .layout-margin .flex-offset-gt-sm-66,
    .layout-margin .offset-gt-sm-66,
    .offset-gt-sm-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-gt-sm-66,
    [dir="rtl"] .layout-margin .flex-offset-gt-sm-66,
    [dir="rtl"] .layout-margin .offset-gt-sm-66,
    [dir="rtl"] .offset-gt-sm-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-gt-sm,
    .layout-align-gt-sm-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-gt-sm-start,
    .layout-align-gt-sm-start-center,
    .layout-align-gt-sm-start-end,
    .layout-align-gt-sm-start-start,
    .layout-align-gt-sm-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-gt-sm-center,
    .layout-align-gt-sm-center-center,
    .layout-align-gt-sm-center-end,
    .layout-align-gt-sm-center-start,
    .layout-align-gt-sm-center-stretch {
        justify-content: center;
    }
    .layout-align-gt-sm-end,
    .layout-align-gt-sm-end-center,
    .layout-align-gt-sm-end-end,
    .layout-align-gt-sm-end-start,
    .layout-align-gt-sm-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-gt-sm-space-around,
    .layout-align-gt-sm-space-around-center,
    .layout-align-gt-sm-space-around-end,
    .layout-align-gt-sm-space-around-start,
    .layout-align-gt-sm-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-gt-sm-space-between,
    .layout-align-gt-sm-space-between-center,
    .layout-align-gt-sm-space-between-end,
    .layout-align-gt-sm-space-between-start,
    .layout-align-gt-sm-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-gt-sm-center-start,
    .layout-align-gt-sm-end-start,
    .layout-align-gt-sm-space-around-start,
    .layout-align-gt-sm-space-between-start,
    .layout-align-gt-sm-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-gt-sm-center-center,
    .layout-align-gt-sm-end-center,
    .layout-align-gt-sm-space-around-center,
    .layout-align-gt-sm-space-between-center,
    .layout-align-gt-sm-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-gt-sm-center-center > *,
    .layout-align-gt-sm-end-center > *,
    .layout-align-gt-sm-space-around-center > *,
    .layout-align-gt-sm-space-between-center > *,
    .layout-align-gt-sm-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-gt-sm-center-end,
    .layout-align-gt-sm-end-end,
    .layout-align-gt-sm-space-around-end,
    .layout-align-gt-sm-space-between-end,
    .layout-align-gt-sm-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-gt-sm-center-stretch,
    .layout-align-gt-sm-end-stretch,
    .layout-align-gt-sm-space-around-stretch,
    .layout-align-gt-sm-space-between-stretch,
    .layout-align-gt-sm-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-gt-sm {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-gt-sm-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-gt-sm-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-sm-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-sm-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-sm-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-sm-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-sm-0,
    .layout-row > .flex-gt-sm-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-sm-0 {
        min-width: 0;
    }
    .layout-column > .flex-gt-sm-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-gt-sm-column > .flex-gt-sm-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-gt-sm-5,
    .layout-row > .flex-gt-sm-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-gt-sm-10,
    .layout-row > .flex-gt-sm-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-gt-sm-15,
    .layout-row > .flex-gt-sm-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-gt-sm-20,
    .layout-row > .flex-gt-sm-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-gt-sm-25,
    .layout-row > .flex-gt-sm-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-gt-sm-30,
    .layout-row > .flex-gt-sm-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-gt-sm-35,
    .layout-row > .flex-gt-sm-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-gt-sm-40,
    .layout-row > .flex-gt-sm-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-gt-sm-45,
    .layout-row > .flex-gt-sm-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-gt-sm-50,
    .layout-row > .flex-gt-sm-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-gt-sm-55,
    .layout-row > .flex-gt-sm-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-gt-sm-60,
    .layout-row > .flex-gt-sm-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-gt-sm-65,
    .layout-row > .flex-gt-sm-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-gt-sm-70,
    .layout-row > .flex-gt-sm-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-gt-sm-75,
    .layout-row > .flex-gt-sm-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-gt-sm-80,
    .layout-row > .flex-gt-sm-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-gt-sm-85,
    .layout-row > .flex-gt-sm-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-gt-sm-90,
    .layout-row > .flex-gt-sm-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-gt-sm-95,
    .layout-row > .flex-gt-sm-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .flex-gt-sm-100,
    .layout-column > .flex-gt-sm-100,
    .layout-gt-sm-column > .flex-gt-sm-100,
    .layout-gt-sm-row > .flex-gt-sm-100,
    .layout-row > .flex-gt-sm-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-sm-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-sm-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-sm-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex-gt-sm-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-sm-row > .flex {
        min-width: 0;
    }
    .layout-gt-sm-column > .flex-gt-sm-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex-gt-sm-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-sm-column > .flex {
        min-height: 0;
    }
    .layout-gt-sm,
    .layout-gt-sm-column,
    .layout-gt-sm-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-gt-sm-column {
        flex-direction: column;
    }
    .layout-gt-sm-row {
        flex-direction: row;
    }
}
@media (min-width: 960px) and (max-width: 1279px) {
    .hide-gt-sm:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show),
    .hide-gt-xs:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show),
    .hide-md:not(.show-md):not(.show-gt-sm):not(.show-gt-xs):not(.show),
    .hide:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show) {
        display: none;
    }
    .flex-order-md--20 {
        order: -20;
    }
    .flex-order-md--19 {
        order: -19;
    }
    .flex-order-md--18 {
        order: -18;
    }
    .flex-order-md--17 {
        order: -17;
    }
    .flex-order-md--16 {
        order: -16;
    }
    .flex-order-md--15 {
        order: -15;
    }
    .flex-order-md--14 {
        order: -14;
    }
    .flex-order-md--13 {
        order: -13;
    }
    .flex-order-md--12 {
        order: -12;
    }
    .flex-order-md--11 {
        order: -11;
    }
    .flex-order-md--10 {
        order: -10;
    }
    .flex-order-md--9 {
        order: -9;
    }
    .flex-order-md--8 {
        order: -8;
    }
    .flex-order-md--7 {
        order: -7;
    }
    .flex-order-md--6 {
        order: -6;
    }
    .flex-order-md--5 {
        order: -5;
    }
    .flex-order-md--4 {
        order: -4;
    }
    .flex-order-md--3 {
        order: -3;
    }
    .flex-order-md--2 {
        order: -2;
    }
    .flex-order-md--1 {
        order: -1;
    }
    .flex-order-md-0 {
        order: 0;
    }
    .flex-order-md-1 {
        order: 1;
    }
    .flex-order-md-2 {
        order: 2;
    }
    .flex-order-md-3 {
        order: 3;
    }
    .flex-order-md-4 {
        order: 4;
    }
    .flex-order-md-5 {
        order: 5;
    }
    .flex-order-md-6 {
        order: 6;
    }
    .flex-order-md-7 {
        order: 7;
    }
    .flex-order-md-8 {
        order: 8;
    }
    .flex-order-md-9 {
        order: 9;
    }
    .flex-order-md-10 {
        order: 10;
    }
    .flex-order-md-11 {
        order: 11;
    }
    .flex-order-md-12 {
        order: 12;
    }
    .flex-order-md-13 {
        order: 13;
    }
    .flex-order-md-14 {
        order: 14;
    }
    .flex-order-md-15 {
        order: 15;
    }
    .flex-order-md-16 {
        order: 16;
    }
    .flex-order-md-17 {
        order: 17;
    }
    .flex-order-md-18 {
        order: 18;
    }
    .flex-order-md-19 {
        order: 19;
    }
    .flex-order-md-20 {
        order: 20;
    }
    .flex-offset-md-0,
    .layout-margin .flex-offset-md-0,
    .layout-margin .offset-md-0,
    .offset-md-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-md-0,
    [dir="rtl"] .layout-margin .flex-offset-md-0,
    [dir="rtl"] .layout-margin .offset-md-0,
    [dir="rtl"] .offset-md-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-md-5,
    .layout-margin .flex-offset-md-5,
    .layout-margin .offset-md-5,
    .offset-md-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-md-5,
    [dir="rtl"] .layout-margin .flex-offset-md-5,
    [dir="rtl"] .layout-margin .offset-md-5,
    [dir="rtl"] .offset-md-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-md-10,
    .layout-margin .flex-offset-md-10,
    .layout-margin .offset-md-10,
    .offset-md-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-md-10,
    [dir="rtl"] .layout-margin .flex-offset-md-10,
    [dir="rtl"] .layout-margin .offset-md-10,
    [dir="rtl"] .offset-md-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-md-15,
    .layout-margin .flex-offset-md-15,
    .layout-margin .offset-md-15,
    .offset-md-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-md-15,
    [dir="rtl"] .layout-margin .flex-offset-md-15,
    [dir="rtl"] .layout-margin .offset-md-15,
    [dir="rtl"] .offset-md-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-md-20,
    .layout-margin .flex-offset-md-20,
    .layout-margin .offset-md-20,
    .offset-md-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-md-20,
    [dir="rtl"] .layout-margin .flex-offset-md-20,
    [dir="rtl"] .layout-margin .offset-md-20,
    [dir="rtl"] .offset-md-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-md-25,
    .layout-margin .flex-offset-md-25,
    .layout-margin .offset-md-25,
    .offset-md-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-md-25,
    [dir="rtl"] .layout-margin .flex-offset-md-25,
    [dir="rtl"] .layout-margin .offset-md-25,
    [dir="rtl"] .offset-md-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-md-30,
    .layout-margin .flex-offset-md-30,
    .layout-margin .offset-md-30,
    .offset-md-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-md-30,
    [dir="rtl"] .layout-margin .flex-offset-md-30,
    [dir="rtl"] .layout-margin .offset-md-30,
    [dir="rtl"] .offset-md-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-md-35,
    .layout-margin .flex-offset-md-35,
    .layout-margin .offset-md-35,
    .offset-md-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-md-35,
    [dir="rtl"] .layout-margin .flex-offset-md-35,
    [dir="rtl"] .layout-margin .offset-md-35,
    [dir="rtl"] .offset-md-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-md-40,
    .layout-margin .flex-offset-md-40,
    .layout-margin .offset-md-40,
    .offset-md-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-md-40,
    [dir="rtl"] .layout-margin .flex-offset-md-40,
    [dir="rtl"] .layout-margin .offset-md-40,
    [dir="rtl"] .offset-md-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-md-45,
    .layout-margin .flex-offset-md-45,
    .layout-margin .offset-md-45,
    .offset-md-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-md-45,
    [dir="rtl"] .layout-margin .flex-offset-md-45,
    [dir="rtl"] .layout-margin .offset-md-45,
    [dir="rtl"] .offset-md-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-md-50,
    .layout-margin .flex-offset-md-50,
    .layout-margin .offset-md-50,
    .offset-md-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-md-50,
    [dir="rtl"] .layout-margin .flex-offset-md-50,
    [dir="rtl"] .layout-margin .offset-md-50,
    [dir="rtl"] .offset-md-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-md-55,
    .layout-margin .flex-offset-md-55,
    .layout-margin .offset-md-55,
    .offset-md-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-md-55,
    [dir="rtl"] .layout-margin .flex-offset-md-55,
    [dir="rtl"] .layout-margin .offset-md-55,
    [dir="rtl"] .offset-md-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-md-60,
    .layout-margin .flex-offset-md-60,
    .layout-margin .offset-md-60,
    .offset-md-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-md-60,
    [dir="rtl"] .layout-margin .flex-offset-md-60,
    [dir="rtl"] .layout-margin .offset-md-60,
    [dir="rtl"] .offset-md-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-md-65,
    .layout-margin .flex-offset-md-65,
    .layout-margin .offset-md-65,
    .offset-md-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-md-65,
    [dir="rtl"] .layout-margin .flex-offset-md-65,
    [dir="rtl"] .layout-margin .offset-md-65,
    [dir="rtl"] .offset-md-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-md-70,
    .layout-margin .flex-offset-md-70,
    .layout-margin .offset-md-70,
    .offset-md-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-md-70,
    [dir="rtl"] .layout-margin .flex-offset-md-70,
    [dir="rtl"] .layout-margin .offset-md-70,
    [dir="rtl"] .offset-md-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-md-75,
    .layout-margin .flex-offset-md-75,
    .layout-margin .offset-md-75,
    .offset-md-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-md-75,
    [dir="rtl"] .layout-margin .flex-offset-md-75,
    [dir="rtl"] .layout-margin .offset-md-75,
    [dir="rtl"] .offset-md-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-md-80,
    .layout-margin .flex-offset-md-80,
    .layout-margin .offset-md-80,
    .offset-md-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-md-80,
    [dir="rtl"] .layout-margin .flex-offset-md-80,
    [dir="rtl"] .layout-margin .offset-md-80,
    [dir="rtl"] .offset-md-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-md-85,
    .layout-margin .flex-offset-md-85,
    .layout-margin .offset-md-85,
    .offset-md-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-md-85,
    [dir="rtl"] .layout-margin .flex-offset-md-85,
    [dir="rtl"] .layout-margin .offset-md-85,
    [dir="rtl"] .offset-md-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-md-90,
    .layout-margin .flex-offset-md-90,
    .layout-margin .offset-md-90,
    .offset-md-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-md-90,
    [dir="rtl"] .layout-margin .flex-offset-md-90,
    [dir="rtl"] .layout-margin .offset-md-90,
    [dir="rtl"] .offset-md-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-md-95,
    .layout-margin .flex-offset-md-95,
    .layout-margin .offset-md-95,
    .offset-md-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-md-95,
    [dir="rtl"] .layout-margin .flex-offset-md-95,
    [dir="rtl"] .layout-margin .offset-md-95,
    [dir="rtl"] .offset-md-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-md-33,
    .layout-margin .flex-offset-md-33,
    .layout-margin .offset-md-33,
    .offset-md-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-md-66,
    .layout-margin .flex-offset-md-66,
    .layout-margin .offset-md-66,
    .offset-md-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-md-66,
    [dir="rtl"] .layout-margin .flex-offset-md-66,
    [dir="rtl"] .layout-margin .offset-md-66,
    [dir="rtl"] .offset-md-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-md,
    .layout-align-md-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-md-start,
    .layout-align-md-start-center,
    .layout-align-md-start-end,
    .layout-align-md-start-start,
    .layout-align-md-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-md-center,
    .layout-align-md-center-center,
    .layout-align-md-center-end,
    .layout-align-md-center-start,
    .layout-align-md-center-stretch {
        justify-content: center;
    }
    .layout-align-md-end,
    .layout-align-md-end-center,
    .layout-align-md-end-end,
    .layout-align-md-end-start,
    .layout-align-md-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-md-space-around,
    .layout-align-md-space-around-center,
    .layout-align-md-space-around-end,
    .layout-align-md-space-around-start,
    .layout-align-md-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-md-space-between,
    .layout-align-md-space-between-center,
    .layout-align-md-space-between-end,
    .layout-align-md-space-between-start,
    .layout-align-md-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-md-center-start,
    .layout-align-md-end-start,
    .layout-align-md-space-around-start,
    .layout-align-md-space-between-start,
    .layout-align-md-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-md-center-center,
    .layout-align-md-end-center,
    .layout-align-md-space-around-center,
    .layout-align-md-space-between-center,
    .layout-align-md-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-md-center-center > *,
    .layout-align-md-end-center > *,
    .layout-align-md-space-around-center > *,
    .layout-align-md-space-between-center > *,
    .layout-align-md-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-md-center-end,
    .layout-align-md-end-end,
    .layout-align-md-space-around-end,
    .layout-align-md-space-between-end,
    .layout-align-md-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-md-center-stretch,
    .layout-align-md-end-stretch,
    .layout-align-md-space-around-stretch,
    .layout-align-md-space-between-stretch,
    .layout-align-md-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-md {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-md-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-md-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-md-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-md-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-md-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-md-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-md-0,
    .layout-row > .flex-md-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-md-0 {
        min-width: 0;
    }
    .layout-column > .flex-md-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-md-column > .flex-md-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-md-5,
    .layout-row > .flex-md-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-md-10,
    .layout-row > .flex-md-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-md-15,
    .layout-row > .flex-md-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-md-20,
    .layout-row > .flex-md-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-md-25,
    .layout-row > .flex-md-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-md-30,
    .layout-row > .flex-md-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-md-35,
    .layout-row > .flex-md-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-md-40,
    .layout-row > .flex-md-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-md-45,
    .layout-row > .flex-md-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-md-50,
    .layout-row > .flex-md-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-md-55,
    .layout-row > .flex-md-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-md-60,
    .layout-row > .flex-md-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-md-65,
    .layout-row > .flex-md-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-md-70,
    .layout-row > .flex-md-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-md-75,
    .layout-row > .flex-md-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-md-80,
    .layout-row > .flex-md-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-md-85,
    .layout-row > .flex-md-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-md-90,
    .layout-row > .flex-md-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-md-95,
    .layout-row > .flex-md-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-95 {
        max-height: 95%;
    }
    .flex-md-100,
    .layout-md-column > .flex-md-95 {
        flex: 1 1 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .flex-md-100 {
        max-height: 100%;
    }
    .layout-column > .flex-md-100,
    .layout-md-column > .flex-md-100,
    .layout-md-row > .flex-md-100,
    .layout-row > .flex-md-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-md-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-md-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-md-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex-md-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-md-row > .flex {
        min-width: 0;
    }
    .layout-md-column > .flex-md-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex-md-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-md-column > .flex {
        min-height: 0;
    }
    .layout-md,
    .layout-md-column,
    .layout-md-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-md-column {
        flex-direction: column;
    }
    .layout-md-row {
        flex-direction: row;
    }
}
@media (min-width: 1280px) {
    .flex-order-gt-md--20 {
        order: -20;
    }
    .flex-order-gt-md--19 {
        order: -19;
    }
    .flex-order-gt-md--18 {
        order: -18;
    }
    .flex-order-gt-md--17 {
        order: -17;
    }
    .flex-order-gt-md--16 {
        order: -16;
    }
    .flex-order-gt-md--15 {
        order: -15;
    }
    .flex-order-gt-md--14 {
        order: -14;
    }
    .flex-order-gt-md--13 {
        order: -13;
    }
    .flex-order-gt-md--12 {
        order: -12;
    }
    .flex-order-gt-md--11 {
        order: -11;
    }
    .flex-order-gt-md--10 {
        order: -10;
    }
    .flex-order-gt-md--9 {
        order: -9;
    }
    .flex-order-gt-md--8 {
        order: -8;
    }
    .flex-order-gt-md--7 {
        order: -7;
    }
    .flex-order-gt-md--6 {
        order: -6;
    }
    .flex-order-gt-md--5 {
        order: -5;
    }
    .flex-order-gt-md--4 {
        order: -4;
    }
    .flex-order-gt-md--3 {
        order: -3;
    }
    .flex-order-gt-md--2 {
        order: -2;
    }
    .flex-order-gt-md--1 {
        order: -1;
    }
    .flex-order-gt-md-0 {
        order: 0;
    }
    .flex-order-gt-md-1 {
        order: 1;
    }
    .flex-order-gt-md-2 {
        order: 2;
    }
    .flex-order-gt-md-3 {
        order: 3;
    }
    .flex-order-gt-md-4 {
        order: 4;
    }
    .flex-order-gt-md-5 {
        order: 5;
    }
    .flex-order-gt-md-6 {
        order: 6;
    }
    .flex-order-gt-md-7 {
        order: 7;
    }
    .flex-order-gt-md-8 {
        order: 8;
    }
    .flex-order-gt-md-9 {
        order: 9;
    }
    .flex-order-gt-md-10 {
        order: 10;
    }
    .flex-order-gt-md-11 {
        order: 11;
    }
    .flex-order-gt-md-12 {
        order: 12;
    }
    .flex-order-gt-md-13 {
        order: 13;
    }
    .flex-order-gt-md-14 {
        order: 14;
    }
    .flex-order-gt-md-15 {
        order: 15;
    }
    .flex-order-gt-md-16 {
        order: 16;
    }
    .flex-order-gt-md-17 {
        order: 17;
    }
    .flex-order-gt-md-18 {
        order: 18;
    }
    .flex-order-gt-md-19 {
        order: 19;
    }
    .flex-order-gt-md-20 {
        order: 20;
    }
    .flex-offset-gt-md-0,
    .layout-margin .flex-offset-gt-md-0,
    .layout-margin .offset-gt-md-0,
    .offset-gt-md-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-gt-md-0,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-0,
    [dir="rtl"] .layout-margin .offset-gt-md-0,
    [dir="rtl"] .offset-gt-md-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-gt-md-5,
    .layout-margin .flex-offset-gt-md-5,
    .layout-margin .offset-gt-md-5,
    .offset-gt-md-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-gt-md-5,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-5,
    [dir="rtl"] .layout-margin .offset-gt-md-5,
    [dir="rtl"] .offset-gt-md-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-gt-md-10,
    .layout-margin .flex-offset-gt-md-10,
    .layout-margin .offset-gt-md-10,
    .offset-gt-md-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-gt-md-10,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-10,
    [dir="rtl"] .layout-margin .offset-gt-md-10,
    [dir="rtl"] .offset-gt-md-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-gt-md-15,
    .layout-margin .flex-offset-gt-md-15,
    .layout-margin .offset-gt-md-15,
    .offset-gt-md-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-gt-md-15,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-15,
    [dir="rtl"] .layout-margin .offset-gt-md-15,
    [dir="rtl"] .offset-gt-md-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-gt-md-20,
    .layout-margin .flex-offset-gt-md-20,
    .layout-margin .offset-gt-md-20,
    .offset-gt-md-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-gt-md-20,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-20,
    [dir="rtl"] .layout-margin .offset-gt-md-20,
    [dir="rtl"] .offset-gt-md-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-gt-md-25,
    .layout-margin .flex-offset-gt-md-25,
    .layout-margin .offset-gt-md-25,
    .offset-gt-md-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-gt-md-25,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-25,
    [dir="rtl"] .layout-margin .offset-gt-md-25,
    [dir="rtl"] .offset-gt-md-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-gt-md-30,
    .layout-margin .flex-offset-gt-md-30,
    .layout-margin .offset-gt-md-30,
    .offset-gt-md-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-gt-md-30,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-30,
    [dir="rtl"] .layout-margin .offset-gt-md-30,
    [dir="rtl"] .offset-gt-md-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-gt-md-35,
    .layout-margin .flex-offset-gt-md-35,
    .layout-margin .offset-gt-md-35,
    .offset-gt-md-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-gt-md-35,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-35,
    [dir="rtl"] .layout-margin .offset-gt-md-35,
    [dir="rtl"] .offset-gt-md-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-gt-md-40,
    .layout-margin .flex-offset-gt-md-40,
    .layout-margin .offset-gt-md-40,
    .offset-gt-md-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-gt-md-40,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-40,
    [dir="rtl"] .layout-margin .offset-gt-md-40,
    [dir="rtl"] .offset-gt-md-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-gt-md-45,
    .layout-margin .flex-offset-gt-md-45,
    .layout-margin .offset-gt-md-45,
    .offset-gt-md-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-gt-md-45,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-45,
    [dir="rtl"] .layout-margin .offset-gt-md-45,
    [dir="rtl"] .offset-gt-md-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-gt-md-50,
    .layout-margin .flex-offset-gt-md-50,
    .layout-margin .offset-gt-md-50,
    .offset-gt-md-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-gt-md-50,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-50,
    [dir="rtl"] .layout-margin .offset-gt-md-50,
    [dir="rtl"] .offset-gt-md-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-gt-md-55,
    .layout-margin .flex-offset-gt-md-55,
    .layout-margin .offset-gt-md-55,
    .offset-gt-md-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-gt-md-55,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-55,
    [dir="rtl"] .layout-margin .offset-gt-md-55,
    [dir="rtl"] .offset-gt-md-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-gt-md-60,
    .layout-margin .flex-offset-gt-md-60,
    .layout-margin .offset-gt-md-60,
    .offset-gt-md-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-gt-md-60,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-60,
    [dir="rtl"] .layout-margin .offset-gt-md-60,
    [dir="rtl"] .offset-gt-md-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-gt-md-65,
    .layout-margin .flex-offset-gt-md-65,
    .layout-margin .offset-gt-md-65,
    .offset-gt-md-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-gt-md-65,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-65,
    [dir="rtl"] .layout-margin .offset-gt-md-65,
    [dir="rtl"] .offset-gt-md-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-gt-md-70,
    .layout-margin .flex-offset-gt-md-70,
    .layout-margin .offset-gt-md-70,
    .offset-gt-md-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-gt-md-70,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-70,
    [dir="rtl"] .layout-margin .offset-gt-md-70,
    [dir="rtl"] .offset-gt-md-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-gt-md-75,
    .layout-margin .flex-offset-gt-md-75,
    .layout-margin .offset-gt-md-75,
    .offset-gt-md-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-gt-md-75,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-75,
    [dir="rtl"] .layout-margin .offset-gt-md-75,
    [dir="rtl"] .offset-gt-md-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-gt-md-80,
    .layout-margin .flex-offset-gt-md-80,
    .layout-margin .offset-gt-md-80,
    .offset-gt-md-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-gt-md-80,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-80,
    [dir="rtl"] .layout-margin .offset-gt-md-80,
    [dir="rtl"] .offset-gt-md-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-gt-md-85,
    .layout-margin .flex-offset-gt-md-85,
    .layout-margin .offset-gt-md-85,
    .offset-gt-md-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-gt-md-85,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-85,
    [dir="rtl"] .layout-margin .offset-gt-md-85,
    [dir="rtl"] .offset-gt-md-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-gt-md-90,
    .layout-margin .flex-offset-gt-md-90,
    .layout-margin .offset-gt-md-90,
    .offset-gt-md-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-gt-md-90,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-90,
    [dir="rtl"] .layout-margin .offset-gt-md-90,
    [dir="rtl"] .offset-gt-md-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-gt-md-95,
    .layout-margin .flex-offset-gt-md-95,
    .layout-margin .offset-gt-md-95,
    .offset-gt-md-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-gt-md-95,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-95,
    [dir="rtl"] .layout-margin .offset-gt-md-95,
    [dir="rtl"] .offset-gt-md-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-gt-md-33,
    .layout-margin .flex-offset-gt-md-33,
    .layout-margin .offset-gt-md-33,
    .offset-gt-md-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-gt-md-66,
    .layout-margin .flex-offset-gt-md-66,
    .layout-margin .offset-gt-md-66,
    .offset-gt-md-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-gt-md-66,
    [dir="rtl"] .layout-margin .flex-offset-gt-md-66,
    [dir="rtl"] .layout-margin .offset-gt-md-66,
    [dir="rtl"] .offset-gt-md-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-gt-md,
    .layout-align-gt-md-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-gt-md-start,
    .layout-align-gt-md-start-center,
    .layout-align-gt-md-start-end,
    .layout-align-gt-md-start-start,
    .layout-align-gt-md-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-gt-md-center,
    .layout-align-gt-md-center-center,
    .layout-align-gt-md-center-end,
    .layout-align-gt-md-center-start,
    .layout-align-gt-md-center-stretch {
        justify-content: center;
    }
    .layout-align-gt-md-end,
    .layout-align-gt-md-end-center,
    .layout-align-gt-md-end-end,
    .layout-align-gt-md-end-start,
    .layout-align-gt-md-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-gt-md-space-around,
    .layout-align-gt-md-space-around-center,
    .layout-align-gt-md-space-around-end,
    .layout-align-gt-md-space-around-start,
    .layout-align-gt-md-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-gt-md-space-between,
    .layout-align-gt-md-space-between-center,
    .layout-align-gt-md-space-between-end,
    .layout-align-gt-md-space-between-start,
    .layout-align-gt-md-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-gt-md-center-start,
    .layout-align-gt-md-end-start,
    .layout-align-gt-md-space-around-start,
    .layout-align-gt-md-space-between-start,
    .layout-align-gt-md-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-gt-md-center-center,
    .layout-align-gt-md-end-center,
    .layout-align-gt-md-space-around-center,
    .layout-align-gt-md-space-between-center,
    .layout-align-gt-md-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-gt-md-center-center > *,
    .layout-align-gt-md-end-center > *,
    .layout-align-gt-md-space-around-center > *,
    .layout-align-gt-md-space-between-center > *,
    .layout-align-gt-md-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-gt-md-center-end,
    .layout-align-gt-md-end-end,
    .layout-align-gt-md-space-around-end,
    .layout-align-gt-md-space-between-end,
    .layout-align-gt-md-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-gt-md-center-stretch,
    .layout-align-gt-md-end-stretch,
    .layout-align-gt-md-space-around-stretch,
    .layout-align-gt-md-space-between-stretch,
    .layout-align-gt-md-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-gt-md {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-gt-md-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-gt-md-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-md-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-md-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-md-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-md-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-md-0,
    .layout-row > .flex-gt-md-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-md-0 {
        min-width: 0;
    }
    .layout-column > .flex-gt-md-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-gt-md-column > .flex-gt-md-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-gt-md-5,
    .layout-row > .flex-gt-md-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-gt-md-10,
    .layout-row > .flex-gt-md-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-gt-md-15,
    .layout-row > .flex-gt-md-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-gt-md-20,
    .layout-row > .flex-gt-md-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-gt-md-25,
    .layout-row > .flex-gt-md-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-gt-md-30,
    .layout-row > .flex-gt-md-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-gt-md-35,
    .layout-row > .flex-gt-md-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-gt-md-40,
    .layout-row > .flex-gt-md-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-gt-md-45,
    .layout-row > .flex-gt-md-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-gt-md-50,
    .layout-row > .flex-gt-md-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-gt-md-55,
    .layout-row > .flex-gt-md-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-gt-md-60,
    .layout-row > .flex-gt-md-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-gt-md-65,
    .layout-row > .flex-gt-md-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-gt-md-70,
    .layout-row > .flex-gt-md-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-gt-md-75,
    .layout-row > .flex-gt-md-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-gt-md-80,
    .layout-row > .flex-gt-md-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-gt-md-85,
    .layout-row > .flex-gt-md-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-gt-md-90,
    .layout-row > .flex-gt-md-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-gt-md-95,
    .layout-row > .flex-gt-md-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .flex-gt-md-100,
    .layout-column > .flex-gt-md-100,
    .layout-gt-md-column > .flex-gt-md-100,
    .layout-gt-md-row > .flex-gt-md-100,
    .layout-row > .flex-gt-md-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-md-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-md-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-md-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex-gt-md-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-md-row > .flex {
        min-width: 0;
    }
    .layout-gt-md-column > .flex-gt-md-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex-gt-md-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-md-column > .flex {
        min-height: 0;
    }
    .layout-gt-md,
    .layout-gt-md-column,
    .layout-gt-md-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-gt-md-column {
        flex-direction: column;
    }
    .layout-gt-md-row {
        flex-direction: row;
    }
}
@media (min-width: 1280px) and (max-width: 1919px) {
    .hide-gt-md:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-lg
        ):not(.show),
    .hide-gt-sm:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-lg
        ):not(.show),
    .hide-gt-xs:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-lg
        ):not(.show),
    .hide-lg:not(.show-lg):not(.show-gt-md):not(.show-gt-sm):not(
            .show-gt-xs
        ):not(.show),
    .hide:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(
            .show
        ) {
        display: none;
    }
    .flex-order-lg--20 {
        order: -20;
    }
    .flex-order-lg--19 {
        order: -19;
    }
    .flex-order-lg--18 {
        order: -18;
    }
    .flex-order-lg--17 {
        order: -17;
    }
    .flex-order-lg--16 {
        order: -16;
    }
    .flex-order-lg--15 {
        order: -15;
    }
    .flex-order-lg--14 {
        order: -14;
    }
    .flex-order-lg--13 {
        order: -13;
    }
    .flex-order-lg--12 {
        order: -12;
    }
    .flex-order-lg--11 {
        order: -11;
    }
    .flex-order-lg--10 {
        order: -10;
    }
    .flex-order-lg--9 {
        order: -9;
    }
    .flex-order-lg--8 {
        order: -8;
    }
    .flex-order-lg--7 {
        order: -7;
    }
    .flex-order-lg--6 {
        order: -6;
    }
    .flex-order-lg--5 {
        order: -5;
    }
    .flex-order-lg--4 {
        order: -4;
    }
    .flex-order-lg--3 {
        order: -3;
    }
    .flex-order-lg--2 {
        order: -2;
    }
    .flex-order-lg--1 {
        order: -1;
    }
    .flex-order-lg-0 {
        order: 0;
    }
    .flex-order-lg-1 {
        order: 1;
    }
    .flex-order-lg-2 {
        order: 2;
    }
    .flex-order-lg-3 {
        order: 3;
    }
    .flex-order-lg-4 {
        order: 4;
    }
    .flex-order-lg-5 {
        order: 5;
    }
    .flex-order-lg-6 {
        order: 6;
    }
    .flex-order-lg-7 {
        order: 7;
    }
    .flex-order-lg-8 {
        order: 8;
    }
    .flex-order-lg-9 {
        order: 9;
    }
    .flex-order-lg-10 {
        order: 10;
    }
    .flex-order-lg-11 {
        order: 11;
    }
    .flex-order-lg-12 {
        order: 12;
    }
    .flex-order-lg-13 {
        order: 13;
    }
    .flex-order-lg-14 {
        order: 14;
    }
    .flex-order-lg-15 {
        order: 15;
    }
    .flex-order-lg-16 {
        order: 16;
    }
    .flex-order-lg-17 {
        order: 17;
    }
    .flex-order-lg-18 {
        order: 18;
    }
    .flex-order-lg-19 {
        order: 19;
    }
    .flex-order-lg-20 {
        order: 20;
    }
    .flex-offset-lg-0,
    .layout-margin .flex-offset-lg-0,
    .layout-margin .offset-lg-0,
    .offset-lg-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-lg-0,
    [dir="rtl"] .layout-margin .flex-offset-lg-0,
    [dir="rtl"] .layout-margin .offset-lg-0,
    [dir="rtl"] .offset-lg-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-lg-5,
    .layout-margin .flex-offset-lg-5,
    .layout-margin .offset-lg-5,
    .offset-lg-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-lg-5,
    [dir="rtl"] .layout-margin .flex-offset-lg-5,
    [dir="rtl"] .layout-margin .offset-lg-5,
    [dir="rtl"] .offset-lg-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-lg-10,
    .layout-margin .flex-offset-lg-10,
    .layout-margin .offset-lg-10,
    .offset-lg-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-lg-10,
    [dir="rtl"] .layout-margin .flex-offset-lg-10,
    [dir="rtl"] .layout-margin .offset-lg-10,
    [dir="rtl"] .offset-lg-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-lg-15,
    .layout-margin .flex-offset-lg-15,
    .layout-margin .offset-lg-15,
    .offset-lg-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-lg-15,
    [dir="rtl"] .layout-margin .flex-offset-lg-15,
    [dir="rtl"] .layout-margin .offset-lg-15,
    [dir="rtl"] .offset-lg-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-lg-20,
    .layout-margin .flex-offset-lg-20,
    .layout-margin .offset-lg-20,
    .offset-lg-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-lg-20,
    [dir="rtl"] .layout-margin .flex-offset-lg-20,
    [dir="rtl"] .layout-margin .offset-lg-20,
    [dir="rtl"] .offset-lg-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-lg-25,
    .layout-margin .flex-offset-lg-25,
    .layout-margin .offset-lg-25,
    .offset-lg-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-lg-25,
    [dir="rtl"] .layout-margin .flex-offset-lg-25,
    [dir="rtl"] .layout-margin .offset-lg-25,
    [dir="rtl"] .offset-lg-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-lg-30,
    .layout-margin .flex-offset-lg-30,
    .layout-margin .offset-lg-30,
    .offset-lg-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-lg-30,
    [dir="rtl"] .layout-margin .flex-offset-lg-30,
    [dir="rtl"] .layout-margin .offset-lg-30,
    [dir="rtl"] .offset-lg-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-lg-35,
    .layout-margin .flex-offset-lg-35,
    .layout-margin .offset-lg-35,
    .offset-lg-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-lg-35,
    [dir="rtl"] .layout-margin .flex-offset-lg-35,
    [dir="rtl"] .layout-margin .offset-lg-35,
    [dir="rtl"] .offset-lg-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-lg-40,
    .layout-margin .flex-offset-lg-40,
    .layout-margin .offset-lg-40,
    .offset-lg-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-lg-40,
    [dir="rtl"] .layout-margin .flex-offset-lg-40,
    [dir="rtl"] .layout-margin .offset-lg-40,
    [dir="rtl"] .offset-lg-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-lg-45,
    .layout-margin .flex-offset-lg-45,
    .layout-margin .offset-lg-45,
    .offset-lg-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-lg-45,
    [dir="rtl"] .layout-margin .flex-offset-lg-45,
    [dir="rtl"] .layout-margin .offset-lg-45,
    [dir="rtl"] .offset-lg-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-lg-50,
    .layout-margin .flex-offset-lg-50,
    .layout-margin .offset-lg-50,
    .offset-lg-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-lg-50,
    [dir="rtl"] .layout-margin .flex-offset-lg-50,
    [dir="rtl"] .layout-margin .offset-lg-50,
    [dir="rtl"] .offset-lg-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-lg-55,
    .layout-margin .flex-offset-lg-55,
    .layout-margin .offset-lg-55,
    .offset-lg-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-lg-55,
    [dir="rtl"] .layout-margin .flex-offset-lg-55,
    [dir="rtl"] .layout-margin .offset-lg-55,
    [dir="rtl"] .offset-lg-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-lg-60,
    .layout-margin .flex-offset-lg-60,
    .layout-margin .offset-lg-60,
    .offset-lg-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-lg-60,
    [dir="rtl"] .layout-margin .flex-offset-lg-60,
    [dir="rtl"] .layout-margin .offset-lg-60,
    [dir="rtl"] .offset-lg-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-lg-65,
    .layout-margin .flex-offset-lg-65,
    .layout-margin .offset-lg-65,
    .offset-lg-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-lg-65,
    [dir="rtl"] .layout-margin .flex-offset-lg-65,
    [dir="rtl"] .layout-margin .offset-lg-65,
    [dir="rtl"] .offset-lg-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-lg-70,
    .layout-margin .flex-offset-lg-70,
    .layout-margin .offset-lg-70,
    .offset-lg-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-lg-70,
    [dir="rtl"] .layout-margin .flex-offset-lg-70,
    [dir="rtl"] .layout-margin .offset-lg-70,
    [dir="rtl"] .offset-lg-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-lg-75,
    .layout-margin .flex-offset-lg-75,
    .layout-margin .offset-lg-75,
    .offset-lg-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-lg-75,
    [dir="rtl"] .layout-margin .flex-offset-lg-75,
    [dir="rtl"] .layout-margin .offset-lg-75,
    [dir="rtl"] .offset-lg-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-lg-80,
    .layout-margin .flex-offset-lg-80,
    .layout-margin .offset-lg-80,
    .offset-lg-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-lg-80,
    [dir="rtl"] .layout-margin .flex-offset-lg-80,
    [dir="rtl"] .layout-margin .offset-lg-80,
    [dir="rtl"] .offset-lg-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-lg-85,
    .layout-margin .flex-offset-lg-85,
    .layout-margin .offset-lg-85,
    .offset-lg-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-lg-85,
    [dir="rtl"] .layout-margin .flex-offset-lg-85,
    [dir="rtl"] .layout-margin .offset-lg-85,
    [dir="rtl"] .offset-lg-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-lg-90,
    .layout-margin .flex-offset-lg-90,
    .layout-margin .offset-lg-90,
    .offset-lg-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-lg-90,
    [dir="rtl"] .layout-margin .flex-offset-lg-90,
    [dir="rtl"] .layout-margin .offset-lg-90,
    [dir="rtl"] .offset-lg-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-lg-95,
    .layout-margin .flex-offset-lg-95,
    .layout-margin .offset-lg-95,
    .offset-lg-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-lg-95,
    [dir="rtl"] .layout-margin .flex-offset-lg-95,
    [dir="rtl"] .layout-margin .offset-lg-95,
    [dir="rtl"] .offset-lg-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-lg-33,
    .layout-margin .flex-offset-lg-33,
    .layout-margin .offset-lg-33,
    .offset-lg-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-lg-66,
    .layout-margin .flex-offset-lg-66,
    .layout-margin .offset-lg-66,
    .offset-lg-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-lg-66,
    [dir="rtl"] .layout-margin .flex-offset-lg-66,
    [dir="rtl"] .layout-margin .offset-lg-66,
    [dir="rtl"] .offset-lg-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-lg,
    .layout-align-lg-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-lg-start,
    .layout-align-lg-start-center,
    .layout-align-lg-start-end,
    .layout-align-lg-start-start,
    .layout-align-lg-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-lg-center,
    .layout-align-lg-center-center,
    .layout-align-lg-center-end,
    .layout-align-lg-center-start,
    .layout-align-lg-center-stretch {
        justify-content: center;
    }
    .layout-align-lg-end,
    .layout-align-lg-end-center,
    .layout-align-lg-end-end,
    .layout-align-lg-end-start,
    .layout-align-lg-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-lg-space-around,
    .layout-align-lg-space-around-center,
    .layout-align-lg-space-around-end,
    .layout-align-lg-space-around-start,
    .layout-align-lg-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-lg-space-between,
    .layout-align-lg-space-between-center,
    .layout-align-lg-space-between-end,
    .layout-align-lg-space-between-start,
    .layout-align-lg-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-lg-center-start,
    .layout-align-lg-end-start,
    .layout-align-lg-space-around-start,
    .layout-align-lg-space-between-start,
    .layout-align-lg-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-lg-center-center,
    .layout-align-lg-end-center,
    .layout-align-lg-space-around-center,
    .layout-align-lg-space-between-center,
    .layout-align-lg-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-lg-center-center > *,
    .layout-align-lg-end-center > *,
    .layout-align-lg-space-around-center > *,
    .layout-align-lg-space-between-center > *,
    .layout-align-lg-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-lg-center-end,
    .layout-align-lg-end-end,
    .layout-align-lg-space-around-end,
    .layout-align-lg-space-between-end,
    .layout-align-lg-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-lg-center-stretch,
    .layout-align-lg-end-stretch,
    .layout-align-lg-space-around-stretch,
    .layout-align-lg-space-between-stretch,
    .layout-align-lg-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-lg {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-lg-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-lg-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-lg-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-lg-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-lg-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-lg-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-lg-0,
    .layout-row > .flex-lg-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-lg-0 {
        min-width: 0;
    }
    .layout-column > .flex-lg-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-lg-column > .flex-lg-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-lg-5,
    .layout-row > .flex-lg-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-lg-10,
    .layout-row > .flex-lg-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-lg-15,
    .layout-row > .flex-lg-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-lg-20,
    .layout-row > .flex-lg-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-lg-25,
    .layout-row > .flex-lg-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-lg-30,
    .layout-row > .flex-lg-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-lg-35,
    .layout-row > .flex-lg-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-lg-40,
    .layout-row > .flex-lg-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-lg-45,
    .layout-row > .flex-lg-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-lg-50,
    .layout-row > .flex-lg-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-lg-55,
    .layout-row > .flex-lg-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-lg-60,
    .layout-row > .flex-lg-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-lg-65,
    .layout-row > .flex-lg-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-lg-70,
    .layout-row > .flex-lg-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-lg-75,
    .layout-row > .flex-lg-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-lg-80,
    .layout-row > .flex-lg-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-lg-85,
    .layout-row > .flex-lg-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-lg-90,
    .layout-row > .flex-lg-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-lg-95,
    .layout-row > .flex-lg-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-95 {
        max-height: 95%;
    }
    .flex-lg-100,
    .layout-lg-column > .flex-lg-95 {
        flex: 1 1 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .flex-lg-100 {
        max-height: 100%;
    }
    .layout-column > .flex-lg-100,
    .layout-lg-column > .flex-lg-100,
    .layout-lg-row > .flex-lg-100,
    .layout-row > .flex-lg-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-lg-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-lg-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-lg-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex-lg-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-lg-row > .flex {
        min-width: 0;
    }
    .layout-lg-column > .flex-lg-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex-lg-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-lg-column > .flex {
        min-height: 0;
    }
    .layout-lg,
    .layout-lg-column,
    .layout-lg-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-lg-column {
        flex-direction: column;
    }
    .layout-lg-row {
        flex-direction: row;
    }
}
@media (min-width: 1920px) {
    .flex-order-gt-lg--20 {
        order: -20;
    }
    .flex-order-gt-lg--19 {
        order: -19;
    }
    .flex-order-gt-lg--18 {
        order: -18;
    }
    .flex-order-gt-lg--17 {
        order: -17;
    }
    .flex-order-gt-lg--16 {
        order: -16;
    }
    .flex-order-gt-lg--15 {
        order: -15;
    }
    .flex-order-gt-lg--14 {
        order: -14;
    }
    .flex-order-gt-lg--13 {
        order: -13;
    }
    .flex-order-gt-lg--12 {
        order: -12;
    }
    .flex-order-gt-lg--11 {
        order: -11;
    }
    .flex-order-gt-lg--10 {
        order: -10;
    }
    .flex-order-gt-lg--9 {
        order: -9;
    }
    .flex-order-gt-lg--8 {
        order: -8;
    }
    .flex-order-gt-lg--7 {
        order: -7;
    }
    .flex-order-gt-lg--6 {
        order: -6;
    }
    .flex-order-gt-lg--5 {
        order: -5;
    }
    .flex-order-gt-lg--4 {
        order: -4;
    }
    .flex-order-gt-lg--3 {
        order: -3;
    }
    .flex-order-gt-lg--2 {
        order: -2;
    }
    .flex-order-gt-lg--1 {
        order: -1;
    }
    .flex-order-gt-lg-0 {
        order: 0;
    }
    .flex-order-gt-lg-1 {
        order: 1;
    }
    .flex-order-gt-lg-2 {
        order: 2;
    }
    .flex-order-gt-lg-3 {
        order: 3;
    }
    .flex-order-gt-lg-4 {
        order: 4;
    }
    .flex-order-gt-lg-5 {
        order: 5;
    }
    .flex-order-gt-lg-6 {
        order: 6;
    }
    .flex-order-gt-lg-7 {
        order: 7;
    }
    .flex-order-gt-lg-8 {
        order: 8;
    }
    .flex-order-gt-lg-9 {
        order: 9;
    }
    .flex-order-gt-lg-10 {
        order: 10;
    }
    .flex-order-gt-lg-11 {
        order: 11;
    }
    .flex-order-gt-lg-12 {
        order: 12;
    }
    .flex-order-gt-lg-13 {
        order: 13;
    }
    .flex-order-gt-lg-14 {
        order: 14;
    }
    .flex-order-gt-lg-15 {
        order: 15;
    }
    .flex-order-gt-lg-16 {
        order: 16;
    }
    .flex-order-gt-lg-17 {
        order: 17;
    }
    .flex-order-gt-lg-18 {
        order: 18;
    }
    .flex-order-gt-lg-19 {
        order: 19;
    }
    .flex-order-gt-lg-20 {
        order: 20;
    }
    .flex-offset-gt-lg-0,
    .layout-margin .flex-offset-gt-lg-0,
    .layout-margin .offset-gt-lg-0,
    .offset-gt-lg-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-gt-lg-0,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-0,
    [dir="rtl"] .layout-margin .offset-gt-lg-0,
    [dir="rtl"] .offset-gt-lg-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-gt-lg-5,
    .layout-margin .flex-offset-gt-lg-5,
    .layout-margin .offset-gt-lg-5,
    .offset-gt-lg-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-gt-lg-5,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-5,
    [dir="rtl"] .layout-margin .offset-gt-lg-5,
    [dir="rtl"] .offset-gt-lg-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-gt-lg-10,
    .layout-margin .flex-offset-gt-lg-10,
    .layout-margin .offset-gt-lg-10,
    .offset-gt-lg-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-gt-lg-10,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-10,
    [dir="rtl"] .layout-margin .offset-gt-lg-10,
    [dir="rtl"] .offset-gt-lg-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-gt-lg-15,
    .layout-margin .flex-offset-gt-lg-15,
    .layout-margin .offset-gt-lg-15,
    .offset-gt-lg-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-gt-lg-15,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-15,
    [dir="rtl"] .layout-margin .offset-gt-lg-15,
    [dir="rtl"] .offset-gt-lg-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-gt-lg-20,
    .layout-margin .flex-offset-gt-lg-20,
    .layout-margin .offset-gt-lg-20,
    .offset-gt-lg-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-gt-lg-20,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-20,
    [dir="rtl"] .layout-margin .offset-gt-lg-20,
    [dir="rtl"] .offset-gt-lg-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-gt-lg-25,
    .layout-margin .flex-offset-gt-lg-25,
    .layout-margin .offset-gt-lg-25,
    .offset-gt-lg-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-gt-lg-25,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-25,
    [dir="rtl"] .layout-margin .offset-gt-lg-25,
    [dir="rtl"] .offset-gt-lg-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-gt-lg-30,
    .layout-margin .flex-offset-gt-lg-30,
    .layout-margin .offset-gt-lg-30,
    .offset-gt-lg-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-gt-lg-30,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-30,
    [dir="rtl"] .layout-margin .offset-gt-lg-30,
    [dir="rtl"] .offset-gt-lg-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-gt-lg-35,
    .layout-margin .flex-offset-gt-lg-35,
    .layout-margin .offset-gt-lg-35,
    .offset-gt-lg-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-gt-lg-35,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-35,
    [dir="rtl"] .layout-margin .offset-gt-lg-35,
    [dir="rtl"] .offset-gt-lg-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-gt-lg-40,
    .layout-margin .flex-offset-gt-lg-40,
    .layout-margin .offset-gt-lg-40,
    .offset-gt-lg-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-gt-lg-40,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-40,
    [dir="rtl"] .layout-margin .offset-gt-lg-40,
    [dir="rtl"] .offset-gt-lg-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-gt-lg-45,
    .layout-margin .flex-offset-gt-lg-45,
    .layout-margin .offset-gt-lg-45,
    .offset-gt-lg-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-gt-lg-45,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-45,
    [dir="rtl"] .layout-margin .offset-gt-lg-45,
    [dir="rtl"] .offset-gt-lg-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-gt-lg-50,
    .layout-margin .flex-offset-gt-lg-50,
    .layout-margin .offset-gt-lg-50,
    .offset-gt-lg-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-gt-lg-50,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-50,
    [dir="rtl"] .layout-margin .offset-gt-lg-50,
    [dir="rtl"] .offset-gt-lg-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-gt-lg-55,
    .layout-margin .flex-offset-gt-lg-55,
    .layout-margin .offset-gt-lg-55,
    .offset-gt-lg-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-gt-lg-55,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-55,
    [dir="rtl"] .layout-margin .offset-gt-lg-55,
    [dir="rtl"] .offset-gt-lg-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-gt-lg-60,
    .layout-margin .flex-offset-gt-lg-60,
    .layout-margin .offset-gt-lg-60,
    .offset-gt-lg-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-gt-lg-60,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-60,
    [dir="rtl"] .layout-margin .offset-gt-lg-60,
    [dir="rtl"] .offset-gt-lg-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-gt-lg-65,
    .layout-margin .flex-offset-gt-lg-65,
    .layout-margin .offset-gt-lg-65,
    .offset-gt-lg-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-gt-lg-65,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-65,
    [dir="rtl"] .layout-margin .offset-gt-lg-65,
    [dir="rtl"] .offset-gt-lg-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-gt-lg-70,
    .layout-margin .flex-offset-gt-lg-70,
    .layout-margin .offset-gt-lg-70,
    .offset-gt-lg-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-gt-lg-70,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-70,
    [dir="rtl"] .layout-margin .offset-gt-lg-70,
    [dir="rtl"] .offset-gt-lg-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-gt-lg-75,
    .layout-margin .flex-offset-gt-lg-75,
    .layout-margin .offset-gt-lg-75,
    .offset-gt-lg-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-gt-lg-75,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-75,
    [dir="rtl"] .layout-margin .offset-gt-lg-75,
    [dir="rtl"] .offset-gt-lg-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-gt-lg-80,
    .layout-margin .flex-offset-gt-lg-80,
    .layout-margin .offset-gt-lg-80,
    .offset-gt-lg-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-gt-lg-80,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-80,
    [dir="rtl"] .layout-margin .offset-gt-lg-80,
    [dir="rtl"] .offset-gt-lg-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-gt-lg-85,
    .layout-margin .flex-offset-gt-lg-85,
    .layout-margin .offset-gt-lg-85,
    .offset-gt-lg-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-gt-lg-85,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-85,
    [dir="rtl"] .layout-margin .offset-gt-lg-85,
    [dir="rtl"] .offset-gt-lg-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-gt-lg-90,
    .layout-margin .flex-offset-gt-lg-90,
    .layout-margin .offset-gt-lg-90,
    .offset-gt-lg-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-gt-lg-90,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-90,
    [dir="rtl"] .layout-margin .offset-gt-lg-90,
    [dir="rtl"] .offset-gt-lg-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-gt-lg-95,
    .layout-margin .flex-offset-gt-lg-95,
    .layout-margin .offset-gt-lg-95,
    .offset-gt-lg-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-gt-lg-95,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-95,
    [dir="rtl"] .layout-margin .offset-gt-lg-95,
    [dir="rtl"] .offset-gt-lg-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-gt-lg-33,
    .layout-margin .flex-offset-gt-lg-33,
    .layout-margin .offset-gt-lg-33,
    .offset-gt-lg-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-gt-lg-66,
    .layout-margin .flex-offset-gt-lg-66,
    .layout-margin .offset-gt-lg-66,
    .offset-gt-lg-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-gt-lg-66,
    [dir="rtl"] .layout-margin .flex-offset-gt-lg-66,
    [dir="rtl"] .layout-margin .offset-gt-lg-66,
    [dir="rtl"] .offset-gt-lg-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-gt-lg,
    .layout-align-gt-lg-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-gt-lg-start,
    .layout-align-gt-lg-start-center,
    .layout-align-gt-lg-start-end,
    .layout-align-gt-lg-start-start,
    .layout-align-gt-lg-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-gt-lg-center,
    .layout-align-gt-lg-center-center,
    .layout-align-gt-lg-center-end,
    .layout-align-gt-lg-center-start,
    .layout-align-gt-lg-center-stretch {
        justify-content: center;
    }
    .layout-align-gt-lg-end,
    .layout-align-gt-lg-end-center,
    .layout-align-gt-lg-end-end,
    .layout-align-gt-lg-end-start,
    .layout-align-gt-lg-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-gt-lg-space-around,
    .layout-align-gt-lg-space-around-center,
    .layout-align-gt-lg-space-around-end,
    .layout-align-gt-lg-space-around-start,
    .layout-align-gt-lg-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-gt-lg-space-between,
    .layout-align-gt-lg-space-between-center,
    .layout-align-gt-lg-space-between-end,
    .layout-align-gt-lg-space-between-start,
    .layout-align-gt-lg-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-gt-lg-center-start,
    .layout-align-gt-lg-end-start,
    .layout-align-gt-lg-space-around-start,
    .layout-align-gt-lg-space-between-start,
    .layout-align-gt-lg-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-gt-lg-center-center,
    .layout-align-gt-lg-end-center,
    .layout-align-gt-lg-space-around-center,
    .layout-align-gt-lg-space-between-center,
    .layout-align-gt-lg-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-gt-lg-center-center > *,
    .layout-align-gt-lg-end-center > *,
    .layout-align-gt-lg-space-around-center > *,
    .layout-align-gt-lg-space-between-center > *,
    .layout-align-gt-lg-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-gt-lg-center-end,
    .layout-align-gt-lg-end-end,
    .layout-align-gt-lg-space-around-end,
    .layout-align-gt-lg-space-between-end,
    .layout-align-gt-lg-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-gt-lg-center-stretch,
    .layout-align-gt-lg-end-stretch,
    .layout-align-gt-lg-space-around-stretch,
    .layout-align-gt-lg-space-between-stretch,
    .layout-align-gt-lg-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-gt-lg {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-gt-lg-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-gt-lg-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-lg-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-lg-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-lg-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-gt-lg-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-gt-lg-0,
    .layout-row > .flex-gt-lg-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-lg-0 {
        min-width: 0;
    }
    .layout-column > .flex-gt-lg-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-gt-lg-column > .flex-gt-lg-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-gt-lg-5,
    .layout-row > .flex-gt-lg-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-gt-lg-10,
    .layout-row > .flex-gt-lg-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-gt-lg-15,
    .layout-row > .flex-gt-lg-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-gt-lg-20,
    .layout-row > .flex-gt-lg-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-gt-lg-25,
    .layout-row > .flex-gt-lg-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-gt-lg-30,
    .layout-row > .flex-gt-lg-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-gt-lg-35,
    .layout-row > .flex-gt-lg-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-gt-lg-40,
    .layout-row > .flex-gt-lg-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-gt-lg-45,
    .layout-row > .flex-gt-lg-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-gt-lg-50,
    .layout-row > .flex-gt-lg-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-gt-lg-55,
    .layout-row > .flex-gt-lg-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-gt-lg-60,
    .layout-row > .flex-gt-lg-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-gt-lg-65,
    .layout-row > .flex-gt-lg-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-gt-lg-70,
    .layout-row > .flex-gt-lg-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-gt-lg-75,
    .layout-row > .flex-gt-lg-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-gt-lg-80,
    .layout-row > .flex-gt-lg-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-gt-lg-85,
    .layout-row > .flex-gt-lg-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-gt-lg-90,
    .layout-row > .flex-gt-lg-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-gt-lg-95,
    .layout-row > .flex-gt-lg-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .flex-gt-lg-100,
    .layout-column > .flex-gt-lg-100,
    .layout-gt-lg-column > .flex-gt-lg-100,
    .layout-gt-lg-row > .flex-gt-lg-100,
    .layout-row > .flex-gt-lg-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-lg-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-gt-lg-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-gt-lg-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex-gt-lg-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-gt-lg-row > .flex {
        min-width: 0;
    }
    .layout-gt-lg-column > .flex-gt-lg-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex-gt-lg-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-gt-lg-column > .flex {
        min-height: 0;
    }
    .layout-gt-lg,
    .layout-gt-lg-column,
    .layout-gt-lg-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-gt-lg-column {
        flex-direction: column;
    }
    .layout-gt-lg-row {
        flex-direction: row;
    }
    .flex-order-xl--20 {
        order: -20;
    }
    .flex-order-xl--19 {
        order: -19;
    }
    .flex-order-xl--18 {
        order: -18;
    }
    .flex-order-xl--17 {
        order: -17;
    }
    .flex-order-xl--16 {
        order: -16;
    }
    .flex-order-xl--15 {
        order: -15;
    }
    .flex-order-xl--14 {
        order: -14;
    }
    .flex-order-xl--13 {
        order: -13;
    }
    .flex-order-xl--12 {
        order: -12;
    }
    .flex-order-xl--11 {
        order: -11;
    }
    .flex-order-xl--10 {
        order: -10;
    }
    .flex-order-xl--9 {
        order: -9;
    }
    .flex-order-xl--8 {
        order: -8;
    }
    .flex-order-xl--7 {
        order: -7;
    }
    .flex-order-xl--6 {
        order: -6;
    }
    .flex-order-xl--5 {
        order: -5;
    }
    .flex-order-xl--4 {
        order: -4;
    }
    .flex-order-xl--3 {
        order: -3;
    }
    .flex-order-xl--2 {
        order: -2;
    }
    .flex-order-xl--1 {
        order: -1;
    }
    .flex-order-xl-0 {
        order: 0;
    }
    .flex-order-xl-1 {
        order: 1;
    }
    .flex-order-xl-2 {
        order: 2;
    }
    .flex-order-xl-3 {
        order: 3;
    }
    .flex-order-xl-4 {
        order: 4;
    }
    .flex-order-xl-5 {
        order: 5;
    }
    .flex-order-xl-6 {
        order: 6;
    }
    .flex-order-xl-7 {
        order: 7;
    }
    .flex-order-xl-8 {
        order: 8;
    }
    .flex-order-xl-9 {
        order: 9;
    }
    .flex-order-xl-10 {
        order: 10;
    }
    .flex-order-xl-11 {
        order: 11;
    }
    .flex-order-xl-12 {
        order: 12;
    }
    .flex-order-xl-13 {
        order: 13;
    }
    .flex-order-xl-14 {
        order: 14;
    }
    .flex-order-xl-15 {
        order: 15;
    }
    .flex-order-xl-16 {
        order: 16;
    }
    .flex-order-xl-17 {
        order: 17;
    }
    .flex-order-xl-18 {
        order: 18;
    }
    .flex-order-xl-19 {
        order: 19;
    }
    .flex-order-xl-20 {
        order: 20;
    }
    .flex-offset-xl-0,
    .layout-margin .flex-offset-xl-0,
    .layout-margin .offset-xl-0,
    .offset-xl-0 {
        margin-left: 0;
    }
    [dir="rtl"] .flex-offset-xl-0,
    [dir="rtl"] .layout-margin .flex-offset-xl-0,
    [dir="rtl"] .layout-margin .offset-xl-0,
    [dir="rtl"] .offset-xl-0 {
        margin-left: auto;
        margin-right: 0;
    }
    .flex-offset-xl-5,
    .layout-margin .flex-offset-xl-5,
    .layout-margin .offset-xl-5,
    .offset-xl-5 {
        margin-left: 5%;
    }
    [dir="rtl"] .flex-offset-xl-5,
    [dir="rtl"] .layout-margin .flex-offset-xl-5,
    [dir="rtl"] .layout-margin .offset-xl-5,
    [dir="rtl"] .offset-xl-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .flex-offset-xl-10,
    .layout-margin .flex-offset-xl-10,
    .layout-margin .offset-xl-10,
    .offset-xl-10 {
        margin-left: 10%;
    }
    [dir="rtl"] .flex-offset-xl-10,
    [dir="rtl"] .layout-margin .flex-offset-xl-10,
    [dir="rtl"] .layout-margin .offset-xl-10,
    [dir="rtl"] .offset-xl-10 {
        margin-left: auto;
        margin-right: 10%;
    }
    .flex-offset-xl-15,
    .layout-margin .flex-offset-xl-15,
    .layout-margin .offset-xl-15,
    .offset-xl-15 {
        margin-left: 15%;
    }
    [dir="rtl"] .flex-offset-xl-15,
    [dir="rtl"] .layout-margin .flex-offset-xl-15,
    [dir="rtl"] .layout-margin .offset-xl-15,
    [dir="rtl"] .offset-xl-15 {
        margin-left: auto;
        margin-right: 15%;
    }
    .flex-offset-xl-20,
    .layout-margin .flex-offset-xl-20,
    .layout-margin .offset-xl-20,
    .offset-xl-20 {
        margin-left: 20%;
    }
    [dir="rtl"] .flex-offset-xl-20,
    [dir="rtl"] .layout-margin .flex-offset-xl-20,
    [dir="rtl"] .layout-margin .offset-xl-20,
    [dir="rtl"] .offset-xl-20 {
        margin-left: auto;
        margin-right: 20%;
    }
    .flex-offset-xl-25,
    .layout-margin .flex-offset-xl-25,
    .layout-margin .offset-xl-25,
    .offset-xl-25 {
        margin-left: 25%;
    }
    [dir="rtl"] .flex-offset-xl-25,
    [dir="rtl"] .layout-margin .flex-offset-xl-25,
    [dir="rtl"] .layout-margin .offset-xl-25,
    [dir="rtl"] .offset-xl-25 {
        margin-left: auto;
        margin-right: 25%;
    }
    .flex-offset-xl-30,
    .layout-margin .flex-offset-xl-30,
    .layout-margin .offset-xl-30,
    .offset-xl-30 {
        margin-left: 30%;
    }
    [dir="rtl"] .flex-offset-xl-30,
    [dir="rtl"] .layout-margin .flex-offset-xl-30,
    [dir="rtl"] .layout-margin .offset-xl-30,
    [dir="rtl"] .offset-xl-30 {
        margin-left: auto;
        margin-right: 30%;
    }
    .flex-offset-xl-35,
    .layout-margin .flex-offset-xl-35,
    .layout-margin .offset-xl-35,
    .offset-xl-35 {
        margin-left: 35%;
    }
    [dir="rtl"] .flex-offset-xl-35,
    [dir="rtl"] .layout-margin .flex-offset-xl-35,
    [dir="rtl"] .layout-margin .offset-xl-35,
    [dir="rtl"] .offset-xl-35 {
        margin-left: auto;
        margin-right: 35%;
    }
    .flex-offset-xl-40,
    .layout-margin .flex-offset-xl-40,
    .layout-margin .offset-xl-40,
    .offset-xl-40 {
        margin-left: 40%;
    }
    [dir="rtl"] .flex-offset-xl-40,
    [dir="rtl"] .layout-margin .flex-offset-xl-40,
    [dir="rtl"] .layout-margin .offset-xl-40,
    [dir="rtl"] .offset-xl-40 {
        margin-left: auto;
        margin-right: 40%;
    }
    .flex-offset-xl-45,
    .layout-margin .flex-offset-xl-45,
    .layout-margin .offset-xl-45,
    .offset-xl-45 {
        margin-left: 45%;
    }
    [dir="rtl"] .flex-offset-xl-45,
    [dir="rtl"] .layout-margin .flex-offset-xl-45,
    [dir="rtl"] .layout-margin .offset-xl-45,
    [dir="rtl"] .offset-xl-45 {
        margin-left: auto;
        margin-right: 45%;
    }
    .flex-offset-xl-50,
    .layout-margin .flex-offset-xl-50,
    .layout-margin .offset-xl-50,
    .offset-xl-50 {
        margin-left: 50%;
    }
    [dir="rtl"] .flex-offset-xl-50,
    [dir="rtl"] .layout-margin .flex-offset-xl-50,
    [dir="rtl"] .layout-margin .offset-xl-50,
    [dir="rtl"] .offset-xl-50 {
        margin-left: auto;
        margin-right: 50%;
    }
    .flex-offset-xl-55,
    .layout-margin .flex-offset-xl-55,
    .layout-margin .offset-xl-55,
    .offset-xl-55 {
        margin-left: 55%;
    }
    [dir="rtl"] .flex-offset-xl-55,
    [dir="rtl"] .layout-margin .flex-offset-xl-55,
    [dir="rtl"] .layout-margin .offset-xl-55,
    [dir="rtl"] .offset-xl-55 {
        margin-left: auto;
        margin-right: 55%;
    }
    .flex-offset-xl-60,
    .layout-margin .flex-offset-xl-60,
    .layout-margin .offset-xl-60,
    .offset-xl-60 {
        margin-left: 60%;
    }
    [dir="rtl"] .flex-offset-xl-60,
    [dir="rtl"] .layout-margin .flex-offset-xl-60,
    [dir="rtl"] .layout-margin .offset-xl-60,
    [dir="rtl"] .offset-xl-60 {
        margin-left: auto;
        margin-right: 60%;
    }
    .flex-offset-xl-65,
    .layout-margin .flex-offset-xl-65,
    .layout-margin .offset-xl-65,
    .offset-xl-65 {
        margin-left: 65%;
    }
    [dir="rtl"] .flex-offset-xl-65,
    [dir="rtl"] .layout-margin .flex-offset-xl-65,
    [dir="rtl"] .layout-margin .offset-xl-65,
    [dir="rtl"] .offset-xl-65 {
        margin-left: auto;
        margin-right: 65%;
    }
    .flex-offset-xl-70,
    .layout-margin .flex-offset-xl-70,
    .layout-margin .offset-xl-70,
    .offset-xl-70 {
        margin-left: 70%;
    }
    [dir="rtl"] .flex-offset-xl-70,
    [dir="rtl"] .layout-margin .flex-offset-xl-70,
    [dir="rtl"] .layout-margin .offset-xl-70,
    [dir="rtl"] .offset-xl-70 {
        margin-left: auto;
        margin-right: 70%;
    }
    .flex-offset-xl-75,
    .layout-margin .flex-offset-xl-75,
    .layout-margin .offset-xl-75,
    .offset-xl-75 {
        margin-left: 75%;
    }
    [dir="rtl"] .flex-offset-xl-75,
    [dir="rtl"] .layout-margin .flex-offset-xl-75,
    [dir="rtl"] .layout-margin .offset-xl-75,
    [dir="rtl"] .offset-xl-75 {
        margin-left: auto;
        margin-right: 75%;
    }
    .flex-offset-xl-80,
    .layout-margin .flex-offset-xl-80,
    .layout-margin .offset-xl-80,
    .offset-xl-80 {
        margin-left: 80%;
    }
    [dir="rtl"] .flex-offset-xl-80,
    [dir="rtl"] .layout-margin .flex-offset-xl-80,
    [dir="rtl"] .layout-margin .offset-xl-80,
    [dir="rtl"] .offset-xl-80 {
        margin-left: auto;
        margin-right: 80%;
    }
    .flex-offset-xl-85,
    .layout-margin .flex-offset-xl-85,
    .layout-margin .offset-xl-85,
    .offset-xl-85 {
        margin-left: 85%;
    }
    [dir="rtl"] .flex-offset-xl-85,
    [dir="rtl"] .layout-margin .flex-offset-xl-85,
    [dir="rtl"] .layout-margin .offset-xl-85,
    [dir="rtl"] .offset-xl-85 {
        margin-left: auto;
        margin-right: 85%;
    }
    .flex-offset-xl-90,
    .layout-margin .flex-offset-xl-90,
    .layout-margin .offset-xl-90,
    .offset-xl-90 {
        margin-left: 90%;
    }
    [dir="rtl"] .flex-offset-xl-90,
    [dir="rtl"] .layout-margin .flex-offset-xl-90,
    [dir="rtl"] .layout-margin .offset-xl-90,
    [dir="rtl"] .offset-xl-90 {
        margin-left: auto;
        margin-right: 90%;
    }
    .flex-offset-xl-95,
    .layout-margin .flex-offset-xl-95,
    .layout-margin .offset-xl-95,
    .offset-xl-95 {
        margin-left: 95%;
    }
    [dir="rtl"] .flex-offset-xl-95,
    [dir="rtl"] .layout-margin .flex-offset-xl-95,
    [dir="rtl"] .layout-margin .offset-xl-95,
    [dir="rtl"] .offset-xl-95 {
        margin-left: auto;
        margin-right: 95%;
    }
    .flex-offset-xl-33,
    .layout-margin .flex-offset-xl-33,
    .layout-margin .offset-xl-33,
    .offset-xl-33 {
        margin-left: 33.33333%;
    }
    .flex-offset-xl-66,
    .layout-margin .flex-offset-xl-66,
    .layout-margin .offset-xl-66,
    .offset-xl-66 {
        margin-left: 66.66667%;
    }
    [dir="rtl"] .flex-offset-xl-66,
    [dir="rtl"] .layout-margin .flex-offset-xl-66,
    [dir="rtl"] .layout-margin .offset-xl-66,
    [dir="rtl"] .offset-xl-66 {
        margin-left: auto;
        margin-right: 66.66667%;
    }
    .layout-align-xl,
    .layout-align-xl-start-stretch {
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
    }
    .layout-align-xl-start,
    .layout-align-xl-start-center,
    .layout-align-xl-start-end,
    .layout-align-xl-start-start,
    .layout-align-xl-start-stretch {
        justify-content: flex-start;
    }
    .layout-align-xl-center,
    .layout-align-xl-center-center,
    .layout-align-xl-center-end,
    .layout-align-xl-center-start,
    .layout-align-xl-center-stretch {
        justify-content: center;
    }
    .layout-align-xl-end,
    .layout-align-xl-end-center,
    .layout-align-xl-end-end,
    .layout-align-xl-end-start,
    .layout-align-xl-end-stretch {
        justify-content: flex-end;
    }
    .layout-align-xl-space-around,
    .layout-align-xl-space-around-center,
    .layout-align-xl-space-around-end,
    .layout-align-xl-space-around-start,
    .layout-align-xl-space-around-stretch {
        justify-content: space-around;
    }
    .layout-align-xl-space-between,
    .layout-align-xl-space-between-center,
    .layout-align-xl-space-between-end,
    .layout-align-xl-space-between-start,
    .layout-align-xl-space-between-stretch {
        justify-content: space-between;
    }
    .layout-align-xl-center-start,
    .layout-align-xl-end-start,
    .layout-align-xl-space-around-start,
    .layout-align-xl-space-between-start,
    .layout-align-xl-start-start {
        align-items: flex-start;
        align-content: flex-start;
    }
    .layout-align-xl-center-center,
    .layout-align-xl-end-center,
    .layout-align-xl-space-around-center,
    .layout-align-xl-space-between-center,
    .layout-align-xl-start-center {
        align-items: center;
        align-content: center;
        max-width: 100%;
    }
    .layout-align-xl-center-center > *,
    .layout-align-xl-end-center > *,
    .layout-align-xl-space-around-center > *,
    .layout-align-xl-space-between-center > *,
    .layout-align-xl-start-center > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .layout-align-xl-center-end,
    .layout-align-xl-end-end,
    .layout-align-xl-space-around-end,
    .layout-align-xl-space-between-end,
    .layout-align-xl-start-end {
        align-items: flex-end;
        align-content: flex-end;
    }
    .layout-align-xl-center-stretch,
    .layout-align-xl-end-stretch,
    .layout-align-xl-space-around-stretch,
    .layout-align-xl-space-between-stretch,
    .layout-align-xl-start-stretch {
        align-items: stretch;
        align-content: stretch;
    }
    .flex-xl {
        flex: 1;
        box-sizing: border-box;
    }
    .flex-xl-grow {
        flex: 1 1 100%;
        box-sizing: border-box;
    }
    .flex-xl-initial {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-xl-auto {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
    .flex-xl-none {
        flex: 0 0 auto;
        box-sizing: border-box;
    }
    .flex-xl-noshrink {
        flex: 1 0 auto;
        box-sizing: border-box;
    }
    .flex-xl-nogrow {
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .flex-xl-0,
    .layout-row > .flex-xl-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-xl-0 {
        min-width: 0;
    }
    .layout-column > .flex-xl-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-0 {
        flex: 1 1 100%;
        max-width: 0;
        max-height: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .layout-xl-column > .flex-xl-0 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 0%;
        box-sizing: border-box;
        min-height: 0;
    }
    .flex-xl-5,
    .layout-row > .flex-xl-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-5 {
        flex: 1 1 100%;
        max-width: 5%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-5 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 5%;
        box-sizing: border-box;
    }
    .flex-xl-10,
    .layout-row > .flex-xl-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-10 {
        flex: 1 1 100%;
        max-width: 10%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-10 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 10%;
        box-sizing: border-box;
    }
    .flex-xl-15,
    .layout-row > .flex-xl-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-15 {
        flex: 1 1 100%;
        max-width: 15%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-15 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 15%;
        box-sizing: border-box;
    }
    .flex-xl-20,
    .layout-row > .flex-xl-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-20 {
        flex: 1 1 100%;
        max-width: 20%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-20 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 20%;
        box-sizing: border-box;
    }
    .flex-xl-25,
    .layout-row > .flex-xl-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-25 {
        flex: 1 1 100%;
        max-width: 25%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-25 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 25%;
        box-sizing: border-box;
    }
    .flex-xl-30,
    .layout-row > .flex-xl-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-30 {
        flex: 1 1 100%;
        max-width: 30%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-30 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 30%;
        box-sizing: border-box;
    }
    .flex-xl-35,
    .layout-row > .flex-xl-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-35 {
        flex: 1 1 100%;
        max-width: 35%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-35 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 35%;
        box-sizing: border-box;
    }
    .flex-xl-40,
    .layout-row > .flex-xl-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-40 {
        flex: 1 1 100%;
        max-width: 40%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-40 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 40%;
        box-sizing: border-box;
    }
    .flex-xl-45,
    .layout-row > .flex-xl-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-45 {
        flex: 1 1 100%;
        max-width: 45%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-45 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 45%;
        box-sizing: border-box;
    }
    .flex-xl-50,
    .layout-row > .flex-xl-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-50 {
        flex: 1 1 100%;
        max-width: 50%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-50 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 50%;
        box-sizing: border-box;
    }
    .flex-xl-55,
    .layout-row > .flex-xl-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-55 {
        flex: 1 1 100%;
        max-width: 55%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-55 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 55%;
        box-sizing: border-box;
    }
    .flex-xl-60,
    .layout-row > .flex-xl-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-60 {
        flex: 1 1 100%;
        max-width: 60%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-60 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 60%;
        box-sizing: border-box;
    }
    .flex-xl-65,
    .layout-row > .flex-xl-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-65 {
        flex: 1 1 100%;
        max-width: 65%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-65 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 65%;
        box-sizing: border-box;
    }
    .flex-xl-70,
    .layout-row > .flex-xl-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-70 {
        flex: 1 1 100%;
        max-width: 70%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-70 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 70%;
        box-sizing: border-box;
    }
    .flex-xl-75,
    .layout-row > .flex-xl-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-75 {
        flex: 1 1 100%;
        max-width: 75%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-75 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 75%;
        box-sizing: border-box;
    }
    .flex-xl-80,
    .layout-row > .flex-xl-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-80 {
        flex: 1 1 100%;
        max-width: 80%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-80 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 80%;
        box-sizing: border-box;
    }
    .flex-xl-85,
    .layout-row > .flex-xl-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-85 {
        flex: 1 1 100%;
        max-width: 85%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-85 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 85%;
        box-sizing: border-box;
    }
    .flex-xl-90,
    .layout-row > .flex-xl-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-90 {
        flex: 1 1 100%;
        max-width: 90%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-90 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 90%;
        box-sizing: border-box;
    }
    .flex-xl-95,
    .layout-row > .flex-xl-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-95 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 95%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-95 {
        flex: 1 1 100%;
        max-width: 95%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-95 {
        max-height: 95%;
    }
    .flex-xl-100,
    .layout-xl-column > .flex-xl-95 {
        flex: 1 1 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .flex-xl-100 {
        max-height: 100%;
    }
    .layout-column > .flex-xl-100,
    .layout-row > .flex-xl-100,
    .layout-xl-column > .flex-xl-100,
    .layout-xl-row > .flex-xl-100 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-xl-33 {
        flex: 1 1 33.33%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-row > .flex-xl-66 {
        flex: 1 1 66.66%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-33 {
        flex: 1 1 33.33%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-column > .flex-xl-66 {
        flex: 1 1 66.66%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-33 {
        flex: 1 1 100%;
        max-width: 33.33%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex-xl-66 {
        flex: 1 1 100%;
        max-width: 66.66%;
        max-height: 100%;
        box-sizing: border-box;
    }
    .layout-xl-row > .flex {
        min-width: 0;
    }
    .layout-xl-column > .flex-xl-33 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 33.33%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex-xl-66 {
        flex: 1 1 100%;
        max-width: 100%;
        max-height: 66.66%;
        box-sizing: border-box;
    }
    .layout-xl-column > .flex {
        min-height: 0;
    }
    .layout-xl,
    .layout-xl-column,
    .layout-xl-row {
        box-sizing: border-box;
        display: flex;
    }
    .layout-xl-column {
        flex-direction: column;
    }
    .layout-xl-row {
        flex-direction: row;
    }
    .hide-gt-lg:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-gt-lg
        ):not(.show-xl):not(.show),
    .hide-gt-md:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-gt-lg
        ):not(.show-xl):not(.show),
    .hide-gt-sm:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-gt-lg
        ):not(.show-xl):not(.show),
    .hide-gt-xs:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-gt-lg
        ):not(.show-xl):not(.show),
    .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show-gt-md):not(
            .show-gt-sm
        ):not(.show-gt-xs):not(.show),
    .hide:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(
            .show-gt-lg
        ):not(.show-xl):not(.show) {
        display: none;
    }
}
@media print {
    .hide-print:not(.show-print):not(.show) {
        display: none !important;
    }
}
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}.croppie-container {
    width: 100%;
    height: 100%;
}

    .croppie-container .cr-image {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0 0;
        max-height: none;
        max-width: none;
    }

    .croppie-container .cr-boundary {
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    .croppie-container .cr-viewport,
    .croppie-container .cr-resizer {
        position: absolute;
        border: 2px solid #fff;
        margin: auto;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
        z-index: 0;
    }

    .croppie-container .cr-resizer {
        z-index: 2;
        box-shadow: none;
        pointer-events: none;
    }

    .croppie-container .cr-resizer-vertical,
    .croppie-container .cr-resizer-horisontal {
        position: absolute;
        pointer-events: all;
    }

        .croppie-container .cr-resizer-vertical::after,
        .croppie-container .cr-resizer-horisontal::after {
            display: block;
            position: absolute;
            box-sizing: border-box;
            border: 1px solid black;
            background: #fff;
            width: 10px;
            height: 10px;
            content: '';
        }

    .croppie-container .cr-resizer-vertical {
        bottom: -5px;
        cursor: row-resize;
        width: 100%;
        height: 10px;
    }

        .croppie-container .cr-resizer-vertical::after {
            left: 50%;
            margin-left: -5px;
        }

    .croppie-container .cr-resizer-horisontal {
        right: -5px;
        cursor: col-resize;
        width: 10px;
        height: 100%;
    }

        .croppie-container .cr-resizer-horisontal::after {
            top: 50%;
            margin-top: -5px;
        }

    .croppie-container .cr-original-image {
        display: none;
    }

    .croppie-container .cr-vp-circle {
        border-radius: 50%;
    }

    .croppie-container .cr-overlay {
        z-index: 1;
        position: absolute;
        cursor: move;
        touch-action: none;
    }

    .croppie-container .cr-slider-wrap {
        width: 75%;
        margin: 15px auto;
        text-align: center;
    }

.croppie-result {
    position: relative;
    overflow: hidden;
}

    .croppie-result img {
        position: absolute;
    }

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
    -webkit-appearance: none;
    /*removes default webkit styles*/
    /*border: 1px solid white; */ /*fix for FF unable to apply focus style bug */
    width: 300px;
    /*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

    .cr-slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 3px;
        background: rgba(0, 0, 0, 0.5);
        border: 0;
        border-radius: 3px;
    }

    .cr-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #ddd;
        margin-top: -6px;
    }

    .cr-slider:focus {
        outline: none;
    }
    /*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

    .cr-slider::-moz-range-track {
        width: 100%;
        height: 3px;
        background: rgba(0, 0, 0, 0.5);
        border: 0;
        border-radius: 3px;
    }

    .cr-slider::-moz-range-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #ddd;
        margin-top: -6px;
    }

    /*hide the outline behind the border*/
    .cr-slider:-moz-focusring {
        outline: 1px solid white;
        outline-offset: -1px;
    }

    .cr-slider::-ms-track {
        width: 100%;
        height: 5px;
        background: transparent;
        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        border-color: transparent; /*leave room for the larger thumb to overflow with a transparent border */
        border-width: 6px 0;
        color: transparent; /*remove default tick marks*/
    }

    .cr-slider::-ms-fill-lower {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }

    .cr-slider::-ms-fill-upper {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }

    .cr-slider::-ms-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #ddd;
        margin-top: 1px;
    }

    .cr-slider:focus::-ms-fill-lower {
        background: rgba(0, 0, 0, 0.5);
    }

    .cr-slider:focus::-ms-fill-upper {
        background: rgba(0, 0, 0, 0.5);
    }
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;
}

    .cr-rotate-controls button {
        border: 0;
        background: none;
    }

    .cr-rotate-controls i:before {
        display: inline-block;
        font-style: normal;
        font-weight: 900;
        font-size: 22px;
    }

.cr-rotate-l i:before {
    content: '↺';
}

.cr-rotate-r i:before {
    content: '↻';
}
/*!* Quill Editor v1.3.6
* https://quilljs.com/
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com*/
.ql-container {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    height: 100%;
    margin: 0;
    position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
    visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
    pointer-events: none;
}
.ql-clipboard {
    left: -100000px;
    height: 1px;
    overflow-y: hidden;
    position: absolute;
    top: 50%;
}
.ql-clipboard p {
    margin: 0;
    padding: 0;
}
.ql-editor {
    box-sizing: border-box;
    line-height: 1.25;
    height: 100%;
    outline: none;
    overflow-y: auto;
    padding: 12px 15px;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ql-editor > * {
    cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    margin: 0;
    padding: 0;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
        list-9;
}
.ql-editor ol,
.ql-editor ul {
    padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
    list-style-type: none;
}
.ql-editor ul > li::before {
    content: "\2022";
}
.ql-editor ul[data-checked="true"],
.ql-editor ul[data-checked="false"] {
    pointer-events: none;
}
.ql-editor ul[data-checked="true"] > li *,
.ql-editor ul[data-checked="false"] > li * {
    pointer-events: all;
}
.ql-editor ul[data-checked="true"] > li::before,
.ql-editor ul[data-checked="false"] > li::before {
    color: #777;
    cursor: pointer;
    pointer-events: all;
}
.ql-editor ul[data-checked="true"] > li::before {
    content: "\2611";
}
.ql-editor ul[data-checked="false"] > li::before {
    content: "\2610";
}
.ql-editor li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
    margin-left: 0.3em;
    margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
    padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
    padding-right: 1.5em;
}
.ql-editor ol li {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
        list-9;
    counter-increment: list-0;
}
.ql-editor ol li:before {
    content: counter(list-0, decimal) ". ";
}
.ql-editor ol li.ql-indent-1 {
    counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
    content: counter(list-1, lower-alpha) ". ";
}
.ql-editor ol li.ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
    counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
    content: counter(list-2, lower-roman) ". ";
}
.ql-editor ol li.ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
    counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
    content: counter(list-3, decimal) ". ";
}
.ql-editor ol li.ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
    counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
    content: counter(list-4, lower-alpha) ". ";
}
.ql-editor ol li.ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
    counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
    content: counter(list-5, lower-roman) ". ";
}
.ql-editor ol li.ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
    counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
    content: counter(list-6, decimal) ". ";
}
.ql-editor ol li.ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
    counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
    content: counter(list-7, lower-alpha) ". ";
}
.ql-editor ol li.ql-indent-7 {
    counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
    counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
    content: counter(list-8, lower-roman) ". ";
}
.ql-editor ol li.ql-indent-8 {
    counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
    counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
    content: counter(list-9, decimal) ". ";
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 28.5em;
}
.ql-editor .ql-video {
    display: block;
    max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
    margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
    margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
    background-color: #000;
}
.ql-editor .ql-bg-red {
    background-color: #e60000;
}
.ql-editor .ql-bg-orange {
    background-color: #f90;
}
.ql-editor .ql-bg-yellow {
    background-color: #ff0;
}
.ql-editor .ql-bg-green {
    background-color: #008a00;
}
.ql-editor .ql-bg-blue {
    background-color: #06c;
}
.ql-editor .ql-bg-purple {
    background-color: #93f;
}
.ql-editor .ql-color-white {
    color: #fff;
}
.ql-editor .ql-color-red {
    color: #e60000;
}
.ql-editor .ql-color-orange {
    color: #f90;
}
.ql-editor .ql-color-yellow {
    color: #ff0;
}
.ql-editor .ql-color-green {
    color: #008a00;
}
.ql-editor .ql-color-blue {
    color: #06c;
}
.ql-editor .ql-color-purple {
    color: #93f;
}
.ql-editor .ql-font-serif {
    font-family:
        Georgia,
        Times New Roman,
        serif;
}
.ql-editor .ql-font-monospace {
    font-family:
        Monaco,
        Courier New,
        monospace;
}
.ql-editor .ql-size-small {
    font-size: 0.75em;
}
.ql-editor .ql-size-large {
    font-size: 1.5em;
}
.ql-editor .ql-size-huge {
    font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
}
.ql-editor .ql-align-center {
    text-align: center;
}
.ql-editor .ql-align-justify {
    text-align: justify;
}
.ql-editor .ql-align-right {
    text-align: right;
}
.ql-editor.ql-blank::before {
    color: var(--input-placeholder);
    content: attr(data-placeholder);
    font-family: "Open Sans", Arial, Sans-Serif;
    left: 15px;
    pointer-events: none;
    position: absolute;
    right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
    clear: both;
    content: "";
    display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
    background: 0 0;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 24px;
    padding: 3px 5px;
    width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
    float: left;
    height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
    outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type="file"],
.ql-snow .ql-toolbar input.ql-image[type="file"] {
    display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: #06c;
}
@media (pointer: coarse) {
    .ql-snow.ql-toolbar button:hover:not(.ql-active),
    .ql-snow .ql-toolbar button:hover:not(.ql-active) {
        color: #444;
    }
    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
        fill: #444;
    }
    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
        stroke: #444;
    }
}
.ql-snow {
    box-sizing: border-box;
}
.ql-snow * {
    box-sizing: border-box;
}
.ql-snow .ql-hidden {
    display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
    visibility: hidden;
}
.ql-snow .ql-tooltip {
    position: absolute;
    transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
    cursor: pointer;
    text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
    transform: translateY(-10px);
}
.ql-snow .ql-formats {
    display: inline-block;
    vertical-align: middle;
}
.ql-snow .ql-formats:after {
    clear: both;
    content: "";
    display: table;
}
.ql-snow .ql-stroke {
    fill: none;
    stroke: #444;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
    fill: none;
    stroke: #444;
    stroke-miterlimit: 10;
    stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: #444;
}
.ql-snow .ql-empty {
    fill: none;
}
.ql-snow .ql-even {
    fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
    stroke-width: 1;
}
.ql-snow .ql-transparent {
    opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
    display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
    display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
    display: none;
}
.ql-snow .ql-editor h1 {
    font-size: 2em;
}
.ql-snow .ql-editor h2 {
    font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
    font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
    font-size: 1em;
}
.ql-snow .ql-editor h5 {
    font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
    font-size: 0.67em;
}
.ql-snow .ql-editor a {
    text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
    background-color: #f0f0f0;
    border-radius: 3px;
}
.ql-snow .ql-editor pre {
    white-space: pre-wrap;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px 10px;
}
.ql-snow .ql-editor code {
    font-size: 85%;
    padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
}
.ql-snow .ql-editor img {
    max-width: 100%;
}
.ql-snow .ql-picker {
    color: #444;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 500;
    height: 24px;
    position: relative;
    vertical-align: middle;
}
.ql-snow .ql-picker-label {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    padding-left: 8px;
    padding-right: 2px;
    position: relative;
    width: 100%;
}
.ql-snow .ql-picker-label::before {
    display: inline-block;
    line-height: 22px;
}
.ql-snow .ql-picker-options {
    background-color: #fff;
    display: none;
    min-width: 100%;
    padding: 4px 8px;
    position: absolute;
    white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
    cursor: pointer;
    display: block;
    padding-bottom: 5px;
    padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: #ccc;
    z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    display: block;
    margin-top: -1px;
    top: 100%;
    z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
    width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
    padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
    right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
    padding: 4px 0;
}
.ql-snow .ql-icon-picker .ql-picker-item {
    height: 24px;
    width: 24px;
    padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
    padding: 3px 5px;
    width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
    border: 1px solid transparent;
    float: left;
    height: 16px;
    margin: 2px;
    padding: 0;
    width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
    position: absolute;
    margin-top: -9px;
    right: 0;
    top: 50%;
    width: 18px;
}
.ql-snow
    .ql-picker.ql-header
    .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-snow
    .ql-picker.ql-size
    .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-snow
    .ql-picker.ql-header
    .ql-picker-item[data-label]:not([data-label=""])::before,
.ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-label]:not([data-label=""])::before,
.ql-snow
    .ql-picker.ql-size
    .ql-picker-item[data-label]:not([data-label=""])::before {
    content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
    width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "Normal";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "Heading 1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "Heading 2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "Heading 3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "Heading 4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "Heading 5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "Heading 6";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
    width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "Sans Serif";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "Serif";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "Monospace";
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    font-family:
        Georgia,
        Times New Roman,
        serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    font-family:
        Monaco,
        Courier New,
        monospace;
}
.ql-snow .ql-picker.ql-size {
    width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "Normal";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "Small";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "Large";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "Huge";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
    background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
    background-color: #000;
}
.ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family:
        helvetica neue,
        helvetica,
        arial,
        sans-serif;
    padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
    border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
    border: 1px solid transparent;
    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
    border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: 0;
}
.ql-snow .ql-tooltip {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ddd;
    color: #444;
    padding: 5px 12px;
    white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
    content: "Visit URL:";
    line-height: 26px;
    margin-right: 8px;
}
.ql-snow .ql-tooltip input[type="text"] {
    display: none;
    border: 1px solid #ccc;
    font-size: 13px;
    height: 26px;
    margin: 0;
    padding: 3px 5px;
    width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
    display: inline-block;
    max-width: 200px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
    border-right: 1px solid #ccc;
    content: "Edit";
    margin-left: 16px;
    padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
    content: "Remove";
    margin-left: 8px;
}
.ql-snow .ql-tooltip a {
    line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
    display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type="text"] {
    display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0;
    content: "Save";
    padding-right: 0;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode="formula"]::before {
    content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "Enter video:";
}
.ql-snow a {
    color: #06c;
}
.ql-container.ql-snow {
    border: 1px solid #ccc;
}
.ql-toolbar.ql-snow {
    border-color: #d0d0d0;
    border-radius: 5px 5px 0 0;
}

.ql-container.ql-snow {
    border-color: #d0d0d0;
    border-radius: 0 0 5px 5px;
    border-top-color: #f0f0f0;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: 'Small';
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    font-size: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: 'Large';
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
    content: 'Huge';
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
    font-size: 40px;
}/* cyrillic-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OX-hpKKSTj5PW.woff2) format("woff2");
    unicode-range:
        U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OVuhpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OXuhpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OUehpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OXehpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format("woff2");
    unicode-range:
        U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(/fonts/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format("woff2");
    unicode-range:
        U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(/fonts/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(/fonts/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(/fonts/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format("woff2");
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(/fonts/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(/fonts/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format("woff2");
    unicode-range:
        U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src:
        local("Open Sans Regular"),
        local("OpenSans-Regular"),
        url(/fonts/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        local("Open Sans SemiBold"),
        local("OpenSans-SemiBold"),
        url(/fonts/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format("woff2");
    unicode-range:
        U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        local("Open Sans SemiBold"),
        local("OpenSans-SemiBold"),
        url(/fonts/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        local("Open Sans SemiBold"),
        local("OpenSans-SemiBold"),
        url(/fonts/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        local("Open Sans SemiBold"),
        local("OpenSans-SemiBold"),
        url(/fonts/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        local("Open Sans SemiBold"),
        local("OpenSans-SemiBold"),
        url(/fonts/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        local("Open Sans SemiBold"),
        local("OpenSans-SemiBold"),
        url(/fonts/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format("woff2");
    unicode-range:
        U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src:
        local("Open Sans SemiBold"),
        local("OpenSans-SemiBold"),
        url(/fonts/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url(/fonts/mem5YaGs126MiZpBA-UN7rgOX-hpKKSTj5PW.woff2) format("woff2");
    unicode-range:
        U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url(/fonts/mem5YaGs126MiZpBA-UN7rgOVuhpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url(/fonts/mem5YaGs126MiZpBA-UN7rgOXuhpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url(/fonts/mem5YaGs126MiZpBA-UN7rgOUehpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url(/fonts/mem5YaGs126MiZpBA-UN7rgOXehpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url(/fonts/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format("woff2");
    unicode-range:
        U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url(/fonts/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        local("Open Sans Light"),
        local("OpenSans-Light"),
        url(/fonts/mem5YaGs126MiZpBA-UN_r8OX-hpKKSTj5PW.woff2) format("woff2");
    unicode-range:
        U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "QwitcherGrypen";
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/QwitcherGrypen.ttf) format("truetype");
}

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/Titillium-Web.woff2) format("woff2");
}

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/MaterialIcons-Regular.woff2) format("woff2");
}
body,
body * {
    font-weight: 500;
    font-size: 10pt;
    font-family: "Open Sans", Arial, Sans-Serif;
}

.loader-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--dialog-content-mask);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    overflow: hidden;
    z-index: 9;
}

.loader {
    position: absolute;
    left: calc(50% - 5em);
    top: calc(50% - 5em);
    z-index: 98;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {
    font-size: 10px;
    text-indent: -9999em;
    border-top: 0.3em solid var(--scrollbar-color);
    border-right: 0.3em solid var(--scrollbar-color);
    border-bottom: 0.3em solid var(--scrollbar-color);
    border-left: 0.3em solid var(--loader-color);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-mask .text {
    position: absolute;
    left: 0px;
    top: 5%;
    height: 5%;
    width: 100%;
    overflow: visible;
    z-index: 99;
}

.process-indicator {
    position: relative;
    width: 300px;
    height: 100px;
    margin: 0 auto;
    border-radius: 5px;
    background: var(--loader-background);
    overflow: hidden;
}

.process-indicator .document1 {
    width: 40px;
    height: 60px;
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--loader-doc1);
    border-radius: 5px;
    z-index: 1;
}

.process-indicator .document1::before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--loader-doc1-before);
    border-bottom-left-radius: 5px;
    box-shadow: 0 0 4px var(--loader-doc1-shadow);
    z-index: 2;
}

.process-indicator .document1::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -26px;
    right: -8px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid var(--loader-background);
    transform: rotate(-45deg);
    z-index: 3;
}

.process-indicator .document2 {
    width: 40px;
    height: 60px;
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--loader-doc2);
    border-radius: 5px;
    z-index: 1;
}

.process-indicator .document2::before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--loader-doc2-before);
    border-bottom-left-radius: 5px;
    box-shadow: 0 0 4px var(--loader-doc2-shadow);
    z-index: 2;
}

.process-indicator .document2::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -26px;
    right: -8px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid var(--loader-background);
    transform: rotate(-45deg);
    z-index: 3;
}

.process-indicator .cube {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 0;
    left: 20px;
    opacity: 0;
    border-radius: 3px;
    background: var(--loader-cube);
    animation: rollcube 10s infinite none;
    transform-origin: 20px 20px;
    box-sizing: border-box;
}

.process-indicator.reverse .document1 {
    background: var(--loader-doc2);
}

.process-indicator.reverse .document1::before {
    background: var(--loader-doc2-before);
}

.process-indicator.reverse .document2 {
    background: var(--loader-doc1);
}

.process-indicator.reverse .document2::before {
    background: var(--loader-doc1-before);
}

.process-indicator.reverse .cube {
    animation: rollcube-reverse 10s infinite none;
}

.process-indicator .cube2,
.process-indicator.reverse .cube2 {
    animation-delay: 1s;
}

.process-indicator .cube3,
.process-indicator.reverse .cube3 {
    animation-delay: 2s;
}

.process-indicator .cube4,
.process-indicator.reverse .cube4 {
    animation-delay: 3s;
}

.process-indicator .cube5,
.process-indicator.reverse .cube5 {
    animation-delay: 4s;
}

.process-indicator .cube6,
.process-indicator.reverse .cube6 {
    animation-delay: 5s;
}

.process-indicator .cube7,
.process-indicator.reverse .cube7 {
    animation-delay: 6s;
}

.process-indicator .cube8,
.process-indicator.reverse .cube8 {
    animation-delay: 7s;
}

.process-indicator .cube9,
.process-indicator.reverse .cube9 {
    animation-delay: 8s;
}

.process-indicator .cube10,
.process-indicator.reverse .cube10 {
    animation-delay: 9s;
}

.process-indicator .cube11,
.process-indicator.reverse .cube11 {
    animation-delay: 10s;
}

@keyframes rollcube {
    0% {
        top: -40px;
        left: 20px;
        opacity: 0;
        transform: rotate(0deg);
        animation-timing-function: ease-in;
        background: #ccc;
    }

    1% {
        top: 50px;
        left: 20px;
        opacity: 0;
        transform: rotate(0deg);
        opacity: 0;
    }

    5% {
        left: 20px;
        opacity: 1;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
        opacity: 1;
    }

    10% {
        left: 20px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    10.0001% {
        left: 40px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    15% {
        left: 40px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    15.0001% {
        left: 60px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    20% {
        left: 60px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    20.0001% {
        left: 80px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    25% {
        left: 80px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    25.0001% {
        left: 100px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    30% {
        left: 100px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    30.0001% {
        left: 120px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    35% {
        left: 120px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    35.0001% {
        left: 140px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    40% {
        left: 140px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    40.0001% {
        left: 160px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    45% {
        left: 160px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    45.0001% {
        left: 180px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    50% {
        left: 180px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    50.0001% {
        left: 200px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    55% {
        left: 200px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
        background: #0061a9;
    }

    55.0001% {
        left: 220px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    60% {
        left: 220px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
        opacity: 1;
    }

    60.0001% {
        top: 50px;
        left: 240px;
        opacity: 0;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    90% {
        top: -40px;
        left: 300px;
        transform: rotate(0deg);
        animation-timing-function: linear;
    }

    100% {
        top: -40px;
        left: 20px;
        visibility: hidden;
        transform: rotate(0deg);
    }
}

@keyframes rollcube-reverse {
    0% {
        top: -40px;
        left: 20px;
        opacity: 0;
        transform: rotate(0deg);
        animation-timing-function: ease-in;
        background: #0061a9;
    }

    1% {
        top: 50px;
        left: 20px;
        opacity: 0;
        transform: rotate(0deg);
        opacity: 0;
    }

    5% {
        left: 20px;
        opacity: 1;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
        opacity: 1;
    }

    10% {
        left: 20px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    10.0001% {
        left: 40px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    15% {
        left: 40px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    15.0001% {
        left: 60px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    20% {
        left: 60px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    20.0001% {
        left: 80px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    25% {
        left: 80px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    25.0001% {
        left: 100px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    30% {
        left: 100px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    30.0001% {
        left: 120px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    35% {
        left: 120px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    35.0001% {
        left: 140px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    40% {
        left: 140px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    40.0001% {
        left: 160px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    45% {
        left: 160px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    45.0001% {
        left: 180px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    50% {
        left: 180px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
    }

    50.0001% {
        left: 200px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    55% {
        left: 200px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
        background: #ccc;
    }

    55.0001% {
        left: 220px;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    60% {
        left: 220px;
        transform: rotate(90deg);
        animation-timing-function: steps(1, end);
        opacity: 1;
    }

    60.0001% {
        top: 50px;
        left: 240px;
        opacity: 0;
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0.02, 0.96, 0.05);
    }

    90% {
        top: -40px;
        left: 300px;
        transform: rotate(0deg);
        animation-timing-function: linear;
    }

    100% {
        top: -40px;
        left: 20px;
        visibility: hidden;
        transform: rotate(0deg);
    }
}

.wall-builder {
    position: relative;
    width: 300px;
    height: 100px;
    margin: 0 auto;
    border-radius: 5px;
    background: var(--loader-wall-background);
    overflow: hidden;
}

.wall-builder .cube {
    position: absolute;
    top: -20px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--loader-wall-border);
    border-radius: 3px;
    background: #006ebf;
    box-sizing: border-box;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

.wall-builder .cube1 {
    background: #006ebf;
    animation-name: wall-cube-1;
}

.wall-builder .cube2 {
    background: #e2bf6b;
    animation-name: wall-cube-2;
}

.wall-builder .cube3 {
    background: #84c484;
    animation-name: wall-cube-3;
}

.wall-builder .cube4 {
    background: #006ebf;
    animation-name: wall-cube-4;
}

.wall-builder .cube5 {
    background: #84c484;
    animation-name: wall-cube-5;
}

.wall-builder .cube6 {
    background: #006ebf;
    animation-name: wall-cube-6;
}

.wall-builder .cube7 {
    background: #e2bf6b;
    animation-name: wall-cube-7;
}

.wall-builder .cube8 {
    background: #84c484;
    animation-name: wall-cube-8;
}

.wall-builder .cube9 {
    background: #84c484;
    animation-name: wall-cube-9;
}

.wall-builder .cube10 {
    background: #e2bf6b;
    animation-name: wall-cube-10;
}

.wall-builder .cube11 {
    background: #006ebf;
    animation-name: wall-cube-11;
}

.wall-builder .cube12 {
    background: #84c484;
    animation-name: wall-cube-12;
}

.wall-builder .cube13 {
    background: #006ebf;
    animation-name: wall-cube-13;
}

.wall-builder .cube14 {
    background: #e2bf6b;
    animation-name: wall-cube-14;
}

.wall-builder .cube15 {
    background: #84c484;
    animation-name: wall-cube-15;
}

@keyframes wall-cube-1 {
    0% {
        top: -20px;
        left: 60px;
        opacity: 1;
    }

    10% {
        top: 20px;
        left: 60px;
    }

    20% {
        top: 20px;
        left: 100px;
    }

    30%,
    95% {
        top: 60px;
        left: 100px;
        opacity: 1;
    }

    100% {
        top: 60px;
        left: 100px;
        opacity: 0;
    }
}

@keyframes wall-cube-2 {
    0%,
    10% {
        top: -20px;
        left: 240px;
        opacity: 1;
    }

    20% {
        top: 20px;
        left: 240px;
    }

    30% {
        top: 20px;
        left: 180px;
    }

    40%,
    95% {
        top: 60px;
        left: 180px;
        opacity: 1;
    }

    100% {
        top: 60px;
        left: 180px;
        opacity: 0;
    }
}

@keyframes wall-cube-3 {
    0%,
    15% {
        top: -20px;
        left: 100px;
        opacity: 1;
    }

    25% {
        top: 0px;
        left: 100px;
    }

    35% {
        top: 0px;
        left: 160px;
    }

    45%,
    95% {
        top: 60px;
        left: 160px;
        opacity: 1;
    }

    100% {
        top: 60px;
        left: 160px;
        opacity: 0;
    }
}

@keyframes wall-cube-4 {
    0% {
        top: -20px;
        left: 180px;
        opacity: 1;
    }

    10% {
        top: 40px;
        left: 180px;
    }

    20% {
        top: 40px;
        left: 140px;
    }

    30%,
    95% {
        top: 60px;
        left: 140px;
        opacity: 1;
    }

    100% {
        top: 60px;
        left: 140px;
        opacity: 0;
    }
}

@keyframes wall-cube-5 {
    0%,
    15% {
        top: -20px;
        left: 60px;
        opacity: 1;
    }

    25% {
        top: 40px;
        left: 60px;
    }

    35% {
        top: 40px;
        left: 120px;
    }

    45%,
    95% {
        top: 60px;
        left: 120px;
        opacity: 1;
    }

    100% {
        top: 60px;
        left: 120px;
        opacity: 0;
    }
}

@keyframes wall-cube-6 {
    0%,
    30% {
        top: -20px;
        left: 240px;
        opacity: 1;
    }

    40% {
        top: 20px;
        left: 240px;
    }

    50% {
        top: 20px;
        left: 160px;
    }

    60%,
    95% {
        top: 40px;
        left: 160px;
        opacity: 1;
    }

    100% {
        top: 40px;
        left: 160px;
        opacity: 0;
    }
}

@keyframes wall-cube-7 {
    0%,
    35% {
        top: -20px;
        left: 60px;
        opacity: 1;
    }

    45% {
        top: 0px;
        left: 60px;
    }

    55% {
        top: 0px;
        left: 120px;
    }

    65%,
    95% {
        top: 40px;
        left: 120px;
        opacity: 1;
    }

    100% {
        top: 40px;
        left: 120px;
        opacity: 0;
    }
}

@keyframes wall-cube-8 {
    0%,
    35% {
        top: -20px;
        left: 130px;
        opacity: 1;
    }

    45% {
        top: 20px;
        left: 130px;
    }

    55% {
        top: 20px;
        left: 100px;
    }

    65%,
    95% {
        top: 40px;
        left: 100px;
        opacity: 1;
    }

    100% {
        top: 40px;
        left: 100px;
        opacity: 0;
    }
}

@keyframes wall-cube-9 {
    0%,
    40% {
        top: -20px;
        left: 220px;
        opacity: 1;
    }

    50% {
        top: 20px;
        left: 220px;
    }

    60% {
        top: 20px;
        left: 180px;
    }

    70%,
    95% {
        top: 40px;
        left: 180px;
        opacity: 1;
    }

    100% {
        top: 40px;
        left: 180px;
        opacity: 0;
    }
}

@keyframes wall-cube-10 {
    0%,
    50% {
        top: -20px;
        left: 160px;
        opacity: 1;
    }

    60% {
        top: 20px;
        left: 160px;
    }

    70% {
        top: 20px;
        left: 140px;
    }

    80%,
    95% {
        top: 40px;
        left: 140px;
        opacity: 1;
    }

    100% {
        top: 40px;
        left: 140px;
        opacity: 0;
    }
}

@keyframes wall-cube-11 {
    0%,
    50% {
        top: -20px;
        left: 40px;
        opacity: 1;
    }

    60% {
        top: 0px;
        left: 40px;
    }

    70% {
        top: 0px;
        left: 100px;
    }

    80%,
    95% {
        top: 20px;
        left: 100px;
        opacity: 1;
    }

    100% {
        top: 20px;
        left: 100px;
        opacity: 0;
    }
}

@keyframes wall-cube-12 {
    0%,
    55% {
        top: -20px;
        left: 140px;
        opacity: 1;
    }

    65% {
        top: 0px;
        left: 140px;
    }

    75% {
        top: 0px;
        left: 120px;
    }

    85%,
    95% {
        top: 20px;
        left: 120px;
        opacity: 1;
    }

    100% {
        top: 20px;
        left: 120px;
        opacity: 0;
    }
}

@keyframes wall-cube-13 {
    0%,
    65% {
        top: -20px;
        left: 240px;
        opacity: 1;
    }

    75% {
        top: 20px;
        left: 240px;
    }

    85% {
        top: 20px;
        left: 180px;
    }

    95% {
        top: 20px;
        left: 180px;
        opacity: 1;
    }

    100% {
        top: 20px;
        left: 180px;
        opacity: 0;
    }
}

@keyframes wall-cube-14 {
    0%,
    65% {
        top: -20px;
        left: 180px;
        opacity: 1;
    }

    75% {
        top: 20px;
        left: 180px;
    }

    85% {
        top: 20px;
        left: 160px;
    }

    95% {
        top: 20px;
        left: 160px;
        opacity: 1;
    }

    100% {
        top: 20px;
        left: 160px;
        opacity: 0;
    }
}

@keyframes wall-cube-15 {
    0%,
    65% {
        top: -20px;
        left: 160px;
        opacity: 1;
    }

    75% {
        top: 0px;
        left: 160px;
    }

    85% {
        top: 0px;
        left: 140px;
    }

    95% {
        top: 20px;
        left: 140px;
        opacity: 1;
    }

    100% {
        top: 20px;
        left: 140px;
        opacity: 0;
    }
}

body .accents {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

body .accents > div {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
}

body .accents > div:nth-child(1),
body .accents > div:nth-child(2) {
    background-blend-mode: screen;
    top: 5%;
    height: 600px;
}

body .accents > div:nth-child(1) {
    left: 30%;
    background-image: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        var(--overlay-color-dark),
        transparent 100%
    );
}

body .accents > div:nth-child(2) {
    left: -30%;
    background-image: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        var(--overlay-color-dark),
        transparent 100%
    );
}

body .accents > div:nth-child(3) {
    top: 55%;
    left: 0;
    height: 300px;
    background-image: radial-gradient(
        ellipse 80% 50% at 50% 50%,
        var(--overlay-color-light),
        var(--overlay-color-light) 20%,
        transparent 80%,
        transparent 100%
    );
}

body .app-load-icon {
    position: fixed;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-image: url(/resources/logo.svg);
    background-size: 300px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 30px;
    animation: background-pulse 2s infinite none;
    border: none;
}

body .app-load-message {
    position: relative;
    width: 500px;
    top: calc(100% + 20px);
    left: -100px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    text-shadow: var(--overlay-text-shadw);
    color: var(--overlay-text-color);
    -webkit-user-select: none;
    user-select: none;
}

@media only screen and (max-width: 767px) {
    body .app-load-icon {
        top: calc(50% - 100px);
        left: calc(50% - 75px);
        width: 150px;
        height: 150px;
        background-size: 150px !important;
    }

    body .app-load-message {
        width: 430px;
        top: calc(100% + 20px);
        left: -130px;
        font-size: 17px;
    }
}

@keyframes background-pulse {
    0% {
        filter: saturate(1);
    }

    50% {
        filter: saturate(1.8);
    }
}

body.loaded .page-frame,
body.loaded .sidebar,
body.loaded .mobile-pin {
    animation: content-fadein 0.5s 1 forwards;
}

body.loaded .accents,
body.loaded .app-load-icon {
    pointer-events: none;
    animation: content-fadeout 0.5s 1 forwards;
}

@keyframes content-fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes content-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.spin {
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
}

.lds-ellipsis div {
    position: absolute;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ccc;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 16px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 24px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(8px, 0);
    }
}