.console {
    box-sizing: border-box;
    color: #fff;
    position: absolute;
    z-index: 50
}

.console ::-webkit-scrollbar {
    width: 10px
}

.console ::-webkit-scrollbar-track {
    background: gray
}

.console ::-webkit-scrollbar-thumb {
    background: #888
}

.console ::-webkit-scrollbar-thumb:hover {
    background: #555
}

.console ::-webkit-scrollbar {
    width: 1em
}

.console ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,.3)
}

.console ::-webkit-scrollbar-thumb {
    background-color: #a9a9a9;
    outline: 1px solid #708090
}

.json-viewer {
    color: #000;
    padding-left: 20px
}

.json-viewer ul {
    border-left: 1px dotted #ccc;
    list-style-type: none;
    margin: 0 0 0 1px;
    padding-left: 2em
}

.json-viewer .hide {
    display: none
}

.json-viewer .type-string {
    color: #0b7500
}

.json-viewer .type-date {
    color: #cb7500
}

.json-viewer .type-boolean {
    color: #1a01cc;
    font-weight: 700
}

.json-viewer .type-number {
    color: #1a01cc
}

.json-viewer .type-null,.json-viewer .type-undefined {
    color: #90a
}

.json-viewer a.list-link {
    color: #000;
    position: relative;
    text-decoration: none
}

.json-viewer a.list-link:before {
    color: #aaa;
    content: "\25BC";
    display: inline-block;
    left: -1em;
    position: absolute;
    width: 1em
}

.json-viewer a.list-link.collapsed:before {
    content: "\25B6"
}

.json-viewer a.list-link.empty:before {
    content: ""
}

.json-viewer .items-ph {
    color: #aaa;
    padding: 0 1em
}

.json-viewer .items-ph:hover {
    text-decoration: underline
}

.add-height {
    height: auto!important
}

.rotate90 {
    transform: rotate(0deg)!important
}

.jv-wrap {
    display: flex
}

.jv-folder {
    cursor: pointer
}

.jv-light-symbol {
    color: #000;
    font-weight: 700
}

.jv-light-con {
    background: #fff;
    color: #000;
    font-family: monospace;
    height: 100%;
    overflow: auto;
    width: 100%
}

.jv-light-current {
    line-height: 30px;
    padding-left: 20px;
    position: relative
}

.jv-light-left {
    display: inline-block
}

.jv-light-rightString {
    color: #7a3e9d;
    display: inline-block
}

.jv-light-rightBoolean {
    color: #448c27;
    display: inline-block
}

.jv-light-rightNumber {
    color: #f53232;
    display: inline-block
}

.jv-light-rightNull {
    color: #9c5d27;
    display: inline-block
}

.jv-light-rightObj {
    display: block!important;
    height: 0;
    overflow: hidden
}

.jv-light-folder {
    border: 4px solid transparent;
    border-top: 8px solid #484d50;
    cursor: pointer;
    display: inline-block;
    height: 0;
    margin-left: -15px;
    position: absolute;
    text-align: center;
    top: 11px;
    transform: rotate(-90deg);
    transform-origin: 50% 25%;
    width: 0
}

.jv-dark-con {
    background: rgba(0,0,0,.8);
    color: #fff;
    font-family: monospace;
    height: 100%;
    overflow: auto;
    width: 100%
}

.jv-dark-symbol {
    color: #fff;
    font-weight: 700
}

.jv-dark-current {
    line-height: 20px;
    padding-left: 20px;
    position: relative
}

.jv-dark-left,.jv-dark-rightString {
    display: inline-block;
    font-size: 11px
}

.jv-dark-rightString {
    color: #66d9ef
}

.jv-dark-rightBoolean {
    color: #a6e22e;
    display: inline-block;
    font-size: 11px
}

.jv-dark-rightNumber {
    color: #f92672;
    display: inline-block;
    font-size: 11px
}

.jv-dark-rightNull {
    color: #e6db74;
    display: inline-block;
    font-size: 11px
}

.jv-dark-rightObj {
    display: block!important;
    font-size: 11px;
    height: 0;
    overflow: hidden
}

.jv-dark-folder {
    border: 4px solid transparent;
    border-top-color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-left: -15px;
    position: absolute;
    text-align: center;
    top: 9px;
    transform: rotate(-90deg);
    transform-origin: 50% 25%;
    width: 7px
}

.buttonDiv {
    background: rgba(21,5,5,.5);
    height: 10%;
    position: absolute;
    width: 100%;
    z-index: 50
}

.console-button {
    align-items: center;
    appearance: none;
    background-color: #fcfcfd;
    border-radius: 4px;
    border-width: 0;
    box-shadow: 0 2px 4px rgba(45,35,66,.4),0 7px 13px -3px rgba(45,35,66,.3),inset 0 -3px 0 #d6d6e7;
    box-sizing: border-box;
    color: #36395a;
    cursor: pointer;
    font-family: JetBrains Mono,monospace;
    font-size: 12px;
    height: 12px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 8px;
    padding-right: 8px;
    position: absolute;
    text-align: left;
    text-decoration: none;
    touch-action: manipulation;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    will-change: box-shadow,transform
}

.console-info-drag-button {
    left: 0;
    text-transform: uppercase;
    top: 15%
}

.close-button {
    right: 0;
    text-transform: uppercase;
    top: 15%
}

.minus-width-button {
    right: 50px;
    text-transform: uppercase;
    top: 15%
}

.plus-width-button {
    left: 50px;
    text-transform: uppercase;
    top: 15%
}

.clear-info-button {
    right: 40%;
    text-transform: uppercase;
    top: 15%
}

#customreact-content {
    background-color: #222;
    height: 100%;
    pointer-events: all;
    position: absolute;
    position: relative;
    z-index: 10
}

#customreact-content #console-container {
    background-color: #fff;
    bottom: 0;
    box-shadow: 2px 0 5px rgba(0,0,0,.2);
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 70vw
}

#customreact-content .console-header {
    padding: 1% 0 1% 2%
}

#customreact-content .fastFBut {
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: .8em;
    height: 85px;
    letter-spacing: .1em;
    padding: 4px;
    position: absolute;
    top: 17%;
    width: 50px;
    writing-mode: vertical-rl
}

#customreact-content .console-title {
    color: gray;
    font-size: 16px;
    font-weight: 700
}

#customreact-content input[type=file] {
    color: #fff;
    font-size: 10px
}

#customreact-content .console-toggler {
    color: #000;
    cursor: pointer
}

#customreact-content .console-tabs {
    background-color: #000;
    box-shadow: 0 0 15px 0 white(0,0,0,.1);
    display: flex;
    left: 0;
    overflow-y: auto;
    position: sticky;
    scrollbar-width: none;
    top: 0;
    width: 100%;
    z-index: 100
}

#customreact-content .adjustVolume {
    color: #fff;
    font-size: 12px;
    padding-bottom: 5px;
    padding-top: 5px
}

#customreact-content .state-1 {
    background-color: #007bff
}

#customreact-content .state-2 {
    background-color: #28a745
}

#customreact-content .state-3 {
    background-color: #ffc107
}

#customreact-content .state-4 {
    background-color: #dc3545
}

#customreact-content .control-tab {
    padding: 1% 0 1% 2%
}

#customreact-content .console-tab {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: transparent;
    box-sizing: border-box;
    color: #888;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    height: auto;
    line-height: normal;
    margin: 0 3.2px;
    outline: 0;
    padding: 14px 8.8px;
    position: relative;
    text-transform: capitalize;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
    z-index: 1
}

#customreact-content .console-tab.active {
    background-color: #000;
    border-bottom: 1px solid #fff;
    color: #fff
}

#customreact-content .openBut {
    background-color: #fff;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: .8em;
    height: 60px;
    letter-spacing: .1em;
    padding: 4px;
    position: absolute;
    right: -22px;
    top: 70%;
    width: 50px;
    writing-mode: vertical-rl
}

#customreact-content .tabs>.content {
    height: 70vh;
    overflow-x: hidden;
    overflow-y: scroll
}

#customreact-content .console-content {
    height: 100%;
    width: 100%
}

