html {
    font-size: 10px;
    overflow: auto;
}

/* Hide content to avoid black screen while theme is not applied by startup.js */
/* startup.js script apply theme and make content visible*/
body {
    visibility: hidden;
    min-width: 500px;
    min-height: 580px;
}

body,
html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: white;
}

.progress-holder {
    position: fixed;
    z-index: 100000;
    height: 100%;
    width: 100%;
    background: #161616;
}

.progress-holder.environment {
    z-index: 1000000;
    display: none;
}

.progress-holder .progress-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    text-align: center;
    line-height: 16px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.progress-holder .progress-loading .text {
    margin-top: 34px;
    margin-bottom: 21px;
    font-size: 20px;
    color: #fff;
    font-family: 'Arial', sans-serif;
}

.md-progress-linear .md-container {
    display: block;
    position: relative;
    overflow: hidden;
    height: 4px;
    width: 120px;
    margin: 0 auto;
}

.md-progress-linear .md-container {
    background-color: #555555;
}

.md-progress-linear .md-container.md-mode-indeterminate .md-bar1 {
    -webkit-animation: loadingBar1 3s infinite;
    animation: loadingBar1 3s infinite;
}

.md-progress-linear .md-container.md-mode-indeterminate .md-bar2 {
    -webkit-animation: loadingBar2 3s infinite;
    animation: loadingBar2 3s infinite;
}

.md-progress-linear .md-container .md-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
}

.md-progress-linear .md-bar {
    background-color: #0288d1;
}

.light-theme .progress-holder,
.light-flat-theme .progress-holder,
.gold-theme .progress-holder {
    background: #fff;
}

.light-theme .progress-holder .progress-loading .text,
.light-flat-theme .progress-holder .progress-loading .text,
.gold-theme .progress-holder .progress-loading .text {
    color: #1c222d;
}

.light-theme .md-progress-linear .md-container,
.light-flat-theme .md-progress-linear .md-container,
.gold-theme .md-progress-linear .md-container {
    background-color: #e0e6e8;
}

.light-theme .md-progress-linear .md-bar,
.light-flat-theme .md-progress-linear .md-bar {
    background-color: #1a72f5;
}

.gold-theme .md-progress-linear .md-bar {
    background-color: #9c8633;
}

.logo {
    height: 60px;
    width: 318px;
}

@keyframes loadingBar1 {
    0% {
        transform: scaleX(0.4) translate3d(-250px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-250px, 0, 0);
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
    }

    20% {
        transform: scaleX(0.4) translate3d(-250px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-250px, 0, 0);
        animation-timing-function: cubic-bezier(0.82, 0.26, 0.78, 0.92);
        -webkit-animation-timing-function: cubic-bezier(
            0.82,
            0.26,
            0.78,
            0.92
        );
    }

    46% {
        transform: scaleX(0.4) translate3d(-100px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-100px, 0, 0);
        animation-timing-function: cubic-bezier(0.29, 0.72, 0.73, 0.4);
        -webkit-animation-timing-function: cubic-bezier(
            0.29,
            0.72,
            0.73,
            0.4
        );
    }

    80% {
        transform: scaleX(0.83) translate3d(100.8px, 0, 0);
        -webkit-transform: scaleX(0.83) translate3d(100.8px, 0, 0);
        animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
        -webkit-animation-timing-function: cubic-bezier(
            0.22573,
            0,
            0.23365,
            1.37098
        );
    }

    to {
        transform: scaleX(0.4) translate3d(250px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(250px, 0, 0);
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
    }
}

@-webkit-keyframes loadingBar1 {
    0% {
        transform: scaleX(0.4) translate3d(-250px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-250px, 0, 0);
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
    }

    20% {
        transform: scaleX(0.4) translate3d(-250px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-250px, 0, 0);
        animation-timing-function: cubic-bezier(0.82, 0.26, 0.78, 0.92);
        -webkit-animation-timing-function: cubic-bezier(
            0.82,
            0.26,
            0.78,
            0.92
        );
    }

    46% {
        transform: scaleX(0.4) translate3d(-100px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-100px, 0, 0);
        animation-timing-function: cubic-bezier(0.29, 0.72, 0.73, 0.4);
        -webkit-animation-timing-function: cubic-bezier(
            0.29,
            0.72,
            0.73,
            0.4
        );
    }

    80% {
        transform: scaleX(0.83) translate3d(100.8px, 0, 0);
        -webkit-transform: scaleX(0.83) translate3d(100.8px, 0, 0);
        animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
        -webkit-animation-timing-function: cubic-bezier(
            0.22573,
            0,
            0.23365,
            1.37098
        );
    }

    to {
        transform: scaleX(0.4) translate3d(250px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(250px, 0, 0);
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
    }
}

@keyframes loadingBar2 {
    0% {
        transform: scaleX(0.4) translate3d(-200.2px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-200.2px, 0, 0);
        animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
        -webkit-animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
    }

    19% {
        transform: scaleX(0.57) translate3d(-100.7px, 0, 0);
        -webkit-transform: scaleX(0.57) translate3d(-100.7px, 0, 0);
        animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
        -webkit-animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
    }

    55% {
        transform: scaleX(0.91) translate3d(150.4px, 0, 0);
        -webkit-transform: scaleX(0.91) translate3d(150.4px, 0, 0);
        animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
        -webkit-animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
    }

    to {
        transform: scaleX(0.5) translate3d(250.76px, 0, 0);
        -webkit-transform: scaleX(0.5) translate3d(250.76px, 0, 0);
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
    }
}

@-webkit-keyframes loadingBar2 {
    0% {
        transform: scaleX(0.4) translate3d(-200.2px, 0, 0);
        -webkit-transform: scaleX(0.4) translate3d(-200.2px, 0, 0);
        animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
        -webkit-animation-timing-function: cubic-bezier(
            0.20503,
            0.05705,
            0.57661,
            0.45397
        );
    }

    19% {
        transform: scaleX(0.57) translate3d(-100.7px, 0, 0);
        -webkit-transform: scaleX(0.57) translate3d(-100.7px, 0, 0);
        animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
        -webkit-animation-timing-function: cubic-bezier(
            0.15231,
            0.19643,
            0.64837,
            1.00432
        );
    }

    55% {
        transform: scaleX(0.91) translate3d(150.4px, 0, 0);
        -webkit-transform: scaleX(0.91) translate3d(150.4px, 0, 0);
        animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
        -webkit-animation-timing-function: cubic-bezier(
            0.25776,
            -0.00316,
            0.21176,
            1.38179
        );
    }

    to {
        transform: scaleX(0.5) translate3d(250.76px, 0, 0);
        -webkit-transform: scaleX(0.5) translate3d(250.76px, 0, 0);
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
    }
}