body div.modal-background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(89, 89, 89, 0.4);
    z-index: 2000;
}

body div.modal-centered-content {
    position: absolute;
    /* Prefered size */
    height: 10vh;
    width: 10vw;
    /* (100 - size) / 2 */
    top: 45vh;
    left: 45vw;
}

body div.modal-background.with-message div.modal-centered-content {
    background-color: white;
    border-radius: 15px;
    border: solid grey;
    border-width: 1px;
}

body div.modal-background div.modal-indicator-container {
    position: absolute;
    /* Prefered size */
    width: 10vw;
    /* Element is a square. In portrait-mode it's height is equal to it's width which is in vw.
  The offset-element is in vh though so the following calc() is required to find the center */
    top: calc(5vh - 5vw);
}

/* ToDo: Fix portrait "with-message" version (doesn't fit bounds correctly') */
body div.modal-background.with-message div.modal-indicator-container {
    width: 5vh;
    height: 5vh;
    /* Element is a square. In portrait-mode it's height is equal to it's width which is in vw.
  The offset-element is in vh though so the following calc() is required to find the center.
  But... since we're showing text, only render at the bottom half*/
    left: calc(5vw - 2.5vh);
    bottom: 0px;
    top: initial;
}

body div.modal-background.with-message div.modal-indicator {
    height: 10vh;
    width: 10vh;
}

body div.modal-background div.modal-indicator {
    background-image: url(/images/gear.svg);
    background-repeat: no-repeat;
    align-items: center;
    -webkit-animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
    transform-origin: 50% 50%;
    /* Prefered size */
    width: 10vw;
    height: 10vw;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}
@media screen and (orientation:landscape) {
    body div.modal-background div.modal-indicator-container {
        top: 0px;
        height: 10vh;
    }

    body div.modal-background.with-message div.modal-indicator-container {
        top: 5vh;
        height: 5vh;
    }

    body div.modal-background.with-message div.modal-indicator {
        margin-left: auto;
    }

    body div.modal-background div.modal-indicator {
        width: 10vh;
        height: 10vh;
        margin-left: calc(5vw - 5vh);
    }
}