#customreact-content input[type=checkbox].customToggleButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 3em;
    cursor: pointer;
    font-size: 30px;
    height: 1.2em;
    outline: none;
    position: relative;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    width: 70px
}

#customreact-content input[type=checkbox].customToggleButton:checked {
    background: green
}

#customreact-content input[type=checkbox].customToggleButton:after {
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
    box-shadow: 0 0 .25em rgba(0,0,0,.3);
    content: "";
    height: 1.2em;
    left: 0;
    position: absolute;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    width: 1.2em
}

#customreact-content input[type=checkbox].customToggleButton:checked:after {
    left: calc(100% - 1.2em)
}

#customreact-content .tabInnerTitle {
    font-size: 40px;
    margin-top: 40px
}

#customreact-content .incrementButtons {
    height: fit-content;
    margin-bottom: 5%;
    margin-top: 5%
}

#customreact-content .customContent,#customreact-content .incrementButtons {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(5,1fr)
}

#customreact-content .customContent {
    height: 100%
}

#customreact-content .customPlayerSymbolsContent {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6,1fr);
    height: fit-content
}

#customreact-content .symbolsGrid {
    display: grid
}

#customreact-content .reelsGrid {
    display: grid;
    grid-auto-flow: row
}

#customreact-content .buttonHolder {
    align-items: center;
    display: flex;
    font-size: 12px;
    justify-content: end
}

#customreact-content .symbol {
    cursor: pointer;
    pointer-events: inherit
}

#customreact-content .symbol.selected {
    border: 1px solid #fff;
    opacity: 1
}

#customreact-content .symbol.unselected {
    opacity: .6
}

#customreact-content .symbolsHolder {
    align-self: flex-end;
    display: grid;
    grid-auto-rows: max-content;
    grid-column-start: 2;
    grid-template-columns: repeat(5,1fr);
    order: 2;
    position: absolute;
    top: 2.5%
}

#customreact-content .customReelSymbolsHolder {
    grid-gap: 1%;
    align-self: flex-start;
    display: grid;
    grid-auto-rows: max-content;
    grid-column-start: 1;
    grid-template-columns: repeat(5,1fr);
    order: 1;
    position: absolute;
    top: 2.5%
}

#customreact-content .close-button {
    background-color: #000;
    border: 1px solid #fff;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
    color: #fff;
    cursor: pointer;
    height: auto;
    left: 100%;
    padding: 14px 8.8px;
    position: sticky;
    text-align: center;
    top: 0;
    width: 50px;
    z-index: 100;
    z-index: 101
}

#customreact-content .parentCloseButton {
    display: inline-flex
}

#customreact-content .control {
    background-color: #111;
    border: 1px solid #fff;
    border-radius: 16px;
    padding: 12px
}

#customreact-content .reelControl {
    background-color: #111;
    border: 1px solid #fff;
    border-radius: 16px;
    padding: 5px
}

#customreact-content .checkbox-container {
    align-items: center;
    display: flex
}

#customreact-content .status {
    font-weight: 700;
    margin-left: 10px
}

#customreact-content .control-description,#customreact-content .group-description {
    color: #fff;
    font-size: 12px
}

#customreact-content label {
    color: #fff
}

#customreact-content .radio-group {
    padding-top: 10px
}

#customreact-content .control input[type=number],#customreact-content .control input[type=range],#customreact-content .control input[type=text],#customreact-content .control select,#customreact-content .control textarea {
    background-color: #000;
    background-position: right 5px center;
    background-repeat: no-repeat;
    border: 1px solid #fff;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    margin-left: 0;
    padding: .4em
}

#customreact-content .control .adjustVolume {
    color: #fff;
    font-size: 12px
}

#customreact-content .control button {
    align-items: center;
    color: #000;
    display: flex;
    font-size: 10px;
    justify-content: center;
    padding: 10px;
    width: auto
}

#customreact-content .control .fill-control button {
    height: auto;
    margin-bottom: 10px
}

#customreact-content .control-description {
    color: #fff;
    font-size: 12px
}

#customreact-content .control-separator {
    background-color: #444;
    height: 1px;
    margin: 1% 0
}

#customreact-content .two-cols {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 10px
}

#customreact-content .two-cols-groups {
    display: grid;
    grid-template-columns: 80% 20%
}

#customreact-content .reel-two-cols-groups {
    display: grid;
    grid-template-columns: 50% 50%
}

#customreact-content .three-cols {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 5px 5px 0
}

#customreact-content .control-grid {
    background-color: #444;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 10px
}

#customreact-content .control-grid label {
    color: #fff
}

#customreact-content .control-grid button,#customreact-content .control-grid input[type=range],#customreact-content .control-grid input[type=text],#customreact-content .control-grid select,#customreact-content .control-grid textarea {
    background-color: #3a3a3a;
    border: 1px solid #444;
    color: #fff;
    outline: none;
    padding: 5px
}

#customreact-content .radio-label {
    align-items: center;
    color: #fff;
    cursor: pointer;
    display: flex;
    margin-right: 10px;
    padding: 5px
}

#customreact-content .radio-input {
    display: none
}

#customreact-content .radio-button {
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    height: 12px;
    margin-right: 5px;
    position: relative;
    width: 12px
}

#customreact-content p {
    color: #fff;
    font-size: 16px
}

#customreact-content .buttonsTab {
    align-items: center;
    background-color: #fff;
    color: #000;
    display: flex;
    height: 40px;
    justify-content: center;
    outline: none;
    padding: 15px;
    width: -webkit-fill-available
}

#customreact-content .saveConfigButton {
    -webkit-tap-highlight-color: transparent;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 4em;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    user-select: none
}

#customreact-content .saveConfigButton:hover {
    transition-duration: .1s
}

#customreact-content .saveConfigButton:after {
    border-radius: 4em;
    box-shadow: 0 0 15px 15px #fff;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .5s;
    width: 100%
}

#customreact-content .saveConfigButton:active:after {
    border-radius: 4em;
    box-shadow: 0 0 0 0 #fff;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    transition: 0s
}

#customreact-content .buttonsTab:hover {
    background-color: dimgray
}

#customreact-content .buttonsTab:active {
    background-color: dimgray;
    transform: translateY(4px)
}

#customreact-content .coloredText {
    color: #fff;
    padding-top: 10px
}

#customreact-content .marginedInput {
    border: 1px solid #fff;
    border-radius: 15px;
    margin-left: 1em;
    margin-top: 1em;
    padding: 0 10px;
    width: auto
}

#customreact-content .buttonsTabActive {
    border: 5px solid green
}

#customreact-content .radio-button:before {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 6px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%) scale(0);
    transition: transform .2s ease;
    width: 6px
}

#customreact-content .radio-input:checked+.radio-button:before {
    transform: translate(-50%,-50%) scale(1)
}

#customreact-content .toggle-button {
    display: inline-block;
    height: 30px;
    position: relative;
    width: 60px
}

#customreact-content .toggle-button .toggleInput {
    height: 0;
    opacity: 0;
    width: 0
}

#customreact-content .toggle-button .toggleSpan {
    background: #fff;
    background-color: #fff;
    border-radius: 30px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s
}

#customreact-content .toggle-button .toggleSpan:before {
    background-color: #000;
    border-radius: 50%;
    bottom: 2.6px;
    content: "";
    height: 25px;
    left: 3px;
    position: absolute;
    transition: .3s;
    width: 25px
}

#customreact-content input:checked+.toggleSpan {
    background-color: green
}

#customreact-content input:checked+.toggleSpan:before {
    transform: translateX(29px)
}

#customreact-content .txt {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #fff;
    bottom: 0;
    color: #000;
    font-family: Arial;
    font-size: 5em;
    font-weight: 700;
    height: fit-content;
    left: 0;
    margin: auto;
    pointer-events: none;
    position: absolute;
    right: 0;
    rotate: 90deg;
    text-align: center;
    top: 0;
    z-index: 100
}

#customreact-content .soundVolume {
    color: #000;
    position: absolute;
    top: 360px
}

#customreact-content .slidecontainer {
    width: 100%
}

