body {
            font-family: Roboto, Arial, sans-serif;
            height: 100%;
            margin: 0;
            color: #FFF;
            background-color: transparent;
            touch-action: manipulation;
            -webkit-text-size-adjust: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;            
            background-size:contain;
            background-position:center;
        }

        body {
            background-color: #000;
        }

        * {
            padding: 0;
            margin: 0;
        }

        a {
            outline: none;
            -webkit-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .hidden {
            display: none !important;
        }

        #vlt, #loading-hint {
            visibility: hidden;
        }

        .outer {
            display: table;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .middle {
            display: table-cell;
            vertical-align: middle;
        }

        .inner {
            margin-left: auto;
            margin-right: auto;
            width: 300px;
            text-align: center;
        }

        .inner .logo {
            position: relative;
            width: 230px;
            margin: 0px auto;
        }

        .inner .logo img {
            width: 230px;
        }

        .inner .logo .default {
            top: 0;
            left: 0;
        }

        .inner .logo .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 0px;
            overflow: hidden;
        }

        .inner img.loader {
            width: 90px;
            height: 90px;
            margin-top: 20px;
        }

        .controls {
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .controls ul.left {
            position: fixed;
            display: flex;
            flex-direction: column;
            top: 50%;
            left: 10px;
            transform: translate(0, -50%);
            list-style-type: none;
        }

        .controls ul.right {
            position: fixed;
            display: flex;
            flex-direction: column;
            top: 50%;
            right: 10px;
            transform: translate(0, -50%);
            list-style-type: none;           
        }

        .controls ul.rightAutoSpinCount {
            position: fixed;
            display: flex;
            flex-direction: column;
            top: 50%;
            right: 10px;
            transform: translate(-252%, -56%);
            list-style-type: none;           
        }
        
        .controls ul.rightAutoSpin {
            position: fixed;
            display: flex;
            flex-direction: column;
            top: 50%;
            right: 10px;
            transform: translate(-150%, -80%);
            list-style-type: none;
        }

        .controls ul li {
            display: flex;
            justify-content: center;          
        }

        a.btn {
            color: #FFF;
            text-align: center;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: transform 0.025s;
        }

        a.btn:active {
            transform: scale(0.93);
            opacity: 0.8;
        }

        a.btn.btn-disabled {
            pointer-events: none;
            opacity: 0.5;
        }

        a.btn.btn-hidden {
            pointer-events: none;
            opacity: 0.5;
            display: none;
        }


        .svg_shadow {          
            filter: 
           
              drop-shadow(-1px -1px 1px #00000055) 
              drop-shadow(1px -1px 1px #00000055) 
              drop-shadow(1px 1px 1px #00000055)
              drop-shadow(-1px 1px 1px #00000055)
          }


        a.btn {
            border: .2rem solid rgba(255, 255, 255, 0.7);
            border-radius: 15px;
            -webkit-box-shadow:  0px 8px 8px 0px rgb(255, 255, 255,.7) inset;
            -moz-box-shadow:  0px 8px 8px 0px rgb(255, 255, 255,.7) inset;
            box-shadow:  0px 8px 8px 0px rgb(255, 255, 255,.7) inset,

                        -1px -1px 5px 0px #00000055,
                        1px -1px 5px 0px #00000055,
                        1px 1px 5px 0px #00000055,
                        -1px 1px 5px 0px #00000055;

             text-shadow: -1px -1px 2px #00000055 , 
                        1px -1px 2px #00000055, 
                        -1px 1px 2px #00000055, 
                        1px 1px 2px #00000055; 

            margin-top: 5px;
            margin-bottom: 5px;
             background: rgba(0, 0, 0, 0.3);           
        }

        a.btn svg {
            padding: 20px;
        }

        /* large buttons */
        a.btn-lg {
            width: 100px;
            height: 100px;
        }

        .controls a.btn-lg span#btnSpinButton-startText {           
            letter-spacing: 2px;
            font-size:20px;
            font-weight: 600;
            /* text-shadow: 2px 0px 0px rgba(255, 255, 255, 1);
            text-shadow: 0px 2px 0px rgba(255, 255, 255, 1);
            text-shadow: 2px 2px 0px rgba(255, 255, 255, 1); */

        }

        .controls a.btn-lg span#btnSpinButton-centerText {
            display: none;            
        }

        .controls a.btn-lg span#btnSpinButton-autospinText {
            font-size: 12px;
            width: 100px;
            color: #ffffffa8;
            margin-top: 10px;
            margin-bottom: -10px;
        }

        .controls #btnSpinButton {
            margin-top: 15px;
        }

        .controls #btnHome {
            margin-top: 5px;
        }

        .controls #btnSound > #sndDisabledIcon {
            display: none;
        }

        /* middle buttons */

        a.btn-md {
            width: 70px;
            height: 70px;
        }

        a.btn-sm, a.btn-wd {
            width: 60px;
            height: 60px;
        }

        a.btn-sm-autospin {
            width: 60px;
            height: 55px;
            margin-top: 1px;
            margin-bottom: 1px;

        }
        /* other controls */

        .controls .more {
            visibility: hidden;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        .controls .more ul.list {
            display: flex;
            position: fixed;
            top: 8px;
            left: 50%;
            transform: translate(-50%, 0);
            padding: 10px;
            justify-content: center;
            background: rgba(0, 0, 0, 0.76);
            flex-direction: row;
            border-radius: 15px;
            z-index: 10;
        }

        .controls .more ul.list li {
            margin-left: 5px;
            margin-right: 5px;
        }

        /* tap to fullscreen */

        .fs-overlay {
            visibility: hidden;
            position: absolute;
            background: rgba(0, 0, 0, 0.6);
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .fs-overlay span {
            font-size: 30px;
            color: #FFF;
            text-align: center;
            padding: 0 20px;
        }

        .fs-overlay .btn.snd {
            margin-left: 5px;
            margin-right: 5px;
        }

        .fs-overlay .sound {
            display: flex;
            justify-content: center;
        }

        @media (orientation: landscape) {
            a.btn-wd {
                width: 60px;
                height: 30px;
                border-radius: 8px;
            }

            a.btn-wd svg {
                padding: 5px;
            }

            .spanStakeMax {
                visibility: hidden;
            }
        }

        @media (orientation: portrait) {
            #vlt {
                height: auto !important;
            }

            .controls ul.left {
                flex-direction: column;
                bottom: 0;/*15%;*/
                left: 0;
                top: auto;
                transform: initial;
            }
/*
            @supports (-webkit-touch-callout: none) {
                .controls ul.left {              
                        bottom: 5%;
                    }	   
            }
*/
            .controls ul li a.btn {
                margin-left:5px;
                margin-right: 5px;
            }
            .controls ul.right {
                bottom: 0;
                right: auto;
                top: auto;
                left: 50%;
                transform: translate(-50%, 0%);
            }

            .controls ul.rightAutoSpinCount {
                bottom: 0;
                right: auto;
                top: auto;
                left: 50%;
                transform: translate(-50%, -80%);
            }

            .controls ul.rightAutoSpin {
                bottom: 0;
                right: auto;
                top: auto;
                left: 50%;
                transform: translate(-50%, -300%);
            }

            .controls .more ul.list {
                flex-direction: row;
                flex-wrap: wrap;
                width: 80px;
                bottom: 0;
                top: auto;
                left: auto;
                right: 0;
                transform: inherit;
                padding: 0;
            }                        
        }

        .spanStakeMax {
            padding-bottom:0px;
            letter-spacing: 2px;
            font-family: sans-serif;
            text-transform: uppercase;
            font-size: .9em;
            color: #fff;  
            text-align: center;          
            }

        .glow2 {
            padding-bottom:0px;
            letter-spacing: 5px;
            font-family: sans-serif;
            text-transform: uppercase;
            font-size: .8em;
            color: #fff;            
            }

        .glow4
        {
            padding-bottom:5px;
            letter-spacing: 5px;
            font-family: sans-serif;
            text-transform: uppercase;
            font-size: .9em;
            color: #fff;
            text-shadow:
            -0.2rem -0.2rem 1rem #009DE0,
            0.2rem 0.2rem 1rem #009DE0,
            0 0 2rem #009DE0,
            0 0 4rem #009DE0,
            0 0 6rem #009DE0,
            0 0 8rem #009DE0,
            0 0 10rem #009DE0;
        }


        .centered {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);           
        }
        .spinner,
        .spinner:after {
          border-radius: 50%;
          width: 10em;
          height: 10em;
        }
        .spinner {              
          position: relative;
          text-indent: -9999em;
          border-top: 1.1em solid rgba(255, 255, 255, 0.2);
          border-right: 1.1em solid rgba(255, 255, 255, 0.2);
          border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
          border-left: 1.1em solid #ffffff;
          -webkit-transform: translateZ(0);
          -ms-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-animation: spinner8 1.1s infinite linear;
          animation: spinner8 1.1s infinite linear;
        }
        @-webkit-keyframes spinner8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @keyframes spinner8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        #controls {
            pointer-events: none;
        }
        #controls a.btn {
            pointer-events: all;
        }