/* ------------fonts------------------- */
/* cyrillic-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJB9cme_xc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJB9cme_xc.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJB9cme_xc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJB9cme_xc.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJB9cme_xc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJB9cme_xc.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDJB9cme.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdh18S0xR41YDw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdo18S0xR41YDw.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdg18S0xR41YDw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdv18S0xR41YDw.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdj18S0xR41YDw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdi18S0xR41YDw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSds18S0xR41.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhdu3cOWxy40.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxdu3cOWxy40.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxdu3cOWxy40.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBdu3cOWxy40.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBdu3cOWxy40.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRdu3cOWxy40.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu3cOWxw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ------------fonts------------------- */

* {
    font-family: 'Source Sans Pro', sans-serif;
}

html, body, #magic, #magic > div:not(.overlay)
{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div, ul, li {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

#magic, #magic > div:not(.overlay)
{
    min-height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: scroll;
}

@keyframes swipeIn {
    from {}
    to { left:0%; }
}

@-moz-keyframes swipeIn { /* Für Firefox */
    from {}
    to { left:0%; }
}

@-webkit-keyframes swipeIn { /* Für Safari und Chrome */
    from {}
    to { left:0%; }
}

@-o-keyframes swipeIn { /* Für Opera */
    from {}
    to { left:0%; }
}

@keyframes swipeOut {
    from {}
    to { left: 100%; }
}

@-moz-keyframes swipeOut { /* Für Firefox */
    from {}
    to { left: 100%; }
}

@-webkit-keyframes swipeOut { /* Für Safari und Chrome */
    from {}
    to { left: 100%; }
}

@-o-keyframes swipeOut { /* Für Opera */
    from {}
    to { left: 100%; }
}

body {
    padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
    background-color: #222b32;
    width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
    height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

body.light {
    background-color: #ccd2d6;
}

#magic {
    position: relative;
    width: 100%;
    height: 100%;
}

#magic div.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    z-index: 2;
    animation: swipeIn 0.3s ease-in forwards;
    background-color: #151e26;
    background-image: url('../img/background.jpg');
    background-size: cover;
}

body.light #magic div.overlay {
    background-image: url('../img/background-light.jpg');
}

#magic.with-toolbar div.overlay {
    calc(100% - 54px);
}

#magic div.overlay.full-overlay {
    bottom: 0 !important;
    z-index: 100;
}

#magic > div.overlay.transparent,
body.light #magic > div.overlay.transparent {
    background: transparent;
}

#magic > div.page {
    background-image: url('../img/background.jpg');
    background-size: cover;
}

body.light #magic > div.page {
    background-image: url('../img/background-light.jpg');
}

#magic > div.overlay > div.scroller {
    width: 100%;
    overflow: hidden;
    height: calc(100% - 74px);
    margin-top: 74px;
    bottom: 0;
    top: 0;
    z-index: 1;
    overflow-y: scroll;
}

#magic.without-toolbar > div.overlay > div.scroller {
    height: calc(100% - 74px);
}

#magic > div.overlay > div.scroller.profile-detail {
    margin-top: 59px;
    height: calc(100% - 59px);
}

#magic > div.overlay header.default-header {
    position: fixed;
    width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
    z-index: 2;
    top: env(safe-area-inset-top);
    border-bottom: 6px solid #141d25;
}

body.light #magic > div.overlay header.default-header {
    border-bottom: 6px solid #87949d;
}



body.light #magic > div.overlay header.default-header {
    background-color: #ccd2d6;
}

#magic > div.overlay .story-screen header.default-header {
    border-bottom: 0 none;
}

#magic.with-toolbar > div.overlay.in-front {
    z-index: 100;
}

#magic.with-toolbar > div.overlay,
#magic.with-toolbar > div.overlay .scroller {
    bottom: 54px;
}

#magic.with-toolbar > div.overlay.full-space,
#magic.with-toolbar > div.overlay.full-space .scroller {
    bottom: 40px;
}

button:active,
button:focus{
    outline: none;
    border: none;
}

.lds-spinner {
    color: #fff;
    display: inline-block;
    position: absolute;
    left: calc(50% - 12px);
    top: 4px;
    width: 25px;
    height: 25px;
}

body.light .lds-spinner {
    color: #141d25;
}

.lds-spinner div {
    transform-origin: 10px 10px;
    animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: -4px;
    left: 10px;
    width: 3px;
    height: 10px;
    border-radius: 40%;
    background: #fff;
}

body.light .lds-spinner div:after {
    background-color: #141d25;
}

.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}
@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.social-title {
    margin: 20px;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    padding: 5px 3px;
    font-size: 12px;
    position: relative;
}

body.light .social-title {
    border: 2px solid #141d25;
    color: #141d25;
    background-color: #e5e5e5;
}

.social-title:after,
.overlay .impressum h2:after {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    bottom: -6px;
    content: ' ';
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-color: #222b32;
    border-radius: 20px 0 0 0;
}

body.light .social-title:after,
body.light .overlay .impressum h2:after {
    border-right: 2px solid #141d25;
    border-bottom: 2px solid #141d25;
    background-color: #e5e5e5;
    bottom: -7px;
}

.overlay .impressum div.content {
    padding: 0 5% 10% 5%;
    color: #fff;
}

#magic > div.overlay .impressum.scroller {
    margin-top: 54px;
}

.my-name-screen label.button-bottom {
    position: relative;
    bottom: 0;
}

.overlay .impressum h2 {
    font-size: 16px;
    color: #c3c9ce;
    text-align: center;
    font-weight: bold;
    padding-bottom: 20px;
    display: block;
    border-bottom: 2px solid #c3c9ce;
    position: relative;
}

.overlay .impressum p {
    font-size: 16px;
    color: #c3c9ce;
    text-align: left;
    font-weight: normal;
    padding: 15px 0;
}

.overlay .impressum p a {
    color: #c3c9ce;
    text-decoration: none;
}

.overlay .impressum p.center {
    text-align: center;
}

.overlay .impressum img.playing-history-logo {
    width: 150px;
}

.my-name-screen .requestCode {
    color: #fff;
    width: 60%;
    margin: auto;
    text-align: center;
    display: block;
}

body.light .my-name-screen .requestCode {
    color: #141d25;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#magic::-webkit-scrollbar,
#magic .page::-webkit-scrollbar,
.scroller::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#magic,
#magic .page,
.scroller {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}