#customreact-content .slider {
    --slider-font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fafafa;
    border-radius: 50px;
    cursor: pointer;
    height: 8px;
    margin-top: .5em;
    padding: 0!important;
    position: relative;
    width: 100%
}

#customreact-content .slider:hover {
    color: #fff;
    opacity: 1
}

#customreact-content .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #000;
    border: 1px solid #fff;
    border-radius: 25px;
    cursor: pointer;
    height: 25px;
    width: 25px
}

#customreact-content .slider::-moz-range-thumb {
    background-color: #4caf50;
    border-radius: 50%;
    height: 20px;
    position: relative;
    width: 20px
}

#customreact-content .group-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px
}

#customreact-content .reel-group-title {
    color: #fff;
    font-size: 12px
}

#customreact-content .group {
    background-color: #222;
    padding-bottom: 1%;
    padding-top: 1px;
    width: 100%
}

#custom-button {
    align-items: center;
    background-color: #000;
    border: 2px solid #00ff7f;
    border-radius: 50%;
    color: #d3d3d3;
    display: inline-block;
    display: flex;
    height: 40px;
    justify-content: center;
    left: 0;
    pointer-events: all;
    position: absolute;
    text-align: center;
    top: 60%;
    user-select: none;
    width: 40px;
    writing-mode: vertical-rl;
    z-index: 1000
}

@media screen and (orientation: portrait) {
    .control {
        margin:10px
    }

    .customPlayerSymbolsContent {
        margin-bottom: 10%
    }
}

@media screen and (orientation: landscape) {
    .control {
        margin:10px 50px
    }
}

.box select {
    -webkit-appearance: button;
    appearance: button;
    background-color: #332827;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px 25px rgba(0,0,0,.2);
    color: #fff;
    font-size: 2rem;
    height: 3rem;
    left: 5%;
    margin-top: .5rem;
    outline: none;
    padding-left: .5em;
    width: 90%
}

.scenario-info {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: rgba(28,28,28,.8);
    border-radius: 4px;
    color: #ff0;
    direction: ltr;
    font-family: Verdana,Helvetica,sans-serif;
    font-size: 11px;
    line-height: 2em;
    min-height: 2em;
    min-width: 10em;
    padding-left: .5em;
    position: absolute;
    right: 5px;
    text-align: left;
    top: 5px;
    z-index: 50
}

.box {
    background-color: #564a4a;
    height: 90%;
    left: 20%;
    line-height: 45px;
    max-height: 450px;
    position: absolute;
    text-align: center;
    top: 5%;
    width: 60%;
    z-index: 10
}

.box:hover:before {
    background-color: hsla(0,0%,100%,.2);
    color: hsla(0,0%,100%,.6)
}

.box select option {
    padding: 30px
}

.loadButton {
    background-color: #4b8308;
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 2em;
    right: 5%;
    width: 30%
}

.inputScenario,.loadButton {
    bottom: 5%;
    height: 3rem;
    position: absolute
}

.inputScenario {
    border-radius: 7px;
    display: block;
    font-size: 1.5em;
    left: 5%;
    padding-left: 2%;
    width: 50%
}

#inputPlayer {
    bottom: 25%;
    left: 5%;
    width: 40%
}

#inputCasion {
    bottom: 25%;
    left: unset;
    right: 5%;
    width: 40%
}

#divScenarioActions {
    background-color: #564a4a;
    max-height: 90px;
    position: absolute;
    z-index: 10
}

#divScenarioActions button {
    background-color: #4b8308;
    border: none;
    border-radius: 7px;
    color: #fff
}

#divScenarioActions button:disabled,#divScenarioActions button[disabled] {
    background-color: #667356
}

#divScenarioActions select {
    -webkit-appearance: button;
    appearance: button;
    background-color: #332827;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px 25px rgba(0,0,0,.2);
    color: #fff;
    outline: none
}

#divScenarioActions #buttonLoadScenario,#divScenarioActions #buttonNewScenario {
    height: 80%;
    left: 3.5%;
    position: absolute;
    top: 10%;
    width: 40%
}

#divScenarioActions #buttonLoadScenario {
    left: unset;
    right: 3.5%
}

#divScenarioActions #roundText {
    align-items: center;
    background-color: #332827;
    border-radius: 7px;
    color: #f7f772;
    display: flex;
    font-size: 2em;
    height: 80%;
    justify-content: space-around;
    position: absolute;
    top: 10%;
    width: 18%
}

#divScenarioActions .prevnextBut {
    cursor: pointer;
    font-size: 1.2em;
    height: 80%;
    outline: none;
    position: absolute;
    top: 10%;
    width: 15%
}

#divScenarioActions .prevnextBut svg {
    width: 80%
}

#divScenarioActions .prevnextBut svg .st0 {
    fill: #fff
}

#divScenarioActions .selectSymbols {
    font-size: 2em;
    height: 80%;
    padding-left: 2%;
    position: absolute;
    right: 17.5%;
    top: 10%;
    width: 13%
}

@media (orientation: portrait) {
    .box {
        background-color:#564a4a;
        font-size: .4em;
        height: 50%;
        left: 10%;
        line-height: 45px;
        text-align: center;
        width: 80%
    }

    .box select,.loadButton {
        font-size: 3em
    }
}

#helpHTMLDiv {
    overflow-y: scroll;
    position: absolute;
    scrollbar-color: #999 #000;
    scrollbar-width: thin;
    z-index: 10
}

#helpHTMLDiv::-webkit-scrollbar {
    width: 12px
}

#helpHTMLDiv::-webkit-scrollbar-track {
    background: #000
}

#helpHTMLDiv::-webkit-scrollbar-thumb {
    background-color: #999;
    border: 3px solid #000;
    border-radius: 20px
}

#helpHTMLDiv .container {
    color: #e1e1e1;
    font-family: Arial;
    letter-spacing: 0;
    padding: 0 2.2rem 1rem
}

#helpHTMLDiv h1 {
    font-size: 2.3rem;
    margin-block-start:0;margin-bottom: .7rem;
    padding-top: 3rem
}

#helpHTMLDiv h1,#helpHTMLDiv h2 {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

#helpHTMLDiv h2 {
    font-size: 2.1rem;
    padding-bottom: 1rem;
    padding-top: 2rem
}

#helpHTMLDiv h3 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

#helpHTMLDiv ul {
    padding-inline-start:5rem}

#helpHTMLDiv a,#helpHTMLDiv a:visited {
    color: #fff
}

#helpHTMLDiv a:hover {
    color: #ff0
}

#helpHTMLDiv .noWrap {
    white-space: nowrap
}

#helpHTMLDiv .separator {
    background: transparent linear-gradient(90deg,#12121200,#00c5be4d 46%,#12121200) 0 0 no-repeat padding-box;
    height: .3rem;
    margin: auto auto 1.5rem;
    opacity: 1;
    width: 80%
}

#helpHTMLDiv [section] {
    width: 100%
}

#helpHTMLDiv .section {
    font-size: 1.8rem;
    line-height: 2.7rem;
    padding-bottom: 3rem
}

#helpHTMLDiv .section>div,#helpHTMLDiv .section>p {
    display: table;
    margin: 0 0 1rem
}

#helpHTMLDiv .section>div .jp-level,#helpHTMLDiv .section>p .jp-level {
    align-items: center;
    display: flex;
    flex-direction: row
}

#helpHTMLDiv .section>div .jp-level span,#helpHTMLDiv .section>p .jp-level span {
    padding-top: .8rem
}

#helpHTMLDiv .section>div p,#helpHTMLDiv .section>p p {
    display: table;
    margin: 0 0 1rem
}

#helpHTMLDiv .section>div.small,#helpHTMLDiv .section>p.small {
    margin: 0
}

#helpHTMLDiv .section>div.large,#helpHTMLDiv .section>p.large {
    margin: 0 0 3.5rem
}

#helpHTMLDiv .section>div.very-large,#helpHTMLDiv .section>p.very-large {
    margin: 0 0 6rem
}

#helpHTMLDiv .section>div .left,#helpHTMLDiv .section>p .left {
    display: table-cell;
    vertical-align: top;
    width: 9rem
}

