#loadScreen {
    position: fixed;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: var(--main-color);
    z-index: 9999999;
    opacity: 0.75;
}


/* The Modal (background) */

.modal, .allowSettingsPanelModal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    overflow: auto;
    background: #0000009e;
    z-index: 22;
    outline: none;
    height: 100%;
}

.allowSettingsPanelModal {
    height: unset !important;
    left: var(--menuBarWidth);
    bottom: 2.5vh;
}

/* Modal Content */

.modal-content {
    position: fixed;
    height: 100%;
    background-color: var(--main-color);
    color: var(--text-color-sidePanel);
    width: 100%;
}

.modal-footer {
    margin-top: 20px;
}


/* The Close Button */

#loadScreen_close {
    float: right;
    font-size: 2vmin;
    font-weight: bold;
    position: fixed;
    right: 5vmin;
    top: 5vmin;
    color: var(--header-textColor);
}
#loadScreen_contentTitle {
    font-size: 1.8em;
    margin-top: 20vh;
    color: var(--header-textColor);
}

#loadScreen_content {
    font-size: 1em;
    font-weight: normal;
    color: var(--header-textColor);
    font-family: 'UbuntuThin';
}

#loadScreen_close:hover,
#loadScreen_close:focus {
    color: #FFFF;
    opacity: 1;
    text-decoration: none;
    cursor: pointer;
}

#loadScreenLoadingGif {
    height: 40vmin;
    width: 40vmin;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loadScreenLoadingMaintenance {
    height: 40vmin;
    width: 40vmin;
}

#loadScreenProgressContainer {
    position: absolute;
    left: 50vw;
    bottom: 10vh;
    transform: translate(-50%, 0);
    display: none;
}

.loadScreenProgressBar:before {
    content: attr(data-label);
    font-size: 0.8em;
    vertical-align: 0;
    position:absolute;
    left:0;
    right:0;
    top: -1em;
    color: white;
}

.loadScreenProgressBar {
    height: 2em;
    width: 10vw;
}

#loadscreen_footer {
    display: none;
    top: 50%;
    left: 50%;
    position: absolute;
    height: 10vmin;
    width: 10vmin;
    /* margin-top: -10%; */
    transform: translate(-50%, -50%);
}

.wideWindow {
    width: 60% !important;
}

.centerWindow {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

#loadScreenMenuWindow {
    overflow: hidden;
    background-color: #0000009e;
    text-align: center;
    position: fixed;
    z-index: 9999;
    top: 6vmin;
    margin-left: 1vmin;
    left: var(--menuBarWidth);
    transition: 0.2s;
    opacity: 1;
    width: 72vmin;
    height: 66vmin;
    border-bottom-left-radius: 2vmin;
    border-bottom-right-radius: 2vmin;
    border: 1px solid var(--main-color);
    padding: 3vmin;
    display: none;
}


/* Modal Content */

.menuModal-content {
    position: relative;
    background-color: var(--background-color);
    color: var(--text-color-sidePanel);
    border-bottom-left-radius: 2vmin;
    border-bottom-right-radius: 2vmin;
    width: 100%;
    height: calc(100% - 4vmin);
    padding: 3vmin;
    margin-left: -3vmin;
    margin-top: 1vmin;
}

.menuModal-footer {
    margin-top: -5vmin;
}

#loadScreenLoadingGifMenu {
    height: 37vmin;
    width: 37vmin;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* The Close Button */

#loadScreenMenuWindow_close {
    float: right;
    font-size: 2vmin;
    font-weight: bold;
    color: var(--main-color);
}

.menuModal-header {
    height: 2vmin;
    width: 100%;
}

#loadScreenMenuWindow_close:hover,
#loadScreenMenuWindow_close:focus {
    color: var(--color-configurable);
    opacity: 1;
    text-decoration: none;
    cursor: pointer;
}


/* Add Animation */

@-webkit-keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

@keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

span[class*="l-"] {
    height: 8px;
    width: 8px;
    background: #000;
    display: inline-block;
    margin: 12px 20px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: translateX(-30px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        -webkit-transform: translateX(30px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes loader {
    0% {
        -moz-transform: translateX(-30px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        -moz-transform: translateX(30px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes loader {
    0% {
        -transform: translateX(-30px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        -transform: translateX(30px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes loader {
    0% {
        -ms-transform: translateX(-30px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        -ms-transform: translateX(30px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}