body,
        html {
            background-color: #000;
            height: 100%
        }

        body {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            color: #fff;
            font: 400 16px Helvetica, Roboto, Arial, sans-serif;
            margin: 0;
            overflow: hidden;
            text-align: center;
            -webkit-user-select: none;
            user-select: none
        }

        .dN {
            display: none !important
        }

        .vd {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%
        }

        .vd__bar,
        .vd__barLn,
        .vd__cnt,
        .vd__cntOv,
        .vd__cntWMsg {
            left: 0;
            position: absolute;
            right: 0
        }

        .vd__cnt {
            height: 100%
        }

        .vd__cntLd,
        .vd__vd {
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .vd__vd {
            min-height: 100%;
            width: 100%
        }

        .vd__cntLd {
            height: 42px;
            visibility: hidden;
            width: 42px
        }

        .vd__cntWMsg {
            display: flex;
            justify-content: center;
            top: 20px
        }

        .vd__cntMsg {
            background-color: rgba(0, 0, 0, .8);
            font-size: 22px;
            padding: 10px
        }

        .vd__cntOv {
            bottom: 0;
            top: 0
        }

        .vd__f {
            height: 39px;
            left: 1%;
            right: 1%
        }

        .vd__f,
        .vd__f:before {
            bottom: 0;
            position: absolute
        }

        .vd__f:before {
            background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
            content: "";
            height: 98px;
            left: -1%;
            right: -1%
        }

        .vd__bar {
            background-color: hsla(0, 0%, 100%, .2);
            height: 3px;
            overflow: hidden;
            top: 0
        }

        .vd__barLn {
            background-color: red;
            height: 100%;
            transform: scaleX(0);
            transform-origin: 0 0
        }

        .vd__fL,
        .vd__fR {
            align-items: center;
            display: flex;
            height: 36px;
            position: absolute;
            top: 3px
        }

        .vd__fL {
            left: 0
        }

        .vd__fR {
            right: 0
        }

        .vd__fR .vd__fIc:last-child {
            height: 30px;
            width: 30px
        }

        .vd__fTm {
            color: #ddd;
            font-size: 13px
        }

        .vd__fTm .isCurrTime {
            color: #eee
        }

        .vd__fIc {
            fill: #fff;
            height: 36px;
            opacity: .9;
            width: 36px
        }

        .ldg,
        .ldg__circle,
        .ldg__half,
        .ldg__in {
            height: 100%;
            position: absolute;
            width: 100%
        }

        .ldg {
            animation: b 1.568s linear infinite
        }

        .ldg__in {
            animation: c 5.332s cubic-bezier(.4, 0, .2, 1) infinite both
        }

        .ldg__half {
            overflow: hidden;
            width: 51%
        }

        .ldg__half.isL {
            left: 0
        }

        .ldg__half.isR {
            right: 0
        }

        .ldg__circle {
            border: 6px solid;
            border-color: #ddd #ddd transparent;
            border-radius: 50%;
            box-sizing: border-box;
            width: 200%
        }

        .ldg__circle.isL {
            animation: d 1.333s cubic-bezier(.4, 0, .2, 1) infinite both;
            border-right-color: transparent;
            right: -100%
        }

        .ldg__circle.isR {
            animation: e 1.333s cubic-bezier(.4, 0, .2, 1) infinite both;
            border-left-color: transparent;
            left: -100%
        }

        .ar {
            animation: a .8s ease-in-out infinite;
            left: 50%;
            /* margin: 50px 0 0 -35px; */
            position: absolute;
            text-align: right;
            top: 50%;
            width: 200px;
            z-index: 1
        }

        .ar__ic {
            fill: #fff;
            stroke: #000;
            stroke-width: 5px;
            height: 90px;
            width: 90px
        }

        .ar__tx {
            letter-spacing: 1px;
            margin-top: 10px;
            text-shadow: 1px 1px 3px #000
        }

        .ar__tx,
        .msg {
            text-align: center
        }

        .msg {
            align-items: center;
            background-color: rgba(0, 0, 0, .75);
            color: #fff;
            display: flex;
            height: 100%;
            justify-content: center;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 2
        }

        .msg__tx {
            font-size: 32px;
            padding: 0 10px
        }

        .wNot {
            align-items: center;
            background-color: rgba(0, 0, 0, .6);
            display: none;
            height: 100%;
            justify-content: center;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 3
        }

        .dF {
            display: flex
        }

        .wNot.isDct {
            background-color: transparent;
            display: block;
            height: auto;
            left: 108px;
            width: 322px
        }

        .isPopup .wNot.isDct {
            left: 0
        }

        html:fullscreen .wNot.isDct {
            left: 40px
        }

        .wNot__cnt {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
            box-sizing: border-box;
            font: 400 12px sans-serif;
            max-width: 380px;
            padding: 17px 15px 9px 20px;
            text-align: left;
            width: 92%
        }

        .isDct .wNot__cnt {
            border: 1px solid #b2b2b2;
            border-radius: 3px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
            font-size: 15px;
            padding: 15px 15px 15px 20px;
            width: 100%
        }

        .wNot__btnCl {
            display: none
        }

        .isDct .wNot__btnCl {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            background: none;
            border: none;
            border-radius: 50%;
            display: block;
            height: 24px;
            margin: 0;
            outline: none;
            position: absolute;
            right: 5px;
            top: 5px;
            width: 24px
        }

        .wNot__btnCl:hover {
            background-color: #ebebec
        }

        .wNot__btnCl:active {
            background-color: #d2d3d5
        }

        .wNot__btnClIc {
            fill: #5e6167;
            height: 10px;
            width: 10px
        }

        .wNot__wTx {
            align-items: center;
            color: #757575;
            display: flex
        }

        .isDct .wNot__wTx {
            color: #000
        }

        .wNot__wTxT {
            line-height: 1.25;
            margin: 0 5px 0 8px
        }

        .isDct .wNot__wTxT {
            margin-right: 15px
        }

        .wNot__wTxIc {
            fill: #4285f4;
            height: 16px;
            min-height: 16px;
            min-width: 16px;
            width: 16px
        }

        .isDct .wNot__wTxIc {
            fill: #5f6368
        }

        .wNot__wTxN {
            display: none
        }

        .wNot__wBtn {
            display: flex;
            justify-content: flex-end;
            margin-top: 28px
        }

        .wNot__btnAl,
        .wNot__btnBl {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            background: none;
            border: none;
            border-radius: 2px;
            color: #256af3;
            font: inherit;
            margin-left: 7px;
            outline: none;
            padding: 8px 6px;
            text-shadow: .3px .3px 0 #256af3;
            transition: background-color .15s ease-in-out
        }

        .wNot__btnAl:hover,
        .wNot__btnBl:hover {
            background-color: #aaa
        }

        .isDct .wNot__btnAl,
        .isDct .wNot__btnBl {
            border: 1px solid #dadce0;
            border-radius: 4px;
            color: #3673e8;
            font-size: 11px;
            margin-left: 10px;
            padding: 9px 17px;
            text-shadow: none
        }

        .isDct .wNot__btnAl {
            order: 1
        }

        .isDct .wNot__btnAl:hover,
        .isDct .wNot__btnBl:hover {
            background-color: #fafafa
        }

        @keyframes a {
            0% {
                transform: translateY(-5px)
            }

            50% {
                transform: translateY(5px)
            }

            to {
                transform: translateY(-5px)
            }
        }

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

        @keyframes c {
            12.5% {
                transform: rotate(135deg)
            }

            25% {
                transform: rotate(270deg)
            }

            37.5% {
                transform: rotate(405deg)
            }

            50% {
                transform: rotate(540deg)
            }

            62.5% {
                transform: rotate(675deg)
            }

            75% {
                transform: rotate(810deg)
            }

            87.5% {
                transform: rotate(945deg)
            }

            to {
                transform: rotate(3turn)
            }
        }

        @keyframes d {
            0% {
                transform: rotate(130deg)
            }

            50% {
                transform: rotate(-5deg)
            }

            to {
                transform: rotate(130deg)
            }
        }

        @keyframes e {
            0% {
                transform: rotate(-130deg)
            }

            50% {
                transform: rotate(5deg)
            }

            to {
                transform: rotate(-130deg)
            }
        }

        @media(min-width:425px) {
            .msg__tx {
                font-size: 52px
            }
        }

        @media(min-width:650px) {
            .ar {
                left: 180px;
                margin: 0;
                text-align: center;
                top: 130px
            }

            .isFirefox .ar {
                left: 250px;
                top: 115px
            }

            .isYandex .ar {
                left: auto;
                right: 180px;
                top: 160px
            }

            .isPopup .ar {
                left: 40px;
                top: 130px
            }

            .isYandex.isPopup .ar {
                left: auto;
                top: 180px
            }

            html:fullscreen .ar {
                left: 75px;
                top: 125px
            }

            html:fullscreen .isFirefox .ar {
                left: 15px
            }

            .vd__cntLd.isVs {
                visibility: visible
            }

            .vd__cntWMsg {
                margin-top: 50px;
                opacity: 0;
                top: 50%;
                transition: opacity 1s ease-out;
                visibility: hidden
            }

            .vd__cntWMsg.isVs {
                opacity: 1;
                visibility: visible
            }

            .vd__cntMsg {
                font-size: 28px;
                padding: 20px
            }
        }