#helpHTMLDiv .section>div .left.lines-images,#helpHTMLDiv .section>p .left.lines-images {
    display: flex;
    flex-direction: column
}

#helpHTMLDiv .section>div .right,#helpHTMLDiv .section>p .right {
    display: table-cell;
    vertical-align: middle
}

#helpHTMLDiv .section>div .right.lines-text,#helpHTMLDiv .section>p .right.lines-text {
    vertical-align: top
}

#helpHTMLDiv .section>div .valigned,#helpHTMLDiv .section>p .valigned {
    align-items: center;
    display: flex
}

#helpHTMLDiv .section>div span.label,#helpHTMLDiv .section>p span.label {
    display: table-cell;
    font-size: 80%;
    padding-left: 1rem;
    vertical-align: middle
}

#helpHTMLDiv .centered {
    display: block!important;
    text-align: center
}

#helpHTMLDiv .colored {
    color: #d67900
}

#helpHTMLDiv .left img {
    width: 5rem
}

#helpHTMLDiv .left img.noborder {
    padding-left: .25rem;
    width: 5.5rem
}

#helpHTMLDiv img.icon {
    padding-right: .8rem;
    padding-top: .5rem;
    vertical-align: middle
}

#helpHTMLDiv img.icon2 {
    height: auto;
    padding-left: .5rem;
    width: 4rem
}

#helpHTMLDiv img.icon3 {
    height: auto;
    margin-left: -1rem;
    width: 7rem
}

#helpHTMLDiv img.icon-jackpot-counter {
    height: auto;
    padding-right: 1rem;
    vertical-align: middle;
    width: 18rem
}

#helpHTMLDiv img.icon-jackpot-bl-counter,#helpHTMLDiv img.icon-jackpot-gakl-counter {
    height: auto;
    padding-right: 1rem;
    vertical-align: bottom;
    width: 18rem
}

#helpHTMLDiv .mystery-jackpot-logo img {
    width: 8%
}

#helpHTMLDiv img.icon-jackpot-mystery-counter {
    height: auto;
    padding-right: 1rem;
    vertical-align: bottom;
    width: 18rem
}

#helpHTMLDiv img.icon-inline {
    height: auto;
    vertical-align: middle;
    width: 3.5rem
}

#helpHTMLDiv span.icon-gamble {
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: inline-block;
    font-size: .6rem;
    height: 3.7rem;
    line-height: 3.8rem;
    text-align: center;
    vertical-align: middle;
    width: 3.7rem
}

#helpHTMLDiv span.icon-gamble.large {
    font-size: .86rem;
    height: 5rem;
    line-height: 5rem;
    width: 5rem
}

#helpHTMLDiv span.icon-gamble.red {
    background-image: url(/assets/help/images/red.png?hash=60b5a20d77e9e77f56db)
}

#helpHTMLDiv span.icon-gamble.black {
    background-image: url(/assets/help/images/black.png?hash=60b5a20d77e9e77f56db)
}

#helpHTMLDiv img.icon-lines-button {
    height: auto;
    width: 5rem
}

#helpHTMLDiv img.icon-slider {
    height: auto;
    width: 32rem
}

#helpHTMLDiv img.icon-auto-start {
    height: auto;
    width: 12rem
}

#helpHTMLDiv img.icon-small-inline {
    height: auto;
    vertical-align: middle;
    width: 3rem
}

#helpHTMLDiv span.start-button {
    align-items: center;
    background-image: url(/assets/help/images/startButton.png?hash=60b5a20d77e9e77f56db);
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    float: left;
    font-weight: 700;
    height: 5rem;
    justify-content: center;
    margin-right: 1rem;
    padding-left: 5rem;
    padding-right: 5rem;
    text-align: center;
    text-transform: uppercase;
    width: 14.4rem
}

#helpHTMLDiv span.bb-toggle-Image {
    align-items: center;
    background-image: url(/assets/help/images/toggleOption.png?hash=60b5a20d77e9e77f56db);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-flex;
    height: 2.7rem;
    vertical-align: middle;
    width: 12rem
}

#helpHTMLDiv span.bb-toggle-text {
    font-size: 34%;
    padding-left: 8%
}

#helpHTMLDiv span.start-bonus-image {
    align-items: center;
    background-image: url(/assets/help/images/spinButtonSpecial.png?hash=60b5a20d77e9e77f56db);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-flex;
    float: none;
    height: 3rem;
    justify-content: center;
    vertical-align: middle;
    width: 3rem
}

#helpHTMLDiv span.start-bonus-text {
    font-size: 22%;
    line-height: 120%;
    text-align: center
}

#helpHTMLDiv span.bet-button {
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    height: 5rem;
    margin-right: 5px;
    text-align: center;
    width: 5rem
}

#helpHTMLDiv span.bet-button.active {
    background-image: url(/assets/help/images/greenButtonStandard.png?hash=60b5a20d77e9e77f56db)
}

#helpHTMLDiv span.bet-button.inactive {
    background-image: url(/assets/help/images/buttonStandard.png?hash=60b5a20d77e9e77f56db)
}

#helpHTMLDiv span.bet-button .currency {
    color: #ffd200;
    display: block;
    font-size: .8rem;
    line-height: 1.1rem;
    padding-top: .3rem
}

#helpHTMLDiv span.bet-button .amount {
    color: #fff;
    display: block;
    font-size: 1.3rem;
    line-height: 1.4rem;
    margin: auto
}

#helpHTMLDiv span.bet-button .play {
    color: #ffd200;
    display: block;
    font-size: .8rem;
    line-height: 1.2rem
}

#helpHTMLDiv span.speed-button {
    background-image: url(/assets/help/images/normalSpeedButton.png?hash=60b5a20d77e9e77f56db);
    background-repeat: no-repeat;
    background-size: contain;
    color: #fff;
    display: block;
    font-size: .7rem;
    font-weight: 700;
    height: 3rem;
    line-height: 3.8rem;
    text-align: center;
    width: 5rem
}

@media (orientation: portrait) {
    #helpHTMLDiv .mobile h1 {
        font-size:3.5em
    }

    #helpHTMLDiv .mobile h2 {
        font-size: 3.1rem
    }

    #helpHTMLDiv .mobile .separator {
        height: .8rem
    }

    #helpHTMLDiv .mobile .container {
        padding: 0 5rem 1rem
    }

    #helpHTMLDiv .mobile .section {
        font-size: 3rem;
        line-height: 5rem
    }

    #helpHTMLDiv .mobile .section p {
        margin: 0 0 2.5rem
    }

    #helpHTMLDiv .mobile .section p span.left {
        width: 14rem
    }

    #helpHTMLDiv .mobile .left img {
        width: 10rem
    }

    #helpHTMLDiv .mobile .left img.icon2 {
        width: 8.5rem
    }

    #helpHTMLDiv .mobile .left img.icon3 {
        width: 12rem
    }

    #helpHTMLDiv .mobile img.icon-inline {
        width: 7.4rem
    }

    #helpHTMLDiv .mobile img.icon-lines-button {
        width: 10rem
    }

    #helpHTMLDiv .mobile img.icon-jackpot-counter {
        width: 28rem
    }

    #helpHTMLDiv .mobile .left img.noborder {
        padding-left: 1.5rem;
        width: 9.5rem
    }

    #helpHTMLDiv .mobile img.icon-auto-start {
        width: 16rem
    }

    #helpHTMLDiv .mobile img.icon-small-inline {
        width: 5rem
    }

    #helpHTMLDiv .mobile img.icon-slider {
        width: 44rem
    }

    #helpHTMLDiv .displayLandscape {
        display: none
    }

    #helpHTMLDiv .right {
        display: table-cell!important;
        vertical-align: middle
    }
}

#helpHTMLDiv[lang=es] .speedlabel,#helpHTMLDiv[lang=hu] .speedlabel,#helpHTMLDiv[lang=ru] .speedlabel,#helpHTMLDiv[lang=sq] .speedlabel {
    font-size: .6rem!important
}

#helpHTMLDiv[lang=ru] span.bb-toggle-text {
    font-size: 29%;
    padding: 1% 0 0 3%
}

