html{
    width: 100%;
    height: 100%;
}

body,
#app {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    height: 100vh;
    font-family: 'Nunito', 'sans-serif';
    font-weight: bold;
    z-index: 1000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;

    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

#app {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    height: 100%;
    width: 100%;


    display:flex;
    align-items: center;
    justify-content: center;
}

body,
html {
    overflow: hidden;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /*background-color: #0e385b !important;*/
}

/*.gpx-loader {
    background-image: url('../../../../player/assets/img/loading.gif');
    background-size: 100px 50px;
    background-position: center;
    background-repeat: no-repeat;
}
*/

.gpx-loader{
    width: 100%;
    height:100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    left: 0px;
    top: 0px;
    position:absolute;
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.gpx-loader svg{
    color: rgb(75 85 99);
    fill: #2563eb;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    width: 6rem;
    height: 6rem;
    display: block;
    vertical-align: middle;
}

/*.gpx-loader,*/
/*.gpx-loader:before,*/
/*.gpx-loader:after {*/
/*    border-radius: 50%;*/
/*    width: 2.5em !important;*/
/*    height: 2.5em !important;*/
/*    -webkit-animation-fill-mode: both;*/
/*    animation-fill-mode: both;*/
/*    -webkit-animation: load7 1.8s infinite ease-in-out;*/
/*    animation: load7 1.8s infinite ease-in-out;*/
/*}*/
/*.gpx-loader {*/
/*    font-size: 10px;*/
/*    margin: 80px auto !important;*/
/*    position: relative !important;*/
/*    text-indent: -9999em;*/
/*    -webkit-transform: translateZ(0);*/
/*    -ms-transform: translateZ(0);*/
/*    transform: translateZ(0);*/
/*    -webkit-animation-delay: -0.16s;*/
/*    animation-delay: -0.16s;*/
/*}*/
/*.gpx-loader:before,*/
/*.gpx-loader:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*}*/
/*.gpx-loader:before {*/
/*    left: -3.5em;*/
/*    -webkit-animation-delay: -0.32s;*/
/*    animation-delay: -0.32s;*/
/*}*/
/*.gpx-loader:after {*/
/*    left: 3.5em;*/
/*}*/
/*@-webkit-keyframes load7 {*/
/*    0%,*/
/*    80%,*/
/*    100% {*/
/*        box-shadow: 0 2.5em 0 -1.3em;*/
/*    }*/
/*    40% {*/
/*        box-shadow: 0 2.5em 0 0;*/
/*    }*/
/*}*/
/*@keyframes load7 {*/
/*    0%,*/
/*    80%,*/
/*    100% {*/
/*        box-shadow: 0 2.5em 0 -1.3em;*/
/*    }*/
/*    40% {*/
/*        box-shadow: 0 2.5em 0 0;*/
/*    }*/
/*}*/