/* ToDo: Rewrite using var() and calc() to apply a "scale" */

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(/img/svg/loading_modal.svg);
    background-repeat: no-repeat;
    position: relative;
    margin: auto auto;
    height: 50px;
    width: 50px;
    align-items: center;
    -webkit-animation: spin 10s linear infinite;
    -moz-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}

@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);
    }
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}