@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/SegoeUI-Bold.woff2') format('woff2'),
        url('../fonts/SegoeUI-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/SegoeUI-Light.woff2') format('woff2'),
        url('../fonts/SegoeUI-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/SegoeUI-Regular.woff2') format('woff2'),
        url('../fonts/SegoeUI-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
    box-sizing: border-box;
}

html {
    font-family: 'Segoe UI';
    font-size: 62.5%;
}

body, html, #Stage {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -ms-content-zooming: none;
    -ms-touch-action: none;
    touch-action: none;
    background: #f4f4f4;
}

#Stage,
#Stage * {
    position: absolute;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
}

#Stage * input,  #Stage * textarea {
    -moz-user-select: auto;
    -webkit-user-select: auto;
    -o-user-select: auto;
    -ms-user-select: auto;
    -webkit-tap-highlight-color: auto;
}

#Stage br:not([class*='vjs']) ,
#Stage span:not([class*='vjs']) {
    position: relative;
}

.VideoLayoutWrapper__video-wrapper-container::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.spinner-anim {
    animation: rotate 3s infinite linear;
    border-right: 2px solid #bbb;
    border-left: 2px solid #f4f4f4;
    border-top: 2px solid #bbb;
    border-bottom: 2px solid #f4f4f4;
    border-radius: 50%;
}

.spinner-anim-alt {
    animation: rotate 3s infinite linear;
    border-right: 2px solid #0D152B;
    border-left: 2px solid #f4f4f4;
    border-top: 2px solid #0D152B;
    border-bottom: 2px solid #f4f4f4;
    border-radius: 50%;
}

.infinite-increase {
    animation: increase 3s infinite;
}

.infinite-increase--2 {
    animation: increase 3s 1.5s infinite;
}

.LoaderView {
    background: #f4f4f4;
}

.LoaderViewText {
    font: 16px Arial;
    color: #aaa;
}

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

.bounce-fade {
    animation: fade 3s infinite linear;
}

@keyframes fade {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

@keyframes increase {
    from { transform:translateX(-100%); width: 10%; }
    to { transform:translateX(205%); width: 50%;}
}

#Stage .TimelineDOMContent *,
#Stage .XboxTutorial *,
#Stage .ModalShare *,
#Stage .Modal *,
#Stage .Tutorial *,
#Stage .Panel *,
#Stage .Notifications *,
#Stage .Page *:not([class*='vjs']),
#Stage .Modal__wrapper * {
    position: relative;
}