#helpHTMLDiv[lang=ru] span.start-bonus-text {
    font-size: 17%;
    padding-top: 2px
}

#helpHTMLDiv[lang=pt] span.bb-toggle-text {
    font-size: 30%;
    padding: 1% 0 0 2%
}

#helpHTMLDiv[lang=pt-br] span.icon-gamble {
    background-size: contain
}

#helpHTMLDiv[lang=pt-br] .speedlabel {
    font-size: .55rem!important;
    line-height: 3.6rem
}

#helpHTMLDiv[lang=pt-br] .gamble-red-label {
    font-size: .5rem!important
}

#helpHTMLDiv[lang=pt-br] .gamble-red-label-large {
    font-size: .7rem!important
}

#helpHTMLDiv[lang=pt-br] span.bb-toggle-text {
    font-size: 29%;
    padding: 1% 0 0 6%
}

#helpHTMLDiv[lang=de] .speedlabel {
    font-size: .65rem!important;
    line-height: 3.4rem!important
}

#helpHTMLDiv[lang=ka] .speedlabel {
    font-size: .85rem!important;
    line-height: 3.4rem!important
}

#helpHTMLDiv[lang=ka] .play {
    font-size: 1rem!important
}

#helpHTMLDiv[lang=ka] .icon-gamble {
    font-size: .75rem
}

#helpHTMLDiv[lang=ka] .icon-gamble.black {
    font-size: .9rem
}

#helpHTMLDiv[lang=zh-cn] .play {
    line-height: 1rem!important
}

#helpHTMLDiv[lang=pl] span.speed-button,#helpHTMLDiv[lang=uk] span.speed-button {
    font-size: .55rem!important
}

#helpHTMLDiv[lang=ko] span.bet-button .amount {
    line-height: 1.2rem
}

#helpHTMLDiv[lang=pl] .icon-gamble.red {
    font-size: .5rem
}

#helpHTMLDiv[lang=pl] .icon-gamble.red.large {
    font-size: .75rem
}

#helpHTMLDiv[lang=sr] span.bb-toggle-text {
    font-size: 26%;
    padding: 1% 0 0 3%
}

#helpHTMLDiv[lang=el] span.start-bonus-text {
    font-size: 20%
}

#helpHTMLDiv[lang=ro] span.bb-toggle-text {
    font-size: 25%;
    padding: 2% 0 0 6%
}

#helpHTMLDiv[lang=el] span.bb-toggle-text,#helpHTMLDiv[lang=uk] span.bb-toggle-text {
    font-size: 32%;
    padding: 1% 0 0 4%
}

#helpHTMLDiv[lang=it] span.bb-toggle-text {
    font-size: 29%;
    padding: 2% 0 0 5%
}

#helpHTMLDiv[lang=es] span.bb-toggle-text,#helpHTMLDiv[lang=mk] span.bb-toggle-text,#helpHTMLDiv[lang=tr] span.bb-toggle-text {
    font-size: 32%;
    padding: 2% 0 0 6%
}

#helpHTMLDiv[lang=fr] span.bb-toggle-text {
    font-size: 27%;
    padding: 1% 0 0 4%
}

#helpHTMLDiv[lang=fr] span.start-bonus-text {
    font-size: 19%
}

#helpHTMLDiv[lang=hr] span.bb-toggle-text {
    padding: 2% 0 0 12%
}

#helpHTMLDiv[lang=sk] span.bb-toggle-text {
    font-size: 29%;
    padding: 1% 0 0 4%
}

#helpHTMLDiv[lang=hu] span.bb-toggle-text {
    font-size: 20%;
    padding: 1% 0 0 4%
}

#helpHTMLDiv[lang=hu] span.start-bonus-text {
    font-size: 17%
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 100;
    src: url(/assets/Fonts/Roboto/Roboto-Thin.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 100;
    src: url(/assets/Fonts/Roboto/Roboto-ThinItalic.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: url(/assets/Fonts/Roboto/Roboto-Light.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 300;
    src: url(/assets/Fonts/Roboto/Roboto-LightItalic.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url(/assets/Fonts/Roboto/Roboto-Regular.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: url(/assets/Fonts/Roboto/Roboto-Medium.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 500;
    src: url(/assets/Fonts/Roboto/Roboto-MediumItalic.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: url(/assets/Fonts/Roboto/Roboto-Bold.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 700;
    src: url(/assets/Fonts/Roboto/Roboto-BoldItalic.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    src: url(/assets/Fonts/Roboto/Roboto-Black.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 900;
    src: url(/assets/Fonts/Roboto/Roboto-BlackItalic.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: RobotoCondensed-Regular;
    font-style: normal;
    font-weight: 300;
    src: url(/assets/Fonts/Roboto/RobotoCondensed-Regular.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: RobotoCondensed-Medium;
    font-style: normal;
    font-weight: 300;
    src: url(/assets/Fonts/Roboto/RobotoCondensed-Medium.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

@font-face {
    font-family: FuturaPTCond-Bold;
    font-style: normal;
    font-weight: 300;
    src: url(/assets/Fonts/FuturaPTCond-Bold/FuturaPTCond-Bold.ttf?hash=60b5a20d77e9e77f56db) format("truetype")
}

* {
    margin: 0;
    padding: 0
}

::-webkit-scrollbar {
    width: 12px
}

::-webkit-scrollbar-track {
    background: #5c5d5e
}

::-webkit-scrollbar-thumb {
    background-color: #3c3d3e;
    border: 3px solid #5c5d5e;
    border-radius: 20px
}

*,:after,:before {
    box-sizing: border-box
}

html {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    width: 100%
}

body {
    background-color: #000;
    font-family: Arial,Helvetica,sans-serif;
    height: inherit;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: inherit
}

canvas {
    display: block;
    height: 100vh;
    position: absolute;
    width: 100vw
}

.desktop .mobile-only,.mobile .desktop-only {
    display: none!important
}

@media (orientation: portrait) {
    .landscape-only {
        display:none!important
    }
}

@media (orientation: landscape) {
    .portrait-only {
        display:none!important
    }
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.hidden {
    visibility: hidden
}

.consoleHidden {
    display: none
}

.stretch-width {
    width: 100vw
}

.stretch-height {
    height: 100vh
}

.button {
    align-items: flex-start;
    -webkit-appearance: button;
    appearance: button;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 100%;
    letter-spacing: normal;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
    text-indent: 0;
    text-rendering: auto;
    text-shadow: none;
    text-transform: none;
    word-spacing: normal;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb
}

.button:focus .button {
    outline: 0
}

.media-info {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: rgba(28,28,28,.8);
    border-radius: 4px;
    bottom: 4%;
    color: #fff;
    direction: ltr;
    font-family: Verdana,Helvetica,sans-serif;
    font-size: 9px;
    left: 5px;
    line-height: 1.3;
    min-width: 20em;
    position: fixed;
    text-align: left;
    z-index: 50
}

.media-info-close-button {
    position: absolute;
    right: 5px;
    top: 5px
}

.perf-info {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: rgba(28,28,28,.8);
    border-radius: 4px;
    color: #fff;
    direction: ltr;
    font-family: Verdana,Helvetica,sans-serif;
    font-size: 11px;
    left: 5px;
    line-height: 1.3;
    min-width: 11em;
    position: fixed;
    text-align: left;
    top: 5px;
    z-index: 50
}

#iOSFullscreen {
    height: 135vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 999
}

#iOSFullscreenAnimation {
    background: #0000007f;
    height: 100vh;
    position: fixed;
    width: 100vw;
    z-index: 99
}

.full-screen-hand {
    animation-duration: 1.8s;
    -webkit-animation-duration: 1.8s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: fullscreen-swipe;
    -webkit-animation-name: fullscreen-swipe;
    height: 112px;
    left: 50vw;
    position: fixed;
    top: 50vh;
    transform: translate(-50%,-50%);
    width: 114px;
    z-index: 110
}

@keyframes fullscreen-swipe {
    0% {
        top: 80%
    }

    to {
        top: 40%
    }
}

@-webkit-keyframes fullscreen-swipe {
    0% {
        top: 80%
    }

    to {
        top: 40%
    }
}

#loading-overlay {
    background-color: #282a2d;
    height: 100vh;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 110
}

.loading-container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 40%
}

.logo-container {
    height: 120px;
    margin: auto;
    position: relative;
    text-align: center;
    width: 260px
}

@media (max-width: 1024px) {
    .logo-container {
        height:80px;
        width: 180px
    }
}

@media (max-width: 768px) {
    .logo-container {
        height:70px;
        width: 150px
    }
}

.progress-bar {
    background-color: hsla(0,0%,100%,.25);
    border-radius: 60px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.bar {
    background: rgba(0,0,0,.075)
}

.bar,.progress {
    position: relative
}

.progress {
    animation: progress-shadow-animation 1s infinite;
    background: #cf001c;
    color: #fff;
    height: 5px;
    width: 5%
}

.fade-out {
    animation-delay: .4s;
    animation-direction: normal;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-name: fadeout;
    animation-play-state: running;
    animation-timing-function: ease-in-out
}

@keyframes progress-shadow-animation {
    0% {
        box-shadow: 3px 0 3px hsla(0,0%,100%,.6)
    }

    to {
        box-shadow: 3px 0 3px hsla(0,0%,100%,.9)
    }
}

@keyframes fadeout {
    0% {
        opacity: 1
    }

    20% {
        opacity: .8
    }

    40% {
        opacity: .6
    }

    60% {
        opacity: .4
    }

    80% {
        opacity: .2
    }

    to {
        opacity: 0
    }
}

img {
    vertical-align: middle
}

#paytableHTMLDiv {
    font-family: Arial;
    margin-top: .15%;
    overflow-y: scroll;
    position: absolute;
    scrollbar-color: #999 #000;
    scrollbar-width: thin;
    z-index: 10
}

#paytableHTMLDiv::-webkit-scrollbar {
    width: 12px
}

#paytableHTMLDiv::-webkit-scrollbar-track {
    background: #121212
}

#paytableHTMLDiv::-webkit-scrollbar-thumb {
    background-color: #999;
    border: 3px solid #121212;
    border-radius: 20px
}

#paytableHTMLDiv .currency {
    font-size: 60%;
    padding-left: 3px
}

#paytableHTMLDiv .jackpot-limit {
    padding-left: 5px;
    padding-right: 5px
}

#paytableHTMLDiv.amount-currency .allInCreditsText {
    display: none
}

#paytableHTMLDiv .grid-container {
    grid-column-gap: .5%;
    grid-row-gap: 1%;
    color: #e1e1e1;
    display: grid;
    font-family: Arial;
    grid-template-columns: repeat(12,7.875%);
    letter-spacing: 0;
    padding: 2%
}

#paytableHTMLDiv .flex-1 {
    flex: 1
}

#paytableHTMLDiv .flex-5 {
    flex: 5
}

#paytableHTMLDiv .land-1 {
    grid-column-start: span 1
}

