@font-face {
    font-family: "lato";
    src: url("../fonts/lato/Lato-Regular.woff2");
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/lato/Lato-Thin.woff2");
    font-weight: 100;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "lato";
    src: url("../fonts/lato/Lato-Bold.woff2");
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

html, body {
    margin:         0;
    padding:        0;
    background:     #333333;
    width:          100%;
    height:         100%;
    overflow:       hidden;
    font-family:    "lato", "helvetica", sans-serif;
    font-weight:    400;
}

#root {
    width:          100%;
    height:         100%;
    overflow:       hidden;
}

#root * {
    box-sizing:     border-box;
    position:       absolute;
}

#root > * {
    width:  100%;
    height: 100%;
}

#root .text {
    width: 100%;
}

#root .flo-slider-input {
    padding:    0;
    margin:     0;
    width:      100%;
}

#root .badged {
    box-shadow:     0px 0px 4px rgba(180, 200, 220, 0.9);
}

flo-button flo-empty,
flo-button flo-container,
flo-button flo-label {
    pointer-events: none;
}

flo-label {
    display:                flex;
    flex-direction:         row;
    align-items:            center;
    user-select:            none;
    -moz-user-select:       none;
    -webkit-user-select:    none;
    -ms-user-select:        none;
}

flo-slider {
    display:                flex;
    flex-direction:         row;
    align-items:            center;
}

flo-popup {
    background-color:       rgba(24, 32, 32, 0.97);
    border-style:           solid;
    border-radius:          16px;
    border-width:           2px;
    border-color:           rgba(200, 220, 220, 1.0);
    box-shadow:             0px 1px 4px rgba(24, 32, 32, 0.8);
}

flo-popup > deco-beak {
    position:       absolute;
    overflow:       hidden;
    visibility:     hidden;
}

flo-popup > deco-beak.below {
    top:            -16px;
    height:         16px;
    left:           50%;
    width:          29px;
    margin-left:    -14px;
    visibility:     inherit;
}

flo-popup > deco-beak.above {
    bottom:         -16px;
    height:         16px;
    left:           50%;
    width:          29px;
    margin-left:    -14px;
    visibility:     inherit;
}

flo-popup > deco-beak.right {
    left:           -16px;
    width:          16px;
    top:            50%;
    height:         29px;
    margin-top:     -14px;
    visibility:     inherit;
}

flo-popup > deco-beak.left {
    right:          -16px;
    width:          16px;
    top:            50%;
    height:         29px;
    margin-top:     -14px;
    visibility:     inherit;
}

flo-popup > deco-beak:after {
    background-color:       rgba(24, 32, 32, 0.97);
    border-style:           solid;
    border-width:           2px;
    border-color:           rgba(200, 220, 220, 1.0);
    box-shadow:             0px 1px 4px rgba(24, 32, 32, 0.8);

    content:                "";
    display:                block;
    position:               absolute;
    transform:              rotate(45deg);
    width:                  20px;
    height:                 20px;
}

flo-popup > deco-beak.below:after {
    left:                   2px;
    top:                    5px;
}

flo-popup > deco-beak.above:after {
    left:                   2px;
    top:                    -13px;
}

flo-popup > deco-beak.right:after {
    top:                    2px;
    left:                   5px;
}

flo-popup > deco-beak.left:after {
    left:                   -13px;
    top:                    2px;
}

flo-cropping {
    overflow: hidden;
}

flo-scrolling {
    overflow:                   scroll;
    -webkit-overflow-scrolling: touch;
}

flo-scrolling > deco-scroll-canvas {
    z-index: -1000;
}