@media only screen and (max-width: 768px) {
    body:after {
        content: "Small";
        display: none;
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "Medium";
        display: none;
    }
}
@media only screen and (min-width: 1200px) {
    body:after {
        content: "Large";
        display: none;
    }
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-LightItalic.ttf");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-Thin.ttf");
    font-weight: 100;
}

@font-face {
    font-family: Roboto;
    src: url("../Fonts/Roboto/Roboto-ThinItalic.ttf");
    font-weight: 100;
    font-style: italic;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

*[role="button"]:focus {
    outline: none;
}

.elu-container {
    height: 100%;
    width: 100%;
}

.elu-adapt-to-view-port {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.elu-scrollable {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.elu-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -ms-flex-flow: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    overflow: visible;
}

.elu-column:not(.elu-size-adapt-to-content) {
    min-height: 0;
}

.elu-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    min-height: 0;
    overflow: visible;
}

.elu-row:not(.elu-size-adapt-to-content) {
    min-width: 100%;
}

.elu-size-adapt-to-content {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.elu-absolute-box {
    position: absolute;
    top: 43px;
    left: -86vw;
    z-index: 1000;
    width: 300px;
    height: 296px;
    overflow: scroll;
}

.elu-flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.elu-row:not(.elu-size-adapt-to-content) > *:first-child:last-child {
    width: 100%;
}

.elu-column:not(.elu-size-adapt-to-content) > *:first-child:last-child {
    height: 100%;
}

.elu-column.elu-size-adapt-to-content {
    min-height: auto;
}

.elu-row.elu-size-adapt-to-content {
    min-width: auto;
}

.elu-row.elu-size-fill-remaining-space > .elu-column {
    min-height: 100%;
}

.elu-column.elu-size-fill-remaining-space > .elu-row {
    min-width: 100%;
}

.elu-row.elu-size-fill-remaining-space,
.elu-row.elu-1 {
    min-height: 0; /* for Edge */
    min-width: 100%;
}

.elu-column.elu-size-fill-remaining-space,
.elu-column.elu-1 {
    min-width: 0; /* for Edge */
    min-height: 100%;
}

.elu-size-fill-remaining-space,
.elu-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.elu-display-mode-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    -webkit-box-pack: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
}

.elu-loading-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    -webkit-box-pack: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    min-height: 0;
    position: relative;
}

.elu-loading-wrapper:first-child:last-child {
    width: inherit;
    height: inherit;
}

.elu-display-mode-wrapper:first-child:last-child {
    width: inherit;
    height: inherit;
}

.elu-size-fill-remaining-space > *:first-child:last-child,
.elu-size-fill-remaining-space
    > .elu-display-mode-wrapper:first-child:last-child,
.elu-size-fill-remaining-space > .elu-loading-wrapper:first-child:last-child,
.elu-size-fill-remaining-space
    > .elu-display-mode-wrapper
    > *:first-child:last-child,
.elu-size-fill-remaining-space
    > .elu-loading-wrapper
    > *:first-child:last-child,
.elu-size-fill-remaining-space
    > .elu-loading-wrapper
    > .elu-display-mode-wrapper
    > *:first-child:last-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    height: 100%;
}

.elu-size-proportional > *:first-child:last-child,
.elu-size-proportional > .elu-display-mode-wrapper:first-child:last-child,
.elu-size-proportional > .elu-loading-wrapper:first-child:last-child,
.elu-size-proportional > .elu-display-mode-wrapper > *:first-child:last-child,
.elu-size-proportional > .elu-loading-wrapper > *:first-child:last-child,
.elu-size-proportional
    > .elu-loading-wrapper
    > .elu-display-mode-wrapper
    > *:first-child:last-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    height: 100%;
}

.elu-size-fixed > *:first-child:last-child,
.elu-size-fixed > .elu-display-mode-wrapper:first-child:last-child,
.elu-size-fixed > .elu-loading-wrapper:first-child:last-child,
.elu-size-fixed > .elu-display-mode-wrapper > *:first-child:last-child,
.elu-size-fixed > .elu-loading-wrapper > *:first-child:last-child,
.elu-size-fixed
    > .elu-loading-wrapper
    > .elu-display-mode-wrapper
    > *:first-child:last-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    height: 100%;
}

.elu-row.elu-size-fixed > * {
    max-height: 100%;
}

.elu-row.elu-size-fixed > * {
    max-width: 100%;
}

.elu-pos-not-absolute .elu-pos-absolute {
    position: static;
}