#paytableHTMLDiv .land-2 {
    grid-column-start: span 2
}

#paytableHTMLDiv .land-3 {
    grid-column-start: span 3
}

#paytableHTMLDiv .land-4 {
    grid-column-start: span 4
}

#paytableHTMLDiv .land-5 {
    grid-column-start: span 5
}

#paytableHTMLDiv .land-6 {
    grid-column-start: span 6
}

#paytableHTMLDiv .land-7 {
    grid-column-start: span 7
}

#paytableHTMLDiv .land-8 {
    grid-column-start: span 8
}

#paytableHTMLDiv .land-9 {
    grid-column-start: span 9
}

#paytableHTMLDiv .land-10 {
    grid-column-start: span 10
}

#paytableHTMLDiv .land-11 {
    grid-column-start: span 11
}

#paytableHTMLDiv .land-12 {
    grid-column-start: span 12
}

#paytableHTMLDiv .land-6-mid {
    grid-column-end: 10;
    grid-column-start: 4
}

#paytableHTMLDiv .land-8-mid {
    grid-column-end: 11;
    grid-column-start: 3
}

#paytableHTMLDiv .land-4-mid {
    grid-column-end: 9;
    grid-column-start: 5
}

#paytableHTMLDiv .land-9-13 {
    grid-column-end: 13;
    grid-column-start: 9
}

#paytableHTMLDiv .land-8-12 {
    grid-column-end: 12;
    grid-column-start: 8
}

#paytableHTMLDiv .land-6-12 {
    grid-column-end: 12;
    grid-column-start: 6
}

#paytableHTMLDiv .land-6-13 {
    grid-column-end: 13;
    grid-column-start: 6
}

#paytableHTMLDiv .land-8-13 {
    grid-column-end: 13;
    grid-column-start: 8
}

#paytableHTMLDiv .land-7-11 {
    grid-column-end: 11;
    grid-column-start: 7
}

#paytableHTMLDiv .land-2-12 {
    grid-column-end: 12;
    grid-column-start: 2
}

#paytableHTMLDiv .land-2-6 {
    grid-column-end: 6;
    grid-column-start: 2
}

#paytableHTMLDiv .land-2-7 {
    grid-column-end: 7;
    grid-column-start: 2
}

#paytableHTMLDiv .land-3-7 {
    grid-column-end: 7;
    grid-column-start: 3
}

#paytableHTMLDiv .m-2 {
    margin: 2%
}

#paytableHTMLDiv .mr-1 {
    margin-right: 1%
}

#paytableHTMLDiv .mr-2 {
    margin-right: 2%
}

#paytableHTMLDiv .mr-3 {
    margin-right: 3%
}

#paytableHTMLDiv .mr-4 {
    margin-right: 4%
}

#paytableHTMLDiv .mr-5 {
    margin-right: 5%
}

#paytableHTMLDiv .mr-10 {
    margin-right: 10%
}

#paytableHTMLDiv .ml-1 {
    margin-left: 1%
}

#paytableHTMLDiv .ml-2 {
    margin-left: 2%
}

#paytableHTMLDiv .ml-3 {
    margin-left: 3%
}

#paytableHTMLDiv .ml-4 {
    margin-left: 4%
}

#paytableHTMLDiv .ml-5 {
    margin-left: 5%
}

#paytableHTMLDiv .ml-8 {
    margin-left: 8%
}

#paytableHTMLDiv .ml-10 {
    margin-left: 10%
}

#paytableHTMLDiv .ml-15 {
    margin-left: 15%
}

#paytableHTMLDiv .mt-1 {
    margin-top: 1%
}

#paytableHTMLDiv .mt-2 {
    margin-top: 2%
}

#paytableHTMLDiv .mt-3 {
    margin-top: 3%
}

#paytableHTMLDiv .mt-4 {
    margin-top: 4%
}

#paytableHTMLDiv .mt-4-n {
    margin-top: -4%
}

#paytableHTMLDiv .mt-5 {
    margin-top: 5%
}

#paytableHTMLDiv .mt-9 {
    margin-top: 9%
}

#paytableHTMLDiv .mb-1 {
    margin-bottom: 1%
}

#paytableHTMLDiv .mb-2 {
    margin-bottom: 2%
}

#paytableHTMLDiv .mb-3 {
    margin-bottom: 3%
}

#paytableHTMLDiv .mb-4 {
    margin-bottom: 4%
}

#paytableHTMLDiv .mb-5 {
    margin-bottom: 5%
}

#paytableHTMLDiv .mb-8 {
    margin-bottom: 8%
}

#paytableHTMLDiv .mx-1 {
    margin-left: 1%;
    margin-right: 1%
}

#paytableHTMLDiv .mx-2 {
    margin-left: 2%;
    margin-right: 2%
}

#paytableHTMLDiv .mx-3 {
    margin-left: 3%;
    margin-right: 3%
}

#paytableHTMLDiv .mx-4 {
    margin-left: 4%;
    margin-right: 4%
}

#paytableHTMLDiv .mx-5 {
    margin-left: 5%;
    margin-right: 5%
}

#paytableHTMLDiv .pt-1 {
    padding-top: 1rem
}

