/* tooltip pot */
.tooltip-label {
    display: inline-block;
}

.tooltip-label-rare {
    color: rgb(102, 255, 255);
}

.tooltip-rare {
    background: url(../assets/item/AdditionalOptionTooltip.rare.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:13px;
    width:13px;
}

.tooltip-label-epic {
    color: rgb(153, 102, 255);
}

.tooltip-epic {
    background: url(../assets/item/AdditionalOptionTooltip.epic.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:13px;
    width:13px;
}

.tooltip-label-unique {
    color: rgb(255, 204, 0);
}

.tooltip-unique {
    background: url(../assets/item/AdditionalOptionTooltip.unique.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:13px;
    width:13px;
}

.tooltip-label-legendary {
    color: rgb(204, 255, 0);
}

.tooltip-legendary {
    background: url(../assets/item/AdditionalOptionTooltip.legendary.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:13px;
    width:13px;
}

/* cube */
.cube-red {
    background: url(../assets/cube/RedCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;
}
.cube-black {
    background: url(../assets/cube/BlackCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;
}
.cube-white {
    background: url(../assets/cube/WhiteCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;
}
.cube-violet {
    background: url(../assets/cube/VioletCube.png);
    background-repeat: no-repeat !important;
    background-size: contain;
    display: inline-block;
    height:29px;
    width:29px;
}
.cube-uni {
    background: url(../assets/cube/UniCube.png);
    background-repeat: no-repeat !important;
    background-size: contain;
    display: inline-block;
    height:36px;
    width:36px;
}
.cube-equality {
    background: url(../assets/cube/EqualityCube.png);
    background-repeat: no-repeat !important;
    background-size: contain;
    display: inline-block;
    height:36px;
    width:36px;
}

.cube-bonus {
    background: url(../assets/cube/BonusCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;
}

.cube-meister {
    background: url(../assets/cube/MeisterCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;  
}

.cube-master {
    background: url(../assets/cube/MasterCraftsmanCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;  
}

.cube-occult {
    background: url(../assets/cube/OccultCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;  
    top: 7px;
    left: 7px;
}

.cube-bonus-occult, .cube-bonus_occult {
    background: url(../assets/cube/BonusOccultCube.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    height:36px;
    width:36px;  
    top: 7px;
    left: 7px;
}

.cube.disabled {
    filter: grayscale(1);
    opacity: 0.5;
}

.cube-big {
    transform: scale(2);
    transform-origin: top;
    margin-left: 40px;
    position: relative;
    cursor: pointer;
    image-rendering: pixelated;
}

.cube-tiny {
    transform: scale(0.8);
}

.cube-big:hover {
    animation: MoveUpDown 0.5s forwards 1;
}

@keyframes MoveUpDown {
    0% {
    }
    100% {
        height: 45px;
    }
}

.cube-menu {
    position: absolute;
    bottom: 35px;
    left: 0;
    user-select: none;
}

/* red/bonus cube */
.cube-main-red {
    position: absolute;
    background: url(../assets/cube/red/Cube_Red.backgrnd.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 195px;
    height: 286px;
    user-select: none;
}

.cube-main-master, .cube-main-meister, .cube-main-occult, .cube-main-bonus_occult {
    position: absolute;
    background: url(../assets/cube/free/Cube.backgrnd.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 195px;
    height: 286px;
    user-select: none;
}

/*
.cube-main-equality {
    position: absolute;
    background: url(../assets/cube/equality/equality_cube.backgrnd11.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 196px;
    height: 300px;
    user-select: none;
}
*/

.cube-main-header, .cube-black-main-header, .cube-white-main-header {
    position: absolute;
    width: 175px;
    height: 25px;
    cursor: pointer;
    z-index: 100;
}

.cube-main-bonus {
    background: url(../assets/cube/bonus/MiracleCube_Additional.backgrnd.png) !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 195px;
    height: 286px;
    user-select: none;  
}

/*
.cube-main-equality > .cube-main-window {
    position: relative;
    background: url(../assets/cube/equality/backgrnd2.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 187px;
    height: 259px;
    top: 24px;
    left: 5px;
}
*/

.cube-header-reset {
    position: relative;
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 186px;
    height: 34px;
    top: 5px;
    left: 5px;
}

.reset-cube-red {
    background: url(../assets/cube/red/Cube_Red.backgrnd3.png);
    background-repeat: no-repeat !important;
}

.reset-cube-bonus {
    background: url(../assets/cube/bonus/MiracleCube_Additional.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}

.reset-cube-master {
    background: url(../assets/cube/free/Cube_Master.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}

.reset-cube-meister {
    background: url(../assets/cube/free/Cube_Meister.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}

.reset-cube-occult {
    background: url(../assets/cube/free/Cube_Occult.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}

.reset-cube-bonus_occult {
    background: url(../assets/cube/free/Cube_BonusOccult.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}

.reset-cube-equality {
    background: url(../assets/cube/equality/equality_cube.backgrnd3.png);
    background-repeat: no-repeat !important;
    /* temporary */
    width: 177px;
    background-size: 100% 100%;
    background-position: center;
}

.cube-window {
    position: relative;
    background: url(../assets/cube/red/Cube_Red.backgrnd4.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 178px;
    height: 99px;
    top: 97px;
    left: 5px;
}

.cube-remaining {
    position: absolute;
    background: url(../assets/cube/red/Cube_Red.remainBackgrnd.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 178px;
    height: 18px;
    top: 41px;
    left: 5px;
    font-size: 0.8em;
    text-align: center;
}

.cube-remaining-text {
    position: relative;
    top: 2px;
}

.cube-result-background {
    position: absolute;
    background-repeat: repeat;
    background-repeat: no-repeat;
    width: 169px;
    height: 93px;
    position: absolute;
    left: 8px;
    top: 150px;
}

.cube-result-background.result-rare {
    background: url(../assets/cube/rare.png);
}
.cube-result-background.result-epic {
    background: url(../assets/cube/epic.png);
}
.cube-result-background.result-unique {
    background: url(../assets/cube/unique.png);
}
.cube-result-background.result-legendary {
    background: url(../assets/cube/legendary.png);
}

.violet-result-line-active {
    background: url(../assets/cube/violet/textHighlight.png);
    background-repeat: no-repeat;
}


.cube-upgrade.cube-use-tier {
    position: absolute;
    background: url(../assets/cube/Spritesheet_CubeRedBonusTierUp.png);
    background-repeat: no-repeat;
    animation: tier-up-animation 1.5s steps(12) forwards 1;
    width: 180px;
    height: 222px;
    top: 5px;
    left: 6px;
}

@keyframes tier-up-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -2664px;
    }
}

.cube-upgrade.cube-use-normal {
    position: absolute;
    background: url(../assets/cube/Spritesheet_CubeRedBonusUse.png);
    background-repeat: no-repeat;
    animation: cube-use-animation 1.5s steps(12) forwards 1;
    width: 179px;
    height: 183px;
    top: 41px;
    left: 6px;
}

@keyframes cube-use-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -2196px;
    }
}

/* black cube */
.cube-main-border {
    position: absolute;
    display: inline-block;
    width: 195px;
    height: 18px;
    cursor: pointer;
}

.cube-black-main {
    position: absolute;
    background: url(../assets/cube/black/Cube_Black.backgrnd.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 195px;
    height: 385px;
    user-select: none;
}

.cube-black-main-window {
    position: relative;
    background: url(../assets/cube/black/Cube_Black.backgrnd2.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 195px;
    height: 385px;
    top: 24px;
    left: 5px;
}

#black_cube_container[data-cube="black"] .cube-black-header-reset {
    position: relative;
    background: url(../assets/cube/black/Cube_Black.backgrnd3.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 186px;
    height: 34px;
    top: 5px;
    left: 5px;
}

#black_cube_container[data-cube="white"] .cube-black-header-reset {
    position: relative;
    background: url(../assets/cube/white/Cube_White.backgrnd3.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 186px;
    height: 34px;
    top: 5px;
    left: 5px;
}

.cube-black-window-before {
    position: relative;
    background: url(../assets/cube/black/Cube_Black.Before.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 178px;
    height: 99px;
    top: 97px;
    left: 5px;
}

.cube-black-window-before:hover {
    background: url(../assets/cube/black/Cube_Black.Before.mouseOver.0.png);
}

.cube-black-window-before.disabled {
    background: url(../assets/cube/black/Cube_Black.Before.disabled.0.png);
}

.cube-black-window-before:active {
    background: url(../assets/cube/black/Cube_Black.Before.pressed.0.png);
}

.cube-black-result-background {
    position: absolute;
    background: url(../assets/cube/black/Cube_Black.backgrnd4.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 176px;
    height: 178px;
    top: 150px;
    left: 5px;
}

.cube-black-window-after {
    position: relative;
    background: url(../assets/cube/black/Cube_Black.After.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 178px;
    height: 99px;
    top: 98px;
    left: 5px;
}

.cube-black-window-after:hover {
    background: url(../assets/cube/black/Cube_Black.After.mouseOver.0.png);
}

.cube-black-window-after.disabled {
    background: url(../assets/cube/black/Cube_Black.After.disabled.0.png);
}

.cube-black-window-after:active {
    background: url(../assets/cube/black/Cube_Black.After.pressed.0.png);
}

.btn-one-more-try {
    position: relative;
    background: url(../assets/cube/red/Cube_Red.BtOnemore.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 135px;
    height: 18px;
    top: 103px;
    left: 5px;
}

.btn-one-more-try:hover {
    background: url(../assets/cube/red/Cube_Red.BtOnemore.mouseOver.0.png);
}

.btn-one-more-try:active {
    background: url(../assets/cube/red/Cube_Red.BtOnemore.pressed.0.png);
}

.btn-one-more-try.disabled {
    background: url(../assets/cube/red/Cube_Red.BtOnemore.disabled.0.png);
}

.btn-cube-black {
    top: 103px;
    left: 28px;
}

.btn-cube-ok {
    position: relative;
    background: url(../assets/cube/red/Cube_Red.BtOk.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 48px;
    height: 18px;
    top: 85px;
    left: 140px;
}

.btn-cube-ok:hover {
    background: url(../assets/cube/red/Cube_Red.BtOk.mouseOver.0.png);
}

.btn-cube-ok:active {
    background: url(../assets/cube/red/Cube_Red.BtOk.pressed.0.png);
}

.btn-cube-ok.disabled {
    background: url(../assets/cube/red/Cube_Red.BtOk.disabled.0.png);
}

.cube-black-upgrade.cube-use-tier {
    position: absolute;
    background: url(../assets/cube/SpriteSheet_CubeBlackTierUp.png);
    background-repeat: no-repeat;
    animation: tier-up-black-animation 1.5s steps(12) forwards 1;
    width: 188px;
    height: 322px;
    top: 4px;
}

@keyframes tier-up-black-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -3864px;
    }
}

.cube-black-upgrade.cube-use-normal {
    position: absolute;
    background: url(../assets/cube/SpriteSheet_CubeBlackUse.png);
    background-repeat: no-repeat;
    animation: cube-black-use-animation 1.5s steps(12) forwards 1;
    width: 179px;
    height: 283px;
    top: 41px;
    left: 5px;
}

@keyframes cube-black-use-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -3396px;
    }
}

/* common */
.cube-result {
    position: relative;
    top: 36px;
    left: 12px;
    color: white;
    font-size: 11.5px;
    line-height: 1em;
    transform: scaleX(1.05);
    display: block;
}

/* line-height too big for firefox */
@-moz-document url-prefix() {
    .cube-result {
        line-height: 1.1em;
    }
}

.cube-att-result {
    color: rgb(153,153,153);
}

.cube-att-increase {
    color: rgb(252,235,69);
}

.cube-att-stat {
    font-weight: 500;
    transform: scaleX(1.15);
    display: inline-block;
    margin-left: 4px;
}

.cube-att-decrease {
    color: rgb(255,51,0);
}

.cube-pot-label {
    color: rgb(255,255,17);
}

.cube-item-window {
    position: absolute;
    background: url(../assets/cube/Spritesheet_CubeNormal.png);
    background-repeat: no-repeat;
    animation: cube-item-window-animation 1.5s steps(12) infinite;
    width: 180px;
    height: 86px;
    top: 41px;
    left: 6px;
}

@keyframes cube-item-window-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -1032px;
    }
}

.cube-item {
    position: absolute;
    height: 28px;
    width: 28px;
    display: block;
    left: 80px;
    top: 78px;
}

.cube-result-line {
    display: inline-block;
    width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.cube-result-pot {
    position: absolute;
    top: -15px;
    text-align: center;
    width: 160px;
    left: -3px;
    transform: scaleX(1.1);
}

/* auto cube */
.auto-cube {
    cursor: pointer;
}

.auto-cube-selected {
    filter: drop-shadow(2px 2px 10px orange)
}

.violet-cube-chosen {
    background: #00abff;
}























/*
        GMS OVERRIDE
*/
.cube-header-icon {
    background-repeat: no-repeat !important;
    position: absolute;
    width: 14px;
    height: 14px;
    left: 176px;
    top: 7px;
    float: right;
}

.cube-main-violet .cube-header-icon {
    left: 189px;
    top: 7px;
}

.cube-button-x {
    background: url(../assets/starforce/BtClose3.normal.0.png);
 }
.cube-button-x:hover {
    background: url(../assets/starforce/BtClose3.mouseOver.0.png);
}
.cube-button-x:active {
    background: url(../assets/starforce/BtClose3.pressed.0.png);
}
.cube-button-x.disabled {
    background: url(../assets/starforce/BtClose3.disabled.0.png);
}

.cube-red {
    background: url(../assets/cube/GlowingCube.png) !important;
    background-repeat: no-repeat !important;
}
.cube-bonus {
    background: url(../assets/cube/BonusGlowingCube.png) !important;
    background-repeat: no-repeat !important;
}
.cube-meister {
    background: url(../assets/cube/SolidCube.png) !important;
    background-repeat: no-repeat !important; 
    top: 8px;
}
.cube-meister.auto-cube, .cube-master.auto-cube {
    position: relative;
    top: 3px;
    left: 3px;
}
.cube-occult {
    background: url(../assets/cube/MysticalCube.png) !important;
    background-repeat: no-repeat !important;
}
.cube-bonus-occult, .cube-bonus_occult {
    background: url(../assets/cube/BonusMysticalCube.png) !important;
    background-repeat: no-repeat !important;
}
.cube-master {
    background: url(../assets/cube/HardCube.png) !important;
    background-repeat: no-repeat !important;    
    top: 7px;
}
.cube-black {
    background: url(../assets/cube/BrightCube.png) !important;
    background-repeat: no-repeat !important;
}
.cube-white {
    background: url(../assets/cube/BonusBrightCube.png) !important;
    background-repeat: no-repeat !important;
}
.item-cubes {
    background-image: url(../assets/cube/cubes_gms.png) !important;
    background-repeat: no-repeat !important;
    background-size: contain;
}
.reset-cube-bonus {
    background: url(../assets/cube/bonus/cube_bonus_glowing.backgrnd3.png) !important;
    background-repeat: no-repeat !important;    
    top: 4px;
}
.reset-cube-red {
    background: url(../assets/cube/red/cube_glowing.backgrnd3.png) !important;
    background-repeat: no-repeat !important;    
    top: 4px;
}                    

.cube-main-red,.cube-main-master,.cube-main-meister,.cube-main-occult,.cube-main-bonus_occult,.cube-main-bonus,.cube-main-equality,
.cube-main-uni {
    background: url(../assets/cube/glowing/Cube_Glowing.backgrnd.png) !important;
    background-repeat: no-repeat !important;
    height: 300px;
}

.cube-result {
    margin-top: 2px;
}

.cube-main-window {
    position: relative;
    background: url(../assets/cube/glowing/Cube_Glowing.backgrnd2.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 187px;
    height: 273px;
    top: 24px;
    left: 5px;
}

.cube-window {
    position: relative;
    background: url(../assets/cube/glowing/Cube_Glowing.result.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 178px;
    height: 116px;
    top: 94px;
    left: 5px;
}

.btn-one-more-try {
    top:97px;
}

.cube-black-main .btn-one-more-try {
    top:100px;
}

.btn-cube-ok {
    top: 75px;
}

.cube-upgrade.cube-use-normal {
    position: absolute;
    background: url(../assets/cube/glowing/Cube_Glowing.Effect.Use.png);
    background-repeat: no-repeat;
    animation: cube-use-animation 1.5s steps(11) forwards 1;
    width: 179px;
    height: 197px;
    top: 41px;
    left: 5px;
}
.cube-upgrade.cube-use-tier {
    position: absolute;
    background: url(../assets/cube/glowing/Cube_Glowing.Effect.GradeUp.png);
    background-repeat: no-repeat;
    animation: tier-up-animation 1.5s steps(11) forwards 1;
    width: 180px;
    height: 237px;
    top: 6px;
    left: 5px;
}

.cube-item-window {
    position: absolute;
    background: url(../assets/cube/glowing/Cube_Glowing.Effect.Normal.png);
    background-repeat: no-repeat;
    animation: cube-item-window-animation 1.8s steps(11) infinite;
    width: 180px;
    height: 86px;
    top: 41px;
    left: 5px;
}

@keyframes cube-item-window-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -946px;
    }
}

@keyframes cube-use-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -2167px
    }
}

@keyframes tier-up-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -2607px;
    }
}

#black_cube_container[data-cube="black"] .cube-black-header-reset {
    background: url(../assets/cube/black/cube_bright.backgrnd3.png) !important;
    background-repeat: no-repeat !important;    
    top: 4px;
}
#black_cube_container[data-cube="white"] .cube-black-header-reset {
    background: url(../assets/cube/bonus/cube_bonus_bright.backgrnd3.png) !important;
    background-repeat: no-repeat !important;    
    top: 4px;
}
    
.cube-black-main {
    height: 416px;
    background: url(../assets/cube/bright/Cube_Bright.backgrnd.png) !important;
    background-repeat: no-repeat !important;
}           

.cube-black-main-window {
    background: url(../assets/cube/bright/Cube_Bright.backgrnd2.png);
}

.cube-black-window-before {
    background: url(../assets/cube/bright/Cube_Bright.Before.normal.0.png);
    height: 114px;
    top: 93px;
}

.cube-black-window-before:hover {
    background: url(../assets/cube/bright/Cube_Bright.Before.mouseOver.0.png);
    height: 114px;
}


.cube-black-window-before:active {
    background: url(../assets/cube/bright/Cube_Bright.Before.pressed.0.png);
    height: 114px;
}

.cube-black-window-after {
    background: url(../assets/cube/bright/Cube_Bright.After.normal.0.png);
    height: 114px;
    top: 94px;
}

.cube-black-window-after:hover {
    background: url(../assets/cube/bright/Cube_Bright.After.mouseOver.0.png);
    height: 114px;
}


.cube-black-window-after:active {
    background: url(../assets/cube/bright/Cube_Bright.After.pressed.0.png);
    height: 114px;
}

.cube-black-upgrade.cube-use-normal {
    background: url(../assets/cube/bright/Cube_Bright.Effect.Use.png);
    animation: cube-black-use-animation 1.8s steps(12) forwards 1;
    width: 179px;
    height: 312px;
    top: 41px;
    left: 5px;
}

.cube-black-upgrade.cube-use-tier {
    position: absolute;
    background: url(../assets/cube/bright/Cube_Bright.Effect.GradeUp.png);
    animation: tier-up-black-animation 1.5s steps(11) forwards 1;
    width: 188px;
    height: 352px;
    top: 5px;
    left: -4px;
}

.cube-black-main-window > .cube-before-result {
    height: 90px;
    width: 173px;
    left: 8px;
    top: 149px;
}

.cube-black-main-window > .cube-after-result {
    height: 90px;
    width: 173px;
    left: 8px;
    top: 264px;
}

@keyframes cube-black-use-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -3744px;
    }
}

@keyframes tier-up-black-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -3872px;
    }
}


.reset-cube-occult {
    background: url(../assets/cube/free/cube_mystical.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}     
.reset-cube-bonus_occult {
    background: url(../assets/cube/free/cube_glowing_mystical.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}          
.reset-cube-master {
    background: url(../assets/cube/free/cube_hard.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}                
.reset-cube-meister {
    background: url(../assets/cube/free/cube_solid.backgrnd3.png) !important;
    background-repeat: no-repeat !important;
}


.cube-main-violet {
    background: url(../assets/cube/violet/backgrnd.png);
    background-repeat: no-repeat;
    height: 300px;
    width: 210px;
}

.cube-main-violet > .cube-main-window {
    background: url(../assets/cube/violet/backgrnd2.png);
    background-repeat: no-repeat;
    height: 274px;
    width: 199px;
}

.cube-main-violet .cube-item-window {
    background: url(../assets/cube/violet/Cube_Violet.Effect.Normal.png);
    background-repeat: no-repeat;
    animation: cube-item-window-animation 1.8s steps(11) infinite;
    width: 196px;
    height: 86px;
    top: 41px;
    left: 2px;
}

.cube-main-violet .cube-window {
    background: none;
}

.cube-main-violet .cube-result {
    margin-top: -7px;
    line-height: 1em;
}

.cube-main-violet .cube-result-background {
    background-repeat: no-repeat;
    top: 131px;
    left: 6px;
    width: 191px;
    height: 115px;
}

.cube-main-violet .cube-result-background.result-rare {
    background: url(../assets/cube/violet/Rare.png);  
}
.cube-main-violet .cube-result-background.result-epic {
    background: url(../assets/cube/violet/Epic.png);  
}
.cube-main-violet .cube-result-background.result-unique {
    background: url(../assets/cube/violet/Unique.png);  
}
.cube-main-violet .cube-result-background.result-legendary {
    background: url(../assets/cube/violet/Legendary.png);  
}

.cube-main-violet .cube-item {
    left: 86px;
    top: 70px;
}

.cube-main-violet .btn-one-more-try {
    position: relative;
    background: url(../assets/cube/violet/BtConfirm.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 40px;
    height: 16px;
    top: 100px;
    left: 82px;
}

.cube-main-violet .btn-one-more-try:hover {
    background: url(../assets/cube/violet/BtConfirm.mouseOver.0.png);
}

.cube-main-violet .btn-one-more-try:active {
    background: url(../assets/cube/violet/BtConfirm.pressed.0.png);
}
.cube-main-violet .btn-one-more-try.disabled {
    background: url(../assets/cube/violet/BtConfirm.disabled.0.png);
}

.cube-main-violet.cube-main-violet-final .btn-one-more-try {
    position: relative;
    background: url(../assets/cube/violet/BtOk.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 37px;
    height: 16px;
    top: 100px;
    left: 65px;
}

.cube-main-violet.cube-main-violet-final .btn-one-more-try:hover {
    background: url(../assets/cube/violet/BtOk.mouseOver.0.png);
}

.cube-main-violet.cube-main-violet-final .btn-one-more-try:active {
    background: url(../assets/cube/violet/BtOk.pressed.0.png);
}
.cube-main-violet.cube-main-violet-final .btn-one-more-try.disabled {
    background: url(../assets/cube/violet/BtOk.disabled.0.png);
}


.cube-main-violet .btn-cube-ok {
    display: none;
    position: relative;
    background: url(../assets/cube/violet/BtCancel.normal.0.png);
    background-repeat: no-repeat !important;
    width: 37px;
    height: 16px;
    top: 100px;
    left: 64px;
}
.cube-main-violet .btn-cube-ok:hover {
    background: url(../assets/cube/violet/BtCancel.mouseOver.0.png);
}
.cube-main-violet .btn-cube-ok:active {
    background: url(../assets/cube/violet/BtCancel.pressed.0.png);
}
.cube-main-violet .btn-cube-ok.disabled {
    background: url(../assets/cube/violet/BtCancel.disabled.0.png);
}

.cube-main-violet.cube-main-violet-final .btn-cube-ok {
    display: inline-block;
}

.cube-main-violet .cube-att-result {
    display: none;
}

.cube-main-violet .cube-upgrade.cube-use-normal,.cube-main-violet .cube-upgrade.cube-use-tier {
    position: absolute;
    background: url(../assets/cube/violet/backgrnd4.png);
    background-repeat: no-repeat;
    animation: none;
    width: 191px;
    height: 115px;
    top: 131px;
    left: 6px;
}

.reset-cube-violet {
    background: url(../assets/cube/violet/backgrnd3.png) !important;
    background-repeat: no-repeat !important;
    height: 33px;
    width: 191px;
}

.reset-cube-uni {
    background: url(../assets/cube/uni/uni_backgrnd3.png) !important;
    background-repeat: no-repeat !important;    
    top: 0px;
    left: 0px;
    height: 47px;
}

.cube-main-uni .cube-window {
    top: 80px;
}
.cube-main-uni .cube-result-background {
    top: 148px;
}
.cube-main-uni .cube-use-normal, .cube-main-uni .cube-use-tier {
    position: absolute;
    background: url(../assets/cube/uni/UseEffect.Timeline.spritesheet.png);
    animation: tier-up-uni-animation 1.5s steps(11) forwards 1;
    width: 178px;
    height: 86px;
    top: 41px;
    left: 5px;
}

@keyframes tier-up-uni-animation {
    from {
        background-position-y: 0px;
    }
    to {
        background-position-y: -946px;
    }
}


.cube-main-uni .btn-one-more-try {
    position: relative;
    background: url(../assets/cube/uni/BtOnemore1.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 86px;
    height: 16px;
    top: 84px;
    left: 5px;
}
.cube-main-uni .btn-one-more-try:hover {
    background: url(../assets/cube/uni/BtOnemore1.mouseOver.0.png);
}
.cube-main-uni .btn-one-more-try:active {
    background: url(../assets/cube/uni/BtOnemore1.pressed.0.png);
}
.cube-main-uni .btn-one-more-try.disabled {
    background: url(../assets/cube/uni/BtOnemore1.disabled.0.png);
}

.cube-main-uni.cube-main-uni-again .btn-one-more-try {
    background: url(../assets/cube/uni/BtOnemore2.normal.0.png);
    width: 133px;
    height: 16px;
}
.cube-main-uni.cube-main-uni-again .btn-one-more-try:hover {
    background: url(../assets/cube/uni/BtOnemore2.mouseOver.0.png);
}
.cube-main-uni.cube-main-uni-again .btn-one-more-try:active {
    background: url(../assets/cube/uni/BtOnemore2.pressed.0.png);
}
.cube-main-uni.cube-main-uni-again .btn-one-more-try.disabled {
    background: url(../assets/cube/uni/BtOnemore2.disabled.0.png);
}

.cube-main-uni .btn-proceed {
    position: relative;
    background: url(../assets/cube/uni/BtOk.normal.0.png);
    background-repeat: no-repeat !important;
    display: inline-block;
    width: 86px;
    height: 16px;
    top: 84px;
    left: 3px;
}
.cube-main-uni .btn-proceed:hover {
    background: url(../assets/cube/uni/BtOk.mouseOver.0.png);
}
.cube-main-uni .btn-proceed:active {
    background: url(../assets/cube/uni/BtOk.pressed.0.png);
}
.cube-main-uni .btn-proceed.disabled {
    background: url(../assets/cube/uni/BtOk.disabled.0.png);
}

/* hidden when try again is shown */
.cube-main-uni.cube-main-uni-again .btn-proceed {
    display: none;
}

.cube-main-uni .btn-cube-ok {
    display: inline-block;
    position: relative;
    background: url(../assets/cube/uni/BtCancel.normal.0.png);
    background-repeat: no-repeat !important;
    width: 43px;
    height: 16px;
    top: 64px;
    left: 138px;
}
.cube-main-uni .btn-cube-ok:hover {
    background: url(../assets/cube/uni/BtCancel.mouseOver.0.png);
}
.cube-main-uni .btn-cube-ok:active {
    background: url(../assets/cube/uni/BtCancel.pressed.0.png);
}
.cube-main-uni .btn-cube-ok.disabled {
    background: url(../assets/cube/uni/BtCancel.disabled.0.png);
}

.cube-main-uni.cube-main-uni-again .btn-cube-ok {
    top: 84px;
    left: 2px;
}

#uniResultLine {
    background: url(../assets/cube/uni/uni_highlight.png);
    background-repeat: no-repeat !important;
    animation: expandFadeBackground 1s steps(8) forwards infinite;
    width: 157px;
    height: 12px;
    position: absolute;
    background-position: center;
}

@keyframes expandFadeBackground {
    0% {
        background-size: 50% 100%;
        opacity: 0;
        animation-delay: 250ms;
    }
    16.666% {
        background-size: 60% 100%;
        opacity: 0.16666;
    }
    33.333% {
        background-size: 65% 100%;
        opacity: 0.33333;
    }
    50% {
        background-size: 70% 100%;
        opacity: 0.5;
    }
    66.666% {
        background-size: 75% 100%;
        opacity: 0.66666;
    }
    83.333% {
        background-size: 78% 100%;
        opacity: 0.83333;
    }
    100% {
        background-size: 100% 100%;
        opacity: 1;
    }
}


#uniResultLine2 {
    background: url(../assets/cube/uni/OptionalBlindEffect.Timeline.spritesheet.png);
    background-repeat: no-repeat !important;
    animation: unifadeInExpand 1s steps(6) forwards 1;
    width: 156px;
    height: 12px;
    position: absolute;
}

@keyframes unifadeInExpand {
    0% {
        background-position-y: 0px;
    }
    90% {
        background-position-y: 0px; /* Keep the first frame for 90% of the time */
    }
    100% {
        background-position-y: -72px; /* Quickly cycle through the rest */
    }
}