.elu-one {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.elu-one-by-two {
    -webkit-box-flex: 50%;
    -ms-flex: 50%;
    flex: 50%;
}

.elu-one-by-three {
    -webkit-box-flex: 33.33333%;
    -ms-flex: 33.33333%;
    flex: 33.33333%;
}

.elu-two-by-three {
    -webkit-box-flex: 66.666666%;
    -ms-flex: 66.666666%;
    flex: 66.666666%;
}

.elu-one-by-four {
    -webkit-box-flex: 25%;
    -ms-flex: 25%;
    flex: 25%;
}

.elu-three-by-four {
    -webkit-box-flex: 75%;
    -ms-flex: 75%;
    flex: 75%;
}

.elu-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.elu-space-around {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
}

.elu-space-center {
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.elu-space-start {
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}
.elu-space-end {
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

.elu-button {
    margin: 5px;
}

.elu-scrollable-y {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.elu-scrollable-y .elu-container {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

.elu-layout-sandbox .elu-component-container {
    width: 100px;
    height: 100px;
}

.elu-component-container {
    width: 100%;
    height: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
}

.elu-pos-absolute {
    position: absolute;
}

.elu-pos-relative {
    position: relative;
}

.elu-column .elu-component-container > *:not(.elu-component-container) {
    width: 100%;
}

.elu-row .elu-component-container > *:not(.elu-component-container) {
    height: 100%;
}

.elu-component-container > .elu-component-container {
    width: auto;
    height: auto;
}

.elu-column.elu-grid-debug {
    border-left: magenta solid 3px;
    border-right: magenta solid 3px;
}

.elu-row.elu-grid-debug {
    border-top: cyan solid 3px;
    border-bottom: cyan solid 3px;
}

.test {
    padding: 10px;
}

.elu-container.elu-debug .elu-row {
    /*border-top: magenta solid 1px;
	border-bottom: magenta solid 1px;*/
    border: magenta solid 1px;
    padding: 1rem;
}

.elu-container.elu-debug .elu-column {
    /*border-left: cyan solid 1px;
	border-right: cyan solid 1px;*/
    border: cyan solid 1px;
    padding: 1rem;
}

.elu-container.elu-debug *[data-elu-debug-name]:before {
    content: attr(data-elu-debug-name);
    position: absolute;
    top: 0;
    left: 0;
}

.elu-container.elu-debug .elu-row[data-elu-debug-name]:before {
    content: "+\2193" /*attr(data-elu-debug-name)*/;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    color: rgb(0, 0, 0);
}

.elu-container.elu-debug .elu-row:hover::before {
    background: rgb(0, 140, 255);
    color: rgb(253, 253, 253);
}

.elu-container.elu-debug .elu-row:hover::after {
    background: rgb(0, 140, 255);
    color: rgb(253, 253, 253);
}

.elu-container.elu-debug .elu-row:after {
    content: "-";
    font-size: 1rem;
    position: absolute;
    top: 0;
    right: 0;
    color: rgb(0, 0, 0);
}

.elu-container.elu-debug .elu-column[data-elu-debug-name]:before {
    content: "+\2192" /*attr(data-elu-debug-name)*/;
    font-size: 15px;
    position: absolute;
    top: 0;
    left: 0;
    color: rgb(0, 0, 0);
}

.elu-container.elu-debug .elu-column:hover::before {
    background: rgb(52, 90, 3);
    color: rgb(253, 253, 253);
}

.elu-container.elu-debug .elu-column:hover::after {
    background: rgb(52, 90, 3);
    color: rgb(253, 253, 253);
}

.elu-container.elu-debug .elu-column:after {
    content: "-";
    font-size: 15px;
    position: absolute;
    top: 0;
    right: 0;
    color: rgb(0, 0, 0);
}

.elu-container.elu-debug .elu-row:hover::after {
    background: rgb(0, 140, 255);
    color: rgb(253, 253, 253);
}
.elu-items-align-baseline {
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-align: baseline;
}
.elu-items-align-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.elu-items-alignflexEnd {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.elu-items-alignflexStart {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.elu-items-aligninitial {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
}

.elu-items-alignstretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.elu-items-aligninherit {
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
}

.elu-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.elu-elu-component {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
}

.elu-overflow-auto {
    overflow: auto;
}

/*
  We define a specific rule for Edge
  On Edge, when cursor is changed on a div containing SVG
  it can cause some elements to disapear (cf issue CM-7624).
  So we also change a css rule on svg element to force it
  to repaint but only on Edge to avoid useless rendering on other browsers
  (see also related issues https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3723601/
  and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18322813/)
*/
@supports not (-ms-ime-align: auto) {
    .elu-cursor-pointer {
        cursor: pointer;
    }
}

@supports (-ms-ime-align: auto) {
    .elu-cursor-pointer {
        cursor: pointer;
    }

    .elu-cursor-pointer svg {
        outline: 0px solid black;
    }
}