#paytableHTMLDiv .p-sides-1 {
    padding: 0 1rem
}

#paytableHTMLDiv .align-items-center {
    align-items: center
}

#paytableHTMLDiv .align-self-center {
    align-self: center
}

#paytableHTMLDiv .flex {
    display: flex
}

#paytableHTMLDiv .align-items-baseline {
    align-items: baseline
}

#paytableHTMLDiv .flex-col {
    display: flex;
    flex-direction: column
}

#paytableHTMLDiv .inline-block {
    display: inline-block
}

#paytableHTMLDiv .inline {
    display: inline
}

#paytableHTMLDiv .flex-row {
    display: flex;
    flex-direction: row
}

#paytableHTMLDiv .display-none {
    display: none!important
}

#paytableHTMLDiv .align-text-center {
    text-align: center
}

#paytableHTMLDiv .align-text-left {
    text-align: left
}

#paytableHTMLDiv .width-5-important {
    width: 5%!important
}

#paytableHTMLDiv .width-3 {
    width: 3%
}

#paytableHTMLDiv .width-4 {
    width: 4%
}

#paytableHTMLDiv .width-5 {
    width: 5%
}

#paytableHTMLDiv .width-6 {
    width: 6%
}

#paytableHTMLDiv .width-7 {
    width: 7%
}

#paytableHTMLDiv .width-8 {
    width: 8%
}

#paytableHTMLDiv .width-9 {
    width: 9%
}

#paytableHTMLDiv .width-10 {
    width: 10%
}

#paytableHTMLDiv .width-12 {
    width: 12%
}

#paytableHTMLDiv .width-14 {
    width: 14%
}

#paytableHTMLDiv .width-16 {
    width: 16%
}

#paytableHTMLDiv .width-17 {
    width: 17%
}

#paytableHTMLDiv .width-18 {
    width: 18%
}

#paytableHTMLDiv .width-20 {
    width: 20%
}

#paytableHTMLDiv .width-25 {
    width: 25%
}

#paytableHTMLDiv .width-27 {
    width: 27%
}

#paytableHTMLDiv .width-28 {
    width: 28%
}

#paytableHTMLDiv .width-29 {
    width: 29%
}

#paytableHTMLDiv .width-30 {
    width: 30%
}

#paytableHTMLDiv .width-31 {
    width: 31%
}

#paytableHTMLDiv .width-33 {
    width: 33%
}

#paytableHTMLDiv .width-35 {
    width: 35%
}

#paytableHTMLDiv .width-37 {
    width: 37%
}

#paytableHTMLDiv .width-40 {
    width: 40%
}

#paytableHTMLDiv .width-41 {
    width: 41%
}

#paytableHTMLDiv .width-42 {
    width: 42%
}

#paytableHTMLDiv .width-44 {
    width: 44%
}

#paytableHTMLDiv .width-45 {
    width: 45%
}

#paytableHTMLDiv .width-46 {
    width: 46%
}

#paytableHTMLDiv .width-47 {
    width: 47%
}

#paytableHTMLDiv .width-48 {
    width: 48%
}

#paytableHTMLDiv .width-50 {
    width: 50%
}

#paytableHTMLDiv .width-53 {
    width: 53%
}

#paytableHTMLDiv .width-54 {
    width: 54%
}

#paytableHTMLDiv .width-56 {
    width: 56%
}

#paytableHTMLDiv .width-59 {
    width: 59%
}

#paytableHTMLDiv .width-60 {
    width: 60%
}

#paytableHTMLDiv .width-63 {
    width: 63%
}

#paytableHTMLDiv .width-64 {
    width: 64%
}

#paytableHTMLDiv .width-65 {
    width: 65%
}

#paytableHTMLDiv .width-66 {
    width: 66%
}

#paytableHTMLDiv .width-70 {
    width: 70%
}

#paytableHTMLDiv .width-73 {
    width: 73%
}

#paytableHTMLDiv .width-74 {
    width: 74%
}

#paytableHTMLDiv .width-75 {
    width: 75%
}

#paytableHTMLDiv .width-76 {
    width: 76%
}

#paytableHTMLDiv .width-78 {
    width: 78%
}

#paytableHTMLDiv .width-83 {
    width: 83%
}

#paytableHTMLDiv .width-84 {
    width: 84%
}

#paytableHTMLDiv .width-85 {
    width: 85%
}

#paytableHTMLDiv .width-90 {
    width: 90%
}

#paytableHTMLDiv .width-93 {
    width: 93%
}

#paytableHTMLDiv .width-94 {
    width: 94%
}

#paytableHTMLDiv .width-100 {
    width: 100%
}

#paytableHTMLDiv .gap-1 {
    gap: 1%
}

#paytableHTMLDiv .payoutValues {
    margin-right: 4%;
    margin-top: 5%
}

#paytableHTMLDiv .payoutXColors {
    margin-right: .5em
}

#paytableHTMLDiv .valuesText {
    color: #828282;
    font-size: 145%
}

#paytableHTMLDiv .textContainer {
    margin-top: 2%
}

#paytableHTMLDiv .sectionContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    grid-column-end: 12;
    grid-column-start: 2;
    text-align: center
}

#paytableHTMLDiv .sectionContainer .sectionTitle {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 80%
}

#paytableHTMLDiv .sectionContainer .sectionTitle img {
    margin-right: 2%;
    width: 18%
}

#paytableHTMLDiv .sectionContainer .sectionTitle span {
    font-size: 239%
}

#paytableHTMLDiv .sectionContainer .sectionDescription {
    font-size: 184%
}

#paytableHTMLDiv .sectionContainer .sectionDescription img {
    width: 9%
}

#paytableHTMLDiv .textTitle {
    align-content: center;
    display: inherit;
    font-size: 2.8em;
    text-align: center
}

#paytableHTMLDiv .titleText {
    font-size: 239%
}

#paytableHTMLDiv .textContent {
    align-content: center;
    display: inherit;
    padding-left: 5%;
    text-align: center;
    width: 90%
}

#paytableHTMLDiv .maxBetSubstitute {
    width: 60%
}

#paytableHTMLDiv .payoutSticker {
    margin-left: 70%;
    margin-top: -19%;
    width: 31%
}

#paytableHTMLDiv .version-malfunction {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 178%
}

#paytableHTMLDiv .version-malfunction span {
    color: #828282
}

#paytableHTMLDiv .titleLine {
    display: flex;
    justify-content: center;
    margin-bottom: 2%;
    margin-top: 2%;
    width: 50%
}

#paytableHTMLDiv .centeredLine {
    margin-bottom: 2%;
    margin-top: 1%;
    width: 60%
}

#paytableHTMLDiv .justify-between {
    justify-content: space-between
}

#paytableHTMLDiv .justify-evenly {
    justify-content: space-evenly
}

#paytableHTMLDiv .justify-around {
    justify-content: space-around
}

#paytableHTMLDiv .justify-center {
    justify-content: center
}

#paytableHTMLDiv .justify-end {
    justify-content: flex-end
}

#paytableHTMLDiv .payoutValue {
    color: #fff;
    font-size: 184%;
    line-height: 140%
}

#paytableHTMLDiv .line-height-131 {
    line-height: 131%
}

#paytableHTMLDiv .line-height-151 {
    line-height: 151%
}

#paytableHTMLDiv .noWrap {
    white-space: nowrap
}

#paytableHTMLDiv .freeSpinsText,#paytableHTMLDiv .largeText {
    font-size: 184%
}

#paytableHTMLDiv .normalText {
    font-size: 155%;
    line-height: 140%
}

#paytableHTMLDiv .allInCreditsText {
    color: #828282;
    font-size: 145%
}

#paytableHTMLDiv .displayPortrait {
    display: none
}

#paytableHTMLDiv .flexColumnCentered {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center
}

#paytableHTMLDiv .flexAlignJustifyCenter {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: -webkit-fill-available
}

@media (orientation: portrait) {
    #paytableHTMLDiv.mobile {
        margin-top:.4%
    }

    #paytableHTMLDiv.mobile .grid-container {
        grid-row-gap: .6%
    }

    #paytableHTMLDiv.mobile .titleText {
        font-size: 425%
    }

    #paytableHTMLDiv.mobile .port-1 {
        grid-column-start: span 1
    }

    #paytableHTMLDiv.mobile .port-2 {
        grid-column-start: span 2
    }

    #paytableHTMLDiv.mobile .port-3 {
        grid-column-start: span 3
    }

    #paytableHTMLDiv.mobile .port-4 {
        grid-column-start: span 4
    }

    #paytableHTMLDiv.mobile .port-5 {
        grid-column-start: span 5
    }

    #paytableHTMLDiv.mobile .port-6 {
        grid-column-end: span 6;
        grid-column-start: span 6
    }

    #paytableHTMLDiv.mobile .port-6-mid {
        grid-column-end: 10;
        grid-column-start: 4
    }

    #paytableHTMLDiv.mobile .port-7 {
        grid-column-start: span 7
    }

    #paytableHTMLDiv.mobile .port-8 {
        grid-column-start: span 8
    }

    #paytableHTMLDiv.mobile .port-9 {
        grid-column-start: span 9
    }

    #paytableHTMLDiv.mobile .port-10 {
        grid-column-start: span 10
    }

    #paytableHTMLDiv.mobile .port-11 {
        grid-column-start: span 11
    }

    #paytableHTMLDiv.mobile .port-12 {
        grid-column-end: 13;
        grid-column-start: 1
    }

    #paytableHTMLDiv.mobile .port-8-mid {
        grid-column-end: 11;
        grid-column-start: 3
    }

    #paytableHTMLDiv.mobile .port-2-12 {
        grid-column-end: 12;
        grid-column-start: 2
    }

    #paytableHTMLDiv.mobile .mr-5-p {
        margin-right: 5%
    }

    #paytableHTMLDiv.mobile .ml-0-p {
        margin-left: 0
    }

    #paytableHTMLDiv.mobile .sectionContainer {
        align-items: center;
        display: flex;
        flex-direction: column;
        grid-column-end: 13;
        grid-column-start: 1;
        padding-left: 4%;
        padding-right: 4%;
        text-align: center
    }

    #paytableHTMLDiv.mobile .sectionContainer .sectionTitle {
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center;
        width: 80%
    }

    #paytableHTMLDiv.mobile .sectionContainer .sectionTitle img {
        margin-right: 2%;
        width: 20%
    }

    #paytableHTMLDiv.mobile .sectionContainer .sectionTitle span {
        font-size: 425%
    }

    #paytableHTMLDiv.mobile .sectionContainer .sectionDescription {
        font-size: 326%
    }

    #paytableHTMLDiv.mobile .sectionContainer .sectionDescription img {
        width: 16%
    }

    #paytableHTMLDiv.mobile .sectionContainer #paylinesPort {
        width: 100%
    }

    #paytableHTMLDiv.mobile .titleLine {
        width: 70%
    }

    #paytableHTMLDiv.mobile .version-malfunction {
        font-size: 326%
    }

    #paytableHTMLDiv.mobile .valuesText {
        font-size: 2.5em;
        text-align: center
    }

    #paytableHTMLDiv.mobile .freeSpinsText,#paytableHTMLDiv.mobile .largeText {
        font-size: 326%
    }

    #paytableHTMLDiv.mobile .normalText {
        font-size: 277%
    }

    #paytableHTMLDiv.mobile .allInCreditsText {
        font-size: 257%;
        text-align: center
    }

    #paytableHTMLDiv.mobile .displayLandscape {
        display: none
    }

    #paytableHTMLDiv.mobile .payoutValue {
        font-size: 326%
    }

    #paytableHTMLDiv.mobile .width-9-p-important {
        width: 9%!important
    }

    #paytableHTMLDiv.mobile .width-6-p {
        width: 6%
    }

    #paytableHTMLDiv.mobile .width-10-p {
        width: 10%
    }

    #paytableHTMLDiv.mobile .width-11-p {
        width: 11%
    }

    #paytableHTMLDiv.mobile .width-15-p {
        width: 15%
    }

    #paytableHTMLDiv.mobile .width-18-p {
        width: 18%
    }

    #paytableHTMLDiv.mobile .width-19-p {
        width: 19%
    }

    #paytableHTMLDiv.mobile .width-21-p {
        width: 21%
    }

    #paytableHTMLDiv.mobile .width-22-p {
        width: 22%
    }

    #paytableHTMLDiv.mobile .width-23-p {
        width: 23%
    }

    #paytableHTMLDiv.mobile .width-24-p {
        width: 24%
    }

    #paytableHTMLDiv.mobile .width-25-p {
        width: 25%
    }

    #paytableHTMLDiv.mobile .width-27-p {
        width: 27%
    }

    #paytableHTMLDiv.mobile .width-8-p {
        width: 8%
    }

    #paytableHTMLDiv.mobile .width-17-p {
        width: 17%
    }

    #paytableHTMLDiv.mobile .width-28-p {
        width: 28%
    }

    #paytableHTMLDiv.mobile .width-29-p {
        width: 29%
    }

    #paytableHTMLDiv.mobile .width-33-p {
        width: 33%
    }

    #paytableHTMLDiv.mobile .width-31-p {
        width: 31%
    }

    #paytableHTMLDiv.mobile .width-38-p {
        width: 38%
    }

    #paytableHTMLDiv.mobile .width-39-p {
        width: 39%
    }

    #paytableHTMLDiv.mobile .width-42-p {
        width: 42%
    }

    #paytableHTMLDiv.mobile .width-44-p {
        width: 44%
    }

    #paytableHTMLDiv.mobile .width-50-p {
        width: 50%
    }

    #paytableHTMLDiv.mobile .width-53-p {
        width: 53%
    }

    #paytableHTMLDiv.mobile .width-57-p {
        width: 57%
    }

    #paytableHTMLDiv.mobile .width-60-p {
        width: 60%
    }

    #paytableHTMLDiv.mobile .width-63-p {
        width: 63%
    }

    #paytableHTMLDiv.mobile .width-73-p {
        width: 73%
    }

    #paytableHTMLDiv.mobile .width-76-p {
        width: 76%
    }

    #paytableHTMLDiv.mobile .width-80-p {
        width: 80%
    }

    #paytableHTMLDiv.mobile .width-90-p {
        width: 90%
    }

    #paytableHTMLDiv.mobile .width-92-p {
        width: 92%
    }

    #paytableHTMLDiv.mobile .width-93-p {
        width: 93%
    }

    #paytableHTMLDiv.mobile .width-100-p {
        width: 100%
    }

    #paytableHTMLDiv.mobile .displayPortrait {
        display: inline
    }

    #paytableHTMLDiv.mobile .justify-end-p {
        justify-content: flex-end
    }

    #paytableHTMLDiv.mobile .justify-start-p {
        justify-content: flex-start
    }
}

#paytableHTMLDiv .child-no-margins>div {
    margin: unset
}

#paytableHTMLDiv[lang=es] .sectionContainer>.sectionTitle.mysteryReversedTitle {
    flex-direction: row-reverse!important
}

#paytableHTMLDiv[lang=es] .sectionContainer>.sectionTitle.mysteryReversedTitle>span {
    padding-right: 5px
}

#paytableHTMLDiv[lang=es] .sectionContainer>.sectionTitle.freeSpinSectionTitle {
    flex-direction: row-reverse!important
}

#paytableHTMLDiv[lang=es] .sectionContainer>.sectionTitle.freeSpinSectionTitle>span {
    padding-right: 5px
}

#paytableHTMLDiv[lang=pt] .sectionContainer>.sectionTitle.mysteryReversedTitle {
    flex-direction: row-reverse!important
}

#paytableHTMLDiv[lang=pt] .sectionContainer>.sectionTitle.mysteryReversedTitle>span {
    padding-right: 5px
}

#paytableHTMLDiv[lang=pt] .sectionContainer>.sectionTitle.freeSpinSectionTitle {
    flex-direction: row-reverse!important
}

#paytableHTMLDiv[lang=pt] .sectionContainer>.sectionTitle.freeSpinSectionTitle>span {
    padding-right: 5px
}