.vd-wrapper,.vd-wrapper *,.vd-wrapper :after,.vd-wrapper :before{box-sizing:border-box}.vd-wrapper{position:relative;display:flex;flex:1 1 auto;align-items:center;max-width:100%;cursor:default}.vd-wrapper:not(.vd-wrapper--inline){cursor:pointer}.vd-wrapper:active,.vd-wrapper:focus{outline:0}.vd-wrapper--inline{width:304px;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.vd-wrapper--disabled{pointer-events:none}.vd-activator{display:flex;flex:1 1 auto;max-width:100%}.vd-menu,.vd-menu *,.vd-menu :after,.vd-menu :before{box-sizing:border-box}.vd-menu{display:none}.vd-menu--attached{display:inline}.vd-menu__activator{display:flex;align-items:center;cursor:pointer}.vd-menu *{cursor:pointer}.vd-menu__content{position:absolute;display:inline-block;border-radius:6px;max-width:80%;overflow-y:auto;overflow-x:hidden;contain:content;background-color:#fff;will-change:transform;box-shadow:0 2px 8px rgba(50,50,93,.2)}.vd-menu__content--fixed{position:fixed}.vd-menu__content--bottomsheet{position:fixed;top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;min-width:100%!important;border-radius:12px 12px 0 0}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-menu__content--bottomsheet{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-menu__content--bottomsheet{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}.vd-menu-transition-leave-active,.vd-menu-transition-leave-to{pointer-events:none}.vd-menu-transition-enter,.vd-menu-transition-leave-to{opacity:0}.vd-menu-transition-enter-active,.vd-menu-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.25,1);transition-property:opacity,transform}.vd-picker__input-clear__icon button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__input-clear__icon button:active,.vd-picker__input-clear__icon button:focus{outline:0;box-shadow:0}.vd-picker__input-clear__icon button[role=button],.vd-picker__input-clear__icon button[type=button],.vd-picker__input-clear__icon button[type=reset],.vd-picker__input-clear__icon button[type=submit]{cursor:pointer}.vd-picker__input{position:relative;display:flex;flex:1 1 auto;align-items:center;color:inherit;min-height:inherit}.vd-wrapper--rtl .vd-picker__input{direction:rtl}.vd-wrapper--rtl .vd-picker__input button,.vd-wrapper--rtl .vd-picker__input input[type=text]{margin:0 8px 0 0}.vd-picker__input--disabled{cursor:not-allowed;pointer-events:none}.vd-picker__input--disabled .vd-picker__input-icon__wrapper,.vd-picker__input--disabled input{opacity:.38}.vd-picker__input--no-calendar-icon button,.vd-picker__input--no-calendar-icon input{margin:0}.vd-picker__input-clear{align-self:flex-start;line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-picker__input-clear,.vd-picker__input-clear__icon{display:inline-flex}.vd-picker__input-clear__icon{justify-content:center;align-items:center;flex:1 0 auto}.vd-picker__input-clear__icon,.vd-picker__input-clear__icon .vd-icon.vd-icon{height:24px;min-width:24px;width:24px}.vd-picker__input-icon{align-self:flex-start;margin-top:4px;margin-right:auto;padding-right:4px;line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-picker__input-icon,.vd-picker__input-icon__wrapper{display:inline-flex}.vd-picker__input-icon__wrapper{align-items:center;height:24px;flex:1 0 auto;justify-content:center;min-width:24px;width:24px}.vd-picker__input input{position:relative;flex:1 1 auto;max-height:32px;padding:8px 0;max-width:100%;min-width:0;width:100%;background-color:transparent;border-style:none;color:inherit;font-stretch:normal;line-height:inherit;font-size:16px!important;font-weight:400;font-family:inherit;color:currentColor;cursor:inherit}.vd-picker__input input:active,.vd-picker__input input:focus{outline:0;box-shadow:none}.vd-picker__input input.placeholder{opacity:.6}.vd-picker__input input::-ms-input-placeholder{opacity:.6}.vd-picker__input input::-moz-placeholder{opacity:.6}.vd-picker__input input:-ms-input-placeholder{opacity:.6}.vd-picker__input input::placeholder{opacity:.6}.vd-picker__input input:-moz-placeholder,.vd-picker__input input::-moz-placeholder{opacity:.6}.vd-picker__input input:-ms-input-placeholder{opacity:.6}.vd-picker__input input::-webkit-input-placeholder{opacity:.6}.vd-icon.vd-icon{display:inline-flex;align-items:center;justify-content:center;letter-spacing:normal;line-height:1;text-indent:0;transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:transform,color;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-icon--link{cursor:pointer}.vd-icon--disabled{pointer-events:none;opacity:.6}.vd-picker__title-close button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__title-close button:active,.vd-picker__title-close button:focus{outline:0;box-shadow:0}.vd-picker__title-close button[role=button],.vd-picker__title-close button[type=button],.vd-picker__title-close button[type=reset],.vd-picker__title-close button[type=submit]{cursor:pointer}.vd-picker,.vd-picker *,.vd-picker :after,.vd-picker :before{box-sizing:border-box}.vd-picker{display:flex;flex-direction:column;width:304px;background-color:#fff;border-radius:6px;box-shadow:0 2px 8px rgba(50,50,93,.2)}.vd-picker:active,.vd-picker:focus{outline:0}.vd-picker--bottomsheet{width:100%;box-shadow:none}.vd-picker--bottomsheet .vd-picker-header{border-radius:0}.vd-picker--rtl{direction:rtl}.vd-picker__title{position:relative;display:flex;justify-content:space-between;align-items:center;height:48px;padding:8px 16px;border-radius:12px 12px 0 0}.vd-picker--rtl .vd-picker__title{padding:0 16px 0 0}@media only screen and (min-width:480px){.vd-picker__title{display:none}}.vd-picker__title p{margin:0}.vd-picker__title-close{position:relative;display:flex;align-items:center;justify-content:flex-end;height:24px;width:24px;border:none;outline:none;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vd-picker__title-close svg{width:24px;height:24px}.vd-picker__body{position:relative;flex:1 1 100%;flex-direction:column;height:auto;overflow:hidden;z-index:0}.vd-overlay,.vd-picker__body{display:flex}.vd-overlay{position:fixed;top:0;left:0;right:0;bottom:0;align-items:center;border-radius:inherit;justify-content:center;pointer-events:none;transition:.3s cubic-bezier(.25,.8,.5,1),z-index 1ms}.vd-overlay__content{position:relative}.vd-overlay__inner{position:absolute;left:0;right:0;top:0;bottom:0;height:100%;width:100%;border-radius:inherit;transition:inherit;will-change:opacity}.vd-overlay--absolute{position:absolute}.vd-overlay--active{pointer-events:auto}.vd-picker__controls-label button{margin:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__controls-label button:active,.vd-picker__controls-label button:focus{outline:0;box-shadow:0}.vd-picker__controls-label button[role=button],.vd-picker__controls-label button[type=button],.vd-picker__controls-label button[type=reset],.vd-picker__controls-label button[type=submit]{cursor:pointer}.vd-picker__controls{display:flex;height:48px;text-align:center;position:relative;width:100%}.vd-picker__controls-wrapper{overflow:hidden;justify-content:center}.vd-picker__controls-month,.vd-picker__controls-wrapper,.vd-picker__controls-year{position:relative;display:flex;align-items:center;flex:1}.vd-picker__controls-month{justify-content:flex-end}.vd-picker__controls-year{justify-content:flex-start}.vd-picker__controls-year.vd-picker__controls-year--center{justify-content:center}.vd-picker__controls-label{padding:8px 4px}.vd-picker__controls-label button{position:relative;display:flex;font-size:15px;font-weight:500;line-height:15px;padding:0;border:none;outline:none;transition:color .3s}.vd-picker__controls-label button:not(:hover):not(:focus){color:rgba(0,0,0,.87)}.vd-picker__controls-label button:disabled,.vd-picker__controls-label button[disabled]{cursor:default;color:rgba(0,0,0,.26)}.vd-picker__controls button.vd-picker__controls-next,.vd-picker__controls button.vd-picker__controls-prev{position:relative;flex:0 0 40px;height:48px;width:48px;padding:0 0 0 24px;border:none;outline:none;color:rgba(0,0,0,.87);background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media only screen and (min-width:768px){.vd-picker__controls button.vd-picker__controls-next,.vd-picker__controls button.vd-picker__controls-prev{padding:0 8px}}.vd-picker__controls button.vd-picker__controls-next:disabled,.vd-picker__controls button.vd-picker__controls-next[disabled],.vd-picker__controls button.vd-picker__controls-prev:disabled,.vd-picker__controls button.vd-picker__controls-prev[disabled]{cursor:default}.vd-picker__controls button.vd-picker__controls-next:disabled svg,.vd-picker__controls button.vd-picker__controls-next[disabled] svg,.vd-picker__controls button.vd-picker__controls-prev:disabled svg,.vd-picker__controls button.vd-picker__controls-prev[disabled] svg{color:rgba(0,0,0,.26)}.vd-picker--rtl .vd-picker__controls button.vd-picker__controls-next,.vd-picker--rtl .vd-picker__controls button.vd-picker__controls-prev{transform:rotate(180deg)}.vd-picker__controls button.vd-picker__controls-next{padding:0 24px 0 0}@media only screen and (min-width:768px){.vd-picker__controls button.vd-picker__controls-next{padding:0 8px}}.vd-picker__controls svg{width:24px;height:24px;vertical-align:middle}.vd-picker-header{color:#fff;padding:16px;display:flex;justify-content:space-between;flex-direction:column;flex-wrap:wrap;line-height:1;min-height:80px;height:80px;border-radius:6px 6px 0 0}@media only screen and (min-width:768px){.vd-picker-header{min-height:85px;height:85px}}.vd-picker-header--range .vd-picker-header__wrap{flex:1 1 auto;flex-direction:column;justify-content:space-between}.vd-picker-header--range .vd-picker-header__date{font-size:18px;height:26px}@media only screen and (min-width:768px){.vd-picker-header--range .vd-picker-header__date{font-size:22px;height:30px}}.vd-picker-header--year .vd-picker-header__year{flex:1 1 auto;font-size:22px;height:30px}.vd-picker-header__year{align-items:center;display:inline-flex;font-size:14px;margin-bottom:8px;opacity:.6;transition:opacity .3s}.vd-picker-header__year:focus:not(.vd-picker-header__year--active),.vd-picker-header__year:hover:not(.vd-picker-header__year--active){cursor:pointer;opacity:1}.vd-picker-header__year--active{opacity:1;cursor:default}.vd-picker-header__date,.vd-picker-header__wrap{position:relative;display:flex;width:100%}.vd-picker-header__date{font-size:22px;height:30px;text-align:left;overflow:hidden;padding-bottom:8px;margin-bottom:-8px;opacity:.6;transition:opacity .3s}.vd-picker-header__date:focus:not(.vd-picker-header__date--active),.vd-picker-header__date:hover:not(.vd-picker-header__date--active){cursor:pointer;opacity:1}.vd-picker-header__date--active{opacity:1;cursor:default}@media only screen and (min-width:768px){.vd-picker-header__date{font-size:24px;height:32px}}.vd-picker-preset{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker-preset:active,.vd-picker-preset:focus{outline:0;box-shadow:0}.vd-picker-preset[role=button],.vd-picker-preset[type=button],.vd-picker-preset[type=reset],.vd-picker-preset[type=submit]{cursor:pointer}.vd-picker-presets{position:relative;display:flex;padding:16px 12px}@media only screen and (min-width:480px){.vd-picker-presets{padding:16px 12px 8px}}.vd-picker-presets__wrapper{flex:1 1 auto;flex-wrap:wrap;width:100%}.vd-picker-preset,.vd-picker-presets__wrapper{position:relative;display:flex}.vd-picker-preset{align-items:center;justify-content:center;flex:0 0 50%;max-width:50%;padding:0 8px;font-size:14px;line-height:14px;overflow:hidden;border:0 solid #eef1f8;transition:opacity .3s cubic-bezier(.25,.8,.5,1)}.vd-picker--bottomsheet .vd-picker-preset,.vd-picker-preset{min-height:32px;height:32px}.vd-picker-preset:nth-child(odd){border-width:0 1px 1px}.vd-picker-preset:nth-child(odd):first-child{border-width:1px}.vd-picker-preset:nth-child(2n){border-width:0 1px 1px 0}.vd-picker-preset:nth-child(2n):nth-child(2){border-width:1px 1px 1px 0}.vd-picker-preset__effect{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .3s cubic-bezier(.25,.8,.5,1);z-index:0}.vd-picker-preset__name{position:relative;z-index:1}.vd-picker-preset--selected,.vd-picker-preset:hover:not(.vd-picker-preset--disabled){color:#fff}.vd-picker-preset--selected .vd-picker-preset__effect,.vd-picker-preset:hover:not(.vd-picker-preset--disabled) .vd-picker-preset__effect{opacity:1}.vd-picker-preset--selected{pointer-events:none}.vd-picker-preset--disabled{color:rgba(93,106,137,.2);cursor:not-allowed;pointer-events:none}.vd-picker__table{position:relative;padding:0 12px;height:274px}.vd-picker--bottomsheet .vd-picker__table{height:322px}.vd-picker__table-week{display:flex;flex-wrap:nowrap;flex:1 1 100%;max-width:100%;padding:8px 0;font-weight:600;font-size:12px;line-height:18px;font-weight:500;color:rgba(0,0,0,.38)}.vd-picker__table-weekday{flex:0 0 14.28571%;max-width:14.28571%;text-align:center}.vd-picker__table-days__wrapper{position:relative;overflow:hidden;height:240px}.vd-picker--bottomsheet .vd-picker__table-days__wrapper{height:288px}.vd-picker__table-days{display:flex;flex-wrap:wrap;overflow:hidden;width:100%}.vd-picker__table-day{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__table-day:active,.vd-picker__table-day:focus{outline:0;box-shadow:0}.vd-picker__table-day[role=button],.vd-picker__table-day[type=button],.vd-picker__table-day[type=reset],.vd-picker__table-day[type=submit]{cursor:pointer}.vd-picker__table-day{position:relative;width:14.28571%;height:40px;line-height:1;font-size:12px;float:left;text-align:center;color:currentColor;font-weight:500;transition:all .45s cubic-bezier(.23,1,.32,1);overflow:hidden}.vd-picker--bottomsheet .vd-picker__table-day{height:48px}.vd-picker__table-day__wrapper{position:absolute;top:2px;bottom:2px;left:0;right:0;border:none}.vd-picker__table-day__wrapper:before{content:"";position:absolute;top:0;bottom:0;opacity:0;width:50%;background-color:#fff;z-index:1;transition-property:opacity}.vd-picker__table-day__wrapper:after{content:"";position:absolute;top:0;left:50%;width:calc(100% + 1px);height:36px;border:1px solid;background-color:currentColor;opacity:.12;transform:translateX(-50%) scale(0)}.vd-picker--bottomsheet .vd-picker__table-day__wrapper:after{height:44px}.vd-picker__table-day__current,.vd-picker__table-day__effect{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;border:1px solid}.vd-picker--bottomsheet .vd-picker__table-day__current,.vd-picker--bottomsheet .vd-picker__table-day__effect{width:44px;height:44px}.vd-picker__table-day__current{color:rgba(0,0,0,.87);z-index:1}.vd-picker__table-day__effect{background-color:currentColor;transform:translateX(-50%) scale(0);transition:all .45s cubic-bezier(.23,1,.32,1);z-index:1}.vd-picker--range-selecting .vd-picker__table-day__effect{transition:unset}.vd-picker__table-day__text{position:relative;display:inline-flex;align-items:center;justify-content:center;margin:auto;width:36px;height:36px;color:rgba(0,0,0,.87);z-index:1}.vd-picker--bottomsheet .vd-picker__table-day__text{width:44px;height:44px}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between) .vd-picker__table-day__effect{transform:translateX(-50%) scale(1);opacity:.12}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__wrapper:before,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{opacity:1;right:0}.vd-picker--rtl .vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__wrapper:before,.vd-picker--rtl .vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{left:0;right:unset}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__wrapper:after,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:after{transform:translateX(-50%) scale(1);opacity:.08}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__effect,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__effect{opacity:1;transition:unset}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-end .vd-picker__table-day__text,.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__text{color:#fff}.vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{left:0}.vd-picker--rtl .vd-picker__table-day:hover:not(.vd-picker__table-day--disabled):not(.vd-picker__table-day--selected):not(.vd-picker__table-day--between).vd-picker__table-day--select-start .vd-picker__table-day__wrapper:before{right:0;left:unset}.vd-picker__table-day--selected .vd-picker__table-day__effect{transform:translateX(-50%) scale(1);opacity:1}.vd-picker__table-day--selected .vd-picker__table-day__text{color:#fff}.vd-picker__table-day--between:not(.vd-picker__table-day--disabled) .vd-picker__table-day__wrapper:after,.vd-picker__table-day--first .vd-picker__table-day__wrapper:after,.vd-picker__table-day--in-range:not(.vd-picker__table-day--disabled) .vd-picker__table-day__wrapper:after,.vd-picker__table-day--last .vd-picker__table-day__wrapper:after{transform:translateX(-50%) scale(1)}.vd-picker--range-selecting .vd-picker__table-day--first .vd-picker__table-day__wrapper:after,.vd-picker--range-selecting .vd-picker__table-day--last .vd-picker__table-day__wrapper:after,.vd-picker__table-day--in-range:not(.vd-picker__table-day--disabled) .vd-picker__table-day__wrapper:after{opacity:.08}.vd-picker__table-day--first .vd-picker__table-day__wrapper:before{opacity:1;left:0}.vd-picker--rtl .vd-picker__table-day--first .vd-picker__table-day__wrapper:before{right:0;left:unset}.vd-picker__table-day--last .vd-picker__table-day__wrapper:before{opacity:1;right:0}.vd-picker--rtl .vd-picker__table-day--last .vd-picker__table-day__wrapper:before{left:0;right:unset}.vd-picker__table-day--last:not(.vd-picker__table-day--select-start) .vd-picker__table-day__effect{opacity:1}.vd-picker__table-day--disabled.vd-picker__table-day{cursor:default}.vd-picker__table-day--disabled.vd-picker__table-day .vd-picker__table-day__text{color:rgba(93,106,137,.2)}.vd-picker-validate__button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker-validate__button:active,.vd-picker-validate__button:focus{outline:0;box-shadow:0}.vd-picker-validate__button[role=button],.vd-picker-validate__button[type=button],.vd-picker-validate__button[type=reset],.vd-picker-validate__button[type=submit]{cursor:pointer}.vd-picker-validate{display:flex;-ms-flex-align:center;justify-content:flex-end;padding:8px}.vd-picker-validate,.vd-picker-validate__button{position:relative;align-items:center}.vd-picker-validate__button{display:inline-flex;flex:0 0 auto;-ms-flex-align:center;justify-content:center;height:36px;min-width:44px;font-size:14px;font-weight:500;border-radius:4px;padding:6px 8px;outline:0;text-transform:uppercase;text-decoration:none;overflow:hidden}.vd-picker-validate__button+.vd-picker-validate__button{margin-left:8px}.vd-picker-validate__button:hover:not(:disabled) .vd-picker-validate__effect{opacity:.1}.vd-picker-validate__button:disabled,.vd-picker-validate__button[disabled]{color:rgba(0,0,0,.26)!important;cursor:default}.vd-picker-validate__effect{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .45s cubic-bezier(.23,1,.32,1);z-index:-1}.vd-picker__months-button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__months-button:active,.vd-picker__months-button:focus{outline:0;box-shadow:0}.vd-picker__months-button[role=button],.vd-picker__months-button[type=button],.vd-picker__months-button[type=reset],.vd-picker__months-button[type=submit]{cursor:pointer}.vd-picker__months{position:relative;display:flex;flex:1 1 auto;height:274px}.vd-picker--bottomsheet .vd-picker__months{height:322px}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-picker__months{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-picker__months{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}.vd-picker__months-inner{position:relative;width:100%;height:100%;padding:0 12px}.vd-picker__months-inner,.vd-picker__months-list{display:flex}.vd-picker__months-list{position:absolute;top:0;left:0;right:0;bottom:0;flex:1 1 auto;flex-wrap:wrap;justify-items:center;align-items:center}.vd-picker__months-button{position:relative;height:48px;min-height:48px;width:100%;font-size:15px;font-weight:500;border-radius:2px;outline:none;transition:background-color .3s;border:thin solid transparent}.vd-picker__months-button:hover{background-color:#eef1f8}.vd-picker__months-button:disabled,.vd-picker__months-button[disabled]{cursor:default;color:rgba(0,0,0,.26);pointer-events:none}.vd-picker__months-button__wrapper{position:relative;display:flex;flex:0 0 33.33333%;max-width:33.33333%;justify-content:center;align-items:center;height:25%;min-height:25%;padding:4px 8px}.vd-picker__quarters-button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none}.vd-picker__quarters-button:active,.vd-picker__quarters-button:focus{outline:0;box-shadow:0}.vd-picker__quarters-button[role=button],.vd-picker__quarters-button[type=button],.vd-picker__quarters-button[type=reset],.vd-picker__quarters-button[type=submit]{cursor:pointer}.vd-picker__quarters{position:relative;display:flex;flex:1 1 auto;height:274px}.vd-picker--bottomsheet .vd-picker__quarters{height:274px}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-picker__quarters{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-picker__quarters{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:var(--safe-area-inset-bottom)}}.vd-picker__quarters-inner{position:relative;display:flex;width:100%;height:100%;padding:0 12px}.vd-picker__quarters-list{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex:1 1 auto;flex-wrap:wrap;justify-items:center;align-items:center}.vd-picker__quarters-button{position:relative;height:48px;min-height:48px;width:100%;font-size:15px;font-weight:500;border-radius:2px;outline:none;transition:background-color .3s;border:thin solid transparent}.vd-picker__quarters-button:hover{background-color:#eef1f8}.vd-picker__quarters-button:disabled,.vd-picker__quarters-button[disabled]{cursor:default;color:rgba(0,0,0,.26);pointer-events:none}.vd-picker__quarters-button__wrapper{position:relative;display:flex;flex:1 1 100%;max-width:1 1 100%;justify-content:center;align-items:center;height:25%;min-height:25%;padding:4px 8px}.slide-x-transition-enter-active,.slide-x-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.slide-x-transition-enter,.slide-x-transition-leave-to{opacity:0;transform:translateX(-15px)}.slide-y-transition-enter-active,.slide-y-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.slide-y-transition-enter,.slide-y-transition-leave-to{opacity:0;transform:translateY(-15px)}.scale-transition-enter-active,.scale-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.scale-transition-enter,.scale-transition-leave,.scale-transition-leave-to{opacity:0;transform:scale(0)}.slide-in-out-transition-enter-active,.slide-in-out-transition-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height}.slide-in-out-transition-enter,.slide-in-out-transition-leave-to{opacity:0;transform:translateY(100%)}.slide-h-next-enter-active,.slide-h-next-leave-active,.slide-h-prev-enter-active,.slide-h-prev-leave-active,.slide-v-next-enter-active,.slide-v-next-leave-active,.slide-v-prev-enter-active,.slide-v-prev-leave-active{transition:all .3s cubic-bezier(.25,.8,.5,1);transition-property:opacity,transform,height;position:absolute}.slide-h-next-enter{opacity:0;transform:translateX(100%)}.slide-h-next-leave-to{opacity:0;transform:translateX(-100%)}.slide-h-prev-leave-to{opacity:0;transform:translateX(100%)}.slide-h-prev-enter{opacity:0;transform:translateX(-100%)}.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-next-enter,.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-prev-leave-to{transform:translateX(-50%) translateY(150%)}.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-next-leave-to,.vd-picker__controls-year.vd-picker__controls-year--center .slide-h-prev-enter{transform:translateX(-50%) translateY(-150%)}.vd-picker--rtl .slide-h-next-enter,.vd-picker--rtl .slide-h-prev-leave-to{transform:translateX(-100%)}.vd-picker--rtl .slide-h-next-leave-to,.vd-picker--rtl .slide-h-prev-enter{transform:translateX(100%)}.slide-v-next-leave-to{opacity:0;transform:translateY(100%)}.slide-v-next-enter{opacity:0;transform:translateY(-100%)}.slide-v-prev-enter{opacity:0;transform:translateY(100%)}.slide-v-prev-leave-to{opacity:0;transform:translateY(-100%)}.yearMonth-enter-active,.yearMonth-leave-active{position:absolute;transition:opacity .3s}.yearMonth-enter,.yearMonth-leave-to{opacity:0}.vd-picker__years{position:relative;height:322px;list-style-type:none;text-align:center;margin:0;padding:8px 0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.vd-picker--bottomsheet .vd-picker__years{height:370px}@supports (padding-bottom:constant(safe-area-inset-bottom)){.vd-picker__years{--safe-area-inset-bottom:constant(safe-area-inset-bottom);padding-bottom:calc(8px + var(--safe-area-inset-bottom))}}@supports (padding-bottom:env(safe-area-inset-bottom)){.vd-picker__years{--safe-area-inset-bottom:env(safe-area-inset-bottom);padding-bottom:calc(8px + var(--safe-area-inset-bottom))}}.vd-picker--validate .vd-picker__years{border-bottom:1px solid #eef1f8}.vd-picker__years li{position:relative;cursor:pointer;display:flex;justify-content:center;align-items:center;align-content:center;padding:8px 0;margin-left:12px;margin-right:12px;height:40px;min-height:40px;width:calc(100% - 24px);font-size:15px;font-weight:500;outline:none;transition:background-color .3s;border:thin solid transparent}.vd-picker--bottomsheet .vd-picker__years li{height:48px;min-height:48px}.vd-picker__years li:hover{background-color:#eef1f8}.vd-picker__years li:disabled,.vd-picker__years li[disabled]{cursor:default;color:rgba(0,0,0,.26);pointer-events:none}.vd-picker__years li+li{margin-top:2px}@-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: calc(var(--animate-duration) * 1.3); animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ /* * Owl Carousel - Core */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { background: none; color: inherit; border: none; padding: 0 !important; font: inherit; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: -webkit-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item { /** This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong calculation of the height of the owl-item that breaks page layouts */ } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } @charset "UTF-8"; body { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; margin: 0; } a { text-decoration: none; } ul { padding: 0; margin: 0; list-style: none; } .app-layout { margin: 0 auto; max-width: 1920px; width: 100%; background: #f7f7f7; } .clearfix:after { display: block; content: ""; clear: both; } .logo { padding: 19px 170px 21px 69px; background: rgba(0, 0, 0, 0.15); margin: 0 0 50px 0; position: relative; z-index: 1; } .logo a { text-decoration: none; width: 120px; height: 23px; color: #ffffff; font-style: normal; font-size: 30px; font-weight: 700; line-height: 30px; text-transform: uppercase; } .right_bar { margin-left: 360px; background: #fff; } .left_bar { float: left; } .top-bar nav { padding: 0 0 117px 0; } .top-bar ul { position: relative; z-index: 1; } .top-bar ul li { position: relative; } .top-bar ul li:hover, .top-bar ul li.active { box-shadow: inset 0 0 35px rgba(191, 61, 234, 0.13); background-color: #3d95f1; background: linear-gradient(90deg, rgba(255, 95, 121, 0.3), rgba(166, 58, 201, 0.85), rgba(166, 58, 201, 0.85), transparent, transparent); } .top-bar ul li:last-child { padding-bottom: 0; } .top-bar ul li.active:before { content: ""; background: url(../images/arrow_menu.png) no-repeat; height: 10px; width: 7px; position: absolute; top: 50%; margin: -5px 0 0 0; } .top-bar ul li:before { content: ""; background: url(../images/Shape.svg); height: 10px; width: 7px; position: absolute; top: 50%; margin: -5px 0 0 0; left: 69px; } .top-bar ul li a img { position: absolute; display: none; right: 15px; top: 50%; margin-top: -30px; } .top-bar ul li.active a img, .top-bar ul li:hover a img { display: block; } .top-bar ul li a { display: block; color: #ffffff; font-weight: 600; font-size: 24px; line-height: 30px; text-transform: uppercase; text-decoration: none; padding: 18px 0 18px 90px; } .top-bar { background: #e234f7; position: relative; box-shadow: inset -136px 0 99px rgba(21, 11, 65, 0.4); } .top-bar:after { content: ""; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; box-shadow: inset -45px -366px 90px rgba(21, 11, 65, 0.5); z-index: 0; } .install { margin: 0; position: relative; z-index: 12; } .install a { color: #ffffff; font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; display: block; padding: 30px 0 30px 80px; position: relative; background: url(../images/bg_top.jpg); box-shadow: inset -2px 0 2px rgba(57, 167, 242, 0.27); } .install a:hover { box-shadow: inset -2px 0 200px rgba(57, 167, 242, 0.27); } .install a:before { left: 17px; content: ""; position: absolute; height: 45px; top: 50%; width: 45px; transform: translateY(-50%); background-size: 100% 100%; } .install.windows a:before { background: url("../images/app/white/windows.svg") no-repeat; } .install.macos a:before { background: url("../images/app/white/macos.svg") no-repeat; } .install.linux a:before { background: url("../images/app/white/linux.svg") no-repeat; } .install.ios a:before { background: url("../images/app/white/apple.svg") no-repeat; } .install.android a:before { background: url("../images/app/white/android.svg") no-repeat; width: 45px; height: 25px; } .install a:after { content: ""; width: 80px; height: 80px; display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background-size: 100% 100%; opacity: 0.2; -webkit-filter: blur(2px); filter: blur(2px); } .install.windows a:after { background: url("../images/app/white/windows.svg") no-repeat; } .install.macos a:after { background: url("../images/app/white/macos.svg") no-repeat; } .install.linux a:after { background: url("../images/app/white/linux.svg") no-repeat; } .install.ios a:after { background: url("../images/app/white/apple.svg") no-repeat; } .install.android a:after { background: url("../images/app/white/android.svg") no-repeat; width: 80px; height: 45px; } .install a > div:first-child { font-size: 18px; } .install a > div:last-child { text-transform: none; } .users { background: #f7f7f7; overflow: auto; padding: 27px 0 0 0; height: 0px; box-sizing: border-box; } .main-page-banner-install { display: none; } @media (max-width: 979px) { .main-page-banner-install { display: inline-block; position: absolute; right: 10px; top: 10px; } .main-page-banner-install .install { display: block; } .main-page-banner-install .install a { background: #ffffff; color: #323232; border-radius: 10px; padding: 10px 20px 10px 60px; font-size: 18px; font-style: normal; box-shadow: none; } .main-page-banner-install .install a > div:first-child { font-size: 14px; } .main-page-banner-install .install a:before { width: 30px; height: 30px; left: 20px; } .main-page-banner-install .install a:after { display: none; } .main-page-banner-install .install.ios a:before { background: url("../images/app/apple.svg") no-repeat; } .main-page-banner-install .install.android a:before { background: url("../images/app/android.svg") no-repeat; height: 17px; } } .user { /*max-width: 240px;*/ max-width: 360px; width: 100%; margin: 0 auto; overflow: hidden; /*padding: 13px 0 4px 0;*/ padding: 13px 5% 4px 5%; box-sizing: border-box; border-bottom: 3px solid #ebedf1; } .user:first-child { border-top: 3px solid #ebedf1; } .user_img { float: left; } .user_text { margin: 15px 0 0 100px; } .user_name a { color: #f01d41; font-size: 24px; font-weight: 600; display: table; line-height: 30px; } .user_level { color: #24305b; font-size: 16px; font-weight: 600; letter-spacing: -0.18px; } .no-webp .main-baner { background: url(../images/header_bg.jpg) no-repeat; background-size: cover; } .main-baner { background: url(../images/header_bg.webp) no-repeat; background-size: cover; width: 100%; } .header { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 190, 180, 0.26); border-bottom: 1px solid rgb(255, 190, 180); } .balance { align-self: stretch; display: flex; align-items: center; justify-content: space-between; position: relative; color: #f1b9be; font-size: 18px; font-weight: 600; line-height: normal; padding: 0 0 0 98px; cursor: pointer; } .balance .amount { color: #ffffff; font-size: 18px; line-height: normal; font-weight: 600; text-transform: uppercase; position: relative; } .balance .amount.\--has-locked-balance::before { content: ""; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url("../images/warning-icon.svg") no-repeat center; background-size: 100%; } .header > .balance > .amount { display: inline-block; width: 100px; margin-left: 10px; } .balance:before { background: url(../images/coins.png) center center no-repeat; border-radius: 14px; content: ""; width: 79px; left: 18px; position: absolute; height: 63px; background-size: 100% 100%; } .level { position: relative; padding: 0 0 0 111px; height: 69px; } .level.default:before { content: ""; width: 4px; height: 100%; position: absolute; top: 0; left: 90px; background: #c4386a; transform: rotate(-6deg); } .level.default:after { content: ""; width: 4px; height: 100%; position: absolute; top: 0; right: -25px; background: #c4386a; transform: rotate(6deg); } .level_title.default:before { width: 100%; position: absolute; content: ""; border-top: 69px solid rgba(255, 255, 255, 0.1); border-right: 7px solid transparent; border-left: 7px solid transparent; height: 0; right: -25px; z-index: 0; padding: 0 15px; } .level_title { color: #ffffff; font-size: 21px; font-weight: 600; line-height: 30px; text-align: center; position: relative; z-index: 2; } .level_percent { color: #fff; font-size: 21px; font-weight: 600; float: left; line-height: normal; margin: -5px 0 0 0; position: relative; z-index: 2; } .level_content { width: 423px; box-shadow: 0 -2px 2px rgba(41, 12, 71, 0.27), 0 2px 2px rgba(255, 190, 180, 0.66); border-radius: 10px; background-color: #941974; border: 4px solid #941974; height: 20px; box-sizing: border-box; margin: 0 0 0 38px; position: relative; z-index: 2; } .level_strip { border-radius: 6px; background-color: #f2f3fc; background-image: linear-gradient(to right, #1eb83e 0%, #addb32 40%, #ffeb38 70%, #ffe7b2 90%, #fff9ea 100%); height: 100%; } .circular-level { --size: 44px; --half-size: calc(var(--size) / 2); --stroke-width: 4px; --inner-stroke-width: 3px; --radius: calc((var(--size) - var(--stroke-width) - var(--inner-stroke-width)) / 2); --circumference: calc(var(--radius) * 3.14159265359 * 2); --dash: calc((var(--progress) * var(--circumference)) / 100); --font-size: 14px; order: 2; } .circular-level svg { width: var(--size); height: var(--size); } .circular-level circle { cx: var(--half-size); cy: var(--half-size); r: var(--radius); stroke-width: var(--stroke-width); fill: none; stroke-linecap: round; } .circular-level circle.bg { stroke: #D33C8E; stroke-width: calc(var(--stroke-width) + var(--inner-stroke-width)); } .circular-level circle.bg2 { stroke: #941974; stroke-width: calc(var(--stroke-width)); } .circular-level circle.fg { transform: rotate(-90deg); transform-origin: var(--half-size) var(--half-size); stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash)); transition: stroke-dasharray 0.3s linear 0s; } .circular-level text.percentage { font-size: var(--font-size); fill: #ffdf5f; font-weight: bold; } @media (min-width: 1430px) { .circular-level { display: none; } } @media (max-width: 1430px) { .balance { order: 1; } .h_user { order: 3; } .right-top-btns { order: 4; } } @media (max-width: 1040px) { .balance > .text { display: none; } } @media (min-width: 992px) { .playing .circular-level { display: none; } } @media (max-width: 768px) { .circular-level { --size: 36px; --inner-stroke-width: 2px; --font-size: 12px; } } @media (max-width: 320px) { .playing .circular-level { display: none; } } .user_fone { width: 35px; display: inline-block; line-height: 35px; border-radius: 50%; height: 35px; box-shadow: 0 11px 9px rgba(162, 25, 96, 0.58), 0 3px 0 #c597fc; border: 2px solid #ffffff; background-color: #d23b8c; text-align: center; vertical-align: middle; margin: -10px 20px 0 0; } .user_fone img { max-width: 90%; } .h_user { display: inline-block; } .h_user > a:not(.user_fone) { margin-top: -10px; } .h_user a { color: #ffffff; font-size: 22px; font-weight: 600; } .right-top-btns { display: inline-block; vertical-align: middle; margin: 0 40px 0 0; position: relative; } .right-top-btns > a { display: inline-block; vertical-align: middle; color: #fff; text-decoration: none; position: relative; width: 70px; height: 49px; line-height: 49px; z-index: 2; text-align: center; margin: 0 0 0 18px; box-sizing: border-box; } .right-top-btns > a.active:before { background: linear-gradient(150deg, #9a34ff, #ffbe37); border-color: rgba(255, 255, 255, 0.8); } .right-top-btns > a img { max-height: 31px; } @media (max-width: 375px) { .right-top-btns > a { margin: 0; } } @media (max-width: 992px) { .right-top-btns > a { width: 50px; height: 35px; margin: 0 0 0 6px; line-height: 35px; } .right-top-btns > a img { max-height: 25px; } } .right-top-btns > a:first-child { margin: 0; } .right-top-btns > a:last-child { display: none; } .right-top-btns > a:last-child img { max-height: 20px; } .right-top-btns > a:before { content: ""; position: absolute; width: 100%; height: 100%; box-sizing: border-box; background: linear-gradient(150deg, rgba(176, 67, 240, 0.3), rgba(255, 255, 255, 0.3)); border: 2px solid rgba(255, 255, 255, 0.5); z-index: -1; border-radius: 5px; transform: skew(-7deg); top: 0; left: 0; } .right-top-btns > a:not(.active):hover:before { background: linear-gradient(150deg, rgba(255, 255, 255, 0.3), rgba(176, 67, 240, 0.3)); } .right-top-btns > a.setting { width: 90px; text-align: left; padding-left: 16px; } @media (max-width: 992px) { .right-top-btns > a.setting { width: 64px; text-align: center; padding-left: 0; padding-right: 10px; } } .right-top-btns > a.setting:after { content: ""; width: 10px; height: 6px; background: url(../images/top-arrow.png) no-repeat; position: absolute; top: 50%; right: 15px; margin: -3px 0 0 0; } @media (max-width: 992px) { .right-top-btns > a.setting:after { right: 5px; } } .right-top-btns > a > span { display: block; position: absolute; height: 18px; width: 18px; border: 3px solid #fff; border-radius: 50%; box-sizing: border-box; top: -9px; right: -9px; background: #f01f41; line-height: 12px; font-size: 10px; font-weight: bold; } .right-top-btns > a > img { display: inline-block; vertical-align: middle; } .baner_left { float: left; } .baner { padding: 0 0 52px 116px; overflow: hidden; position: relative; } .baner_title { display: inline-block; font-size: 84px; font-weight: 400; line-height: 82.62px; /* Text style for "500 EU, R," */ letter-spacing: 2.08px; margin: 54px 0 0 0; } .baner_title span { -webkit-text-fill-color: transparent; -webkit-background-clip: text !important; background: linear-gradient(to top, #ffae00 0%, #ffeb9a 100%); color: #f01f41; font-weight: 800; } .baner_title p { -webkit-text-fill-color: transparent; -webkit-background-clip: text !important; background: linear-gradient(to top, #ffae00 0%, #ffeb9a 100%); color: #f01f41; margin: -8px 0 0 0; padding: 0; color: #f01f41; font-size: 73px; font-weight: 800; line-height: 82.62px; letter-spacing: -0.45px; } .baner_img { position: absolute; bottom: 0; right: 200px; } .baner_img img { display: block; } .baner_btn { width: 265px; height: 95px; background: url(../images/btn_reg.png) no-repeat; color: #ffffff; font-size: 40px; font-weight: 400; line-height: 30px; padding: 29px 93px 24px 50px; text-transform: uppercase; position: relative; display: inline-block; vertical-align: middle; box-sizing: border-box; } .baner_btn:after { content: ""; position: absolute; background: url(../images/arrow2.svg) no-repeat; width: 16px; top: 50%; margin-top: -7px; right: 25px; height: 14px; } .baner_btn:before { content: ""; display: block; width: auto; height: 100%; box-shadow: 0px 27px 32px rgb(9, 0, 76); position: absolute; top: 0; left: 5px; right: 5px; transform: skew(-7deg); border-radius: 15px; } .btn_reg { display: inline-block; border: 3px solid #4b0945; text-shadow: 0 7px 6px #450740; color: #ffffff; font-size: 50px; font-weight: 700; line-height: 72px; text-transform: uppercase; /* Text style for "+ 200 Free" */ letter-spacing: -0.25px; position: relative; } .baner_btns { margin: 33px 0 0 4px; } .baner_btns a { display: inline-block; vertical-align: top; } .baner_btns a span { color: #ffffff; font-size: 50px; } .baner_btns a.spin { position: relative; z-index: 1; font-size: 24px; text-decoration: none; color: #fff; margin: 4px 0 0 34px; letter-spacing: -0.6px; } .baner_btns a.spin span { color: #43f6c6; text-shadow: 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945; text-transform: uppercase; } .baner_btns a.spin:before { content: ""; width: 265px; height: 74px; -ms-flow-into: none; flow-into: none; position: absolute; top: -3px; left: 12px; border: 2px solid #fff; background: linear-gradient(to bottom, #f1ad52, #f2573d); transform: skew(-7deg); border-radius: 10px; box-shadow: 0 0 125px rgb(255, 222, 166); z-index: -1; } .baner_btns a.spin p { font-weight: 500; font-style: italic; margin: 20px 0 0 0; text-align: center; text-shadow: 0px 2px 3px rgb(9, 0, 76); } .btn_reg_span { display: inline-block; color: #ffffff; font-size: 24px; position: absolute; left: 0; top: 60px; font-weight: 400; line-height: 30px; width: 100%; text-align: center; letter-spacing: -0.48px; } .tickets_title { margin: 21px 0 30px 14px; text-align: center; text-shadow: 0 9px 8px rgba(34, 79, 185, 0.74); font-size: 60px; font-weight: 800; /* Text style for "Wheel of K" */ letter-spacing: -0.6px; color: #ffce51; text-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); position: relative; z-index: 1; } .tickets { background: url(../images/ticket_bg.png) no-repeat; width: 100%; position: relative; overflow: hidden; padding: 0 0 78px 0; } .tickets2 { background: url(../images/bg_2.png) top left no-repeat; } .tickets:after { content: ""; width: 100%; height: 10px; position: absolute; left: 0; top: 0; background: rgba(127, 227, 252, 0.7); } .tickets:before { content: ""; left: -366.5px; top: -417px; position: absolute; background: url(../images/tickets_left.png) no-repeat; width: 933px; height: 1034px; z-index: 1; } .ticket { z-index: 10; position: relative; width: 100%; background: url(../images/ticket_bg1.png) no-repeat; background-size: auto 100%; height: 100%; max-width: 400px; box-shadow: 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77), 0 5px 3px rgba(18, 48, 114, 0.77); border-radius: 24px; border: 6px solid #ffffff; background-color: #f01f41; float: left; margin: 0 0 0 25px; padding: 22px 0 31px 23px; box-sizing: border-box; } .ticket:before { content: ""; width: 100%; height: 100%; border-bottom: 3px solid #e896b7; border-radius: 24px; position: absolute; top: 6px; left: -6px; padding: 0 6px; z-index: -1; } .ticket.second { z-index: 10; position: relative; width: 100%; background: #08dab9 url(../images/ticket_bg2.png) no-repeat; background-size: auto 100%; height: 100%; max-width: 400px; box-shadow: 0 23px 23px rgba(18, 48, 114, 0.77), 0 5px 0 #e896b7; border-radius: 24px; border: 6px solid #ffffff; overflow: hidden; float: left; } .tickets_content { display: flex; justify-content: space-around; } .ticket_title { color: #ffd764; text-shadow: 1px 2px 4px rgba(127, 0, 32, 0.5); font-size: 28px; font-weight: 600; line-height: 30px; margin: 0 0 10px 0; display: inline-block; } .ticket_title span { display: block; text-transform: uppercase; font-size: 33px; } .ticket_description { color: #ffffff; font-size: 22px; font-weight: 600; line-height: 26px; min-height: 104px; } .ticket_btn { float: none; color: #ffffff; font-size: 24px; font-weight: 600; background: none; border-radius: 8px; padding: 10px 20px; position: relative; z-index: 1; } .ticket_btn:before { content: ""; width: 100%; height: 50px; display: block; position: absolute; top: 0; left: 0; transform: skew(-7deg); border: 2px solid #fffcf9; border-radius: 10px; z-index: -1; box-shadow: 0 0 5px #fffcf9; } .ticket_btn:after { content: ""; width: 100%; height: 50px; display: block; position: absolute; top: 0; left: 0; transform: skew(-7deg); border: 2px solid transparent; border-radius: 10px; z-index: -1; box-shadow: inset 0 0 15px #fffcf9; } .ticket_btn:hover:after { box-shadow: inset 0 0 15px rgba(251, 169, 169, 0.8); } .ticket img { position: absolute; bottom: -27px; right: -31px; } .ticket_img { position: relative; } .ticket_img img { position: absolute; } .ticket_title.second { background: none; color: #ffffff; font-size: 38px; font-weight: 400; line-height: 42px; } .ticket_description.second { -webkit-background-clip: text; background-clip: text; text-shadow: 1px 2px 4px rgba(0, 63, 44, 0.53); color: #ffffff; font-weight: 700; font-size: 50px; line-height: 30px; text-transform: uppercase; min-height: 80px; } .ticket.three { background: #b3a9fb url(../images/ticket_bg3.png); background-size: auto 100%; } .ticket.three .ticket_title { font-size: 36px; color: #fff; font-weight: 700; } .ticket.three .ticket_title span { color: #ffcf51; font-weight: 700; padding: 8px 0 8px 0; } .ticket.three .ticket_description { min-height: 88px; } .no-webp footer { background: url(../images/footer-bg.png) no-repeat; } footer { background: url(../images/footer-bg.webp) no-repeat; background-size: cover; width: 100%; max-width: 1920px; min-height: 525px; padding-bottom: 44px; clear: both; position: relative; box-sizing: border-box; } .no-webp footer:before { background: url(../images/footer-kong.png) no-repeat; } footer:before { content: ""; width: 400px; height: 288px; background: url(../images/footer-kong.webp) no-repeat; position: absolute; left: 0; bottom: 0; } .footer-img img { display: block; } .footer_container { margin: 0 auto; max-width: 1630px; display: flex; justify-content: space-between; padding: 88px 0 0 0; } .footer_logo { color: #ffffff; font-size: 48px; line-height: 30px; letter-spacing: -0.48px; font-weight: 700; } .column_title_test { background: linear-gradient(to top, #faa914 0%, #ffdf5f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #453fee; } .column_title { background: linear-gradient(to top, #faa914 0%, #ffdf5f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #453fee; font-size: 24px; font-weight: 700; line-height: 30px; text-transform: uppercase; letter-spacing: 0.48px; margin: 0 0 32px -20px; } .footer_column { max-width: 420px; margin-top: 20px; margin: 7px 0 0 0; } .footer_column ul li { display: inline-block; vertical-align: middle; width: 49%; } .footer_column ul li a { color: #ffffff; font-size: 24px; font-weight: 400; line-height: 57px; letter-spacing: -0.24px; position: relative; display: block; } @media (max-width: 375px) { .footer_column ul li a { font-size: 16px; line-height: 36px; } } @media (min-width: 375px) and (max-width: 768px) { .footer_column ul li a { font-size: 18px; line-height: 40px; } } .footer_column ul li a:before { content: ""; position: absolute; width: 7px; height: 10px; background: url(../images/footer-li.png) no-repeat; top: 50%; left: -20px; transform: translateY(-50%); } .footer_column ul li a:hover { color: #999; transition: 0.3s; } .actions { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 106px 43px 0 65px; } .action { flex-basis: 680px; background-image: url(../images/action1.png); background-size: 100% 100%; border-radius: 20px; border: 5px solid #fff; padding: 30px 0 0 47px; box-sizing: border-box; min-height: 330px; box-shadow: 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2, 0 7px 3px #7c4ed2; position: relative; margin: 0 0 80px 0; } .action > div { position: relative; z-index: 3; } .action:before { content: ""; width: 100%; height: 100%; border-bottom: 5px solid #e896b7; border-radius: 24px; position: absolute; top: 5px; left: -5px; padding: 0 5px; z-index: 0; } .action-title { font-size: 50px; color: #ffcf51; text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); font-weight: 700; text-transform: uppercase; margin: 0 0 6px 0; } .action-decription { color: #fff; font-size: 22px; } .action-decription p { margin: 10px 0 7px 0; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); } .action-decription p.big { font-size: 33px; color: #feff3e; } .action-decription > span { color: #57f8ed; font-size: 33px; text-transform: uppercase; } .action > .action-img { position: absolute; right: 0; bottom: 0; z-index: 2; } .action-img img { display: block; } .action-img.last { z-index: 1; } .action2 { background: linear-gradient(to top, #ff002c, #f42f51); box-shadow: 0 7px 3px #a52488, 0 7px 3px #a52488, 0 7px 3px #a52488, 0 7px 3px #a52488, 0 7px 3px #a52488, 0 7px 3px #a52488, 0 7px 3px #a52488; } .action-decription ul { font-size: 22px; } .action-decription ul li { padding: 0 0 0 19px; position: relative; display: block; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); } .action-decription ul li span { color: #feff3e; } .action-decription ul li:before { content: ""; width: 7px; height: 10px; background: url(../images/li.png); position: absolute; left: 4px; top: 9px; } .action > .action-btn { position: absolute; left: 57px; bottom: 48px; padding: 0 0 0 0; font-size: 24px; text-decoration: none; } .action > .action-btn.right { left: auto; right: 40px; bottom: 37px; } .action-btn a { width: 155px; height: 52px; display: block; background: url(../images/action-btn.png) no-repeat; box-sizing: border-box; color: #fff; padding: 8px 0 0 33px; position: relative; z-index: 1; } .action-btn a:hover { opacity: 0.95; } .action .action-link { position: absolute; right: 15px; bottom: 15px; font-size: 18px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); } .action .action-link a { border-bottom: 2px solid #87d7fd; padding-bottom: 1px; transition: border-color 0.1s ease; color: #ffffff; } .action .action-link a:hover { color: #87d7fd; border-bottom-color: transparent; } .action3 { background-image: url(../images/action3.png); box-shadow: 0 7px 3px #d57423, 0 7px 3px #d57423, 0 7px 3px #d57423, 0 7px 3px #d57423, 0 7px 3px #d57423, 0 7px 3px #d57423, 0 7px 3px #d57423; } .action4 { background-image: url(../images/action4.png); box-shadow: 0 7px 3px #5cb1bf, 0 7px 3px #5cb1bf, 0 7px 3px #5cb1bf, 0 7px 3px #5cb1bf, 0 7px 3px #5cb1bf, 0 7px 3px #5cb1bf, 0 7px 3px #5cb1bf; } .action3 .action-title, .action4 .action-title { color: #fff; } .cashback { background: url(../images/cashback-bg.png) no-repeat; background-size: 100% 100%; position: relative; margin: 41px 0 0 0; padding: 0 0 90px 0; } .cashback-img { position: absolute; bottom: 0; left: 50px; } .cashback-img img { display: block; } .cashback-description { max-width: 600px; margin: 0 103px 0 auto; } .cashback-title { font-weight: 700; font-size: 100px; line-height: 92%; color: #ffc335; text-shadow: 0 4px 2px #9e2100; padding: 61px 0 80px 0; letter-spacing: -2.3px; position: relative; } .cashback-title:after { content: ""; width: 133px; height: 5.5px; background: #ffd57e; position: absolute; left: 0; bottom: 0; } .cashback-title span { text-transform: uppercase; } .cashback-text { font-size: 46px; color: #fff; font-style: italic; padding: 39px 0 0 0; letter-spacing: -0.7px; } .cashback-text p { margin: 0 0 -10px 0; } .cashback-text span { display: block; font-size: 30px; color: #ffecab; margin: 30px 0 0 0; } .social_footer { margin: 50px 0 0 0; } .social_footer a:hover { opacity: 0.7; transition: 0.3s; } select { /*display: none;*/ } .jq-selectbox__select { display: inline-block; position: relative; cursor: pointer; background: rgba(0, 0, 0, 0.19); border: 3px solid rgba(255, 170, 216, 0.34); color: #fff; font-size: 21px; padding: 14.5px 50px 14.5px 20px; border-radius: 30px; } .jq-selectbox__select:after { content: ""; width: 10px; height: 7px; background: url(../images/select.png) no-repeat; background-size: 100% 100%; position: absolute; right: 15px; top: 50%; margin: -3.5px 0 0 0; } .opened .jq-selectbox__select { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .jq-selectbox { position: relative; display: inline-block; z-index: 97; } .jq-selectbox__dropdown { width: 100%; border-radius: 30px; border-top-left-radius: 0; border-top-right-radius: 0; box-sizing: border-box; position: absolute; background: rgba(16, 6, 92, 0.9); border: 3px solid rgba(255, 170, 216, 0.34); border-top: 0; padding: 10px 0; z-index: 97; } .jq-selectbox__dropdown li { color: #fff; font-size: 24px; cursor: pointer; padding: 4px 0 4px 10px; } .jq-selectbox.dropup .jq-selectbox__dropdown { border-radius: 0; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: 0; border-top: 3px solid rgba(255, 170, 216, 0.34); } .jq-selectbox.dropup .jq-selectbox__select { border-radius: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .left-bar { width: 360px; } img { max-width: 100%; } .main-menu-btn { display: none; } .balance-content { position: absolute; top: 100%; left: 35px; margin: 35px 0 0 0; border-radius: 15px; z-index: 11; width: 320px; padding: 10px 0; cursor: default; } .balance.active .balance-content { display: block; } .balance-content:before { content: ""; width: 100%; height: 100%; padding: 5px 5px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.4); left: -4px; top: -4px; position: absolute; z-index: -1; border-radius: 15px; } .balance-content:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: #682891; border: 2px solid #74349c; border-radius: 15px; } .setting-menu { position: absolute; top: 80px; right: 20px; z-index: 10; padding: 10px 10px; min-width: 210px; text-align: left; } .setting-menu:before { content: ""; width: 100%; height: 100%; padding: 5px 5px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.4); left: -4px; top: -4px; position: absolute; z-index: -1; border-radius: 15px; } .setting-menu:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: #682891; border: 2px solid #74349c; border-radius: 15px; } .setting-menu ul { position: relative; z-index: 1; font-size: 21px; } .setting-menu ul li { margin: 7.5px 0; } .setting-menu ul li a { color: #fff; text-decoration: none; padding: 0 0 0 7px; } .setting-menu ul li a img { display: inline-block; vertical-align: middle; margin: 0 7px 0 0; } .setting-menu ul li a span { display: inline-block; vertical-align: middle; } .setting-menu ul li.bottom { border-top: 1px solid #4e1671; margin: 20px 0 0 0; padding-top: 19px; } .setting-menu ul li a:hover { color: #777; } .balance-row { position: relative; z-index: 1; font-size: 21px; padding: 12px 0 12px 55px; } .balance-row img { display: block; position: absolute; left: 17px; top: 50%; transform: translate(0, -50%); } .balance-row span { font-size: 23px; color: #fab96d; display: block; position: absolute; right: 25px; bottom: 12px; } .balance-row:first-child span { font-size: 24px; color: #90f9c2; } .promotion { color: #fff; padding: 0 0 0 60px; position: relative; z-index: 2; } .promotion-title { font-size: 72px; font-weight: 700; color: #ffc53a; text-shadow: 0 5px 2px rgba(0, 0, 0, 0.1); margin: 110px 0 0 0; } .promotion > p { font-size: 30px; max-width: 600px; margin: 50px 0 30px 0; } .promotion-content { font-size: 38px; } .promotion-content p { margin: 0 0 0 0; } .promotion-content p img, .promotion-content p span { display: inline-block; vertical-align: middle; } .promotion-content p img { margin: 0 15px 0 0; } .promotion-content b { color: #57f8ed; } .sign-up-btn a { display: block; position: relative; font-size: 60px; text-decoration: none; color: #fff; padding: 18.5px 0; text-align: center; z-index: 11; text-transform: uppercase; margin: -10px 0 0 0; } .sign-up-btn a:hover { color: #e5e5e5; } .sign-up-btn a:after { content: ""; width: 552px; height: 285px; background: url(../images/sign-up.png) no-repeat; position: absolute; z-index: -1; top: 50%; left: 0; margin: -145px 0 0 0; } .main .header { background: linear-gradient(to top, #56257c, #6d2792); } .log-sign { margin: 0 35px 0 0; } .log-sign a { width: 125px; display: inline-block; vertical-align: middle; font-size: 24px; color: #fff; text-decoration: none; z-index: 1; position: relative; padding: 11px 0; text-align: center; } .log-sign a:before { content: ""; position: absolute; width: 100%; height: 100%; box-sizing: border-box; box-shadow: 0 0 25px #fdd7ac; z-index: -1; border-radius: 10px; transform: skew(-7deg); top: 0; left: 0; } .log-sign a:after { content: ""; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #fdd7ac; box-shadow: inset 0 0 15px #fdd7ac; z-index: -1; border-radius: 10px; transform: skew(-7deg); top: 0; left: 0; } .log-sign a:hover:after { box-shadow: inset 0 0 10px #fdd7ac; } .log-sign a:hover:before { box-shadow: 0 0 15px #fdd7ac; } .log-sign a:last-child { margin: 0 0 0 25px; } @media (max-width: 768px) { .log-sign a:last-child { margin-left: 5px; } } .log-sign a:last-child:before { display: none; } .log-sign a:last-child:after { box-shadow: none; background: url(../images/end.png) no-repeat; background-size: 100% 100%; border: 0; transform: skew(0); } .bonus { position: absolute; top: 100%; left: -260px; z-index: 1; width: 328px; z-index: 1; color: #fff; box-sizing: border-box; padding: 25px 25px 30px 50px; margin: 20px 0 0 0; display: none; } .rewards .bonus { width: 280px; } .right-top-btns.active .bonus { display: block; } .bonus > * { display: block; position: relative; z-index: 1; } .bonus:before { content: ""; width: 100%; height: 100%; padding: 5px 5px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.4); left: -4px; top: -4px; position: absolute; z-index: -1; border-radius: 15px; } .bonus:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: #682891; border: 2px solid #74349c; border-radius: 15px; } .bonus-title { font-size: 34px; margin: 0 0 15px 0; } .bonus-title:after { content: ""; width: 22px; height: 18px; background: url(../images/bonus-letter.png) no-repeat; position: absolute; left: -38px; top: 16px; } .bonus-title span { display: block; font-size: 21px; } .bonus p { font-size: 18px; color: #ffcbcb; margin: 0 0 0 0; } .close-bonus { width: 16px; height: 16px; position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 2; } .close-bonus:before { content: ""; position: absolute; top: 5px; left: 0; transform: rotate(-45deg); width: 100%; height: 2px; border-radius: 1px; background: #fff; } .close-bonus:after { content: ""; position: absolute; top: 5px; left: 0; transform: rotate(45deg); width: 100%; height: 2px; border-radius: 1px; background: #fff; } .bonus-coins { position: absolute; bottom: 100%; height: 88px; background: url(../images/bonus-coins.png) center no-repeat; left: 50%; width: 88px; text-align: center; margin: 0 0 -44px 0; transform: translateX(-50%); } .no-webp .main-page-banner { background: url(../images/main-banner.jpg) top center no-repeat; } .main-page-banner { background: url(../images/main-banner.webp) top center no-repeat; position: relative; padding: 80px 0 100px 0; background-size: cover; z-index: 0; } .main-page-banner-top { left: 90px; top: 220px; position: absolute; font-weight: 700; font-size: 48px; color: #41f5cb; text-transform: uppercase; text-shadow: 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945, 0 0 4px #4b0945; } .main-page-banner-top:before { content: ""; display: block; width: 520px; height: 324px; background: url(../images/Jackpot.png) no-repeat; position: absolute; top: -224px; left: -128px; } .main-page-banner-top span { display: block; position: relative; z-index: 1; } .main-page-banner-block { width: 490px; height: 425px; margin: 0 auto; background: #fff; border-radius: 15px; position: relative; z-index: 1; box-sizing: border-box; padding: 0 20px; } .main-page-banner-block:before { content: ""; width: 100%; height: 100%; padding: 25px 25px; background: rgba(255, 255, 255, 0.6); display: block; position: absolute; left: -25px; top: -25px; z-index: 0; border-radius: 25px; } .main-page-banner-title { font-size: 90px; font-weight: 800; color: #fa694e; text-align: center; line-height: 100%; position: relative; z-index: 1; padding: 35px 0 30px 0; transition: opacity 0.1s ease-in; box-sizing: border-box; } .main-page-banner-text { font-size: 48px; color: #3c6ff3; text-align: center; text-transform: uppercase; font-weight: 800; position: relative; z-index: 1; transition: opacity 0.1s ease-in; box-sizing: border-box; } .main-page-banner-custom .main-page-banner-title { font-size: 80px; } .main-page-banner-custom .main-page-banner-text { font-size: 38px; color: #3c6ff3; text-align: center; text-transform: uppercase; font-weight: 800; position: relative; z-index: 1; } .main-page-banner-btn { margin: 12px 0 -40px 0; position: relative; z-index: 1; transition: opacity 0.1s ease-in; } .main-page-banner-btn a { display: block; text-align: center; width: 375px; height: 168px; position: relative; font-size: 60px; color: #fff; padding: 43px 0 0 0; margin: 0 auto 0 auto; } .main-page-banner-btn a:before { content: ""; width: 150%; height: 100%; background: url(../images/button_rd.png) top center no-repeat; position: absolute; top: 0; left: -25%; z-index: 0; } .main-page-banner-btn a:hover { opacity: 0.8; } .main-page-banner-btn a span { display: block; color: #ffdb8f; font-size: 24px; position: relative; z-index: 1; } .main-page-banner-btn a b { position: relative; z-index: 1; font-weight: 600; } .no-webp .main-page-banner-left { background: url("../images/kong-left.png") no-repeat; } .main-page-banner-left { position: absolute; left: 0; bottom: -142px; width: 561px; height: 470px; background: url("../images/kong-left.webp") no-repeat center; } .no-webp .main-page-banner-right { /*background: url('../images/kong-right-2.png') no-repeat;*/ } .main-page-banner-right { position: absolute; right: 0; bottom: -100px; height: 720px; /* width: 482px; background: url('../images/kong-right-2.webp') no-repeat center; */ } .main-page-banner-left img, .main-page-banner-right img { display: block; } .main-page-banner-interac { position: absolute; top: 15px; left: 15px; color: #ffffff; text-align: center; letter-spacing: 0.8px; font-size: 18px; line-height: 1; text-transform: uppercase; } .main-page-banner-interac img { display: block; width: 150px; } @media (max-width: 992px) { .main-page-banner-interac { font-size: 14px; } .main-page-banner-interac img { width: 110px; } } .games-content { padding: 0 60px; background: rgb(206, 239, 255); background: linear-gradient(180deg, rgb(206, 239, 255) 0%, rgb(255, 255, 255) 100%); border-top: 7px solid #bee0fa; } .games-title { font-size: 48px; text-align: center; color: #423780; padding: 40px 0 40px 0; font-weight: 800; } @media (max-width: 375px) { .games-title { font-size: 30px; } } @media (min-width: 375px) and (max-width: 768px) { .games-title { font-size: 38px; } } .games { text-align: center; } .games.hide-badge .game .game-new { display: none !important; } .games.hide-badge .game .game-popular { display: none !important; } .game { width: 29%; display: inline-block; vertical-align: top; margin: 0 4% 25px 0; position: relative; } .game .game-new { content: ""; display: block; width: 60px; height: 31px; background: url("../images/games_bar/new.svg") no-repeat center; background-size: 100%; position: absolute; left: -4px; top: 10px; z-index: 3; } @media (max-width: 992px) { .game .game-new { width: 50px; height: 26px; } } @media (max-width: 768px) { .game .game-new { width: 40px; height: 21px; } } .game .game-popular { content: ""; display: block; width: 60px; height: 31px; background: url("../images/games_bar/top.svg") no-repeat center; background-size: 100%; position: absolute; left: -4px; top: 10px; z-index: 3; } @media (max-width: 992px) { .game .game-popular { width: 50px; height: 26px; } } @media (max-width: 768px) { .game .game-popular { width: 40px; height: 21px; } } .game .game-players { display: flex; align-items: center; gap: 5px; position: absolute; bottom: 10px; left: 10px; padding: 4px 8px; background-color: #9b37ff; border: 1px solid #ab83ee; border-radius: 5px; color: #ffffff; font-weight: 600; font-size: 14px; z-index: 1; } .game .game-players .game-players__icon { display: inline-block; width: 8px; height: 8px; background-color: #1FFF20; border-radius: 50%; position: relative; box-shadow: 0 0 10px 3px rgb(31, 255, 32); /*animation: shine 2s infinite ease-in-out;*/ } @media (max-width: 768px) { .game .game-players { font-size: 12px; padding: 2px 4px; bottom: unset; top: 10px; left: unset; right: 5px; } .game .game-players .game-players__icon { width: 6px; height: 6px; box-shadow: 0 0 8px 2px rgb(31, 255, 32); } .game .game-players svg { width: 10px; height: 10px; } } @-webkit-keyframes shine { 0%, 100% { box-shadow: 0 0 10px 3px rgb(31, 255, 32); } 50% { box-shadow: 0 0 14px 5px rgba(31, 255, 32, 0.8); } } @keyframes shine { 0%, 100% { box-shadow: 0 0 10px 3px rgb(31, 255, 32); } 50% { box-shadow: 0 0 14px 5px rgba(31, 255, 32, 0.8); } } /* .game:nth-child(3n){ margin-right: 0; } */ .games.small .game, .games.small .game:nth-child(3n) { width: 18%; margin: 0 2% 20px 0; } .games.small .game .game_name, .games.small .game:nth-child(3n) .game_name { font-size: 30px; } .games.small .game .game_provider, .games.small .game:nth-child(3n) .game_provider { font-size: 20px; } .games.small .game .game_link_demo, .games.small .game:nth-child(3n) .game_link_demo { font-size: 16px; } .games.small .game .game_play, .games.small .game:nth-child(3n) .game_play { width: 30px; height: 30px; } .games.small .game:nth-child(5n) { margin-right: 0; } .game-img { border-radius: 20px; position: relative; z-index: 2; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35); } .game-img .game_link { display: block; width: 100%; height: 200px; box-sizing: border-box; border: 6px solid #fff; border-radius: 20px; overflow: hidden; position: relative; z-index: 1; box-shadow: 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5, 0 6px 3px #20a6b5; } .game-img:before { content: ""; width: 100%; height: 20px; position: absolute; bottom: -4px; left: 0; border-bottom: 4px solid #99c7d6; z-index: 2; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .game.orange .game-img .game_link { box-shadow: 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424, 0 6px 3px #d47424; } .game.orange .game-img:before { border-bottom: 4px solid #ffb144; } .game.violet .game-img .game_link { box-shadow: 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2, 0 6px 3px #7d4ed2; } .game.violet .game-img:before { border-bottom: 4px solid #c597fc; } .game.green .game-img .game_link { box-shadow: 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416, 0 6px 3px #898416; } .game.green .game-img:before { border-bottom: 4px solid #d1ccaa; } .game.red .game-img .game_link { box-shadow: 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f, 0 6px 3px #c85a3f; } .game.red .game-img:before { border-bottom: 4px solid #ffb16a; } .game.dark-blue .game-img .game_link { box-shadow: 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6, 0 6px 3px #7472c6; } .game.dark-blue .game-img:before { border-bottom: 4px solid #bab8fa; } .game.yellow .game-img .game_link { box-shadow: 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23, 0 6px 3px #fabf23; } .game.yellow .game-img:before { border-bottom: 4px solid #ffe78e; } .game-img .game_link img { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 100%; min-width: 100%; transition: 0.4s; } .game-img .game_link_demo { display: inline-block; position: absolute; bottom: 20px; right: 20px; z-index: 2; font-size: 18px; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 0.2s ease-in; } .game-img .game_link_demo::after { content: ""; display: inline-block; width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.5); position: absolute; bottom: 0; left: 0; } .game-img .game_link_demo:hover::after { display: none; } .game-overlay { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 10px; top: 0; left: 0; z-index: 2; background: rgb(33, 76, 163); background: linear-gradient(0deg, rgba(33, 76, 163, 0.9) 0%, rgba(92, 143, 205, 0.9) 100%); text-align: center; line-height: 1.2; opacity: 0; transition: opacity 0.2s ease-in; box-sizing: border-box; font-style: italic; } .game-overlay .game_name { color: #fdda35; font-size: 40px; line-height: 1; } .game-overlay .game_provider { color: #ffffff; font-size: 30px; } .game-overlay .game_play { width: 40px; height: 40px; background: url("../images/play.png") no-repeat center; background-size: 100% auto; margin-top: 10px; transition: opacity 0.2s ease-in 0.1s; opacity: 0; } .game:hover .game_link img { min-width: 120%; min-height: 120%; } .game:hover .game-overlay { opacity: 1; } .game:hover .game_link_demo { opacity: 1; transition-delay: 0.2s; } .game:hover .game_play { opacity: 1; } .tabs { padding: 0 60px; } .ui-tabs-nav { display: flex; justify-content: space-between; position: relative; z-index: 1; font-size: 30px; text-transform: uppercase; padding: 4px 4px; margin: 40px 0 60px 0; } .ui-tabs-nav:before { content: ""; width: 100%; height: 100%; transform: skew(-7deg); top: 0; left: 0; z-index: -1; background: url(../images/bg-menu.jpg); background-size: auto 100%; position: absolute; border-radius: 10px; } .ui-tabs-nav:after { content: ""; width: 100%; height: 100%; border: 4px solid rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: 0; z-index: 0; box-sizing: border-box; transform: skew(-7deg); border-radius: 10px; } .ui-tabs-nav li { flex-grow: 1; } .ui-tabs-nav li a { display: block; text-decoration: none; color: #fff; padding: 15px 0; text-align: center; position: relative; z-index: 1; } .ui-tabs-nav li a:before { content: ""; width: 2px; height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; border-right: 1px solid rgba(255, 255, 255, 0.6); background: #4871d4; transform: skew(-7deg); } .ui-tabs-nav li:first-child a:before { display: none; } .ui-tabs-nav li a:hover:after, .ui-tabs-nav li.ui-tabs-active a:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: skew(-7deg); background: url(../images/bg-menu-hover.jpg); background-size: auto 100%; z-index: -1; box-sizing: border-box; } .ui-tabs-nav li:first-child a:after { border-top-left-radius: 9px; border-bottom-left-radius: 8px; } .ui-tabs-nav li:last-child a:after { border-top-right-radius: 8px; border-bottom-right-radius: 9px; } *:focus { outline: 0; } .bottom-border { width: 100%; position: absolute; bottom: 0; left: 0; height: 10px; background: rgba(255, 255, 255, 0.4); } .main .level { padding: 0 35px; margin: 0 30px 0 0; } .main .level .level_content { width: 290px; background: #3c1762; border: 4px solid #3c1762; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); } .main .level:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; max-width: 100%; border: 0; border-left: 5px solid #431a60; border-right: 5px solid #431a60; z-index: 1; transform: skew(-7deg); background: #4c1d6f; box-sizing: border-box; left: 0px; } .main .level > * { position: relative; z-index: 3; } .language_footer .column_title, .social_footer .column_title { margin: 0 0 20px 0; } @media (min-width: 1450px) { .games:not(.small) .game { width: 21%; } } @media (max-width: 1919px) { .level { padding: 0; } .level_content { width: 300px; } .balance { padding: 0 0 0 65px; } .balance:before { width: 54px; height: 46px; left: 13px; } .left-bar { width: 257px; } .logo { padding: 19px 0 21px 20px; } .right_bar { margin: 0 0 0 257px; } .top-bar ul li a { padding: 18px 0 18px 25px; } .top-bar ul li:before { left: 7px; } .right-top-btns { margin: 0 20px 0 0; } .user_fone { width: 35px; height: 35px; line-height: 35px; } .level_title { font-size: 18px; line-height: 28px; } .level_percent { font-size: 20px; } .baner_img { right: 20px; z-index: 0; } .baner_left { position: relative; z-index: 1; } .baner { padding: 0 0 52px 30px; } .left_bar { width: 257px; } .ticket_title span { font-size: 24px; } .ticket_title { font-size: 20px; line-height: normal; } .ticket_title.second { font-size: 28px; line-height: normal; } .ticket_description.second { font-size: 24px; line-height: normal; } .ticket.three .ticket_title { font-size: 28px; } .ticket img { height: 160px; } .actions { padding: 40px 0; display: block; } .action { max-width: 680px; margin: 0 auto 40px auto; } .cashback { background-position: top right; background-size: auto auto; } footer:before { display: none; } .baner_title { font-size: 60px; line-height: normal; } .baner_title p { font-size: 54px; } .baner_img { width: 420px; } .cashback { padding: 0 0 57px 0; } .cashback-img { z-index: 0; } .cashback-description { position: relative; z-index: 1; } .promotion { padding: 0 0 40px 40px; } .promotion-title { margin: 20px 0 0 0; } .promotion > p { margin: 25px 0 30px 0; } .sign-up-btn { display: none; } .tabs { padding: 0 10px; } .level.default:before { left: -19px; } .actions { display: flex; justify-content: space-around; flex-wrap: wrap; } .action { flex-basis: 46%; } .action-title { font-size: 45px; line-height: 1; } } @media (min-width: 1430px) { .header { padding: 10px 0; } } @media (max-width: 1430px) { .level { display: none; } .main .level { display: block; } } @media (max-width: 1440px) { .tickets_content { flex-wrap: wrap; justify-content: center; } .ticket, .ticket.second, .ticket.three { max-width: 300px; margin: 0 20px 40px 20px; } .tickets { background-size: auto 100%; padding: 0 0 10px 0; } .header { padding: 10px 0; } .cashback-description { margin: 0 auto; } .cashback { padding: 0 0 30px 0; } .footer_container { flex-wrap: wrap; } footer { height: auto; background-size: auto 100%; padding: 0 20px 50px 20px; } .footer_container { padding: 30px 0 0 0; } .footer_right { width: 100%; display: flex; justify-content: space-between; padding: 30px 0 0 0; align-items: flex-start; } .footer_right #f { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 32px; } .footer_logo { width: 100%; margin: 0 0 30px 0; } .footer_column { box-sizing: border-box; padding: 0 20px; } .cashback { margin: 0; } .cashback-img { display: none; } .main-page-banner-top { display: none; } .games.small .game, .games.small .game:nth-child(3n), .games.small .game:nth-child(5n) { width: 23%; margin: 0 2% 25px 0; } .games.small .game:nth-child(4n) { margin-right: 0; } .games-content .game:nth-child(7), .games-content .game:nth-child(8) { display: none; } .social_footer { margin: 0; } .main .header { padding: 0; } .footer_column { max-width: 48%; } .action-title { font-size: 40px; line-height: 1; } .level.default:before, .level.default:after { display: none; } } @media (max-width: 1223px) { .ui-tabs-nav { font-size: 18px; } .ui-tabs-nav li a { padding: 9px 0; } .bonus { left: auto; right: 0; } .games.small .game, .games.small .game:nth-child(3n), .games.small .game:nth-child(4n), .games.small .game:nth-child(5n) { width: 30%; margin: 0 4% 25px 0; } .games.small .game:nth-child(3n) { margin-right: 0; } .column_title { margin: 0 0 0 -20px; } .bottom-border { display: none; } .action { flex-basis: 680px; } .footer_column { max-width: 49%; } .main .level { display: none; } .main .header { padding: 10px 0; } .h_user a:not(.user_fone) { display: none; } } @media (max-width: 979px) { .install { display: none; } .right_bar { margin: 0; } .logo { display: none; } .top-bar nav { padding: 0; } .users { display: none; } .main-menu-btn { display: block; width: 24px; height: 18px; position: relative; cursor: pointer; margin: 10px 0 0 10px; } .main-menu-btn span { display: block; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; top: 0; background: #fff; transition: 0.5s; } .main-menu-btn span:nth-child(2) { top: 8px; } .main-menu-btn span:nth-child(3) { top: auto; bottom: 0; } .mobil-menu-active .main-menu-btn span:nth-child(2) { display: none; } .mobil-menu-active .main-menu-btn span:nth-child(1) { top: 8px; transform: rotate(45deg); } .mobil-menu-active .main-menu-btn span:nth-child(3) { top: 8px; bottom: auto; transform: rotate(-45deg); } .top-bar ul { display: block; padding: 10px 0; } .top-bar ul li { display: block; } .top-bar ul li a { padding: 5px 0 5px 25px; line-height: normal; font-size: 18px; } .left_bar { position: absolute; top: 55px; left: -100vw; width: 100%; z-index: 102; transition: 0.6s; visibility: hidden; } .mobil-menu-active .left_bar { left: 0; visibility: visible; } .footer_column { max-width: 100%; } .setting-menu { top: 150px; } .games-content { padding: 0; } .footer_column { margin: 25px 0 0 0; } .language_footer { float: left; } .language_footer .column_title { margin: 0 0 25px 0; } .social_footer { margin: 0; } .social_footer .column_title { margin: 0 0 25px -20px; } } @media (max-width: 767px) { .column_title { margin: 10px 0 0 -20px; } .header { flex-wrap: wrap; justify-content: space-around; } .balance { margin: 0 0 20px 40px; } .h_user { margin: 0; } .baner { text-align: center; } .baner_title { font-size: 36px; } .baner_title p { font-size: 24px; } .baner_btns { margin: 0; text-align: center; } .baner_btns a.spin { margin: 0; } .baner_btns a span { font-size: 42px; } .baner_btns a.spin:before { width: 240px; left: 7px; height: 60px; } .tickets_title { font-size: 42px; color: #fff; } .tickets:before { display: none; } .ticket_title span { font-size: 18px; } .ticket_description { font-size: 18px; line-height: 24px; } .ticket img { height: 120px; } .ticket_btn { font-size: 18px; padding: 5px 12px; } .ticket_btn:before { height: 30px; } .ticket_btn:after { height: 30px; } .action-title { font-size: 26px; } .action-decription { font-size: 20px; } .action-decription > span { font-size: 20px; } .action-img img { max-width: 60%; } .action > .action-img { max-width: 60%; } .action-title { font-size: 20px; } .action-decription p.big { font-size: 18px; } .action-decription ul { font-size: 18px; } .action-link { font-size: 16px !important; } .action > .action-img { right: -70px; } .action > .action-btn.right { left: 26px; bottom: 6px; } .action { width: 100%; padding: 25px 15px 20px 20px; min-height: 0; margin: 0 0 30px 0; box-shadow: 0 6px 11px rgba(0, 0, 0, 0.3); overflow: hidden; } .action4, .action3, .action2 { box-shadow: 0 6px 11px rgba(0, 0, 0, 0.3); } .action > .action-btn { position: static; margin: 30px 0 0 0; } br { display: none; } .cashback-title { font-size: 48px; padding: 30px 0 25px 0; } .cashback { padding: 0 10px 30px 10px; } .cashback-text { font-size: 32px; padding: 25px 0 0 0; } .footer_column ul li { width: 100%; } .footer_logo { margin: 0 0 30px 20px; } .footer_right { display: block; } .social_footer a { display: inline-block; vertical-align: middle; width: 60px; } .baner_title p { line-height: normal; } .baner_title { font-size: 54px; } .baner_title p { font-size: 38px; } .baner_btn { width: 150px; height: 50px; background-size: 100% 100%; margin: 0 auto; display: block; line-height: normal; font-size: 20px; padding: 13px 0 17px 25px; text-align: left; margin: 20px 0 20px 0; } .ticket_title.second, .ticket.three .ticket_title { font-size: 24px; } .balance { margin: 0; width: auto; box-sizing: border-box; padding: 0 0 0 60px; } .balance > .text { display: none; } .balance:before { left: 0; } .actions { padding: 40px 0 0 0; } .balance-content { left: 0; text-align: left; } .setting-menu { top: 175px; } .h_user { display: block; } .h_user > a:not(.user_fone) { display: none; } .promotion { padding: 0 10px 10px 10px; } .promotion-title { font-size: 34px; } .promotion > p { font-size: 20px; margin: 15px 0 30px 0; } .promotion-content { font-size: 28px; } .promotion-content p { margin: 15px 0; } .action-decription p { margin-right: 130px; } .main-page-banner-block { width: 90%; height: auto; } .main-page-banner-title { font-size: 50px; width: 260px; margin: 0 auto; } .main-page-banner-block:before { display: none; } .main-page-banner-text { font-size: 40px; } .main-page-banner-btn a { width: 260px; height: auto; margin: 0 auto; font-size: 46px; padding-top: 25px; } .main-page-banner-btn a:before { width: 120%; height: 193px; left: -10%; z-index: 0; background-size: 100% 100%; } .ui-tabs-nav { display: block; } .main .right-top-btns { float: right; margin: 0 20px 0 0; } .log-sign { margin: 0 auto; clear: both; padding: 15px 0 0 0; } .bonus { text-align: left; width: 280px; z-index: 2; right: auto; left: 50%; margin: 30px 0 0 -140px; } .main-page-banner-left, .main-page-banner-right { display: none; } .ui-tabs-nav li a:hover:after, .ui-tabs-nav li.ui-tabs-active a:after { transform: skew(0); } .ui-tabs-nav li:first-child a:after { border-radius: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; } .ui-tabs-nav li:last-child a:after { border-radius: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .ui-tabs-nav li a:before { display: none; } .ui-tabs-nav:before, .ui-tabs-nav:after { transform: skew(0); } .game, .game:nth-child(4n), .game:nth-child(3n) { width: 48%; margin: 0 3% 25px 0; } .game:nth-child(2n) { margin-right: 0; } .language_footer { float: none; margin: 0 0 25px 0; } .social_footer { width: 100%; } .baner:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); } .action { margin-right: 10px; margin-left: 10px; } .social_footer .column_title { margin-left: 0; } } @media (max-width: 539px) { .games { display: flex; justify-content: center; flex-wrap: wrap; } .game, .game:nth-child(4n), .game:nth-child(3n), .game:nth-child(2n) { width: calc(50% - 25px); margin: 0 auto 25px auto; } .game .game_name, .game:nth-child(4n) .game_name, .game:nth-child(3n) .game_name, .game:nth-child(2n) .game_name { font-size: 20px; } .game .game_provider, .game:nth-child(4n) .game_provider, .game:nth-child(3n) .game_provider, .game:nth-child(2n) .game_provider { font-size: 16px; } .game .game_link_demo, .game:nth-child(4n) .game_link_demo, .game:nth-child(3n) .game_link_demo, .game:nth-child(2n) .game_link_demo { display: none; } .game .game_play, .game:nth-child(4n) .game_play, .game:nth-child(3n) .game_play, .game:nth-child(2n) .game_play { display: none; } .games .game-img .game_link { height: 120px; } .games.small .game, .games.small .game:nth-child(3n), .games.small .game:nth-child(4n), .games.small .game:nth-child(5n) { width: calc(50% - 25px); margin: 0 auto 25px auto; } .games.small .game .game_name, .games.small .game:nth-child(3n) .game_name, .games.small .game:nth-child(4n) .game_name, .games.small .game:nth-child(5n) .game_name { font-size: 20px; } .games.small .game .game_provider, .games.small .game:nth-child(3n) .game_provider, .games.small .game:nth-child(4n) .game_provider, .games.small .game:nth-child(5n) .game_provider { font-size: 16px; } .games.small .game .game_link_demo, .games.small .game:nth-child(3n) .game_link_demo, .games.small .game:nth-child(4n) .game_link_demo, .games.small .game:nth-child(5n) .game_link_demo { display: none; } .games.small .game .game_play, .games.small .game:nth-child(3n) .game_play, .games.small .game:nth-child(4n) .game_play, .games.small .game:nth-child(5n) .game_play { display: none; } .games.small .game-img .game_link { height: 120px; } .right-top-btns { margin: 10px 0 0 0; } } @media (max-width: 319px) { .games { padding-right: 30px; padding-left: 30px; } .games .game, .games .game:nth-child(3n), .games .game:nth-child(4n), .games .game:nth-child(5n) { width: 100%; } .games .game + .game, .games .game:nth-child(3n) + .game, .games .game:nth-child(4n) + .game, .games .game:nth-child(5n) + .game { margin-left: auto; } .games .game .game_name, .games .game:nth-child(3n) .game_name, .games .game:nth-child(4n) .game_name, .games .game:nth-child(5n) .game_name { font-size: 40px; } .games .game .game_provider, .games .game:nth-child(3n) .game_provider, .games .game:nth-child(4n) .game_provider, .games .game:nth-child(5n) .game_provider { font-size: 30px; } .games .game .game_link_demo, .games .game:nth-child(3n) .game_link_demo, .games .game:nth-child(4n) .game_link_demo, .games .game:nth-child(5n) .game_link_demo { font-size: 18px; } .games .game-img .game_link { height: 200px; } .games.small .game, .games.small .game:nth-child(3n), .games.small .game:nth-child(4n), .games.small .game:nth-child(5n) { width: 100%; } .games.small .game + .game, .games.small .game:nth-child(3n) + .game, .games.small .game:nth-child(4n) + .game, .games.small .game:nth-child(5n) + .game { margin-left: auto; } .games.small .game .game_name, .games.small .game:nth-child(3n) .game_name, .games.small .game:nth-child(4n) .game_name, .games.small .game:nth-child(5n) .game_name { font-size: 40px; } .games.small .game .game_provider, .games.small .game:nth-child(3n) .game_provider, .games.small .game:nth-child(4n) .game_provider, .games.small .game:nth-child(5n) .game_provider { font-size: 30px; } .games.small .game .game_link_demo, .games.small .game:nth-child(3n) .game_link_demo, .games.small .game:nth-child(4n) .game_link_demo, .games.small .game:nth-child(5n) .game_link_demo { font-size: 18px; } .games.small .game-img .game_link { height: 180px; } } .popup_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 21; background-image: linear-gradient(-1deg, #970653 0%, #2e034d 100%); pointer-events: none; opacity: 0; transition: 0.5s; } .popup_bg.active { opacity: 0.8; pointer-events: all; } .popup_elem { z-index: 22; position: fixed; top: 50%; left: 50%; width: 90%; max-width: 620px; transform: translate(-50%, -50%); border-radius: 66px; -webkit-filter: drop-shadow(0px 4px 2.5px rgba(255, 255, 255, 0.27)); filter: drop-shadow(0px 4px 2.5px rgba(255, 255, 255, 0.27)); box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.58); box-shadow: inset 0px -6px 5.5px rgba(255, 255, 255, 0.44); background-color: rgba(255, 255, 255, 0.1607843137); padding: 12px; max-height: 98vh; pointer-events: none; opacity: 0; transition: 0.5s; font-family: "Lato", sans-serif; font-style: normal; } .popup_elem.active { opacity: 1; pointer-events: all; } .popup_elem .top_wrapp { padding: 20px 30px; box-shadow: -1px 3px 9px 0px rgba(0, 0, 0, 0.3215686275); } .popup_elem .bottom_wrapp { margin: 20px 15px; padding: 20px 15px; border-radius: 18px; box-shadow: inset 0px 0px 12px 3px rgba(0, 0, 0, 0.18); } .popup_elem .popup_inner { overflow-y: scroll; max-height: calc(98vh - 24px); width: 100%; height: 100%; border-radius: 53px; -webkit-filter: drop-shadow(0 0 12px rgba(56, 68, 184, 0.13)); filter: drop-shadow(0 0 12px rgba(56, 68, 184, 0.13)); background-image: linear-gradient(0deg, #7e0993 0%, #a117b9 100%); display: flex; flex-direction: column; gap: 5%; } .popup_elem .popup_inner::-webkit-scrollbar { width: 0px; } .popup_elem .popup_inner::-webkit-scrollbar-thumb { background-color: inherit; } .popup_elem .popup_inner::-webkit-scrollbar-track { background-color: inherit; } .popup_elem .popup_inner { scrollbar-width: 0px; } .popup_elem .popup_inner::-webkit-scrollbar { width: 0px; } .popup_elem .popup_inner::-webkit-scrollbar-thumb { background-color: inherit; } .popup_elem .popup_inner::-webkit-scrollbar-track { background-color: inherit; } .popup_elem .popup_inner h2 { font-size: 1.9rem; letter-spacing: 0px; line-height: 1; color: #f4d026; font-weight: 900; -webkit-filter: drop-shadow(0px 3px 0px #d45a00); filter: drop-shadow(0px 3px 0px #d45a00); } .popup_elem .popup_inner .popup_inner__blocks { width: 100%; display: flex; flex-direction: column; gap: 20px; } .popup_elem .popup_inner .inner_line { width: 100%; height: 1px; background-color: rgba(204, 204, 204, 0.2196078431); } .popup_elem .popup_inner .popup_inner__block .title { font-size: 1.3rem; letter-spacing: 0px; line-height: 1; color: #ffffff; font-weight: 900; } .popup_elem .popup_inner .popup_inner__block .descr { margin-top: 8px; font-size: 0.8rem; line-height: 1; color: #ffffff; font-weight: 400; } .popup_elem .popup_inner .popup_inner__block img { margin-top: 5px; max-width: 100%; width: 50%; border-radius: 12px; } .popup_elem .close { position: absolute; cursor: pointer; z-index: 3; top: 0px; right: 4px; padding: 7px; width: 40px; height: 40px; border-radius: 23px; background-image: linear-gradient(0deg, #2967cb 0%, #3fa5cd 100%); border: 4px solid rgb(81, 155, 207); } @media (max-width: 768px) { .popup_elem .popup_inner .popup_inner__block img { margin-top: 10px; width: 100%; } .popup_elem { border-radius: 30px; max-height: 85vh; } .popup_elem .popup_inner { border-radius: 24px; max-height: calc(85vh - 24px); } .popup_elem .popup_inner h2 { font-size: 1.5rem; } .popup_elem .popup_inner .popup_inner__block .title { font-size: 1.1rem; } .popup_elem .popup_inner .popup_inner__block .descr { font-size: 0.7rem; } .popup_elem .close { top: 0px; right: 0px; padding: 1px; width: 25px; height: 25px; } .popup_elem .bottom_wrapp { margin: 15px 10px; padding: 15px 10px; } .popup_elem .top_wrapp { padding: 20px; } } .games-bar { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: normal; color: #24305b; padding: 24px; background: #fff; border-radius: 24px; } .games-bar, .games-bar * { box-sizing: border-box; } .games-bar button, .games-bar input { font: inherit; } .games-bar input::-moz-placeholder { color: #a0a0a0; } .games-bar input:-ms-input-placeholder { color: #a0a0a0; } .games-bar input::-ms-input-placeholder { color: #a0a0a0; } .games-bar input::placeholder { color: #a0a0a0; } .games-bar__search { position: relative; margin-bottom: 20px; } .games-bar__search-input { width: 100%; border: 2px solid #eeeeee; border-radius: 16px; padding: 12px 52px 12px 50px; font-size: 16px; background: #ffffff; color: #24305b; outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .games-bar__search-input:focus { border-color: #9b37ff; } .games-bar__search-icon, .games-bar__search-clear { position: absolute; top: 50%; transform: translateY(-50%); } .games-bar__search-icon { left: 20px; color: #24305b; transition: color 0.2s ease; } .games-bar__search:focus-within .games-bar__search-icon circle, .games-bar__search:focus-within .games-bar__search-icon path { stroke: #9b37ff; } .games-bar__search-icon svg { display: block; } .games-bar__search-clear { right: 18px; border: none; background: transparent; padding: 4px; cursor: pointer; color: #24305b; } .games-bar__toolbar { margin-bottom: 20px; position: relative; } .games-bar__toolbar-shell { position: relative; padding: 18px 150px 18px 30px; background: #f7f7f7; border-radius: 18px; transform: skewX(-6deg); /* box-shadow: 0 14px 30px rgba(36, 48, 91, 0.08); */ overflow: hidden; } .games-bar__toolbar-track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; transform: skewX(6deg); padding-right: 60px; } .games-bar__toolbar--no-browse .games-bar__toolbar-shell { padding-right: 30px; } .games-bar__toolbar--no-browse .games-bar__toolbar-track { padding-right: 0; } .games-bar__toolbar-track::-webkit-scrollbar { display: none; } .games-bar__toolbar-item { border: none; background: transparent; padding: 0; cursor: pointer; color: #24305b; white-space: nowrap; display: inline-flex; flex: 0 0 auto; text-decoration: none; } .games-bar__item-body { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; color: inherit; } .games-bar__item-body::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.7); transform: skewX(-6deg); transition: background 0.2s ease, box-shadow 0.2s ease; z-index: -1; } .games-bar__toolbar-item:hover .games-bar__item-body::before { background: #ebedf1; } .games-bar__toolbar-item--active .games-bar__item-body::before, .games-bar__toolbar-item--active:hover .games-bar__item-body::before { background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); } .games-bar__toolbar-item--active .games-bar__item-label { color: #fff; } .games-bar__item-icon svg { width: 24px; height: 24px; } .games-bar__toolbar-item--active .games-bar__item-icon svg linearGradient stop:first-child, .games-bar__toolbar-item--active .games-bar__item-icon svg radialGradient stop:first-child { stop-color: #faa914 !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg linearGradient stop:last-child, .games-bar__toolbar-item--active .games-bar__item-icon svg radialGradient stop:last-child, .games-bar__toolbar-item--active .games-bar__item-icon svg .gradient-stop-end { stop-color: #ffdf5f !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#9b37ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#9b37ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#9145fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#9145fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#8647fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#8647fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#378cfe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#378cfe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#4981ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#4981ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#9141fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#9141fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#7356fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#7356fe"] { fill: #faa914 !important; stroke: #faa914 !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#00bbff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#00bbff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#1cc0fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#1cc0fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#10c6fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#10c6fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#06c7fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#06c7fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#5371fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#5371fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#23a3ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#23a3ff"] { fill: #ffdf5f !important; stroke: #ffdf5f !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#fff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#fff"] { fill: rgb(255, 40, 101) !important; stroke: rgb(255, 40, 101) !important; } .games-bar__toolbar-shadow { position: absolute; top: 0; right: 120px; width: 80px; height: 100%; background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.25) 100%); pointer-events: none; } .games-bar__browse { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); border: none; border-radius: 999px; padding: 8px 18px; background: #d6dae5; color: #24305b; font-size: 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; z-index: 2; } .games-bar__browse-icon svg { width: 20px; height: 20px; } .games-bar__category { margin-bottom: 32px; } .games-bar__category-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 14px; } .games-bar__category-title { font-size: 24px; font-style: italic; letter-spacing: 0.5px; } .games-bar__category-actions { display: flex; align-items: center; gap: 12px; } .games-bar__see-all { border: 2px solid #23bdf1; background: transparent; color: #23bdf1; border-radius: 999px; padding: 4px 16px; cursor: pointer; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; text-decoration: none; } .games-bar__arrows { display: flex; gap: 6px; } .games-bar__arrow { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #23bdf1; background: transparent; color: #23bdf1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .games-bar__arrow:disabled { opacity: 0.4; cursor: default; } .games-bar__category-rail { overflow-x: auto; padding-bottom: 8px; cursor: -webkit-grab; cursor: grab; } .games-bar__category-rail.is-dragging { cursor: -webkit-grabbing; cursor: grabbing; } .games-bar__category-rail::-webkit-scrollbar { height: 0; } .games-bar__category-list .games { display: flex; gap: 16px; flex-wrap: nowrap; } .games-bar__category-list .game { flex: 0 0 180px; } .games-bar__category-list .game-img .game_link { border-radius: 18px; } .games-bar__content { margin-top: 12px; } .games-bar__provider-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 14px; } .games-bar__category-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 14px; } .games-bar__provider-logo { width: 44px; height: 44px; border: 2px solid #eeeeee; border-radius: 12px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .games-bar__provider-logo img { max-width: 100%; max-height: 100%; } .games-bar__category-logo { width: 44px; height: 44px; border: 2px solid #eeeeee; border-radius: 12px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .games-bar__category-logo img { max-width: 100%; max-height: 100%; } .games-bar__category-logo--category img { max-width: 80%; max-height: 80%; } .games-bar__provider-title { font-size: 24px; } .games-bar__category-title { font-size: 24px; } .games-bar__results-grid.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .games-bar__empty { text-align: center; padding: 40px 0; font-size: 20px; } .games-bar-modal { position: fixed; inset: 0; z-index: 102; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: normal; color: #24305b; } .playing .games-bar-modal { z-index: 399; } .games-bar-modal, .games-bar-modal * { box-sizing: border-box; } .games-bar-modal button, .games-bar-modal input { font: inherit; } .games-bar-modal input::-moz-placeholder { color: #a0a0a0; } .games-bar-modal input:-ms-input-placeholder { color: #a0a0a0; } .games-bar-modal input::-ms-input-placeholder { color: #a0a0a0; } .games-bar-modal input::placeholder { color: #a0a0a0; } .games-bar-modal__overlay { position: absolute; inset: 0; background: rgba(18, 22, 40, 0.6); } .games-bar-modal__panel { position: relative; width: 100%; max-width: 960px; max-height: 90vh; min-height: 90vh; background: #fff; border-radius: 24px; border: 2px solid #23bdf1; padding: 30px; box-shadow: 0 30px 80px rgba(9, 11, 24, 0.35); overflow: hidden; display: flex; flex-direction: column; } .games-bar-modal__panel::-webkit-scrollbar { width: 10px; } .games-bar-modal__panel::-webkit-scrollbar-thumb { background: #23bdf1; border-radius: 10px; } .games-bar-modal__panel::-webkit-scrollbar-track { background: #eef3ff; } .games-bar-modal__close { position: absolute; top: 18px; right: 18px; border: none; background: transparent; cursor: pointer; } .games-bar-modal__tabs { display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: 18px; background: #f7f7f7; border-radius: 999px; } .games-bar-modal__tab { position: relative; border: none; background: #f7f7f7; padding: 10px 22px; font-size: 16px; color: #24305b; cursor: pointer; z-index: 0; white-space: nowrap; } .games-bar-modal__tabs .games-bar-modal__tab:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .games-bar-modal__tabs .games-bar-modal__tab:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .games-bar-modal__tab--active { background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); border-radius: 999px; } .games-bar-modal__tab--active { color: #ffffff; } .games-bar-modal__search { position: relative; margin-bottom: 20px; } .games-bar-modal__search-input { width: 100%; border: 2px solid #eeeeee; border-radius: 16px; padding: 12px 52px 12px 50px; font-size: 16px; background: #ffffff; color: #24305b; } .games-bar-modal__search-input:focus { border-color: #9b37ff; } .games-bar-modal__search-icon, .games-bar-modal__search-clear { position: absolute; top: 50%; transform: translateY(-50%); } .games-bar-modal__search-icon { left: 18px; color: #24305b; transition: color 0.2s ease; } .games-bar-modal__search:focus-within .games-bar-modal__search-icon circle, .games-bar-modal__search:focus-within .games-bar-modal__search-icon path { stroke: #9b37ff; } .games-bar-modal__search-clear { right: 18px; border: none; background: transparent; cursor: pointer; } .games-bar-modal__body { overflow-y: auto; padding-right: 6px; } .games-bar-modal__grid { display: grid; gap: 16px; } .games-bar-modal .games-bar__toolbar { margin-bottom: 14px; } .games-bar-modal__grid--slots, .games-bar-modal__grid--providers { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .games-bar-modal__card { border: none; border-radius: 16px; padding: 14px 16px; background: #f7f7f7; color: #24305b; display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; text-decoration: none; } .games-bar-modal__card:hover { background: #ebedf1; transform: translateY(-2px); } .games-bar-modal__card-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .games-bar-modal__card-icon img { max-width: 100%; max-height: 100%; } .games-bar-modal__grid--slots .games-bar-modal__card-icon img { max-width: 130%; max-height: 130%; } .games-bar-modal__card-label { font-size: 16px; text-align: left; } .games-bar-modal__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; } .games-bar-modal__heading-title { font-size: 24px; font-style: italic; letter-spacing: 0.5px; } .games-bar-modal__heading-image { width: 44px; height: 44px; border: 2px solid #eeeeee; border-radius: 12px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .games-bar-modal__heading-image img { max-width: 100%; max-height: 100%; } .games-bar-modal__heading-image--category img { max-width: 80%; max-height: 80%; } .games-bar-modal__category { margin-bottom: 20px; } .games-bar-modal__category-header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 14px; } .games-bar-modal__category-title { font-size: 24px; font-style: italic; letter-spacing: 0.5px; color: #24305b; } .games-bar-modal__category-actions { display: flex; align-items: center; gap: 10px; } .games-bar-modal__see-all { border: 2px solid #23bdf1; background: transparent; color: #23bdf1; border-radius: 999px; padding: 3px 9px; cursor: pointer; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; display: inline-flex; align-items: center; text-decoration: none; } .games-bar-modal__see-all:hover { text-decoration: none; } .games-bar-modal__section--games .games-bar__modal-grid.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .games-bar-modal__section--bets { display: flex; flex-direction: column; } .games-bar-modal__bets-shell { width: 100%; background: #f7f7f7; border-radius: 20px; padding: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); overflow-x: auto; } .games-bar-modal__bets-table { width: 100%; border-collapse: collapse; color: #24305b; font-size: 13px; } .games-bar-modal__bets-table thead th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7190; padding: 0 6px 8px; border-bottom: 2px solid rgba(36, 48, 91, 0.1); white-space: nowrap; } .games-bar-modal__bets-table tbody td { padding: 10px 6px; border-bottom: 1px solid rgba(36, 48, 91, 0.08); font-size: 13px; } .games-bar-modal__bets-table tbody tr:last-child td { border-bottom: none; } .games-bar-modal__bets-table tbody tr.games-bar-modal__bets-date { background: rgba(255, 255, 255, 0.4); font-style: italic; text-align: center; } .games-bar-modal__bets-table tbody tr:hover { background: rgba(255, 255, 255, 0.7); } .games-bar-modal__bets-table tbody td:nth-child(3), .games-bar-modal__bets-table tbody td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .games-bar-modal__bets-table tbody td:nth-child(1) { white-space: nowrap; } .games-bar-modal__bets-table tbody td:nth-child(2) { width: 100%; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .games-bar-modal__bets-table tbody td span { display: block; text-align: center; color: #6b7190; font-weight: 500; } .games-bar-modal__empty { text-align: center; padding: 30px 0; } body.games-bar__modal-open { overflow: hidden; } .games-bar-modal-fade-enter-active, .games-bar-modal-fade-leave-active { transition: opacity 0.2s ease; } .games-bar-modal-fade-enter, .games-bar-modal-fade-leave-to { opacity: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 1200px) { .games-bar { padding: 20px; } .games-bar__category-list .game { flex: 0 0 160px; } } @media (max-width: 992px) { .games-bar-modal { padding: 0; align-items: stretch; justify-content: stretch; } .games-bar-modal__panel { width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; border: none; box-shadow: none; padding: 24px 16px 54px 16px; } .bottom-bar-condensed .games-bar-modal__panel { padding-bottom: 40px; } .games-bar { padding: 16px; } .games-bar__toolbar-shell { padding-right: 120px; } .games-bar__category-header { justify-content: space-between; } .games-bar__category-actions { justify-content: flex-end; } .games-bar-modal-fade-enter-active .games-bar-modal__panel, .games-bar-modal-fade-leave-active .games-bar-modal__panel { transition: transform 0.25s ease; } .games-bar-modal-fade-enter .games-bar-modal__panel, .games-bar-modal-fade-leave-to .games-bar-modal__panel { transform: translateY(100%); } .games-bar-modal__category-title { font-size: 20px; } .games-bar-modal__heading-title { font-size: 20px; } .games-bar-modal__category-header { min-height: 36px; } .games-bar-modal__heading-image { width: 36px; height: 36px; } } @media (max-width: 768px) { .games-bar__toolbar-shell { padding: 22px 18px 22px 18px; } .games-bar__toolbar-shadow { display: none; } .games-bar__browse { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 50%); padding: 6px 14px; font-size: 14px; gap: 6px; /* box-shadow: 0 6px 15px rgba(36, 48, 91, 0.18); */ } .games-bar__browse-icon svg { width: 16px; height: 16px; } .games-bar__toolbar-track { gap: 4px; } .games-bar-modal__grid--slots, .games-bar-modal__grid--providers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 320px) { .games-bar-modal__grid--slots, .games-bar-modal__grid--providers { grid-template-columns: 1fr; } .games-bar-modal__tab { padding: 8px 16px; } } .bottom-bar2 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 8px 28px; display: none; justify-content: space-between; align-items: center; background: url("../images/bottombar/bottom-bar__bg.jpg") center center/cover no-repeat; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; color: #fff; transition: transform 0.25s ease, padding 0.25s ease, opacity 0.25s ease; } .bottom-bar2--condensed { transform: translateY(4px); } .bottom-bar2__item { flex: 1; border: none; background: transparent; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; padding: 0; } .bottom-bar2__icon svg { width: 20px; height: 20px; } .bottom-bar2__label { font-size: 12px; letter-spacing: 0.6px; transition: opacity 0.2s ease, max-height 0.2s ease; overflow: hidden; } .bottom-bar2--condensed .bottom-bar2__label { opacity: 0; max-height: 0; } .bottom-bar2__item--active { color: #ffc955; } @media (max-width: 992px) { .bottom-bar2 { display: flex; } body { padding-bottom: 58px; } } @-webkit-keyframes hamburger-icon-hop { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } @keyframes hamburger-icon-hop { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } .hamburger { position: fixed; inset: 0; z-index: 1100; display: flex; pointer-events: none; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; } .hamburger button, .hamburger input { font-family: inherit; font-weight: inherit; font-style: inherit; } .hamburger--open { pointer-events: auto; } .hamburger__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 1; transition: opacity 0.2s ease; } .hamburger__panel { position: relative; width: 300px; height: 100vh; background-color: #e234f7; box-shadow: inset -300px 0 100px rgba(21, 11, 65, 0.5); padding: 20px 18px 30px; overflow-y: auto; z-index: 1; transform: translateX(0); -webkit-animation: slide-in 0.25s ease; animation: slide-in 0.25s ease; } .hamburger__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .hamburger__logo { width: 160px; height: auto; } .hamburger__close { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background 0.2s ease, transform 0.2s ease; } .hamburger__close svg { display: block; } .hamburger__close:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(4deg); } .hamburger__nav { display: flex; flex-direction: column; gap: 10px; } .hamburger__list { padding: 0; margin: 0; list-style: none; } .hamburger__section { margin-top: 18px; } .hamburger__item { margin-bottom: 10px; } .hamburger__item:last-child { margin-bottom: 0; } .hamburger__item--highlight .hamburger__link { background: linear-gradient(135deg, #fdd57c 0%, #ff8db8 50%, #c46bff 100%); color: #2d0a3b; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); } .hamburger__item--highlight .hamburger__icon { -webkit-filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); } .hamburger__item--action .hamburger__link { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); } .hamburger__link { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; color: #ffffff; font-size: 18px; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; } .hamburger__link:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.12); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } .hamburger__icon { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; } .hamburger__icon--animated { -webkit-animation: hamburger-icon-hop 2.2s ease-in-out infinite; animation: hamburger-icon-hop 2.2s ease-in-out infinite; width: 28px; height: 28px; flex: 0 0 28px; } .hamburger__text { flex: 1; text-align: left; letter-spacing: 0.5px; } @-webkit-keyframes slide-in { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slide-in { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .hamburger-open { overflow: hidden; } /** Support for SASS is deprecated as of v3.18. The files remain here if your build is dependent on them but they will not receive updates in future releases. All SASS variables have been translated into CSS variables, so migration should be quite simple if you'd like to move over. In v4, these files will be removed. */ .v-select { position: relative; font-family: inherit; } .v-select, .v-select * { box-sizing: border-box; } /* KeyFrames */ @-webkit-keyframes vSelectSpinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes vSelectSpinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Dropdown Default Transition */ .vs__fade-enter-active, .vs__fade-leave-active { pointer-events: none; transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1); } .vs__fade-enter, .vs__fade-leave-to { opacity: 0; } /** Component States */ /* * Disabled * * When the component is disabled, all interaction * should be prevented. Here we modify the bg color, * and change the cursor displayed on the interactive * components. */ .vs--disabled .vs__dropdown-toggle, .vs--disabled .vs__clear, .vs--disabled .vs__search, .vs--disabled .vs__selected, .vs--disabled .vs__open-indicator { cursor: not-allowed; background-color: rgb(248, 248, 248); } /* * RTL - Right to Left Support * * Because we're using a flexbox layout, the `dir="rtl"` * HTML attribute does most of the work for us by * rearranging the child elements visually. */ .v-select[dir=rtl] .vs__actions { padding: 0 3px 0 6px; } .v-select[dir=rtl] .vs__clear { margin-left: 6px; margin-right: 0; } .v-select[dir=rtl] .vs__deselect { margin-left: 0; margin-right: 2px; } .v-select[dir=rtl] .vs__dropdown-menu { text-align: right; } /** Dropdown Toggle The dropdown toggle is the primary wrapper of the component. It has two direct descendants: .vs__selected-options, and .vs__actions. .vs__selected-options holds the .vs__selected's as well as the main search input. .vs__actions holds the clear button and dropdown toggle. */ .vs__dropdown-toggle { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; padding: 0 0 4px 0; background: none; border: 2px solid rgba(255, 170, 216, 0.3411764706); border-radius: 22px; white-space: normal; } .vs__selected-options { display: flex; flex-basis: 100%; flex-grow: 1; flex-wrap: wrap; padding: 0 2px; position: relative; } .vs__actions { display: flex; align-items: center; padding: 4px 6px 0 3px; } /* Dropdown Toggle States */ .vs--searchable .vs__dropdown-toggle { cursor: text; } .vs--unsearchable .vs__dropdown-toggle { cursor: pointer; } .vs--open .vs__dropdown-toggle { border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .vs__open-indicator { fill: rgba(60, 60, 60, 0.5); transform: scale(1); transition: transform 150ms cubic-bezier(1, -0.115, 0.975, 0.855); transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855); } .vs--open .vs__open-indicator { transform: rotate(180deg) scale(1); } .vs--loading .vs__open-indicator { opacity: 0; } /* Clear Button */ .vs__clear { fill: rgba(60, 60, 60, 0.5); padding: 0; border: 0; background-color: transparent; cursor: pointer; margin-right: 8px; } /* Dropdown Menu */ .vs__dropdown-menu { display: block; box-sizing: border-box; position: absolute; top: calc(100% - 2px); left: 0; z-index: 1000; padding: 5px 0; margin: 0; width: 100%; max-height: 150px; min-width: 100%; overflow-y: auto; box-shadow: none; border: 2px solid rgba(255, 170, 216, 0.3411764706); border-top-style: none; border-radius: 0 0 22px 22px; text-align: left; list-style: none; background: #6c1156; } .vs__no-options { text-align: center; } /* List Items */ .vs__dropdown-option { line-height: 1.42857143; /* Normalize line height */ display: block; padding: 3px 20px; clear: both; color: #333; /* Overrides most CSS frameworks */ white-space: nowrap; cursor: pointer; } .vs__dropdown-option--highlight { background: #973781; color: #fff; } .vs__dropdown-option--deselect { background: #fb5858; color: #fff; } .vs__dropdown-option--disabled { background: inherit; color: rgba(60, 60, 60, 0.5); cursor: inherit; } /* Selected Tags */ .vs__selected { display: flex; align-items: center; background-color: #f0f0f0; border: 2px solid rgba(255, 170, 216, 0.3411764706); border-radius: 22px; color: #333; line-height: 1.5; margin: 4px 2px 0px 2px; padding: 0 0.25em; z-index: 0; } .vs__deselect { display: inline-flex; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-left: 4px; padding: 0; border: 0; cursor: pointer; background: none; fill: rgba(60, 60, 60, 0.5); text-shadow: 0 1px 0 #fff; } /* States */ .vs--single .vs__selected { background-color: transparent; border-color: transparent; } .vs--single.vs--open .vs__selected, .vs--single.vs--loading .vs__selected { position: absolute; opacity: 0.4; } .vs--single.vs--searching .vs__selected { display: none; } /* Search Input */ /** * Super weird bug... If this declaration is grouped * below, the cancel button will still appear in chrome. * If it's up here on it's own, it'll hide it. */ .vs__search::-webkit-search-cancel-button { display: none; } .vs__search::-webkit-search-decoration, .vs__search::-webkit-search-results-button, .vs__search::-webkit-search-results-decoration, .vs__search::-ms-clear { display: none; } .vs__search, .vs__search:focus { -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1.5; font-size: 1em; border: 1px solid transparent; border-left: none; outline: none; margin: 4px 0 0 0; padding: 0 7px; background: none; box-shadow: none; width: 0; max-width: 100%; flex-grow: 1; z-index: 1; } .vs__search::-moz-placeholder { color: #ffffff; } .vs__search:-ms-input-placeholder { color: #ffffff; } .vs__search::-ms-input-placeholder { color: #ffffff; } .vs__search::placeholder { color: #ffffff; } /** States */ .vs--unsearchable .vs__search { opacity: 1; } .vs--unsearchable:not(.vs--disabled) .vs__search { cursor: pointer; } .vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search { opacity: 0.2; } /* Loading Spinner */ .vs__spinner { align-self: center; opacity: 0; font-size: 5px; text-indent: -9999em; overflow: hidden; border-top: 0.9em solid rgba(100, 100, 100, 0.1); border-right: 0.9em solid rgba(100, 100, 100, 0.1); border-bottom: 0.9em solid rgba(100, 100, 100, 0.1); border-left: 0.9em solid rgba(60, 60, 60, 0.45); transform: translateZ(0); -webkit-animation: vSelectSpinner 1.1s infinite linear; animation: vSelectSpinner 1.1s infinite linear; transition: opacity 0.1s; } .vs__spinner, .vs__spinner:after { border-radius: 50%; width: 5em; height: 5em; } /* Loading Spinner States */ .vs--loading .vs__spinner { opacity: 1; } .vs__dropdown-option .img { display: inline-block; width: 30px; margin-right: 10px; text-align: center; } .vs__dropdown-option .img img { width: 30px; height: auto; } .vs__dropdown-option--disabled { display: flex; color: #cccccc !important; cursor: not-allowed; } .lds-ring { display: inline-block; position: relative; width: 15px; height: 15px; } .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 15px; height: 15px; border: 2px solid #cccccc; border-radius: 50%; -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #cccccc transparent transparent transparent; } .lds-ring div:nth-child(1) { -webkit-animation-delay: -0.45s; animation-delay: -0.45s; } .lds-ring div:nth-child(2) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .lds-ring div:nth-child(3) { -webkit-animation-delay: -0.15s; animation-delay: -0.15s; } @-webkit-keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body.modal-open { overflow: hidden; } /* Box sizing rules */ .dws-wrapper { box-sizing: border-box; } .dws-wrapper *, .dws-wrapper *::before, .dws-wrapper *::after { box-sizing: border-box; padding: 0; margin: 0; } /* Make images easier to work with */ .dws-wrapper img { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ .dws-wrapper input::-moz-placeholder { font-family: inherit; } .dws-wrapper input:-ms-input-placeholder { font-family: inherit; } .dws-wrapper input::-ms-input-placeholder { font-family: inherit; } .dws-wrapper input, .dws-wrapper button, .dws-wrapper textarea, .dws-wrapper select, .dws-wrapper input::placeholder { font-family: inherit; } .dws-wrapper a, .dws-wrapper a:hover, .dws-wrapper a:visited { text-decoration: none; color: #ffffff; } .v-select { width: 100%; } .vs__dropdown-toggle { background-color: rgba(66, 21, 93, 0.1882352941); height: 44px; color: #ffffff; outline: none; padding: 1px 26px 0; font-size: 22px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url("../images/arrdown.png"); background-repeat: no-repeat; background-position: right 20px center; background-size: auto; } @media (max-width: 992px) { .vs__dropdown-toggle { font-size: 18px; height: 37px; } } .vs__dropdown-menu { border-bottom-left-radius: 20px; border-bottom-right-radius: 0; min-height: 50px; padding: 3px 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #be59a9 #6c1156; } .vs__dropdown-menu::-webkit-scrollbar { width: 5px; } .vs__dropdown-menu::-webkit-scrollbar-thumb { background-color: #be59a9; border-radius: 5px; } .vs__dropdown-menu::-webkit-scrollbar-track { background-color: #6c1156; border-radius: 5px; } .vs__dropdown-option { text-align: left; margin: 0 6px 3px 3px; padding: 0 14px 3px 14px; border: none; border-radius: 17px; color: #ffffff; font-size: 22px; } .vs__selected { color: #ffffff; margin: 0; } .vs__selected > span { margin-right: 10px; } .vs__search { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } @media (max-width: 992px) { .vs__search { font-size: 18px; } } .vs__search::-moz-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .vs__search:-ms-input-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .vs__search::-ms-input-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .vs__search::placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } @media (max-width: 992px) { .vs__search::-moz-placeholder { font-size: 18px; } .vs__search:-ms-input-placeholder { font-size: 18px; } .vs__search::-ms-input-placeholder { font-size: 18px; } .vs__search::placeholder { font-size: 18px; } } .vs__actions { display: none; } .vs--searchable .vs__dropdown-toggle, .vs__search { cursor: pointer; } .dws-wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center; color: #ffffff; background-color: rgba(1, 0, 16, 0.5); z-index: 101; overflow-x: hidden; overflow-y: auto; } .login-border { width: 100%; max-width: 440px; border-radius: 54px; padding: 20px; background-color: rgba(255, 255, 255, 0.55); position: relative; box-shadow: 0 17px 38px 0 rgba(0, 0, 0, 0.3); } .login-border--signup, .login-border--dashboard { max-width: 1120px; } /*close-modal-cross*/ .close-modal-btn { position: absolute; right: -64px; top: 17px; width: 34px; height: 34px; cursor: pointer; z-index: 100; } .close-modal-cross { width: 100%; height: 100%; opacity: 0.8; } .close-modal-cross:hover { opacity: 1; } .close-modal-cross:before, .close-modal-cross:after { position: absolute; left: 15px; content: ""; height: 40px; width: 4px; border-radius: 3px; background-color: #fff; } .close-modal-cross:before { transform: rotate(45deg); } .close-modal-cross:after { transform: rotate(-45deg); } .input-field { display: block; height: 44px; border: 2px solid rgba(255, 170, 216, 0.3411764706); outline: none; font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; border-radius: 22px; background-color: rgba(66, 21, 93, 0.1882352941); color: #ffffff; padding: 3px 24px; } @media (max-width: 992px) { .input-field { font-size: 18px; height: 37px; } } .input-field::-moz-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .input-field:-ms-input-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .input-field::-ms-input-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .input-field::placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } @media (max-width: 992px) { .input-field::-moz-placeholder { font-size: 18px; } .input-field:-ms-input-placeholder { font-size: 18px; } .input-field::-ms-input-placeholder { font-size: 18px; } .input-field::placeholder { font-size: 18px; } } .input-field:hover { outline: none; } .input-field--login { max-width: 300px; width: 100%; margin: 0 0 14px 0; padding: 3px 30px 3px 55px; background: url("../images/username.png") left 10px center/auto 1.75em no-repeat; } .input-field--passwd { width: 100%; margin: 0; padding: 3px 60px 3px 55px; background: url("../images/password.png") left 10px center/auto 1.75em no-repeat; } .input-field--fullwidth { width: 100%; } .custom-input-field { display: block; height: 44px; border: 2px solid rgba(255, 170, 216, 0.3411764706); font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; border-radius: 22px; background-color: rgba(66, 21, 93, 0.1882352941); color: #ffffff; padding: 3px 24px; position: relative; } @media (max-width: 992px) { .custom-input-field { height: 37px; font-size: 18px; } } .custom-input-field input { width: 100%; outline: none; font-size: inherit; line-height: inherit; font-style: inherit; font-weight: inherit; background-color: transparent; border: none; color: white; caret-color: white; } .custom-input-field input::-moz-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .custom-input-field input:-ms-input-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .custom-input-field input::-ms-input-placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } .custom-input-field input::placeholder { font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: white; } @media (max-width: 992px) { .custom-input-field input::-moz-placeholder { font-size: 18px; } .custom-input-field input:-ms-input-placeholder { font-size: 18px; } .custom-input-field input::-ms-input-placeholder { font-size: 18px; } .custom-input-field input::placeholder { font-size: 18px; } } .custom-input-field input:hover { outline: none; } .custom-input-field--login { max-width: 300px; width: 100%; margin: 0 0 14px 0; padding: 3px 30px 3px 55px; background: url("../images/username.png") left 10px center/auto 1.75em no-repeat; } .custom-input-field--passwd { width: 100%; margin: 0; padding: 3px 60px 3px 55px; background: url("../images/password.png") left 10px center/auto 1.75em no-repeat; } .custom-input-field--fullwidth { width: 100%; } .custom-input-field--halfwidth { max-width: calc(50% - 3px); } .custom-input-field--validation-failed { border-color: #e84354; } .custom-input-field__validation-error { position: absolute; left: 22px; bottom: -1.5em; display: block; max-width: 80%; font-size: 12px; font-style: italic; font-weight: 600; letter-spacing: 0.05em; padding: 0.1em 0.75em; border: none; border-radius: 1.25em; background-color: #ff464e; color: white; opacity: 1; z-index: 10; visibility: hidden; transform: scale(0, 0); transition: 0.2s ease; } .custom-input-field__validation-error::before { content: ""; position: absolute; left: 28px; top: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #ff464e; } .custom-input-field--validation-failed .custom-input-field__validation-error { visibility: visible; transform: none; transition: 0.2s ease; } .login-container { width: 100%; min-height: 540px; padding: 35px 50px 30px 50px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; border-radius: 40px; text-align: center; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.65); background: url("../images/pattern.png") left top 22px/62px auto repeat, url("../images/login-bg.png") center top/cover no-repeat; background-blend-mode: color-burn; position: relative; border-bottom: solid 5px #42155d; border-top: solid 2px #de91a3; } .login-nav__title { text-transform: uppercase; font-size: 34px; line-height: 1.1765; font-style: italic; font-weight: 700; display: block; margin: 0 0 40px 0; letter-spacing: 0.57px; } .gradient-text { /* standard gradient background */ background: linear-gradient(#fbe569, #f8ad37); /* clip hackery */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .form-login { flex: 1; width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin: 0 0 20px 0; } .password-field { width: 100%; max-width: 300px; position: relative; display: block; margin: 0 0 35px 0; } .password-field + .error { margin-top: -30px; } .password-field.password-field--signup + .error { margin-top: -5px; } .password-field__status { position: absolute; right: 20px; top: calc(50% - 8px); width: 22px; height: 20px; display: block; cursor: pointer; background-position: center center; background-size: 100% auto; background-repeat: no-repeat; } .password-field__status { background-image: url("../images/sleep.png"); } .password-field__status.password-field__status--pwdtext-hidden { background-image: url("../images/eye.png"); } .password-at-login { width: 100%; max-width: 300px; position: relative; display: block; margin: 0 0 35px 0; } .submit-button { padding: 10px 15px; outline: none; color: #ffffff; cursor: pointer; font-size: 23px; line-height: 1.3; font-style: italic; font-weight: 600; background: url("../images/btn.png") center center/cover no-repeat; border: none; border-radius: 5px; transform: skew(-3deg); min-width: 144px; position: relative; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; z-index: 1; } @media (max-width: 992px) { .submit-button { min-width: 120px; height: 40px; background-size: contain; font-size: 19px; } } .submit-button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; border-radius: 14px; border: none; transform: skew(-8deg); box-shadow: 0 -14px 12px -8px rgba(91, 178, 192, 0.6), 0px 14px 4px -8px rgba(52, 47, 143, 0.6); transition: box-shadow 0.4s ease; } .submit-button:hover::before { box-shadow: 0px -14px 14px -8px rgba(91, 178, 192, 0.7), 0px 18px 14px -8px rgba(52, 47, 143, 0.8); } .submit-button::after { content: " "; width: 8px; height: 11px; background: url("../images/arrow.png") center center/100% auto no-repeat; display: block; margin-top: 2px; } .submit-button--save { margin-top: 10px; background-image: url("../images/btn3.png"); padding-top: 9px; padding-bottom: 13px; min-width: 124px; } @media (max-width: 992px) { .submit-button--save { min-width: 100px; height: 42px; font-size: 19px; } } .submit-button--save::after { display: none; } .welcome-login { margin: 0 0 14px 0; font-size: 28px; line-height: 1; font-style: italic; font-weight: 600; color: white; text-align: center; } .login-register, .login-register:hover, .login-register:visited { font-size: 21px; line-height: 1.238; font-style: italic; font-weight: 600; text-align: center; margin: 40px 0 4px 0; position: relative; cursor: pointer; text-decoration: none; } .login-register::before { content: ""; position: absolute; top: -28px; left: calc(50% - 50px); width: 100px; height: 3px; background-color: #ff8feb; opacity: 0.15; } .login-forgot, .login-forgot:hover, .login-forgot:visited, .login-other-user { color: #ffcbcb; font-size: 18px; line-height: 1.625; font-style: italic; font-weight: 600; display: block; margin: 0 0 10px 0; text-align: center; } .whynot__text { flex: 1; width: 100%; text-align: center; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; font-size: 26px; line-height: 1.385; font-style: italic; font-weight: 600; color: white; } .whynot__buttons-box { width: 100%; margin: 50px 0 0 0; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .submit-button--backbtn::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; border-radius: 14px; border: none; transform: skew(-8deg); box-shadow: 0 -14px 12px -8px rgba(91, 178, 192, 0.6), 0px 14px 4px -8px rgba(52, 47, 143, 0.6); transition: box-shadow 0.4s ease; background: none; width: auto; height: auto; } .submit-button--backbtn:hover::after { box-shadow: 0px -14px 14px -8px rgba(91, 178, 192, 0.7), 0px 18px 14px -8px rgba(52, 47, 143, 0.8); } .submit-button--backbtn::before { position: initial; content: " "; width: 8px; height: 11px; background: url("../images/backarrow.png") center center/100% auto no-repeat; display: block; margin-top: 2px; } .plain-button { padding: 9px 15px 11px 15px; background-color: rgba(136, 48, 188, 0.2980392157); background-image: linear-gradient(to bottom, rgba(176, 67, 240, 0.3019607843), rgba(176, 67, 240, 0)); background-position: center top; background-size: cover; background-repeat: no-repeat; outline: none; color: #ffffff; font-size: 21px; line-height: 27px; font-style: italic; font-weight: 600; cursor: pointer; border-radius: 10px; transform: skewX(-6deg); /* background-color: rgba(132, 49, 168, 0.8); background-image: linear-gradient(to bottom, #b043f04d, #b043f000); background-position: center top; background-size: cover; background-repeat: no-repeat; border: solid 2px #ffffff0d; box-shadow: 0px 7px 8px 0px rgba(34, 0, 64, 0.17), inset 0 2px 2px 0 rgba(255, 255, 255, 0.15); */ border: solid 2px rgba(162, 88, 196, 0.3137254902); border-top: solid 2px rgba(162, 88, 196, 0.9803921569); box-shadow: 0px 7px 8px 0px rgba(34, 0, 64, 0.17); display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; min-width: 130px; overflow: hidden; } .plain-button.plain-button--small { padding: 5px 7px; font-size: 21px; line-height: 27px; } @media (max-width: 992px) { .plain-button:not(.plain-button--small) { font-size: 19px; line-height: 1; } } .plain-button:hover { box-shadow: 0px 10px 12px 0px rgba(34, 0, 64, 0.3); } .plain-button--close { margin-top: 30px; } .plain-button:disabled, .plain-button.disabled { cursor: not-allowed; color: rgba(255, 255, 255, 0.5) !important; box-shadow: none !important; } .plain-button:disabled img, .plain-button.disabled img { opacity: 0.5; } .signup-container, .dashboard-container { width: 100%; min-height: 660px; padding: 45px 40px 40px 40px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; border-radius: 40px; text-align: center; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.65); background: url("../images/pattern.png") left top 18px/62px auto repeat, url("../images/signup-bg.png") center top/cover no-repeat; background-blend-mode: color-burn; position: relative; border-bottom: solid 5px #42155d; border-top: solid 2px #de91a3; } @media (max-width: 992px) { .signup-container::before, .dashboard-container::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #7d106a; z-index: -1; } } .signup-forms-box { width: 100%; min-height: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin-left: 60px; } @media (min-width: 1200px) { .signup-forms-box { max-width: 400px; } } .signup-form { width: 100%; flex: 1; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; } .signup-form--step-1 { padding-top: 25px; padding-bottom: 45px; } .signup-form__title { text-transform: uppercase; font-size: 34px; line-height: 1.1765; font-style: italic; font-weight: 700; display: block; letter-spacing: 0.57px; } .signup-form__controls-box { width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .input-field--signup-email { width: 100%; margin: 0 0 15px 0; padding: 3px 60px 3px 55px; background: url("../images/email.png") left 16px center/auto 0.8em no-repeat; } .custom-input-field--signup-email { width: 100%; margin: 0 0 15px 0; padding: 3px 60px 3px 55px; background: url("../images/email.png") left 16px center/auto 0.8em no-repeat; } .password-field--signup { max-width: initial; margin: 0 0 15px 0; } .signup-form__label { padding: 0 20px 0 20px; margin: 0 0 10px 0; font-size: 18px; line-height: 1.444; font-style: italic; font-weight: 600; color: #ffcbcb; } .signup-form__spacer-line { margin: 32px 20px 30px 20px; width: calc(100% - 44px); height: 3px; background-color: rgba(244, 154, 193, 0.1490196078); border: none; } .checkbox-with-label { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; } .custom-checkbox { font-size: 24px; width: 1em; height: 1em; cursor: pointer; position: relative; line-height: 1em; } .custom-checkbox input { position: absolute; font-size: inherit !important; left: 0; top: 0; width: 1em; height: 1em; opacity: 0; outline: none; } .custom-checkbox div { font-size: inherit; width: 1em; height: 1em; background-color: rgba(66, 21, 93, 0.1882352941); border-radius: 0.3333em; position: relative; border: 2px solid rgba(255, 170, 216, 0.3411764706); } .custom-checkbox div::after { font-size: inherit; content: ""; position: absolute; left: 0.25em; bottom: 0.15em; width: 0.35em; height: 0.65em; border-bottom: solid 3px #5ad6fd; border-right: solid 3px #5ad6fd; transform: rotate(45deg); opacity: 0; transition: all 0.2s ease; } .custom-checkbox input:checked + div { background-color: rgba(66, 21, 93, 0.1882352941); transition: all 0.2s ease; } .custom-checkbox input:checked + div::after { opacity: 1; transition: all 0.2s ease; } .checkbox-with-label__label { display: block; margin: 0 0 0 12px; font-size: 18px; line-height: 1.444; font-style: italic; font-weight: 600; color: #ffcbcb; text-align: left; } .checkbox-with-label--at-signup { width: 75%; margin: 0 0 0 20px; } .checkbox-with-label--subscribe { width: 90%; margin: 0 0 0 20px; } .radiobtn-with-label { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; height: 44px; } .radiobtn-with-label__label { display: block; margin: 0 0 0 12px; font-size: 21px; line-height: 1.444; font-style: italic; font-weight: 600; color: white; text-align: left; } @media (max-width: 992px) { .radiobtn-with-label__label { font-size: 18px; } } .custom-radio { position: relative; cursor: pointer; font-size: 24px; line-height: 1; box-sizing: border-box; padding: 0; margin: 0 0 0 20px; width: 1em; height: 1em; } .custom-radio > input { position: absolute; font-size: inherit !important; left: 0; top: 0; width: 1em; height: 1em; opacity: 0; } .custom-radio > div { font-size: inherit; width: 1em; height: 1em; background-color: rgba(66, 21, 93, 0.1882352941); border: 2px solid rgba(255, 170, 216, 0.3411764706); border-radius: 100%; position: relative; } .custom-radio > div::after { content: ""; position: absolute; left: calc(50% - 0.25em); top: calc(50% - 0.25em); width: 0.5em; height: 0.5em; border: none; border-radius: 100%; background-color: #5ad6fd; opacity: 0; transition: all 0.2s ease; } .custom-radio > input:checked + div { background-color: rgba(66, 21, 93, 0.1882352941); transition: all 0.2s ease; } .custom-radio > input:checked + div::after { opacity: 1; transition: all 0.2s ease; } .form-column--signup-gender > .form-row { justify-content: flex-start; } .signup-form--step-2 .signup-form__controls-box { margin-bottom: 20px; } .signup-benefits { width: 100%; min-height: 100%; box-shadow: inset 0px 0px 80px 20px rgba(71, 18, 81, 0.55); border-radius: 30px; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; } @media (min-width: 1200px) { .signup-benefits { max-width: 420px; } } .dws-wrapper--signup .signup-benefits--with-banner { /* background: url('../images/promo-banner.png'); background-position: top center; background-repeat: no-repeat; */ } .signup-benefits__title { width: 100%; min-height: 95px; font-size: 33px; font-style: italic; font-weight: 600; color: white; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding-top: 20px; padding-bottom: 20px; background: url("../images/why-not-bg.png") center bottom/contain no-repeat; } .signup-benefits-bonuses__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 130px; line-height: 1; padding: 18px 23px 18px 23px; margin-top: 10px; text-align: center; position: relative; } .signup-benefits-bonuses__item::before { content: ""; display: block; width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; border-radius: 20px; box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.9); transform: translateX(-50%) translateY(-50%) skew(-8deg); z-index: 2; } .signup-benefits-bonuses__item::after { content: ""; display: block; width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; background: linear-gradient(0deg, rgba(255, 113, 112, 0.8) 0%, rgba(255, 206, 55, 0.8) 50%, rgba(255, 113, 112, 0.8) 100%); border-radius: 20px; box-shadow: 0px 0px 20px 10px rgba(248, 174, 55, 0.9); transform: translateX(-50%) translateY(-50%) skew(-8deg); } .signup-benefits-bonuses__item:first-child { margin-top: 0; } .signup-benefits-bonuses__item.signup-benefits-bonuses__item--plus { display: none; } .signup-benefits-bonuses_item_name { font-family: "Barlow Condensed", sans-serif; font-size: 46px; font-style: italic; font-weight: 800; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 2; } @media (max-width: 500px) { .signup-benefits-bonuses_item_name { font-size: 30px; } } .signup-benefits-bonuses_item_name::before { content: attr(data-text); background: #430840; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 6px; -webkit-text-stroke-color: #430840; position: absolute; top: 0; left: 0; text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } .signup-benefits-bonuses_item_name::after { content: attr(data-text); background: #fbe569; background: linear-gradient(#fbe569, #f8ad37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 0; left: 0; } .signup-benefits-bonuses_item_description { font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-style: italic; font-weight: 800; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 2; } @media (max-width: 500px) { .signup-benefits-bonuses_item_description { font-size: 18px; } } .signup-benefits-bonuses_item_description::before { content: attr(data-text); background: #430840; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: #430840; position: absolute; top: 0; left: 0; text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } .signup-benefits-bonuses_item_description::after { content: attr(data-text); background: rgb(48, 236, 234); background: linear-gradient(0deg, rgb(48, 236, 234) 0%, rgb(89, 255, 169) 76%, rgb(129, 255, 190) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 0; left: 0; } .signup-benefits__box { width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; } .signup-benefits__item { flex: 0 0 115px; font-size: 21px; font-style: italic; font-weight: 600; line-height: 1.238; text-align: center; margin: 0 1px 20px 1px; display: block; } .signup-benefits__item--headphone { padding: 90px 5px 5px 5px; position: relative; } .signup-benefits__item--headphone::before { content: ""; position: absolute; left: calc(50% - 42px); top: 0; width: 84px; height: 84px; border-radius: 100%; background: url("../images/support.png") center center/auto no-repeat; box-shadow: 0 0 40px 0 rgba(159, 101, 255, 0.1254901961); } .signup-benefits__item--money { padding: 90px 20px 5px 20px; position: relative; } .signup-benefits__item--money::before { content: ""; position: absolute; left: calc(50% - 42px); top: 0; width: 84px; height: 84px; border-radius: 100%; background: url("../images/payouts.png") center center/auto no-repeat; box-shadow: 0 0 40px 0 rgba(159, 101, 255, 0.1254901961); } .signup-benefits__item--box { padding: 90px 5px 5px 5px; position: relative; } .signup-benefits__item--box::before { content: ""; position: absolute; left: calc(50% - 42px); top: 0; width: 84px; height: 84px; border-radius: 100%; background: url("../images/bonus.png") center center/auto no-repeat; box-shadow: 0 0 40px 0 rgba(159, 101, 255, 0.1254901961); } .signup-form--step-2 .signup-form__controls-box > * { margin-bottom: 5px; } .input-field--halfwidth { max-width: calc(50% - 3px); } .submit-button--bigger { min-width: 185px; background-image: url("../images/btn2.png"); } @media (max-width: 992px) { .submit-button--bigger { min-width: 120px; } } .form-row { width: 100%; display: flex; flex-flow: row; justify-content: space-between; align-items: center; } .custom-select { display: block; background-color: rgba(66, 21, 93, 0.1882352941); border-radius: 22px; width: 100%; height: 44px; margin: 0; border: 2px solid rgba(255, 170, 216, 0.3411764706); color: #ffffff; outline: none; padding: 1px 26px 0; font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url("../images/arrdown.png"); background-repeat: no-repeat; background-position: right 20px center; background-size: auto; /* padding: 0 22px; position: relative; */ } /* .custom-select select { width: 100%; -moz-appearance: none; -webkit-appearance: none; appearance: none; color: #ffffff; background-color: transparent !important; outline: 0 !important; border: none; position: absolute; left: 22px; bottom: 0; width: calc(100% - 44px); height: 42px; display: flex; flex-flow: row nowrap; align-items: center; } */ .custom-select option { background-color: #6f2560 !important; color: white !important; } .custom-select-control { display: block; background-color: rgba(66, 21, 93, 0.1882352941); border-radius: 22px; width: 100%; height: 44px; margin: 0; border: 2px solid rgba(255, 170, 216, 0.3411764706); color: #ffffff; outline: none; padding: 1px 26px 0 22px; font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url("../images/arrdown.png"); background-repeat: no-repeat; background-position: right 20px center; background-size: auto; position: relative; cursor: pointer; } .custom-select-control--fullwidth { width: 100%; } .custom-select-control--halfwidth { max-width: calc(50% - 3px); } .custom-select-control--quaterwidth { max-width: calc(25% - 3px); } .custom-select-control__selected { text-align: left; margin: 2px 4px 0px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-select-control__options-box { position: absolute; left: -1px; right: -1px; top: 44px; z-index: 10; background-color: #6c1156; border: solid 2px #ae5599; border-radius: 20px; overflow: hidden; transform-origin: center top; transform: scaleY(0); transition: 0.2s ease; max-height: 150px; min-height: 50px; padding: 3px 0; } .custom-select-control--active .custom-select-control__options-box { transform: none; transition: 0.2s ease; } .custom-select-control__options-set { width: calc(100% - 10px); max-height: 130px; display: block; list-style-type: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #be59a9 #6c1156; } .custom-select-control__options-set::-webkit-scrollbar { width: 5px; } .custom-select-control__options-set::-webkit-scrollbar-thumb { background-color: #be59a9; border-radius: 5px; } .custom-select-control__options-set::-webkit-scrollbar-track { background-color: #6c1156; border-radius: 5px; } .custom-select-control__option { text-align: left; margin: 0 6px 3px 3px; padding: 0 14px 3px 14px; border: none; border-radius: 17px; } .custom-select-control__option:last-child { margin-bottom: 0; } .custom-select-control__option--selected { background-color: #973781; } .custom-select-control__option:hover { background-color: #973781; } .birthdate--day { max-width: 24%; } .birthdate--month { max-width: 40.5%; } .birthdate--year { max-width: 32.25%; } .form-column { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .form-column--signup-gender { flex: 0 0 53.75%; } .form-column--signup-currency { flex: 0 0 37.5%; } .form-column--signup-gender > *, .form-column--signup-currency > * { margin-bottom: 5px; } .dashboard-container { min-height: 735px; padding: 0; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; position: relative; } .tabs-box { list-style-type: none; width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; background-color: rgba(255, 186, 209, 0.1254901961); padding: 0 40px; border: none; border-radius: 40px 40px 0 0; } .tabs-box__tab { font-size: 22px; font-style: italic; font-weight: 600; line-height: 32px; letter-spacing: 0.04em; padding: 12px 30px; color: #ffd6b2; cursor: pointer; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; } .tabs-box__tab.tabs-box__tab--loading { color: #ffffff; } .tabs-box__tab.tabs-box__tab--loading::after { content: ""; display: block; width: 0; height: 4px; background-color: #ffd991; transition: all 0.2s ease-in-out; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; -webkit-animation: tabsboxanimation 1s ease-in-out infinite; animation: tabsboxanimation 1s ease-in-out infinite; } @-webkit-keyframes tabsboxanimation { 0% { width: 0; opacity: 0; } 100% { width: 100%; opacity: 1; } } @keyframes tabsboxanimation { 0% { width: 0; opacity: 0; } 100% { width: 100%; opacity: 1; } } .tabs-box__tab--active { font-size: 24px; letter-spacing: normal; color: white; background-image: url("../images/active-tab-glow.png"); background-position: center bottom; background-size: auto; background-repeat: repeat-x; } .tabs-container { width: 100%; flex: 1; padding: 34px 40px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 10px; } .account-form { width: 100%; max-width: 530px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .account-form > .form-row { margin-bottom: 5px; } .account-form__label { font-size: 21px; font-style: italic; font-weight: 600; line-height: 1.25; color: #ffcbcb; flex: 0 0 147px; text-align: left; } @media (max-width: 992px) { .account-form__label { font-size: 18px; } } .account-form--fullwidth { flex: 1; } @media (max-width: 768px) { .account-form--fullwidth { flex-direction: column; width: 100%; } .account-form--fullwidth .v-select + .v-select { margin-top: 5px; } } .account-panel { width: 100%; flex: 1; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; } .account-summary__title { font-size: 34px; font-style: italic; font-weight: 600; line-height: 0.9; /* ???, according to design */ text-align: center; color: white; max-width: 100%; /*overflow: hidden;*/ margin-bottom: 8px; } @media (max-width: 768px) { .account-summary__title { font-size: 30px; } } .account-summary__label { font-size: 21px; font-style: italic; font-weight: 600; line-height: 1.25; color: #ffcbcb; } .account-summary__label--centered { text-align: center; line-height: 1; } .account-summary__label--balance { width: 180px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; text-align: left; } .account-summary__label--money { color: white; } .account-summary__label--money::after { content: " EUR"; } .progress-bar { width: 100%; height: 17px; padding: 3px 8px 4px 8px; background-color: #3b1762; border-radius: 8.5px; border-bottom: solid 1px #df8da5; margin-top: 3px; } .progress-bar__indicator { max-width: 100%; height: 9px; background: linear-gradient(to right, #1eb83e 0%, #addb32 40%, #ffeb38 70%, #ffe7b2 90%, #fff9ea 100%) left top/cover no-repeat; border: none; border-radius: 4px; } .account-summary { width: 90%; max-width: 292px; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: stretch; box-shadow: inset 0px 0px 80px 20px rgb(71, 18, 81); border-radius: 30px; padding: 22px 25px; } @media (max-width: 768px) { .account-summary { width: 100%; } } .account-summary__summary { margin-top: -37px; width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin-bottom: 7px; } .account-summary__balance { margin: 10px auto; } .account-summary__balance > * { margin-bottom: 10px; } .account-summary__buttons { width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; } .account-summary__buttons > .plain-button { width: 100%; margin: 7px 0; } .account-summary__photo-block { width: 115px; height: 115px; border: solid 7px white; border-radius: 100%; overflow: hidden; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; box-shadow: 0px 23px 26px 0 rgba(22, 0, 73, 0.5019607843); margin-bottom: 15px; } .account-summary__photo-image { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .plain-button--changepwd, .plain-button--prefs, .plain-button--cashback, .plain-button--promocode { justify-content: center; /*padding: 5px 10px 7px 10px;*/ padding: 3px 0 3px 0; } .plain-button--changepwd::before { content: ""; width: 32px; height: 36px; background: url("../images/changepwd.png") center center/auto auto no-repeat; margin-right: 8px; } .plain-button--prefs::before { content: ""; width: 32px; height: 36px; background: url("../images/marketingprefs.png") center center/auto auto no-repeat; margin-right: 8px; } .plain-button--cashback::before { content: ""; width: 32px; height: 36px; background: url("../images/cashback_icon.png") center center/auto auto no-repeat; margin-right: 8px; } .plain-button--promocode::before { content: ""; width: 32px; height: 36px; background: url("../images/promocode.png") center center/auto auto no-repeat; margin-right: 8px; } .support-block-chat { width: 220px; background-color: #41125c; transform: skew(-8deg); padding: 5px 10px; position: absolute; bottom: 0; left: calc(50% - 110px); border-radius: 6px 6px 0 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } @media (max-width: 992px) { .support-block-chat { display: none; } } .support-block-chat p { font-size: 19px; line-height: 1; font-style: italic; font-weight: 600; color: #ffffff; text-shadow: 0px 0px 10px #ffffff; text-align: center; margin-left: 4px; } .support-block-chat p span { color: #5ad6fd; } @media (max-width: 1200px) { .vuetable-td { display: flex; width: 100%; flex-flow: row nowrap; justify-content: space-between; align-items: center; } } .vuetable-td .vuetable-td__label { display: none; } @media (max-width: 1200px) { .vuetable-td .vuetable-td__label { display: block; } } .bonuses-panel { width: 100%; flex: 1; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; } .vuetable-body-wrapper, .your-bonuses { width: 100%; height: 513.87px; background-color: rgba(41, 8, 75, 0.1882352941); border-radius: 30px; border-top: solid 4px rgba(13, 0, 47, 0.2509803922); border-bottom: solid 2px #7a2883; box-shadow: inset 0 0 95px 0 rgba(31, 0, 75, 0.3215686275); position: relative; overflow: hidden; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; background-image: linear-gradient(to right, rgba(229, 70, 160, 0.2), rgba(229, 70, 160, 0.2)); background-position: left top; background-size: 100% 60px; background-repeat: no-repeat; } .your-bonuses.dashboard-verification-alert { height: auto; } .has-pager .vuetable-body-wrapper, .has-pager .your-bonuses { height: 449px; } .gaming-panel .vuetable-body-wrapper, .gaming-panel .your-bonuses { height: 513.87px; } .gaming-panel.has-pager .vuetable-body-wrapper, .gaming-panel.has-pager .your-bonuses { height: 449px; } .bonuses-table { flex: 1; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; overflow-x: auto; overflow-y: hidden; border-spacing: 0; scrollbar-width: thin; scrollbar-color: #be59a9 transparent; } .bonuses-table::-webkit-scrollbar { height: 8px; } .bonuses-table::-webkit-scrollbar-thumb { background-color: #be59a9; border-radius: 8px; } .bonuses-table::-webkit-scrollbar-track { background-color: transparent; border-radius: 8px; } .bonuses-table > thead { width: auto; flex: 0 0 60px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .bonuses-table > tbody { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #be59a9 #471251; } .bonuses-table > tbody::-webkit-scrollbar { width: 12px; } .bonuses-table > tbody::-webkit-scrollbar-thumb { background-color: #be59a9; border-radius: 12px; } .bonuses-table > tbody::-webkit-scrollbar-track { background-color: #471251; border-radius: 12px; } .bonuses-table > thead > tr, .bonuses-table > tbody > tr { width: auto; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } .bonuses-table > tbody > tr { border-bottom: solid 2px rgba(255, 143, 235, 0.1529411765); } .bonuses-table > tbody > tr:last-child { border-bottom: solid 4px transparent; } .bonuses-table > thead > tr > th { font-size: 22px; line-height: 1.25; font-weight: 600; font-style: italic; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; color: white; text-align: left; } @media (max-width: 992px) { .bonuses-table > thead > tr > th { font-size: 19px; } } .bonuses-table > tbody > tr > td { color: #ffcbcb; font-size: 21px; line-height: 1.238; font-weight: 600; font-style: italic; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; padding: 12.5px 16px 12.5px 0; text-align: left; word-break: break-all; overflow-x: hidden; } @media (max-width: 992px) { .bonuses-table > tbody > tr > td { font-size: 18px; } } .bonuses-table--active { margin: 0 28px 0 40px; /* right margin was adjusted for the scrollbar size */ } .bonuses-table--active > tbody { width: 932px; /* width should be a sum of column widths PLUS scrollbar */ } .bonuses-table--active > tbody > tr { width: 920px; /* width here shall be a sum of column widths */ } .bonuses-table--active > thead > tr > th:nth-child(1), .bonuses-table--active > tbody > tr > td:nth-child(1):not(.vuetable-empty-result) { width: 180px; } @media (max-width: 1200px) { .bonuses-table--active > thead > tr > th:nth-child(1), .bonuses-table--active > tbody > tr > td:nth-child(1):not(.vuetable-empty-result) { width: 100%; } } .bonuses-table--active > thead > tr > th:nth-child(2), .bonuses-table--active > tbody > tr > td:nth-child(2) { width: 235px; } .bonuses-table--active > thead > tr > th:nth-child(3), .bonuses-table--active > tbody > tr > td:nth-child(3) { width: 105px; } .bonuses-table--active > thead > tr > th:nth-child(4), .bonuses-table--active > tbody > tr > td:nth-child(4) { width: 120px; } .bonuses-table--active > thead > tr > th:nth-child(5), .bonuses-table--active > tbody > tr > td:nth-child(5) { width: 170px; } .bonuses-table--active > thead > tr > th:nth-child(6), .bonuses-table--active > tbody > tr > td:nth-child(6) { width: 110px; padding-right: 10px; } .bonuses-table--history { margin: 0 32px 0 40px; /* right margin was adjusted for the scrollbar size */ } .bonuses-table--history > tbody { width: 928px; /* width should be a sum of column widths PLUS scrollbar */ } .bonuses-table--history > tbody > tr { width: 920px; /* width here shall be a sum of column widths */ } .bonuses-table--history > thead > tr > th:nth-child(1), .bonuses-table--history > tbody > tr > td:nth-child(1):not(.vuetable-empty-result) { width: 180px; } @media (max-width: 1200px) { .bonuses-table--history > thead > tr > th:nth-child(1), .bonuses-table--history > tbody > tr > td:nth-child(1):not(.vuetable-empty-result) { width: 100%; } } .bonuses-table--history > thead > tr > th:nth-child(2), .bonuses-table--history > tbody > tr > td:nth-child(2) { width: 285px; } .bonuses-table--history > thead > tr > th:nth-child(3), .bonuses-table--history > tbody > tr > td:nth-child(3) { width: 175px; } .bonuses-table--history > thead > tr > th:nth-child(4), .bonuses-table--history > tbody > tr > td:nth-child(4) { width: 170px; } .bonuses-table--history > thead > tr > th:nth-child(5), .bonuses-table--history > tbody > tr > td:nth-child(5) { width: 110px; } .bonuses-table--transactions { margin: 0 28px 0 40px; /* right margin was adjusted for the scrollbar size */ } .bonuses-table--transactions > tbody { width: 932px; /* width should be a sum of column widths PLUS scrollbar */ } .bonuses-table--transactions > tbody > tr { width: 920px; /* width here shall be a sum of column widths */ } .bonuses-table--transactions > thead > tr > th:nth-child(1), .bonuses-table--transactions > tbody > tr > td:nth-child(1):not(.vuetable-empty-result) { width: 180px; } @media (max-width: 1200px) { .bonuses-table--transactions > thead > tr > th:nth-child(1), .bonuses-table--transactions > tbody > tr > td:nth-child(1):not(.vuetable-empty-result) { width: 100%; } } .bonuses-table--transactions > thead > tr > th:nth-child(2), .bonuses-table--transactions > tbody > tr > td:nth-child(2) { width: 180px; } .bonuses-table--transactions > thead > tr > th:nth-child(3), .bonuses-table--transactions > tbody > tr > td:nth-child(3) { width: 160px; } .bonuses-table--transactions > thead > tr > th:nth-child(4), .bonuses-table--transactions > tbody > tr > td:nth-child(4) { width: 120px; } .bonuses-table--transactions > thead > tr > th:nth-child(5), .bonuses-table--transactions > tbody > tr > td:nth-child(5) { width: 170px; } .bonuses-table--transactions > thead > tr > th:nth-child(6), .bonuses-table--transactions > tbody > tr > td:nth-child(6) { width: 110px; padding-right: 10px; } .plain-button--cancel-bonus { width: 100%; min-width: initial; justify-content: center; line-height: 26px; padding-top: 2px; padding-bottom: 4px; box-shadow: 0px 5px 6px 0px rgba(34, 0, 64, 0.17); } @media (max-width: 1200px) { .plain-button--cancel-bonus { padding: 0 10px; font-size: 14px !important; line-height: 1.238 !important; } } .plain-button--cancel-bonus:hover { box-shadow: 0px 5px 6px 0px rgba(34, 0, 64, 0.3); } .bonuses-subtabs-zone { width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: -14px; margin-bottom: 18px; } .subtabs-box { list-style-type: none; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-end; border: none; } .subtabs-box__tab { font-size: 22px; font-style: italic; font-weight: 600; line-height: 33px; color: #fed3b0; cursor: pointer; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 10px 0 40px; text-transform: uppercase; border-bottom: solid 3px transparent; padding: 0 0 0 30px; } @media (max-width: 992px) { .subtabs-box__tab { font-size: 20px; } } .subtabs-box__tab--active { font-size: 24px; color: white; border-bottom: solid 3px white; } @media (max-width: 992px) { .subtabs-box__tab--active { font-size: 22px; } } .subtabs-box__tab--activebonuses { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAzMSAzMSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZDZiMjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgICAgZmlsdGVyOiB1cmwoI2ZpbHRlcik7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8ZmlsdGVyIGlkPSJmaWx0ZXIiIHg9IjUwMCIgeT0iMjczIiB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciByZXN1bHQ9ImJsdXIiIHN0ZERldmlhdGlvbj0iMS42NjciIGluPSJTb3VyY2VBbHBoYSIvPgogICAgICA8ZmVDb21wb3NpdGUgcmVzdWx0PSJjb21wb3NpdGUiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTIiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTMiLz4KICAgICAgPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiNmZjhiOGEiIGZsb29kLW9wYWNpdHk9IjAuMzEiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTQiIG9wZXJhdG9yPSJpbiIgaW4yPSJjb21wb3NpdGUtMyIvPgogICAgICA8ZmVCbGVuZCByZXN1bHQ9ImJsZW5kIiBpbjI9IlNvdXJjZUdyYXBoaWMiLz4KICAgICAgPGZlQmxlbmQgcmVzdWx0PSJibGVuZC0yIiBpbj0iU291cmNlR3JhcGhpYyIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTUyNCwyODIuNjA4aC0yLjQ2NWEzLjAwNiwzLjAwNiwwLDAsMCwxLjQ1NS0yLjUyMSwzLjI3NiwzLjI3NiwwLDAsMC0zLjQzLTMuMDg4Yy0xLjYwNSwwLTMuNTA2LDIuNzkxLTQuNTY2LDQuNTk0LTEuMDYxLTEuOC0yLjk2Mi00LjU5NC00LjU2Ny00LjU5NEEzLjI3OCwzLjI3OCwwLDAsMCw1MDcsMjgwLjA4N2EzLjAwNywzLjAwNywwLDAsMCwxLjQ1NiwyLjUyMWgtMi40NjVBMi4wMDksMi4wMDksMCwwLDAsNTA0LDI4NC42Mjl2My4yYTIuMDIyLDIuMDIyLDAsMCwwLDEuMTEyLDEuODF2Ny4zMzJBMi4wMDgsMi4wMDgsMCwwLDAsNTA3LjEsMjk5SDUyMy4wNGEyLjAwOSwyLjAwOSwwLDAsMCwxLjk5Mi0yLjAyMXYtNy40MTRhMi4wMjQsMi4wMjQsMCwwLDAsLjk2NC0xLjcyN3YtMy4yQTIuMDA4LDIuMDA4LDAsMCwwLDUyNCwyODIuNjA4Wm0tMTguMDEzLDUuNGEwLjE3OSwwLjE3OSwwLDAsMS0uMTc3LTAuMTh2LTMuMmEwLjE3OCwwLjE3OCwwLDAsMSwuMTc3LTAuMTc5aDguMXYzLjU2MmgtOC4xWm05LjkxNC0zLjU2M0g1MjRhMC4xNzksMC4xNzksMCwwLDEsLjE3OC4xNzl2My4yYTAuMTc5LDAuMTc5LDAsMCwxLS4xNzguMTc5aC04LjFWMjg0LjQ1Wm0zLjY1OS01LjYxYTEuMjg5LDEuMjg5LDAsMSwxLDAsMi40OTRoLTIuMjQyQTcuNzg4LDcuNzg4LDAsMCwxLDUxOS41NjQsMjc4Ljg0Wm0tOS4xNTgsMGE3LjU4OSw3LjU4OSwwLDAsMSwyLjI2NiwyLjVoLTIuMjQxQTEuMjg3LDEuMjg3LDAsMSwxLDUxMC40MDYsMjc4LjgzOVptLTMuNDgsMTguMTM3di03LjEyMmg3LjE2NHY3LjNINTA3LjFBMC4xNzgsMC4xNzgsMCwwLDEsNTA2LjkyNiwyOTYuOTc2Wm0xNi4xMTQsMC4xNzloLTcuMTM1di03LjNoNy4zMTJ2Ny4xMjFBMC4xNzgsMC4xNzgsMCwwLDEsNTIzLjA0LDI5Ny4xNTVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTAwIC0yNzMpIi8+Cjwvc3ZnPgo=") left -3px center/auto 31px no-repeat; } .subtabs-box__tab--activebonuses.subtabs-box__tab--active { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAzMSAzMSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgICAgZmlsdGVyOiB1cmwoI2ZpbHRlcik7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8ZmlsdGVyIGlkPSJmaWx0ZXIiIHg9IjUwMCIgeT0iMjczIiB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciByZXN1bHQ9ImJsdXIiIHN0ZERldmlhdGlvbj0iMS42NjciIGluPSJTb3VyY2VBbHBoYSIvPgogICAgICA8ZmVDb21wb3NpdGUgcmVzdWx0PSJjb21wb3NpdGUiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTIiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTMiLz4KICAgICAgPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiNmZjhiOGEiIGZsb29kLW9wYWNpdHk9IjAuMzEiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTQiIG9wZXJhdG9yPSJpbiIgaW4yPSJjb21wb3NpdGUtMyIvPgogICAgICA8ZmVCbGVuZCByZXN1bHQ9ImJsZW5kIiBpbjI9IlNvdXJjZUdyYXBoaWMiLz4KICAgICAgPGZlQmxlbmQgcmVzdWx0PSJibGVuZC0yIiBpbj0iU291cmNlR3JhcGhpYyIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTUyNCwyODIuNjA4aC0yLjQ2NWEzLjAwNiwzLjAwNiwwLDAsMCwxLjQ1NS0yLjUyMSwzLjI3NiwzLjI3NiwwLDAsMC0zLjQzLTMuMDg4Yy0xLjYwNSwwLTMuNTA2LDIuNzkxLTQuNTY2LDQuNTk0LTEuMDYxLTEuOC0yLjk2Mi00LjU5NC00LjU2Ny00LjU5NEEzLjI3OCwzLjI3OCwwLDAsMCw1MDcsMjgwLjA4N2EzLjAwNywzLjAwNywwLDAsMCwxLjQ1NiwyLjUyMWgtMi40NjVBMi4wMDksMi4wMDksMCwwLDAsNTA0LDI4NC42Mjl2My4yYTIuMDIyLDIuMDIyLDAsMCwwLDEuMTEyLDEuODF2Ny4zMzJBMi4wMDgsMi4wMDgsMCwwLDAsNTA3LjEsMjk5SDUyMy4wNGEyLjAwOSwyLjAwOSwwLDAsMCwxLjk5Mi0yLjAyMXYtNy40MTRhMi4wMjQsMi4wMjQsMCwwLDAsLjk2NC0xLjcyN3YtMy4yQTIuMDA4LDIuMDA4LDAsMCwwLDUyNCwyODIuNjA4Wm0tMTguMDEzLDUuNGEwLjE3OSwwLjE3OSwwLDAsMS0uMTc3LTAuMTh2LTMuMmEwLjE3OCwwLjE3OCwwLDAsMSwuMTc3LTAuMTc5aDguMXYzLjU2MmgtOC4xWm05LjkxNC0zLjU2M0g1MjRhMC4xNzksMC4xNzksMCwwLDEsLjE3OC4xNzl2My4yYTAuMTc5LDAuMTc5LDAsMCwxLS4xNzguMTc5aC04LjFWMjg0LjQ1Wm0zLjY1OS01LjYxYTEuMjg5LDEuMjg5LDAsMSwxLDAsMi40OTRoLTIuMjQyQTcuNzg4LDcuNzg4LDAsMCwxLDUxOS41NjQsMjc4Ljg0Wm0tOS4xNTgsMGE3LjU4OSw3LjU4OSwwLDAsMSwyLjI2NiwyLjVoLTIuMjQxQTEuMjg3LDEuMjg3LDAsMSwxLDUxMC40MDYsMjc4LjgzOVptLTMuNDgsMTguMTM3di03LjEyMmg3LjE2NHY3LjNINTA3LjFBMC4xNzgsMC4xNzgsMCwwLDEsNTA2LjkyNiwyOTYuOTc2Wm0xNi4xMTQsMC4xNzloLTcuMTM1di03LjNoNy4zMTJ2Ny4xMjFBMC4xNzgsMC4xNzgsMCwwLDEsNTIzLjA0LDI5Ny4xNTVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTAwIC0yNzMpIi8+Cjwvc3ZnPgo=") left -3px center/auto 31px no-repeat; } .subtabs-box__tab--bonushistory { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjkiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAyOSAzMSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZDZiMjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgICAgZmlsdGVyOiB1cmwoI2ZpbHRlcik7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8ZmlsdGVyIGlkPSJmaWx0ZXIiIHg9IjcyNSIgeT0iMjc0IiB3aWR0aD0iMjkiIGhlaWdodD0iMzEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciByZXN1bHQ9ImJsdXIiIHN0ZERldmlhdGlvbj0iMS42NjciIGluPSJTb3VyY2VBbHBoYSIvPgogICAgICA8ZmVDb21wb3NpdGUgcmVzdWx0PSJjb21wb3NpdGUiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTIiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTMiLz4KICAgICAgPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiNmZjhiOGEiIGZsb29kLW9wYWNpdHk9IjAuMzEiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTQiIG9wZXJhdG9yPSJpbiIgaW4yPSJjb21wb3NpdGUtMyIvPgogICAgICA8ZmVCbGVuZCByZXN1bHQ9ImJsZW5kIiBpbjI9IlNvdXJjZUdyYXBoaWMiLz4KICAgICAgPGZlQmxlbmQgcmVzdWx0PSJibGVuZC0yIiBpbj0iU291cmNlR3JhcGhpYyIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc0NS4wMDYsMzAwLjAxMUg3MzIuOTkxYTQuMDA3LDQuMDA3LDAsMCwxLTQtNFYyODNhMy4wMDYsMy4wMDYsMCwwLDEsMy0zLDEsMSwwLDEsMSwwLDIsMSwxLDAsMCwwLTEsMXYxMy4wMDdhMiwyLDAsMCwwLDIsMmgxMi4wMTVhMiwyLDAsMCwwLDItMlYyODNhMSwxLDAsMCwwLTEtMSwxLDEsMCwxLDEsMC0yLDMuMDA2LDMuMDA2LDAsMCwxLDMsM3YxMy4wMDdBNC4wMDgsNC4wMDgsMCwwLDEsNzQ1LjAwNiwzMDAuMDExWk03MzYsMjg0YTEsMSwwLDAsMS0xLTF2LTRhMSwxLDAsMCwxLDIsMHY0QTEsMSwwLDAsMSw3MzYsMjg0Wk03NDIsMjg0YTEsMSwwLDAsMS0xLTF2LTRhMSwxLDAsMCwxLDIsMHY0QTEsMSwwLDAsMSw3NDIsMjg0Wm02LjAwNyw0LjA2NUg3MjkuOTg3YTEsMSwwLDEsMSwwLTJINzQ4LjAxQTEsMSwwLDEsMSw3NDguMDEsMjg4LjA2N1pNNzM3LDI5Mi4wMDdoLTNhMSwxLDAsMSwxLDAtMmgzQTEsMSwwLDEsMSw3MzcsMjkyLjAwN1ptNy4wMDksMGgtM2ExLDEsMCwxLDEsMC0yaDNBMSwxLDAsMSwxLDc0NC4wMDUsMjkyLjAwN1ptLTcuMDA5LDRoLTNhMSwxLDAsMSwxLDAtMmgzQTEsMSwwLDEsMSw3MzcsMjk2LjAwOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MjUgLTI3NCkiLz4KPC9zdmc+Cg==") left -3px center/auto 31px no-repeat; } .subtabs-box__tab--bonushistory.subtabs-box__tab--active { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjkiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAyOSAzMSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZmZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgICAgZmlsdGVyOiB1cmwoI2ZpbHRlcik7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8ZmlsdGVyIGlkPSJmaWx0ZXIiIHg9IjcyNSIgeT0iMjc0IiB3aWR0aD0iMjkiIGhlaWdodD0iMzEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciByZXN1bHQ9ImJsdXIiIHN0ZERldmlhdGlvbj0iMS42NjciIGluPSJTb3VyY2VBbHBoYSIvPgogICAgICA8ZmVDb21wb3NpdGUgcmVzdWx0PSJjb21wb3NpdGUiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTIiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTMiLz4KICAgICAgPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiNmZjhiOGEiIGZsb29kLW9wYWNpdHk9IjAuMzEiLz4KICAgICAgPGZlQ29tcG9zaXRlIHJlc3VsdD0iY29tcG9zaXRlLTQiIG9wZXJhdG9yPSJpbiIgaW4yPSJjb21wb3NpdGUtMyIvPgogICAgICA8ZmVCbGVuZCByZXN1bHQ9ImJsZW5kIiBpbjI9IlNvdXJjZUdyYXBoaWMiLz4KICAgICAgPGZlQmxlbmQgcmVzdWx0PSJibGVuZC0yIiBpbj0iU291cmNlR3JhcGhpYyIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc0NS4wMDYsMzAwLjAxMUg3MzIuOTkxYTQuMDA3LDQuMDA3LDAsMCwxLTQtNFYyODNhMy4wMDYsMy4wMDYsMCwwLDEsMy0zLDEsMSwwLDEsMSwwLDIsMSwxLDAsMCwwLTEsMXYxMy4wMDdhMiwyLDAsMCwwLDIsMmgxMi4wMTVhMiwyLDAsMCwwLDItMlYyODNhMSwxLDAsMCwwLTEtMSwxLDEsMCwxLDEsMC0yLDMuMDA2LDMuMDA2LDAsMCwxLDMsM3YxMy4wMDdBNC4wMDgsNC4wMDgsMCwwLDEsNzQ1LjAwNiwzMDAuMDExWk03MzYsMjg0YTEsMSwwLDAsMS0xLTF2LTRhMSwxLDAsMCwxLDIsMHY0QTEsMSwwLDAsMSw3MzYsMjg0Wk03NDIsMjg0YTEsMSwwLDAsMS0xLTF2LTRhMSwxLDAsMCwxLDIsMHY0QTEsMSwwLDAsMSw3NDIsMjg0Wm02LjAwNyw0LjA2NUg3MjkuOTg3YTEsMSwwLDEsMSwwLTJINzQ4LjAxQTEsMSwwLDEsMSw3NDguMDEsMjg4LjA2N1pNNzM3LDI5Mi4wMDdoLTNhMSwxLDAsMSwxLDAtMmgzQTEsMSwwLDEsMSw3MzcsMjkyLjAwN1ptNy4wMDksMGgtM2ExLDEsMCwxLDEsMC0yaDNBMSwxLDAsMSwxLDc0NC4wMDUsMjkyLjAwN1ptLTcuMDA5LDRoLTNhMSwxLDAsMSwxLDAtMmgzQTEsMSwwLDEsMSw3MzcsMjk2LjAwOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MjUgLTI3NCkiLz4KPC9zdmc+Cg==") left -3px center/auto 31px no-repeat; } .custom-roll-control { border: none; border-radius: 10px; transform: skewX(-8deg); box-shadow: 0 0 5px 2px white inset, 0 0 5px 2px white, 0 0 18px 7px #ffaa7c inset, 0 0 18px 9px rgba(255, 125, 104, 0.5568627451); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 5px 15px; color: #ffffff; font-size: 22px; line-height: 1.5; font-style: normal; font-weight: 600; } .custom-roll-control select { display: none; } .custom-roll-control__selected { flex: 1; text-align: center; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-roll-control__prev { flex: 0 0 20px; align-self: stretch; background: url("../images/backarrow.png") center center/auto no-repeat; cursor: pointer; } .custom-roll-control__next { flex: 0 0 20px; align-self: stretch; background: url("../images/arrow.png") center center/auto no-repeat; cursor: pointer; } .custom-roll-control--ybperiod { width: 190px; min-height: 50px; } .hidden { display: none; } @media screen and (max-width: 1200px) { .login-border--signup .close-modal-btn, .login-border--dashboard .close-modal-btn { right: 0; top: -54px; } .dws-wrapper--signup, .dws-wrapper--dashboard { align-items: flex-start; padding-top: 60px; padding-bottom: 60px; } .login-border--signup, .login-border--dashboard { max-width: 600px; } .signup-container { flex-flow: column nowrap; } .signup-benefits--with-banner { min-height: 580px; } .signup-forms-box { margin-left: 0; min-height: initial; } .signup-form--step-1 { margin-bottom: 40px; padding: 0; } .signup-form__controls-box { margin-top: 20px; margin-bottom: 0; } .dashboard-container { flex-flow: column nowrap; --dashboard-height: 1468px; --dashboard-width: 560px; min-height: var(--dashboard-height); } .tabs-box { width: calc(var(--dashboard-height) - 6px); transform: rotate(90deg); transform-origin: left top; position: absolute; left: calc(var(--dashboard-width) + 1px); top: 0; justify-content: flex-start; } .tabs-container { width: calc(100% - 56px); overflow: hidden; padding: 30px 30px 60px 30px; } .account-panel { flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .account-summary { margin-bottom: 40px; } .account-form { width: 100%; max-width: initial; height: auto; min-height: initial; } .account-form > .form-row { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 10px; } .account-form > .form-row.form-row--row { flex-flow: row; } .account-form__label { flex: auto; margin-left: 22px; } .account-form--fullwidth { flex: auto; width: 100%; } .account-form .submit-button--save { margin-left: 0; margin-right: 0; } .vuetable-body-wrapper { height: calc(var(--dashboard-height) - 300px); background-image: none; } .bonuses-table { display: contents; } .bonuses-table > thead { display: none; } .bonuses-table > tbody { margin: 16px; width: auto; } .bonuses-table > tbody > tr { width: auto; flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin: 15px 0; } .bonuses-table > tbody > tr > td { padding: 2px 5px; text-align: center; justify-content: center; margin-bottom: 5px; order: 1; } .bonuses-table > tbody > tr > td:nth-child(2) { order: 0; } .bonuses-table--transactions > tbody > tr > td:nth-child(1), .bonuses-table--transactions > tbody > tr > td:nth-child(2), .bonuses-table--transactions > tbody > tr > td:nth-child(3), .bonuses-table--transactions > tbody > tr > td:nth-child(4), .bonuses-table--transactions > tbody > tr > td:nth-child(5) { width: 100%; } .bonuses-table--history > tbody > tr > td:nth-child(1), .bonuses-table--history > tbody > tr > td:nth-child(2), .bonuses-table--history > tbody > tr > td:nth-child(3), .bonuses-table--history > tbody > tr > td:nth-child(4), .bonuses-table--history > tbody > tr > td:nth-child(5) { width: 100%; } .bonuses-table--active > tbody > tr > td:nth-child(1), .bonuses-table--active > tbody > tr > td:nth-child(2), .bonuses-table--active > tbody > tr > td:nth-child(3), .bonuses-table--active > tbody > tr > td:nth-child(4), .bonuses-table--active > tbody > tr > td:nth-child(5), .bonuses-table--active > tbody > tr > td:nth-child(6) { width: 100%; } .bonuses-subtabs-zone { flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .subtabs-box { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 10px; } .subtabs-box__tab { margin: 0 0 10px 0; } .birthdate--day, .birthdate--month, .birthdate--year { max-width: 100%; } .marketing-panel .account-summary, .password-panel .account-summary, .account-verification-panel .account-summary, .withdrawal-panel .account-summary { display: none; } .account-verification-box { padding-left: 0 !important; } .input-field--halfwidth, .custom-input-field--halfwidth, .custom-select-control--halfwidth, .custom-select-control--quaterwidth { max-width: 100%; } } @media screen and (max-width: 500px) { .close-modal-btn { right: 0; top: -54px; } .login-container, .signup-container { padding: 40px 30px; } .signup-form__title, .login-nav__title { font-size: 32px; } .signup-benefits--with-banner { background-size: 130%; min-height: 660px; min-height: calc(100vw + 200px); } .signup-benefits__title { font-size: 28px; } .signup-form__controls-box { margin-top: 30px; margin-bottom: 25px; } .checkbox-with-label__label { font-size: 16px; line-height: 1; } .signup-benefits__box { width: auto; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin: 0 auto 20px auto; } .signup-benefits__item { flex: 0 0 65px; padding: 5px 5px 5px 70px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; margin: 4px 15px; text-align: left; font-size: 18px; } .signup-benefits__item::before { top: calc(50% - 30px); left: 0; width: 60px; height: 60px; background-size: 200%; } .signup-form--step-2 .signup-form__controls-box > * { margin-bottom: 10px; } .signup-form--step-2 .signup-form__controls-box > .form-row { flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; margin-bottom: 0; } .signup-form--step-2 .signup-form__controls-box > .form-row > * { margin-bottom: 10px; } .form-column--signup-gender, .form-column--signup-currency { flex: 0 0 100%; } .dashboard-container { --dashboard-height: 1720px; --dashboard-width: calc(100% + 1px); min-height: var(--dashboard-height); padding-left: 0; padding-bottom: 60px; } .support-block-chat { padding-left: 5px; padding-right: 5px; width: 220px; left: calc(50% - 110px); z-index: 10; bottom: -1px; } .tabs-container { padding: 40px 5px 20px 10px; } .account-form > .form-row > .form-row { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .account-form > .form-row > .form-row > * { margin-bottom: 5px; } .custom-input-field--halfwidth { width: 100%; } .dws-wrapper .login-other-user a { display: block; } .dws-wrapper--signup-step-2 .signup-benefits--with-banner { display: none; } .dws-wrapper--signup-step-2 .signup-container { min-height: unset; } } @media screen and (max-width: 350px) { .dashboard-container { --dashboard-height: 1820px; } .account-summary { min-height: 690px; padding: 12px 15px 22px 15px; } .account-summary__label--balance { flex-flow: column nowrap; justify-content: flex-start; align-items: center; width: auto; } .support-block-chat { flex-flow: row wrap; width: 120px; left: calc(50% - 60px); } } @media screen and (max-height: 700px) { /* have to fit whole popup onto the screen */ .dws-wrapper { align-items: flex-start; padding-top: 60px; padding-bottom: 60px; } } .pagination { display: flex; justify-content: center; margin: 25px 0 0 0; } @media (max-width: 1200px) { .pagination .page-item:not(.page-item-prev):not(.page-item-next) { display: none; } } .pagination .page-item .page-link, .pagination .ellipsis .page-link { border: 3px solid #d6587c; border-radius: 10px; transform: skewX(-8deg); display: inline-block; padding: 2px 15px; color: #ffd6b2; font-size: 20px; line-height: 1.5; font-style: normal; font-weight: 600; cursor: pointer; } .pagination .page-item + .page-item { margin-left: 15px; } .pagination .ellipsis .page-link { cursor: default; margin-left: 15px; margin-right: 15px; } .pagination .page-item.active .page-link, .pagination .page-item:hover .page-link { border: none; padding: 5px 18px; box-shadow: 0 0 5px 2px white inset, 0 0 5px 2px white, 0 0 12px 3px #ffaa7c inset, 0 0 12px 5px rgba(255, 125, 104, 0.5568627451); color: #ffffff; } .pagination .page-item.disabled { opacity: 0; } @media (max-width: 1200px) { .pagination .page-item.disabled { opacity: 0.3; } } .input-field::-moz-placeholder, .custom-input-field input::-moz-placeholder, .vs__search::-moz-placeholder { color: rgba(255, 255, 255, 0.7); } .input-field:-ms-input-placeholder, .custom-input-field input:-ms-input-placeholder, .vs__search:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); } .input-field::-ms-input-placeholder, .custom-input-field input::-ms-input-placeholder, .vs__search::-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); } .input-field::placeholder, .custom-input-field input::placeholder, .vs__search::placeholder { color: rgba(255, 255, 255, 0.7); } .checkbox-with-label { position: relative; } .form-group { position: relative; } .form-group:not(.input-field--halfwidth) { width: 100%; } .form-group--nickname .btn-sm { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .email-field--signup { width: 100%; max-width: initial; position: relative; display: block; margin: 0 0 15px 0; } .input-field--signup-email { margin-bottom: 0; } .password-field__status { background-image: url("../images/sleep.png"); } .password-field__status.password-field__status--pwdtext-hidden { background-image: url("../images/eye.png"); } label.error, label.success { position: absolute; z-index: 2; top: 100%; left: 24px; margin-top: -5px; padding: 2px 10px 4px 10px; border-radius: 10px; background-color: #ff4051; color: #ffffff; font-style: italic; font-weight: 500; line-height: 1; font-size: 16px; text-align: center; } @media (max-width: 1200px) { label.error, label.success { position: static; display: block; width: 100%; margin-top: -7.5px; margin-bottom: 7.5px; } label.error::after, label.success::after { display: none; } } label.error.\--static, label.success.\--static { position: static; display: block; width: 100%; margin-top: -7.5px; margin-bottom: 7.5px; } label.error.\--static::after, label.success.\--static::after { display: none; } label.error.\--static-inline-block, label.success.\--static-inline-block { position: static; display: inline-block; margin-top: 10px; } label.error.\--static-inline-block::after, label.success.\--static-inline-block::after { display: none; } label.success { background-color: #03caa1; } .input-field--signup-email + label.error, .input-field--passwd + label.error { left: 55px; } .checkbox-with-label + label.error { top: 29px; left: 0.5em; } @media (max-width: 1200px) { .checkbox-with-label + label.error { margin-top: 7.5px; } } label.error::after { content: ""; position: absolute; top: -5px; left: 10%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #ff4051; } .input-field.error { border-color: #e63c56; } .custom-select.error { border-color: #e63c56; } @media (max-width: 1200px) { .dws-wrapper--signup-step-2 label.error { margin-top: 7.5px; } } @media (max-width: 1200px) { .account-form label.error { margin-top: 7.5px; } } @media (max-width: 1200px) { .password-panel label.error { margin-top: 7.5px; margin-bottom: -10px; } } .custom-checkbox input.error + div { border-color: #e63c56; } .account-summary__label--money::after { content: ""; } .tabs-box__tab { text-transform: uppercase; } .modal-message { display: flex; align-items: center; width: 100%; position: absolute; top: -2px; left: 0; z-index: 1; padding: 12px 25px; border: none; border-radius: 40px 40px 0 0; font-size: 22px; font-style: italic; font-weight: 600; line-height: 24px; letter-spacing: 0.04em; text-transform: none; } .modal-message.modal-message_small { font-size: 18px; line-height: 24px; } @media (max-width: 1220px) { .modal-message { position: fixed; top: 0; border-radius: 0; font-size: 18px; line-height: 24px; } } .modal-message .modal-message--icon { content: ""; display: block; width: 34px; height: 34px; margin-right: 10px; background: url("../images/info.png") no-repeat center; background-size: 100%; } /* .login-container .modal-message .modal-message--icon { width: 74px; }*/ .modal-message.success { background-color: #03caa1; border-top: 2px solid #64d5c6; border-bottom: #03caa1; color: white; } .modal-message.error { background-color: #ff464e; border-top: 2px solid #ff998a; border-bottom: #ff464e; color: white; } .main .header { justify-content: flex-end; } @media (max-width: 992px) { .main .header { justify-content: space-between; } } .main .level:before { display: none; } .right-top-btns { z-index: 20; } .setting-menu { top: 40px; right: 0; z-index: 20; } @media (max-width: 992px) { .setting-menu { top: 20px; } } .setting:hover .setting-menu { display: block; } .setting-menu:before { top: 36px; } .setting-menu:after { top: 40px; } .setting-menu ul { top: 40px; } .setting-menu ul li { line-height: normal; } .setting-menu ul li a:hover { color: #90f9c2; } .settings-menu__buy-crypto a > img { width: 24px; height: 24px; } .settings-menu__promocode a > img { width: 22px; height: 16px; } .settings-menu__cashback a > img { width: 23px; height: 23px; } .settings-menu__referafriend a > img { width: auto; height: 19px; } .bonus-stack { position: absolute; top: 100%; left: -320px; } @media (min-width: 992px) { .bonus-stack { left: -270px; } } @media (max-width: 768px) { .bonus-stack { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); } } .bonus-stack.rewards { left: unset; right: 0; } @media (max-width: 768px) { .bonus-stack.rewards { left: 50%; } } @media (max-width: 768px) { .bonus-btn.active + .bonus-stack, .rewards-btn.active + .bonus-stack { position: absolute; top: 35px; } } .bonus { display: block; position: relative; left: auto; z-index: 5; } @media (max-width: 768px) { .bonus { left: 50%; } } .dws-wrapper .dws-outside { position: absolute; width: 100%; height: 100%; z-index: 1; } .dws-wrapper .login-border { z-index: 2; } .dws-wrapper .login-forgot, .dws-wrapper .login-other-user a, .dws-wrapper .login-register { text-decoration: none; } .dws-wrapper .login-forgot:hover, .dws-wrapper .login-other-user a:hover, .dws-wrapper .login-register:hover { text-decoration: underline; } .account-summary__label--balance { width: auto; } .account-summary__label--balance .account-summary__label--money { margin-left: 10px; } .m-t-10 { margin-top: 10px; } .input-field--promocode { opacity: 0; } .input-field--promocode.input-field--promocode__active { opacity: 1; } .account-form__value { width: 100%; text-align: left; padding: 3px 24px; font-size: 22px; line-height: 1.5; font-style: italic; font-weight: 600; color: #ffffff; } .loader { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: fixed; z-index: 2000; background-color: rgba(1, 0, 16, 0.3); flex-direction: column; text-align: center; } .loader > span { width: 100%; margin-top: -36px; font-size: 30px; color: #ffffff; position: relative; top: -97px; } @media (max-width: 1200px) { .loader > span { top: -45px; font-size: 20px; } } @media (min-width: 992px) { .playing .loader { width: calc(100% - 250px); height: calc(100% - 70px); margin-top: 70px; } } /* Dashboard - deposit - styles */ .text-pink { color: #ffcbcb !important; } .line-height-14px { line-height: 14px; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .pt-30 { padding-top: 30px !important; } .m-0 { margin: 0px !important; } .mr-5 { margin-right: 5px !important; } .mr-10 { margin-right: 10px !important; } .mr-20 { margin-right: 10px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; } .account-form.deposit-form { display: block; width: 100%; max-width: 470px; margin: 0 auto; } .deposit-form-btn-box { display: flex; align-items: center !important; justify-content: center; } .deposit-form-btn img { width: 100%; max-width: 8px; margin-left: 10px; } .deposit-form--pending { position: relative; } .deposit-form--pending::before { content: ""; display: block; width: calc(100% + 20px); height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -10px; border-radius: 20px; z-index: 1; background-color: rgba(255, 217, 144, 0.2); -webkit-filter: blur(2px); filter: blur(2px); } @media (max-width: 1200px) { .deposit-form--pending::before { display: none; } } .deposit-form--pending > * > *:not(#cashier-wrapper), .deposit-form--pending > * > *:not(#popup-container), .deposit-form--pending > * > *:not(#payment-modal-container) { opacity: 0.15; } @media (max-width: 1200px) { .deposit-form--pending > * > *:not(#cashier-wrapper), .deposit-form--pending > * > *:not(#popup-container), .deposit-form--pending > * > *:not(#payment-modal-container) { opacity: 0; } } .deposit-form--pending #cashier-wrapper { opacity: 1; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 15px; } .deposit-form--pending #iframe-container { opacity: 1; } .deposit-form--pending #popup-container { opacity: 1; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 15px; position: relative; } @media (max-width: 1200px) { .deposit-form--pending #popup-container { position: absolute; top: 0; } } .deposit-form--pending #payment-modal-container { opacity: 1; } .deposit-form--failed { position: relative; } .deposit-form--failed::before { content: ""; display: block; width: calc(100% + 20px); height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -10px; border-radius: 20px; z-index: 1; background-color: rgba(255, 217, 144, 0.2); -webkit-filter: blur(2px); filter: blur(2px); } @media (max-width: 1200px) { .deposit-form--failed::before { display: none; } } .deposit-form--failed > * > *:not(#cashier-wrapper), .deposit-form--failed > * > *:not(#popup-container), .deposit-form--failed > * > *:not(#payment-modal-container) { opacity: 0.15; } @media (max-width: 1200px) { .deposit-form--failed > * > *:not(#cashier-wrapper), .deposit-form--failed > * > *:not(#popup-container), .deposit-form--failed > * > *:not(#payment-modal-container) { opacity: 0; } } .deposit-form--failed #cashier-wrapper { opacity: 1; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 15px; } .deposit-form--failed #iframe-container { opacity: 1; } .deposit-form--failed #popup-container { opacity: 1; border: none; position: relative; } @media (max-width: 1200px) { .deposit-form--failed #popup-container { position: absolute; top: 0; } } .deposit-form--failed #payment-modal-container { opacity: 1; } .deposit-form--failed .popup-message--failed { margin-top: 0 !important; } .deposit-form--fullheight { position: relative; } .deposit-form--fullheight::before { content: ""; display: block; width: calc(100% + 20px); height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -10px; border-radius: 20px; z-index: 1; background-color: rgba(255, 217, 144, 0.2); -webkit-filter: blur(2px); filter: blur(2px); } .deposit-form--fullheight > .deposit-form > *:not(#popup-container) { opacity: 0; } .deposit-form--fullheight > .deposit-banner-container { opacity: 0.15; } @media (max-width: 1200px) { .deposit-form--fullheight > .deposit-banner-container { opacity: 0; } } .deposit-form--fullheight #popup-container { opacity: 1; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 15px; position: absolute; top: 0; width: 100%; max-width: 430px; } .payment-methods__show-more, .deposit-bonuses__show-more { display: none; } .cc-selector { margin-bottom: 15px; } @media (max-width: 1200px) { .cc-selector { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .cc-selector label { margin: 5px; } } @media (max-width: 360px) { .cc-selector label { margin: 2px; } } .cc-selector__amount { display: flex; justify-content: space-between; max-width: 430px; margin: 0 auto 15px auto; } @media (max-width: 1200px) { .cc-selector__amount { justify-content: center; max-width: unset; } } .cc-selector input { margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .cc-selector input:not(.custom-amount) { display: none; } .cc-selector-2 input { position: absolute; z-index: 999; } .cc-selector-2 input:active + .radiocard-cc, .cc-selector input:active + .radiocard-cc { opacity: 0.9; } .cc-selector-2 input:checked + .radiocard-cc, .cc-selector:not(.cc-selector--custom-amount) input:checked + .radiocard-cc { -webkit-filter: none; -moz-filter: none; filter: none; box-shadow: 0px 0px 5px #ffcb54; border: 3px solid #ebb61a; background-color: #f7e1a3; } @media (max-width: 1200px) { .cc-selector-2 input:checked + .radiocard-cc .payment-method__trought, .cc-selector:not(.cc-selector--custom-amount) input:checked + .radiocard-cc .payment-method__trought { opacity: 1; } } .cc-selector-2 input:disabled + .radiocard-cc, .cc-selector input:disabled + .radiocard-cc { -webkit-filter: brightness(0.9) grayscale(0.5) opacity(0.6); -moz-filter: brightness(0.9) grayscale(0.5) opacity(0.6); filter: brightness(0.9) grayscale(0.5) opacity(0.6); cursor: default; } .cc-selector-2 input:disabled + .radiocard-cc img, .cc-selector input:disabled + .radiocard-cc img { display: none; } @media (max-width: 1200px) { .cc-selector-2 input:disabled + .radiocard-cc, .cc-selector input:disabled + .radiocard-cc { display: none; } } .radiocard-cc { border: 3px solid #cc86b6; cursor: pointer; background-size: contain; background-color: #fff; text-align: center; background-repeat: no-repeat; display: inline-block; width: 115px; height: 50px; border-radius: 10px; transition: all 100ms ease-in; -webkit-filter: brightness(1.2) grayscale(0.5) opacity(0.9); -moz-filter: brightness(1.2) grayscale(0.5) opacity(0.9); filter: brightness(1.2) grayscale(0.5) opacity(0.9); position: relative; overflow: hidden; } .radiocard-cc.pm { border: 2px solid #cc86b6; } .radiocard-cc--active { -webkit-filter: none; -moz-filter: none; filter: none; box-shadow: 0px 0px 5px #ffcb54; border: 3px solid #ebb61a; background-color: #f7e1a3; } @media (max-width: 1200px) { .radiocard-cc--active .payment-method__trought { opacity: 1; } } .radiocard-cc.radio-price { width: 105px; height: 45px; border-radius: 50px; font-size: 18px; font-weight: 600; text-transform: uppercase; position: relative; background: rgb(211, 100, 178); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(211, 100, 178)), color-stop(100%, rgb(193, 51, 174))); background: linear-gradient(to bottom, rgb(211, 100, 178) 0%, rgb(193, 51, 174) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#d364b2", endColorstr="#c133ae", GradientType=0 ); } .deposit-panel .radiocard-cc.radio-price { width: 77px; } .radiocard-cc.radio-price i { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .radiocard-cc > .pm-label { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-basis: min-content; } .radiocard-cc > .pm-label span { color: #423780; font-style: normal; margin-left: 5px; line-height: 1; text-align: left; flex-basis: min-content; } .radiocard-cc > .pm-label span.small { font-size: 13px; } .radiocard-cc img { display: inline-block; width: auto; height: 35px; } .radiocard-cc.pm-2 img, .radiocard-cc.pm-12 img, .radiocard-cc.pm-1002 img, .radiocard-cc.pm-1008 img { height: 26px; } .radiocard-cc.pm-1009 img { height: 26px; } .radiocard-cc.pm-1000 img, .withdrawal-panel .radiocard-cc.pm-10 img { height: 13px; } .radiocard-cc.pm-1 .pm-label span, .radiocard-cc.pm-2 .pm-label span, .radiocard-cc.pm-999 .pm-label span { display: none; } .radiocard-cc.pm-3 .pm-label span, .radiocard-cc.pm-13 .pm-label span, .radiocard-cc.pm-1003 .pm-label span { color: #F7931A; } .radiocard-cc.pm-4 .pm-label span, .radiocard-cc.pm-1004 .pm-label span { color: #BFBBBB; } .radiocard-cc.pm-5 .pm-label span, .radiocard-cc.pm-1005 .pm-label span { color: #C3A634; } .radiocard-cc.pm-6 .pm-label span, .radiocard-cc.pm-1006 .pm-label span { color: #8DC351; } .radiocard-cc.pm-7 .pm-label span, .radiocard-cc.pm-1007 .pm-label span { color: #627EEA; } .radiocard-cc.pm-1018 .pm-label span, .radiocard-cc.pm-1020 .pm-label span { color: #0A7C80; } .pm-1016 .pm-label, .pm-1017 .pm-label { flex-direction: column; } .payment-method__trought { background-color: rgb(255, 255, 255); position: absolute; bottom: 0; left: 0; width: 100%; padding: 1px 0; opacity: 0; } @media (min-width: 1200px) { .radiocard-cc:hover .payment-method__trought { opacity: 1; } } .radiocard-cc:hover { -webkit-filter: brightness(1) grayscale(0) opacity(0.9); -moz-filter: brightness(1) grayscale(0) opacity(0.9); filter: brightness(1) grayscale(0) opacity(0.9); } .deposit-form .account-form__label { flex: auto; } .card-info-row .account-form__label { text-align: center; } .card-info-row .custom-input-field { padding: 1px 15px 1px 15px; max-width: 70px; } .card-info-row .custom-select-control { font-size: 20px; padding: 1px 15px 1px 15px; background-position: right 10px center; max-width: 80px; } .deposit-panel { width: 100%; flex: 1; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; } @media (max-width: 1200px) { .deposit-panel { flex-direction: column; justify-content: flex-start; } } .deposit-panel.hidden { display: none; } .signup-benefits--with-banner.deposit-banner { min-height: 470px; margin: 0 auto; } .deposit-banner .checkbox-with-label { justify-content: center; margin: 0; padding-bottom: 30px; } .deposit-banner-container { min-width: 500px; } @media (max-width: 1200px) { .deposit-banner-container { min-width: unset; margin-bottom: 20px; } } .vuetable-slot .bonus-name { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 47px; } .vuetable-slot .bonus-name .game-name { font-size: 14px; font-weight: 400; } .btn-tiny { background-color: rgba(136, 48, 188, 0.2980392157); background-image: linear-gradient(to bottom, rgba(176, 67, 240, 0.3019607843), rgba(176, 67, 240, 0)); background-position: center top; background-size: cover; background-repeat: no-repeat; outline: none; color: #ffffff; font-weight: 600; cursor: pointer; border-radius: 10px; transform: skewX(-6deg); border: solid 2px rgba(162, 88, 196, 0.3137254902); border-top: solid 2px rgba(162, 88, 196, 0.9803921569); box-shadow: 0px 5px 6px 0px rgba(34, 0, 64, 0.17); display: inline-block; padding: 0 10px; } .btn-sm { background-color: rgba(136, 48, 188, 0.2980392157); background-image: linear-gradient(to bottom, rgba(176, 67, 240, 0.3019607843), rgba(176, 67, 240, 0)); background-position: center top; background-size: cover; background-repeat: no-repeat; outline: none; color: #ffffff; font-weight: 600; cursor: pointer; border-radius: 10px; transform: skewX(-6deg); border: solid 2px rgba(162, 88, 196, 0.3137254902); border-top: solid 2px rgba(162, 88, 196, 0.9803921569); box-shadow: 0px 5px 6px 0px rgba(34, 0, 64, 0.17); display: inline-block; padding: 5px 10px; } .inpage-alert { width: 100%; box-sizing: border-box; display: inline-flex; flex-grow: 1; min-height: 0; position: relative; font-family: "Cabin", sans-serif; font-weight: 400; font-size: 14px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; padding: 15px 30px; margin-bottom: 15px; border-radius: 4px; } .inpage-alert .close { width: 1em; height: 1em; font-size: 24px; position: absolute; top: 11px; right: 5px; cursor: pointer; } .inpage-alert .close svg path { fill: #ffffff; } .inpage-alert--success { background-color: #3c6ff3; color: #ffffff; } .inpage-alert--error { background-color: #ff2e56; color: #ffffff; } .payment-method-limits-info { font-size: 14px; } @media (max-width: 768px) { .payment-method-limits-info { margin-top: 5px; } } @media (min-width: 1200px) { .payment-method-limits-info { position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-top: 2px; } } .amount-header { position: relative; } .deposit-form-btn-box + .text-pink { position: relative; top: 40px; width: 280px; margin: -40px auto 0 auto; } #cashier-wrapper { position: relative; z-index: 2; min-height: 219px; margin-bottom: 10px; max-width: 430px; margin: 0 auto; } #cashier-wrapper.cashier-wrapper--iframe { padding-left: 20px; padding-right: 20px; min-height: 301px; } #cashier-wrapper.cashier-wrapper--iframe + .deposit-form-btn-box + .text-pink { margin-top: -73px; } @media screen and (max-width: 1200px) { #cashier-wrapper { height: unset; max-width: unset; } } #popup-container { display: flex; align-items: center; flex-direction: column; justify-content: flex-start; position: relative; z-index: 2; margin-bottom: 10px; margin: 20px auto; font-size: 18px; font-weight: 500; text-align: center; } @media screen and (max-width: 1200px) { #popup-container { height: unset; max-width: unset; width: 100%; } } #popup-container.popup-container--centered { justify-content: center; } #popup-container.popup-container--centered .popup-message { padding-top: 0; } .popup-container--account-form .popup-message { padding-left: 20px; } @media (max-width: 992px) { .popup-container--account-form .popup-message { padding-top: 15px; } } .payment-popup-close { position: absolute; width: 20px; height: 20px; top: 20px; right: 20px; cursor: pointer; opacity: 0.75; z-index: 100; } .payment-popup-close:hover { opacity: 1; } .payment-popup-close::before, .payment-popup-close::after { content: ""; position: absolute; width: 3px; height: 20px; border-radius: 3px; background-color: #ffffff; } .payment-popup-close::before { transform: rotate(45deg); } .payment-popup-close::after { transform: rotate(-45deg); } .payment-popup-back { position: absolute; top: 15px; left: 20px; z-index: 100; font-size: 15px; color: #87d7fd; cursor: pointer; } .payment-popup-back::before { content: ""; border: solid #87d7fd; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-right: 5px; } .payment-popup-back + .popup-message, .payment-popup-close + .popup-message { margin-top: 27px; } .popup-message { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 20px; padding-left: 90px; min-height: 100px; border-radius: 15px; text-align: left; background-position: 20px center; background-repeat: no-repeat; } .popup-message p + p { margin-top: 7px; } @media (max-width: 992px) { .popup-message { padding-left: 20px; padding-top: 90px; text-align: center; background-position: center 20px; } } @media (max-width: 767px) { .popup-message br { display: unset; } } .popup-message a { color: #87d7fd !important; text-decoration: underline; } .popup-message a:hover { color: #87d7fd; text-decoration: none; } .popup-message--loading { padding-left: 20px; text-align: center; } @media (max-width: 992px) { .popup-message--loading { padding-left: 20px; padding-top: 90px; } } .popup-message--success { background-image: url(../images/payment-success.png); background-size: 50px auto; border: 2px solid #03caa1; color: white; } .popup-message--failed { background-image: url(../images/payment-failed.png); background-size: 50px auto; border: 2px solid #ff464e; color: white; } .popup-message--info { background-image: url(../images/payment-info.png); background-size: 50px auto; border: 2px solid #ffd890; color: white; font-weight: 400; } .popup-message + div + .deposit-form-btn-box { margin-top: 20px; } .popup-container--account-form .popup-message { font-size: 16px; min-height: unset; padding-bottom: 10px; } .popup-accounts { margin-bottom: 15px; } .popup_link { display: inline-block; margin-top: 15px; border-bottom: 2px solid #87d7fd; padding-bottom: 1px; color: #87d7fd !important; transition: border-color 0.1s ease; } .popup_link:hover { color: #87d7fd; border-bottom-color: transparent; } #iframe-container { display: flex; align-items: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; overflow: auto; } #payment-modal-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } @media (max-width: 992px) { #payment-modal-container { position: fixed; width: calc(100% - 20px); align-items: flex-start; top: 10px; left: 10px; } } .payment-modal { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 650px; min-height: 300px; background-color: #ffffff; border-radius: 27px; } .payment-modal-close { position: absolute; width: 20px; height: 20px; top: 27px; right: 27px; cursor: pointer; opacity: 0.75; z-index: 100; } .payment-modal-close:hover { opacity: 1; } .payment-modal-close::before, .payment-modal-close::after { content: ""; position: absolute; width: 3px; height: 20px; border-radius: 3px; background-color: #de91a3; } .payment-modal-close::before { transform: rotate(45deg); } .payment-modal-close::after { transform: rotate(-45deg); } .payment-modal-body { padding: 27px; color: #333333; font-weight: 500; text-align: left; } .payment-modal-body a { color: #23bdf1; text-decoration: none; } .payment-modal-body a:hover { color: #23bdf1; } .payment-modal-body h4 { font-size: 20px; } .payment-modal-body h4, .payment-modal-body p { margin-bottom: 20px; } .crypto { display: flex; align-items: center; } @media (max-width: 768px) { .crypto { flex-direction: column; } } .crypto__qr-code { margin-right: 27px; text-align: center; } .crypto__qr-code a + p { margin-top: 20px; } @media (max-width: 768px) { .crypto__qr-code { margin-right: 0; margin-bottom: 27px; } .crypto__qr-code a + p { margin-top: 0; } .crypto__qr-code a { display: none; } } .crypto__exchange-rate, .crypto__amount, .crypto__address { font-family: monospace; font-style: normal; } .crypto__amount { font-size: 20px; } .crypto__amount .clipboard { display: inline-block; position: relative; top: 4px; margin-left: 10px; cursor: pointer; } .crypto__amount .clipboard img { width: 20px; height: 20px; } .crypto__address { position: relative; } .crypto__address input { width: 100%; height: 40px; border: 0; background-color: rgba(255, 216, 144, 0.7); border-radius: 3px; padding: 0 40px 0 10px; font-size: 14px; word-break: break-all; } .crypto__address .clipboard { position: absolute; top: 50%; right: 10px; margin-top: -10px; cursor: pointer; } .crypto__address .clipboard img { width: 20px; height: 20px; } a.crypto__button { display: inline-block; padding: 10px 15px; background-color: #23bdf1; color: #ffffff; border-radius: 6px; } a.crypto__button:hover { color: #ffffff; } .crypto__warning { margin-top: 20px; padding: 10px 15px; border-radius: 5px; border: 2px solid #ff464e; } .withdrawal-panel .form-row { flex-flow: column; } .withdraw-bonus-cancellation { box-shadow: inset 0px 0px 80px 20px rgba(71, 18, 81, 0.55); border-radius: 30px; padding: 25px; text-align: left; font-size: 18px; } .withdraw-bonus-cancellation__list p { display: flex; justify-content: space-between; color: #ffcbcb; } .withdraw-bonus-cancellation__list p span { color: #ffffff; font-size: 20px; } .withdraw-bonus-cancellation__buttons { display: flex; justify-content: space-around; } .popup-accounts { width: 80%; } @media (max-width: 992px) { .popup-accounts { width: 100%; } } .new-account { width: 340px; height: 203px; margin: 0 auto; padding-top: 60px; padding-right: 25px; background: url("../images/cc-bg3@2x.png.webp") no-repeat center; background-size: 100%; } @media (max-width: 968px) { .new-account { width: 275px; height: 164px; } } .no-webp .new-account { background: url("../images/cc-bg3@2x.png") no-repeat center; } .new-account__card-number { width: 100%; display: flex; justify-content: center; align-items: center; font-family: "Cabin", sans-serif; font-weight: 400; font-size: 16px; font-style: normal; } .new-account__card-number input { font-family: "Cabin", sans-serif; font-weight: 400; font-size: 16px; font-style: normal; } .new-account__card-number input.\--error { border-color: #ff4051; } .new-account__card-number input::-moz-placeholder { font-weight: 400; font-size: 16px; font-style: normal !important; } .new-account__card-number input:-ms-input-placeholder { font-weight: 400; font-size: 16px; font-style: normal !important; } .new-account__card-number input::-ms-input-placeholder { font-weight: 400; font-size: 16px; font-style: normal !important; } .new-account__card-number input::placeholder { font-weight: 400; font-size: 16px; font-style: normal !important; } .new-account__card-brand { position: absolute; right: 100px; bottom: 30px; } .new-account__card-brand img { width: auto; height: 26px; } .new-account__card-brand.visa { bottom: 35px; } .new-account__card-brand.visa img { height: 18px; } .new-account .form-group { width: auto !important; margin: 0 10px; } @media (max-width: 968px) { .new-account .form-group { margin: 0 5px; } } .new-account .form-group input { display: inline-block; padding-left: 5px; padding-right: 5px; border-radius: 5px; height: 34px; text-align: center; } .new-account .form-group:first-child input { width: 52px; } .new-account .form-group:nth-child(2) input { width: 32px; } .new-account .form-group:last-child input { width: 52px; } .countdown { margin: -30px 0 15px 0; font-size: 22px; } .accounts-list__item { display: flex; align-items: center; justify-content: space-between; height: 30px; font-size: 20px; cursor: pointer; } .accounts-list__item .img { width: 25px; margin-right: 20px; } .accounts-list__item:hover { color: #ebb61a; } .accounts-list__item > div:first-child { display: flex; align-items: center; } .accounts-list__item > div:last-child { font-size: 16px; } @media (max-width: 1200px) { .accounts-list__item { padding: 0 10px; font-size: 16px; } .accounts-list__item > div:last-child { font-size: 14px; } } .accounts-list__item--not-verified { cursor: not-allowed; opacity: 0.7; } .accounts-list__item--not-verified:hover { color: #ffffff; } .vd-menu__content { background-color: transparent; box-shadow: none; } .vd-picker { background-color: #6c1156; border: 2px solid rgba(255, 170, 216, 0.3411764706); border-radius: 20px; box-shadow: none; } .vd-picker__controls-label button:not(:hover):not(:focus) { color: #ffffff; } .vd-picker__table-day__text { color: #ffffff; } .vd-picker__months-button { color: #ffffff; border-color: transparent !important; } .vd-picker__years li { color: #ffffff; border-radius: 10px; border-color: transparent !important; } .vd-picker__months-button:not(:hover), .vd-picker__years li:not(:hover) { background-color: transparent !important; } .vd-picker__table-day--selected .vd-picker__table-day__text { color: #6c1156; } .vd-picker__table-day--disabled.vd-picker__table-day .vd-picker__table-day__text, .vd-picker__months-button:disabled, .vd-picker__months-button[disabled] { color: rgba(255, 255, 255, 0.6); } .vd-picker__table-day { font-size: 16px; } .vd-picker__table-week { color: #ffcbcb; } .vd-picker__table-week { font-size: 14px; } .vd-picker__table-day__current { color: #ffcbcb; } .vd-picker__controls-label button { font-size: 18px; } .vd-picker__controls button.vd-picker__controls-next, .vd-picker__controls button.vd-picker__controls-prev { color: #ffcbcb; } .vd-picker__controls button.vd-picker__controls-next:disabled svg, .vd-picker__controls button.vd-picker__controls-next[disabled] svg, .vd-picker__controls button.vd-picker__controls-prev:disabled svg, .vd-picker__controls button.vd-picker__controls-prev[disabled] svg { color: #ffcbcb; opacity: 0.6; } .vd-picker--bottomsheet .vd-picker__title > p { opacity: 0; } .vd-picker__title-close svg path { fill: #ffffff; } .vd-picker__years { overflow-y: hidden; } .vd-picker__months-button { border-radius: 10px; } .vd-picker__months-button:hover, .vd-picker__years li:hover { background-color: rgba(255, 216, 144, 0.12) !important; } .vd-wrapper { width: 100%; } @media (min-width: 1200px) { .vd-wrapper { max-width: 25%; } } .vd-picker__input input { background-color: rgba(66, 21, 93, 0.1882352941); height: 44px; max-height: unset; color: #ffffff; outline: none; padding: 1px 26px 0 !important; font-size: 22px !important; font-style: italic; font-weight: 600; appearance: none; background-image: url(../images/arrdown.png); background-repeat: no-repeat; background-position: right 20px center; background-size: auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: flex; padding: 0 0 4px 0; border: 2px solid rgba(255, 170, 216, 0.3411764706); border-radius: 22px; white-space: normal; } .changelly-iframe-wrapper { width: 100%; height: 282px; padding-top: 16px; background-color: #ffffff; border-radius: 30px; border: 4px solid rgba(122, 40, 131, 0.75); overflow: hidden; } /* end Dashboard - deposit - styles */ /* Dashboard - bonuses - styles */ .text-pink { color: #ffcbcb !important; } .line-height-14px { line-height: 14px; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .pt-10 { padding-top: 10px !important; } .pt-15 { padding-top: 15px !important; } .pt-20 { padding-top: 20px !important; } .pt-30 { padding-top: 30px !important; } .mt-10 { margin-top: 10px !important; } .mt-20 { margin-top: 20px !important; } .mt-40 { margin-top: 40px !important; } .m-0 { margin: 0px !important; } .mr-5 { margin-right: 5px !important; } .mr-10 { margin-right: 10px !important; } .mr-20 { margin-right: 10px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 10px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mt-15 { margin-top: 15px !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; } .account-verification-panel.hidden { display: none; } .account-verification-panel { flex-flow: wrap-reverse; width: 100%; flex: 1; display: flex; justify-content: flex-start; align-items: stretch; } .account-verification-box { display: flex; width: 100%; max-width: 700px; padding: 0; padding-left: 15px; } .your-bonuses-header { display: flex; justify-content: flex-start; align-items: center; padding: 13px 25px; } @media (max-width: 375px) { .your-bonuses-header { justify-content: center; } .your-bonuses-header .card-icon { display: none; } } @media (max-width: 1200px) { .your-bonuses-header h1 { font-size: 20px; white-space: nowrap; } } .card-icon { margin-right: 15px; } .card-icon img { width: 100%; max-width: 40px; } .your-bonuses-content { padding: 15px 75px; text-align: left; } @media (max-width: 768px) { .your-bonuses-content { padding: 15px; } } .your-bonuses-title { color: #ffcbcb; font-size: 18px; margin-bottom: 20px; font-weight: 500; margin: 0; } .no-document-box { padding: 15px; display: flex; align-items: center; flex-direction: column; justify-content: center; max-width: 700px; width: 100%; } .document-icon { width: 100%; max-width: 64px; margin-bottom: 15px; margin-top: -100px; } .tabs-box__tab { text-transform: uppercase; padding: 12px 25px; } .custom-upload-file { max-width: 85%; font-weight: 400; font-style: italic; } .verification-upload-box { display: flex; align-items: center; padding: 0 75px; margin-bottom: 10px; } .fileUpload { position: relative; width: 30px; height: 30px; overflow: hidden; margin-left: 15px; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .btn--browse:hover { cursor: pointer; } .btn--browse img { width: 100%; max-width: 30px; } .custom-upload-file .f-input { width: 100%; max-width: 400px; padding: 0 14px; } ::-webkit-input-placeholder { font-weight: 400 !important; font-style: italic !important; } ::-moz-placeholder { font-weight: 400 !important; font-style: italic !important; } :-ms-input-placeholder { font-weight: 400 !important; font-style: italic !important; } :-o-input-placeholder { font-weight: 400 !important; font-style: italic !important; } .upload-ready-file { background-color: #8d2a83; padding: 5px 7px; padding-left: 13px; color: #fff; border-radius: 50px; display: flex; justify-content: flex-start; align-items: center; /* max-width: 85%; */ } .upload-ready-file--box { /* padding: 0 75px; */ margin-bottom: 5px; } .upload-ready-file--text { font-weight: 400; margin: 0; font-size: 18px; text-align: left; } .upload-ready-file--img { width: 100%; max-width: 18px; margin-right: 10px; } .upload-ready-file--badge { font-weight: 400; font-size: 15px; font-style: italic; padding: 5px 10px; text-transform: uppercase; color: #fff; display: inline-block; background-color: #ea4762; border-radius: 50px; margin-left: auto; min-width: 75px; } .upload-ready-file--badge.verivied { background-color: #63af61; } .account-verification-box .your-bonuses { height: auto; min-height: 230px; margin-bottom: 20px; } .your-bonuses-container { width: 100%; overflow-y: auto; max-height: 593px; padding-right: 15px; } .upload-ready-file--scrool { max-height: 130px; overflow-y: auto; max-width: 80%; padding-right: 15px; min-width: 200px; padding-left: 75px; } .deposit-banner + .deposit-banner { margin-top: 10px; } .signup-benefits--with-banner.deposit-banner { min-height: unset; max-width: 430px; } @media (max-width: 992px) { .deposit-banner--other-bonuses { display: none; } } .deposit-no-other-bonuses { min-height: 531px !important; } @media (max-width: 1200px) { .deposit-no-other-bonuses { min-height: unset !important; } } .deposit-no-bonus { min-height: 531px !important; background: url("../images/bonuses/nobonus-bg.png") no-repeat center; justify-content: center !important; } @media (max-width: 1200px) { .deposit-no-bonus { min-height: 131px !important; } } .deposit-no-bonus__title { width: 80%; font-weight: 400; color: white; font-size: 33px; } .deposit-no-bonus__title span { font-weight: 600; color: #fdba45; } @media (max-width: 1200px) { .deposit-no-bonus__title { font-size: 26px; } } @media (max-width: 992px) { .deposit-banner-container .signup-benefits__title { font-size: 23px; padding-top: 5px; padding-bottom: 5px; } } .deposit-bonuses { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px; } .deposit-bonuses__loading { padding: 30px; font-weight: 500; font-size: 18px; } .deposit-bonuses_item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 400px; height: 130px; padding: 18px 23px 18px 23px; box-shadow: 0px 24px 29px 0px rgba(50, 0, 78, 0.54); border-radius: 20px; cursor: pointer; text-align: center; position: relative; } .deposit-bonuses_item span { position: absolute; width: 140px; height: 140px; border-radius: 50%; } .deposit-bonuses_item::after { content: ""; width: 400px; height: 130px; border: 4px solid transparent; position: absolute; border-radius: 24px; box-sizing: content-box; transition: box-shadow 0.3s ease; background: url(../images/bonuses/bonus-bg.png) no-repeat center; } @media (max-width: 1200px) { .deposit-bonuses_item::after { width: 100%; } } @media (max-width: 768px) { .deposit-bonuses_item::after { background: linear-gradient(0deg, rgba(255, 113, 112, 0.8) 0%, rgba(255, 206, 55, 0.8) 50%, rgba(255, 113, 112, 0.8) 100%); } } .deposit-bonuses_item:hover::after, .deposit-bonuses_item.\--active::after { box-shadow: 0 0 8px 3px #14ffe9; border-color: #fcc849; } .deposit-bonuses_item:hover span, .deposit-bonuses_item.\--active span { -webkit-animation: rotate 0.8s linear infinite; animation: rotate 0.8s linear infinite; background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); } .deposit-bonuses_item:hover span:nth-child(1), .deposit-bonuses_item.\--active span:nth-child(1) { -webkit-filter: blur(5px); filter: blur(5px); left: 0; } .deposit-bonuses_item:hover span:nth-child(2), .deposit-bonuses_item.\--active span:nth-child(2) { -webkit-filter: blur(10px); filter: blur(10px); left: 0; } .deposit-bonuses_item:hover span:nth-child(3), .deposit-bonuses_item.\--active span:nth-child(3) { -webkit-filter: blur(25px); filter: blur(25px); left: 0; } .deposit-bonuses_item:hover span:nth-child(4), .deposit-bonuses_item.\--active span:nth-child(4) { -webkit-filter: blur(50px); filter: blur(50px); left: 0; } .deposit-bonuses_item:hover span:nth-child(5), .deposit-bonuses_item.\--active span:nth-child(5) { -webkit-filter: blur(5px); filter: blur(5px); right: 0; } .deposit-bonuses_item:hover span:nth-child(6), .deposit-bonuses_item.\--active span:nth-child(6) { -webkit-filter: blur(10px); filter: blur(10px); right: 0; } .deposit-bonuses_item:hover span:nth-child(7), .deposit-bonuses_item.\--active span:nth-child(7) { -webkit-filter: blur(25px); filter: blur(25px); right: 0; } .deposit-bonuses_item:hover span:nth-child(8), .deposit-bonuses_item.\--active span:nth-child(8) { -webkit-filter: blur(50px); filter: blur(50px); right: 0; } .deposit-bonuses_item.\--active::before { content: ""; width: 37px; height: 37px; background: url("../images/bonuses/bonus-checkbox-bordered.png") no-repeat bottom center; position: absolute; top: 50%; left: -10px; margin-top: -18.5px; z-index: 3; } .deposit-bonuses_item.\--no-user-select { cursor: default; } .deposit-bonuses_item.\--no-user-select::before { display: none; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .deposit-bonuses_item + .deposit-bonuses_item { margin-top: 10px; } @media (max-width: 1200px) { .deposit-bonuses_item + .deposit-bonuses_item { margin-top: 20px; } } @media (max-width: 992px) { .deposit-bonuses_item { width: 100%; height: 100px; padding: 0 28px; } .deposit-bonuses_item span { width: 100px; height: 100px; } .deposit-bonuses_item::before { width: 100px; height: 100px; } .deposit-bonuses_item::after { height: 100px; } } .deposit-bonuses_item_name { font-family: "Barlow Condensed", sans-serif; font-size: 32px; font-style: italic; font-weight: 900; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 2; } @media (max-width: 1200px) { .deposit-bonuses_item_name { font-size: 22px; } } @media (max-width: 992px) { .deposit-bonuses_item_name { font-size: 19px; } } .deposit-bonuses_item_name::before { content: attr(data-text); background: #430840; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 6px; -webkit-text-stroke-color: #430840; position: absolute; top: 0; left: 0; text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } .deposit-bonuses_item_name::after { content: attr(data-text); background: rgb(255, 153, 69); background: linear-gradient(0deg, rgb(255, 153, 69) 0%, rgb(255, 184, 69) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 0; left: 0; } .deposit-bonuses_item_description { font-family: "Barlow Condensed", sans-serif; font-size: 22px; font-style: italic; font-weight: 800; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 2; } @media (max-width: 1200px) { .deposit-bonuses_item_description { font-size: 18px; } } @media (max-width: 992px) { .deposit-bonuses_item_description { font-size: 17px; } } .deposit-bonuses_item_description::before { content: attr(data-text); background: #430840; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: #430840; position: absolute; top: 0; left: 0; text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); } .deposit-bonuses_item_description::after { content: attr(data-text); background: rgb(48, 236, 234); background: linear-gradient(0deg, rgb(48, 236, 234) 0%, rgb(89, 255, 169) 76%, rgb(129, 255, 190) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 0; left: 0; } .deposit-bonus-note { position: relative; margin-bottom: 10px; font-size: 18px; color: #ffffff; } .deposit-bonus-note span { display: inline-block; border-bottom: 2px solid #ffd990; padding-bottom: 1px; } @media (max-width: 1200px) { .deposit-bonus-note { width: 90%; } } @media (max-width: 992px) { .deposit-bonus-note { font-size: 14px; } } .deposit-other-bonuses { width: 100%; display: flex; align-items: center; justify-content: space-around; padding: 10px; } @media (max-width: 768px) { .deposit-other-bonuses { flex-direction: column; } } .deposit-other-bonuses_item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 196px; height: 127px; padding: 16px 24px 14px 24px; box-shadow: 0px 24px 29px 0px rgba(50, 0, 78, 0.54); border-radius: 20px; background: url("../images/bonuses/other-bonus-bg.png") no-repeat center; text-align: center; } .deposit-other-bonuses_item.\--weekly-cashback { padding: 16px 10px 14px 10px; } @media (max-width: 992px) { .deposit-other-bonuses_item { width: 100%; height: 80px; padding: 0 24px; background-size: 110%; } .deposit-other-bonuses_item + .deposit-other-bonuses_item { margin-top: 10px; } } .deposit-other-bonuses_item_name { display: inline-block; font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-style: italic; font-weight: 900; position: relative; z-index: 2; } @media (max-width: 992px) { .deposit-other-bonuses_item_name { font-size: 19px; } } .deposit-other-bonuses_item_name::before { content: attr(data-text); background: #441363; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 6px; -webkit-text-stroke-color: #441363; position: absolute; top: 0; left: 0; text-shadow: 0px 5px 8px rgba(0, 0, 0, 0.5); } .deposit-other-bonuses_item_name::after { content: attr(data-text); background: rgb(255, 243, 129); background: linear-gradient(180deg, rgb(255, 243, 129) 0%, rgb(255, 186, 80) 50%, rgb(255, 211, 113) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 0; left: 0; } .deposit-other-bonuses_item_description { display: inline-block; font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-style: italic; font-weight: 900; position: relative; z-index: 2; } @media (max-width: 992px) { .deposit-other-bonuses_item_description { font-size: 15px; } } .deposit-other-bonuses_item_description::before { content: attr(data-text); background: #fe63e1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 6px; -webkit-text-stroke-color: #fe63e1; position: absolute; top: 0; left: 0; text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); } .deposit-other-bonuses_item_description::after { content: attr(data-text); background: #44ebff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #430840; position: absolute; top: 0; left: 0; } .deposit-banner-container .nobonus { width: 100%; max-width: 420px; margin: 10px auto 0 auto; display: flex; align-items: center; justify-content: center; } .deposit-banner-container .nobonus .custom-checkbox { font-size: 21px; } .deposit-banner-container .nobonus .checkbox-with-label__label { font-size: 16px; } .bonus-terms a { display: inline-block; border-bottom: 2px solid #87d7fd; padding-bottom: 1px; color: #87d7fd; transition: border-color 0.1s ease; } .bonus-terms a:hover { color: #87d7fd; border-bottom-color: transparent; } /* end Dashboard - varification - styles */ .cc-selector { position: relative; } .account-form--fullwidth { position: relative; } label.account-form--fullwidth { display: block; } .upload-ready-file--img { max-width: 18px !important; } .your-bonuses-container { scrollbar-width: thin; scrollbar-color: #be59a9 #471251; } .your-bonuses-container::-webkit-scrollbar { width: 12px; } .your-bonuses-container::-webkit-scrollbar-thumb { background-color: #be59a9; border-radius: 12px; } .your-bonuses-container::-webkit-scrollbar-track { background-color: #471251; border-radius: 12px; } .upload-ready-file--scrool { scrollbar-width: thin; scrollbar-color: #be59a9 #471251; } .upload-ready-file--scrool::-webkit-scrollbar { width: 8px; } .upload-ready-file--scrool::-webkit-scrollbar-thumb { background-color: #be59a9; border-radius: 8px; } .upload-ready-file--scrool::-webkit-scrollbar-track { background-color: #471251; border-radius: 8px; } .dropzone .upload-ready-file { position: relative; overflow: hidden; } .dropzone .dz-progress { display: block; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; } .dropzone .dz-upload { display: block; background-color: #63af61; width: 0; height: 2px; transition: width 0.5s ease; } .dropzone .dz-error .dz-upload { background-color: #ea4762; } .dropzone .dz-success-mark, .dropzone .dz-error-mark, .dropzone .dz-remove { display: none; } .dropzone .dz-preview .upload-ready-file--badge, .dropzone .dz-preview .upload-ready-file--img { opacity: 0; transition: opacity 0.5s ease; } .dropzone .dz-preview.dz-success .upload-ready-file--badge, .dropzone .dz-preview.dz-success .upload-ready-file--img { opacity: 1; } .upload-ready-file--badge.pending { background-color: #ffd04d; color: #24305b; } [data-dz-name], .upload-ready-file--text { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 991px) { .verification-upload-box { padding: 0 15px; } .upload-ready-file--scrool { padding: 0 15px; max-width: 100%; } .upload-ready-file--badge { display: none; } [data-dz-name], .upload-ready-file--text { max-width: 100%; } } .tabs-box__tab { padding: 12px 12px; } .account-verification-box .your-bonuses { min-height: auto; } .account-verification-box .your-bonuses.verification-passed .upload-ready-file--img { display: inline-block; } .mb-15 { margin-bottom: 15px !important; } .logo { padding: 19px 89px 21px 89px; text-align: center; } .logo img { width: auto; height: 130px; } @media (max-width: 1919px) { .logo { padding: 19px 0 21px 0; text-align: center; } } .top-bar nav { padding: 0 0 50px 0; } @media (max-width: 1919px) { .user_img { width: 80px; } .user_img img { width: 80px; max-width: none; } .user_name a { font-size: 18px; } } @media (min-width: 1920px) { .user { /* max-width: 270px; */ padding-left: 10%; padding-right: 10%; } .user_img { width: 90px; } .user_img img { width: 90px; max-width: none; } .user_name a { font-size: 20px; } } .users { padding-top: 0; overflow: hidden; } .user { display: flex; align-items: flex-start; } .user_img { float: none; } .user_text { margin: 0; } .user:first-child { border-top: none; } .custom-upload-file input { cursor: pointer; } .right_bar { display: flex; flex-direction: column; } .fade-enter-active { /* .fade-leave-active */ transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } .footer_logo img { width: 150px; height: auto; } .main-page-banner-block { display: block; cursor: pointer; } .main-page-banner-block:hover a { opacity: 0.8; } .main-page-banner-right #kong { width: 464px; height: 720px; } .footer_menu { display: flex; } .footer_column ul { width: 49%; } @media (max-width: 767px) { .footer_column ul { width: 100%; } } .footer_column ul li { width: 100%; } .game_wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center; color: #ffffff; background-color: rgba(1, 0, 16, 0.5); z-index: 100; overflow-x: hidden; overflow-y: auto; } .game_wrapper .close-modal-btn { right: 20px; top: 82px; z-index: 100; } .game_outside { position: absolute; width: 100%; height: 100%; z-index: 1; } .game_iframe { width: 80%; height: 80%; z-index: 2; display: flex; background-repeat: no-repeat; background-position: center; background-size: cover; } .game_iframe .bg { background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; width: 100%; height: 100%; } .game_iframe .bg::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: inherit; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-filter: blur(20px); filter: blur(20px); z-index: 1; } .game_iframe.game_iframe__fullscreen { width: 100%; height: calc(100% - 70px); margin-top: 70px; } @media (max-width: 992px) { .game_iframe.game_iframe__fullscreen { height: calc(100% - 110px); margin-top: 110px; } } @media screen and (max-width: 992px) and (orientation: landscape) { .game_iframe.game_iframe__fullscreen { margin-top: 0; height: 100%; } } .game_iframe .game_iframe_wrapper { width: calc(100% - 250px); height: 100%; position: relative; } @media (max-width: 992px) { .game_iframe .game_iframe_wrapper { width: 100%; } } .game_iframe iframe { border: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 2; } @media (max-width: 992px) { .game_iframe iframe { width: 100% !important; height: 100% !important; } } @media screen and (max-width: 992px) and (orientation: landscape) { .game_iframe iframe { margin-top: 0 !important; } } .game_iframe .game_sidebar { width: 250px; height: 100%; position: relative; z-index: 2; } .game_iframe .game_sidebar .game_tools { width: 55px; height: 154px; position: absolute; top: 0; right: 0; } .game_iframe .game_sidebar .game_tools ul { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .game_iframe .game_sidebar .game_tools ul li { background-color: rgba(255, 255, 255, 0.6); box-shadow: inset -0.53px 0.848px 1px 0px rgba(255, 255, 255, 0.58); border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .game_iframe .game_sidebar .game_tools ul li > div { width: 44px; height: 39px; background-color: rgb(255, 255, 255); background-position: center; background-repeat: no-repeat; box-shadow: 0px 3px 6px 0px rgba(15, 0, 35, 0.26), inset 0px -3px 2px 0px rgba(235, 237, 241, 0.8); border-radius: 8px; transform: skewX(-6deg); margin: 5px; cursor: pointer; } .game_iframe .game_sidebar .game_tools ul li > div.roll-left { background-image: url("../images/game_iframe_icons/roll-left.png"); } .game_iframe .game_sidebar .game_tools ul li > div.roll-right { background-image: url("../images/game_iframe_icons/roll-right.png"); } .game_iframe .game_sidebar .game_tools ul li > div.fullscreen { background-image: url("../images/game_iframe_icons/fullscreen.png"); } .game_iframe .game_sidebar .game_tools ul li > div.fav { background-image: url("../images/game_iframe_icons/fav.png"); } .game_iframe .game_sidebar .game_games_list { width: 250px; height: 100%; background-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0.53px 0.848px 1px 0px rgba(255, 255, 255, 0.58); /* &::after { content: ""; display: block; box-shadow: inset 0.53px 0.848px 1px 0px rgba(255, 255, 255, 0.58); width: 1px; height: calc(100% - 164px); // 154px - 8px position: absolute; bottom: 8px; right: 55px; } */ border-bottom-right-radius: 8px; box-sizing: border-box; padding: 18px 0 18px 18px; overflow-y: hidden; } .game_iframe .game_sidebar .game_games_list .game_games_wrapper { height: 100%; text-align: center; } .game_iframe .game_sidebar .game_games_list .games { overflow-y: auto; height: calc(100% - 118px - 86px); scrollbar-width: thin; scrollbar-color: #8636ff transparent; margin-bottom: 22px; } @media (max-width: 1919px) { .game_iframe .game_sidebar .game_games_list .games { padding: 0; } } .game_iframe .game_sidebar .game_games_list .games::-webkit-scrollbar { width: 18px; height: 155px; } .game_iframe .game_sidebar .game_games_list .games::-webkit-scrollbar-thumb { height: 8px; border: 5px solid rgba(0, 0, 0, 0); background-clip: padding-box; background-color: #5a79ff; border-radius: 18px; } .game_iframe .game_sidebar .game_games_list .games::-webkit-scrollbar-track { background-color: transparent; } .game_iframe .game_sidebar .game_games_list .game { width: 94px; margin-right: 13px; } .game_iframe .game_sidebar .game_games_list .game .game-img a { height: 83px; } .game_iframe .game_sidebar .game_games_list .game .game-overlay .game_name { display: none; } .game_iframe .game_sidebar .game_games_list .game .game-overlay .game_provider { display: none; } .game_iframe .game_sidebar .game_games_list .game .game-overlay .game_play { width: 30px; height: 30px; margin-top: 0; } .game_iframe .game_sidebar .game_games_list .game .game_link_demo { display: none; } .game_iframe .game_sidebar .game_games_list .game .game-new { width: 40px; height: 21px; top: 5px; } .game_iframe .game_sidebar .game_games_list .game .game-popular { width: 40px; height: 21px; top: 5px; } .game_iframe .game_sidebar .game_games_list .game .game-players { display: none; } .game_iframe .game_sidebar .game_games_list .divider { width: 100%; height: 3px; margin: 22px 0; background-color: rgba(235, 237, 241, 0.4); } .game_iframe .game_sidebar .game_games_list h3 { display: inline-block; position: relative; margin: 0 0 22px 0; font-size: 24px; color: rgb(66, 55, 128); font-weight: bold; font-style: italic; line-height: 1.25; } .game_iframe .game_sidebar .game_games_list h3:before { position: absolute; top: 0; left: 0; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; content: attr(data-content); } .game_iframe .game_sidebar .game_games_list h3:after { position: absolute; top: 0; left: 0; background-image: linear-gradient(to bottom, #a13284 41%, #453780 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; content: attr(data-content); } .game_iframe .game_sidebar .close-btn { display: inline-block; padding: 7px 20px 14px 20px; background: none; border: none; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 21px; color: #423780; position: relative; text-align: center; line-height: 1; cursor: pointer; z-index: 1; } .game_iframe .game_sidebar .close-btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; border: 3px solid #b6edff; border-radius: 10px; transform: skewX(-6deg); transition: background-color 0.2s ease-in; z-index: -1; } .game_iframe .game_sidebar .close-btn:hover { color: #423780; } .game_iframe .game_sidebar .close-btn:hover::before { background-color: #b6edff; } @media (max-width: 992px) { .game_iframe .game_sidebar { display: none; } } .game_iframe.game_sidebar__rolled .game_sidebar { width: 63px; } .game_iframe.game_sidebar__rolled .game_games_list { width: 8px; padding: 0; } .game_iframe.game_sidebar__rolled .game_games_list .game_games_wrapper { display: none; } .game_iframe.game_sidebar__rolled iframe { width: calc(100% - 63px); } .gameplay-streamer .game_iframe .game_iframe_wrapper { width: 100%; } .gameplay-streamer .game_iframe .game_sidebar { display: none; } @media (min-width: 992px) { .playing.gameplay-streamer .loader { width: 100%; } } @media (min-width: 992px) { .playing.gameplay-streamer .header .level, .playing.gameplay-streamer .header .circular-level { display: none; } } .playing.gameplay-streamer .header .balance { display: none; } .logo-hor { display: none; } .playing.gameplay-streamer .logo-ver { display: none; } .playing.gameplay-streamer .logo-hor { display: block; } .playing.gameplay-streamer .right-top-btns > a:last-child { display: inline-block; } .gameplay-demo .game_iframe .game_iframe_wrapper { width: 100%; } .gameplay-demo .game_iframe .game_sidebar { display: none; } @media (min-width: 992px) { .playing.gameplay-demo .loader { width: 100%; } } @media (min-width: 992px) { .playing.gameplay-demo .header .level, .playing.gameplay-demo .header .circular-level { display: none; } } .playing.gameplay-demo .header .balance { display: none; } .playing.gameplay-demo .logo-ver { display: none; } .playing.gameplay-demo .logo-hor { display: block; margin: 5px 0; } .playing.gameplay-demo .right-top-btns > a:last-child { display: inline-block; } .main .right-top-btns { display: none; } .gameplay-demo .main .right-top-btns { display: inline-block; } .gameplay-demo .header-right { display: none; } .gameplay-demo #onesignal-slidedown-container { display: none !important; } @media (max-width: 992px) { #main.main .game_iframe__fullscreen { height: calc(100% - 65px); margin-top: 65px; } } @media screen and (max-width: 992px) and (orientation: landscape) { #main.main .game_iframe__fullscreen { margin-top: 0; } } .game_search_input { width: 100%; padding: 8px 13px 8px 43px; border: 2px solid #ede6eb; border-radius: 25px; background: url("../images/game_iframe_icons/search.png") #ffffff no-repeat 13px center; font-size: 20px; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; box-sizing: border-box; } .game_search_input::-moz-placeholder { color: #ab3185; opacity: 1; font-weight: 600; } .game_search_input:-ms-input-placeholder { color: #ab3185; opacity: 1; font-weight: 600; } .game_search_input::-ms-input-placeholder { color: #ab3185; opacity: 1; font-weight: 600; } .game_search_input::placeholder { color: #ab3185; opacity: 1; font-weight: 600; } .game_search_input:-moz-input-placeholder { color: #ab3185; font-weight: 600; } .game_search_input:-ms-input-placeholder { color: #ab3185; font-weight: 600; } .game_search_input:-o-input-placeholder { color: #ab3185; font-weight: 600; } .about-us .page-header { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 496px; padding: 0 100px; background: url("../images/about-us/about-us_bg-1.jpg") no-repeat center; background-size: cover; position: relative; z-index: 0; overflow: hidden; box-sizing: border-box; } @media (max-width: 768px) { .about-us .page-header { padding: 0 25px; } } @media (min-width: 1200px) { .about-us .page-header::before { content: ""; display: block; position: absolute; top: 0; right: 0; background: url("../images/about-us/about-us_monkey.png") no-repeat center; width: 527px; height: 776px; } } .about-us .page-header::after { content: ""; display: block; width: 100%; height: 6px; position: absolute; left: 0; bottom: 0; background: rgb(255, 83, 255); background: linear-gradient(90deg, rgb(255, 83, 255) 0%, rgb(163, 108, 254) 52%, rgb(121, 255, 254) 100%); } .about-us .page-header h1 { color: #ffffff; font-size: 84px; margin: 0; line-height: 1; } .circle-frames { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 1200px) { .circle-frames { width: 60%; } } .circle-frames .circle-frame:first-child { margin-left: -56px; } @media (max-width: 768px) { .circle-frames .circle-frame:first-child { margin-left: -28px; } } .circle-frame { display: block; width: 240px; } .circle-frame br { display: inline; } @media (max-width: 768px) { .circle-frame { width: 120px; } } .circle-frame .icon { width: 240px; height: 241px; position: relative; background: url("../images/about-us/about-us_circle_frame.png") no-repeat center; background-size: 100% auto; } @media (max-width: 768px) { .circle-frame .icon { width: 120px; height: 120.5px; } } .circle-frame .icon::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-position: center; background-repeat: no-repeat; background-size: 100% auto; } .circle-frame .icon.cards::before { width: 90px; height: 94px; background-image: url("../images/about-us/about-us_icons_cards.png"); } @media (max-width: 768px) { .circle-frame .icon.cards::before { width: 45px; height: 47px; } } .circle-frame .icon.hand-dollar::before { width: 82px; height: 97px; background-image: url("../images/about-us/about-us_icons_hand-dollar.png"); } @media (max-width: 768px) { .circle-frame .icon.hand-dollar::before { width: 41px; height: 48.5px; } } .circle-frame .icon.gift::before { width: 78px; height: 86px; background-image: url("../images/about-us/about-us_icons_gift.png"); } @media (max-width: 768px) { .circle-frame .icon.gift::before { width: 39px; height: 43px; } } .circle-frame .icon.earphone::before { width: 82px; height: 87px; background-image: url("../images/about-us/about-us_icons_earphone.png"); } @media (max-width: 768px) { .circle-frame .icon.earphone::before { width: 41px; height: 43.5px; } } .circle-frame .text { margin-top: -35px; text-align: center; font-size: 34px; line-height: 1; color: #ffffff; } @media (max-width: 768px) { .circle-frame .text { margin-top: 17.5px; } } @media (max-width: 768px) { .circle-frame .text { font-size: 16px; } } .circle-frame + .circle-frame { margin-left: -92px; } @media (max-width: 768px) { .circle-frame + .circle-frame { margin-left: -46px; } } .features { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 71px 118px 156px 118px; box-sizing: border-box; } @media (max-width: 767px) { .features { flex-direction: column; padding: 71px 59px 156px 59px; } } .features-blue-bg { padding: 158px 118px 105px 118px; margin: -59.5px 0 0 0; background: url("../images/about-us/about-us_bg-2.jpg") no-repeat center; background-size: cover; color: #ffffff; } @media (max-width: 767px) { .features-blue-bg { padding: 158px 59px 105px 59px; } } .features-item { width: 45%; font-family: "Cabin", sans-serif; font-weight: 400; font-style: normal; font-size: 22px; line-height: 36px; letter-spacing: -0.22px; } @media (max-width: 767px) { .features-item { width: 100%; } } .features + .cashback { margin-top: 0; } .iconbox { display: flex; align-items: center; } @media (max-width: 767px) { .iconbox { flex-direction: column; } } .iconbox .icon { display: block; background-position: center; background-size: 100% auto; background-repeat: no-repeat; } .iconbox .icon.handshake { width: 135px; height: 105px; background-image: url("../images/about-us/about-us_icons2_handshake.png"); } .iconbox .icon.i777 { width: 135px; height: 105px; background-image: url("../images/about-us/about-us_icons2_777.png"); } .iconbox .text { margin-left: 52px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; font-size: 60px; line-height: 56px; letter-spacing: -0.6px; color: #8f3499; } @media (max-width: 767px) { .iconbox .text { margin-left: 0; margin-top: 52px; text-align: center; } } .divider { display: block; width: 130px; height: 3px; margin: 30px auto; background-color: #ebedf1; } .partners { width: 80%; min-height: 119px; margin: -119px auto 0 auto; position: relative; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; box-sizing: border-box; } @media (max-width: 767px) { .partners { width: 90%; padding: 0 16px 16px 16px; } } .partners img { position: relative; z-index: 2; } @media (max-width: 767px) { .partners img { margin-top: 16px; } .partners img.about-us_logos_netent { height: 25.9px; } .partners img.about-us_logos_yggdrasil { height: 32.9px; } .partners img.about-us_logos_quickspin { height: 27.3px; } .partners img.about-us_logos_playngo { height: 35.7px; } .partners img.about-us_logos_pragmatic-play { height: 56.7px; } } .partners::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid rgb(235, 237, 241); background-color: rgb(247, 247, 247); box-shadow: 0px 29px 38px 0px rgba(6, 0, 12, 0.49); transform: skewX(-6deg); border-radius: 20px; z-index: 1; border-top: solid 3px #ffb052; } .faq .page-header { display: flex; flex-direction: column; justify-content: center; padding: 63px 118px; background: url("../images/faq/faq_bg-1.jpg") no-repeat center; background-size: cover; } @media (max-width: 768px) { .faq .page-header { padding: 63px 39.3333333333px; } } .faq .page-header h1 { color: #ffffff; font-size: 50px; margin: 0; line-height: 1; } .faq .page-content { padding: 63px 118px; } @media (max-width: 768px) { .faq .page-content { padding: 63px 39.3333333333px; } } .faq-ul { font-family: "Cabin", sans-serif; font-weight: 400; font-style: normal; font-size: 20px; line-height: 30px; color: #24305b; } .faq-ul li ul, .faq-ul li div { display: none; } .faq-ul li.active > ul, .faq-ul li.active > div { display: block; } .faq-ul > li { padding: 35px 0 35px 60px; border-bottom: 2px solid #ebedf1; position: relative; } .faq-ul > li::before { content: ""; display: block; width: 40px; height: 40px; position: absolute; top: 35px; left: 0; background-repeat: no-repeat; background-position: left center; } .faq-ul > li.icon-star::before { background-image: url("../images/faq/faq_icons_star.png"); } .faq-ul > li.icon-user::before { background-image: url("../images/faq/faq_icons_user.png"); } .faq-ul > li.icon-dollar::before { background-image: url("../images/faq/faq_icons_dollar.png"); } .faq-ul > li.icon-gift::before { background-image: url("../images/faq/faq_icons_gift.png"); } .faq-ul > li.icon-slots::before { background-image: url("../images/faq/faq_icons_slots.png"); } .faq-ul > li.icon-lock::before { background-image: url("../images/faq/faq_icons_lock.png"); } .faq-ul > li.icon-dollar2::before { background-image: url("../images/faq/faq_icons_dollar2.png"); } .faq-ul > li::after { content: ""; display: block; width: 17px; height: 17px; position: absolute; top: 46.5px; right: 0; background: url("../images/faq/faq_arrow_right.png") no-repeat center; } .faq-ul > li.active::after { background: url("../images/faq/faq_arrow_bottom.png") no-repeat center; } .faq-ul > li.active h3, .faq-ul > li.active div { margin-bottom: 35px; } .faq-ul > li > ul > li { position: relative; padding-left: 43px; } .faq-ul > li > ul > li::after { content: ""; display: block; width: 13px; height: 13px; position: absolute; top: 8.5px; left: 0; background: url("../images/faq/faq_arrow2_right.png") no-repeat center; } .faq-ul > li > ul > li.active h4 { color: #8f3499; } .faq-ul > li > ul > li.active::after { background: url("../images/faq/faq_arrow2_bottom.png") no-repeat center; } .faq-ul h3 { position: relative; margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: #573681; cursor: pointer; } .faq-ul h3:after { position: absolute; top: 0; left: 0; background-image: linear-gradient(to bottom, #cd2f86 41%, #573681 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; content: attr(data-content); } .faq-ul h4 { margin: 0 0 27px 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; font-size: 27px; line-height: 30px; letter-spacing: -0.27px; color: #24305b; cursor: pointer; } .support .page-header { display: flex; flex-direction: column; justify-content: center; padding: 72px 118px 88px 118px; background: url("../images/support/support_bg-1.jpg") no-repeat center; background-size: cover; position: relative; } @media (max-width: 1200px) { .support .page-header { padding: 72px 59px 88px 59px; } } @media (max-width: 768px) { .support .page-header { padding: 63px 39.3333333333px; } } .support .page-header h1 { color: #ffffff; font-size: 80px; margin: 0; line-height: 1; } @media (max-width: 1200px) { .support .page-header h1 { font-size: 45px; } } .support .page-header::after { content: ""; display: block; width: 100%; height: 6px; position: absolute; left: 0; bottom: 0; background: rgb(255, 83, 255); background: linear-gradient(90deg, rgb(255, 83, 255) 0%, rgb(163, 108, 254) 52%, rgb(121, 255, 254) 100%); } .support .page-content { padding: 63px 118px; font-family: "Cabin", sans-serif; font-weight: 400; font-style: normal; font-size: 22px; line-height: 36px; letter-spacing: -0.22px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1200px) { .support .page-content { padding: 63px 39.3333333333px; } } @media (max-width: 1200px) { .support .page-content { flex-direction: column; } } .support .page-content > div { width: 45%; } @media (max-width: 1200px) { .support .page-content > div { width: 100%; } } .support .support-text { box-sizing: border-box; } .support .support-form { position: relative; border-radius: 18px; background-color: rgb(209, 209, 227); box-shadow: 0px 21px 40px 0px rgba(17, 6, 27, 0.1); margin-top: -215px; } @media (max-width: 1200px) { .support .support-form { margin-top: 0; } } .support .support-form > div { position: relative; bottom: 5px; width: 100%; height: 100%; border-radius: 18px; background-color: #f2f3fc; box-sizing: border-box; padding: 0 9px 29px 9px; } .support .support-form > div > div { position: relative; padding: 34px 32px 0 32px; border-radius: 18px; background-color: #ffffff; box-sizing: border-box; } .support .support-form input { display: block; width: 100%; background-color: rgb(250, 251, 255); border: 1px solid rgb(229, 230, 243); border-radius: 8px; padding: 11px 20px; font-family: "Cabin", sans-serif; font-weight: 400; font-style: normal; font-size: 20px; line-height: 30px; letter-spacing: -0.2px; margin-bottom: 34px; box-sizing: border-box; } .support .support-form textarea { display: block; width: 100%; background-color: rgb(250, 251, 255); border: 1px solid rgb(229, 230, 243); border-radius: 8px; padding: 11px 20px; font-family: "Cabin", sans-serif; font-weight: 400; font-style: normal; font-size: 20px; line-height: 30px; letter-spacing: -0.2px; margin-bottom: 34px; box-sizing: border-box; } .support .support-form .support-form_tabs { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; } @media (max-width: 1200px) { .support .support-form .support-form_tabs { flex-direction: column; align-items: flex-start; } } .support .support-form .support-form_tabs li { position: relative; display: flex; font-size: 24px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; color: #5c6ba1; text-transform: uppercase; line-height: 30px; cursor: pointer; } @media (max-width: 1560px) { .support .support-form .support-form_tabs li { font-size: 18px; line-height: 20px; } } @media (max-width: 1200px) { .support .support-form .support-form_tabs li { margin-top: 17px; } } .support .support-form .support-form_tabs li.active, .support .support-form .support-form_tabs li:hover { color: rgb(143, 52, 153); } .support .support-form .support-form_tabs li.active.icon-envelope::before, .support .support-form .support-form_tabs li:hover.icon-envelope::before { background-image: url("../images/support/support_icons_envelope_active.png"); } .support .support-form .support-form_tabs li.active.icon-email::before, .support .support-form .support-form_tabs li:hover.icon-email::before { background-image: url("../images/support/support_icons_email_active.png"); } .support .support-form .support-form_tabs li.active.icon-chat::before, .support .support-form .support-form_tabs li:hover.icon-chat::before { background-image: url("../images/support/support_icons_chat_active.png"); } .support .support-form .support-form_tabs li.active::after { content: ""; display: block; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background: rgb(190, 57, 210); background: linear-gradient(90deg, rgb(190, 57, 210) 0%, rgb(249, 78, 127) 100%); } .support .support-form .support-form_tabs li::before { content: ""; display: inline-block; width: 33px; height: 33px; background-position: center left; background-repeat: no-repeat; margin-right: 12px; } @media (min-width: 1200px) and (max-width: 1560px) { .support .support-form .support-form_tabs li::before { width: 20px; height: 20px; background-size: 20px auto; } } .support .support-form .support-form_tabs li.icon-envelope::before { background-image: url("../images/support/support_icons_envelope.png"); } .support .support-form .support-form_tabs li.icon-email::before { background-image: url("../images/support/support_icons_email.png"); } .support .support-form .support-form_tabs li.icon-chat::before { background-image: url("../images/support/support_icons_chat.png"); } .support .support-form .support-form_tabs li a { color: inherit; } .support-btn { display: inline-block; width: 162px; height: 91px; margin-left: -19px; background: url("../images/support/support_btn.png") no-repeat center; color: #ffffff; font-size: 24px; line-height: 1; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; text-decoration: none; text-align: center; padding-top: 10px; box-sizing: border-box; } .text-right .support-btn { margin-left: 0; margin-right: -19px; } .terms .page-header { display: flex; flex-direction: column; justify-content: center; padding: 63px 118px; background: url("../images/faq/faq_bg-1.jpg") no-repeat center; background-size: cover; } @media (max-width: 768px) { .terms .page-header { padding: 63px 59px; } } .terms .page-header h1 { color: #ffffff; font-size: 50px; margin: 0; line-height: 1; } .terms .page-content { padding: 63px 118px; font-size: 20px; line-height: 30px; color: #24305b; letter-spacing: -0.01px; font-family: "Cabin", sans-serif; font-weight: 400; font-style: normal; } @media (max-width: 768px) { .terms .page-content { padding: 63px 59px; } } .terms .page-content .lead { color: #5c6ba1; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; font-size: 21px; line-height: 30px; letter-spacing: -0.015px; } .terms .page-content h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; font-size: 40px; line-height: 30px; letter-spacing: -0.04px; position: relative; } .terms .page-content h2:after { position: absolute; top: 0; left: 0; background-image: linear-gradient(to bottom, #cd2f86 41%, #573681 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; content: attr(data-content); } .terms .page-content .divider { margin: 30px 0; } footer .copyright { max-width: 1630px; margin: 32px auto 0 auto; box-sizing: border-box; color: rgba(255, 255, 255, 0.5); font-weight: 400; font-size: 14px; } @media (min-width: 1440px) { footer .copyright { padding-left: 13%; } } .footer_container { padding-top: 44px; } .signup-benefits__title { min-height: unset; padding-top: 15px; padding-bottom: 15px; } .cc-selector .custom-input-field { width: 85px; height: 45px; display: inline-block; position: relative; top: 0; margin-left: 3px; padding: 3px 0; } .cc-selector .custom-input-field input { padding: 3px 24px; } @media (max-width: 1200px) { .cc-selector .custom-input-field { width: 105px; } } .cc-selector .custom-input-field--reactive { width: auto; padding: 0; } .cc-selector .custom-input-field--reactive input { width: 9ch; min-width: 9ch; max-width: 14ch; padding-left: 3ch; padding-right: 3ch; line-height: 35px; text-align: left; } .h_user { position: relative; z-index: 21; display: flex; align-items: center; } .h_user .user_fone { margin-right: 10px; } .balance-content { z-index: 22; } @media (max-width: 768px) { .balance-content { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); } } .users { height: 100vh; } .user-current { background: rgb(255, 243, 88); background: linear-gradient(270deg, rgb(255, 243, 88) 0%, rgb(255, 201, 85) 100%); } .bonus .bonus-message { font-size: 18px; color: #ffcbcb; margin: 0 0 0 0; } .bonus + .bonus { margin-top: 22px; } .bonus + .bonus { z-index: 4; } .bonus + .bonus + .bonus { z-index: 3; } .bonus + .bonus + .bonus + .bonus { z-index: 2; } .bonus + .bonus + .bonus + .bonus + .bonus { z-index: 1; } .notification-bonus, .notification-default { padding: 0; } .notification-bonus br, .notification-default br { display: unset; } .notification-bonus .bonus-title, .notification-default .bonus-title { margin: 0; /*padding: 30px 20px 30px 68px; font-size: 30px;*/ padding: 30px 10px 30px 50px; font-size: 28px; line-height: 1; text-align: left; /*background: url('../images/bonus-letter.png') no-repeat 30px center;*/ background: url("../images/bonus-letter.png") no-repeat 15px center; } .notification-bonus .bonus-title::after, .notification-default .bonus-title::after { display: none; } .notification-bonus .bonus-message, .notification-default .bonus-message { display: flex; flex-direction: column; align-items: center; background: rgb(87, 29, 131); background: linear-gradient(180deg, rgb(87, 29, 131) 0%, rgb(72, 21, 113) 100%); padding: 15px; text-align: center; font-size: 20px; } .notification-bonus .bonus-message strong, .notification-default .bonus-message strong { color: #ffd990; } .notification-bonus .bonus-message.\--no-footer, .notification-default .bonus-message.\--no-footer { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .notification-bonus .bonus-footer, .notification-default .bonus-footer { text-align: center; background: url("../images/bonus-footer-btn-bg.png") no-repeat center -155px; overflow: hidden; max-height: 90px; } .notification-bonus .bonus-footer a, .notification-default .bonus-footer a { display: inline-block; width: 168px; height: 80px; background: url(/images/orange-btn.png) no-repeat center top; line-height: 50px; color: #ffffff; font-size: 21px; margin-top: 20px; } .notification-bonus .text-gradient, .notification-default .text-gradient { display: inline-block; font-size: 55px; font-weight: 800; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 2; } .notification-bonus .text-gradient::before, .notification-default .text-gradient::before { content: attr(data-text); background: #430840; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: #430840; position: absolute; top: 0; left: 0; text-shadow: 0px 7px 6px rgba(0, 0, 0, 0.6); } .notification-bonus .text-gradient::after, .notification-default .text-gradient::after { content: attr(data-text); background: rgb(48, 236, 234); background: linear-gradient(0deg, rgb(48, 236, 234) 0%, rgb(89, 255, 169) 76%, rgb(129, 255, 190) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; top: 0; left: 0; } @media (max-width: 768px) { .notification-bonus .bonus-title, .notification-default .bonus-title { font-size: 24px; padding: 20px 20px 20px 68px; } .notification-bonus .text-gradient, .notification-default .text-gradient { font-size: 40px; } } .notification-old { /* .bonus-title { margin-bottom: 0; } .bonus-message, .bonus-footer { display: none; } &:hover { .bonus-message, .bonus-footer { display: block; } } */ } .rewards-btn img { position: relative; top: -2px; } .rewards .notification-bonus .bonus-title { /*padding-left: 58px;*/ padding-left: 43px; background-image: url("../images/bonus-gift.png"); /*font-size: 28px;*/ font-size: 27px; text-align: center; } @media (max-width: 768px) { .rewards .notification-bonus .bonus-title { font-size: 24px; } } .rewards .notification-bonus .bonus-message { background: #273179; background: linear-gradient(180deg, #273179 0%, #222167 100%); } .rewards .notification-bonus .bonus-footer { background-image: url("../images/bonus-footer-btn-bg-blue.png"); } .rewards .bonus:after { background: #3c4a95; border: 2px solid #3c4a95; } .rewards .bonus .bonus-message { color: #ccecff; } .bonus.notification-deposit .bonus-title { background-image: url("../images/deposit.svg"); background-size: 25px auto; } .bonus.notification-deposit:after { background: #d23f71; background: linear-gradient(90deg, #d23f71, #7d106a); border: 2px solid #fff358; } .bonus.notification-deposit .bonus-message { background: #7d106a; background: linear-gradient(45deg, #d53a84 0%, #7d106a 100%); margin-left: 2px; } .bonus.notification-deposit .text-gradient::after { background: #ffa600; background: linear-gradient(0deg, #ffce15 0%, #ffa600 76%, #ffce15 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .notification-default .bonus-message { text-align: justify; } .notification-default .bonus-message { display: block; } .notification-default .bonus-message a { color: #87d7fd; text-decoration: underline; } .notification-default .bonus-message a:hover { text-decoration: none; } .text-justify { text-align: justify; } @-webkit-keyframes arrows { 0% { opacity: 0; background-position: center top; background-size: 0 auto; } 10% { opacity: 0; } 50% { opacity: 1; background-size: 20% auto; } 90% { opacity: 0; } 100% { opacity: 0; background-position: center bottom; background-size: 0 auto; } } @keyframes arrows { 0% { opacity: 0; background-position: center top; background-size: 0 auto; } 10% { opacity: 0; } 50% { opacity: 1; background-size: 20% auto; } 90% { opacity: 0; } 100% { opacity: 0; background-position: center bottom; background-size: 0 auto; } } .notification-old .arrow { display: block; opacity: 0; transition: all 0.4s ease; line-height: 0; font-size: 0; color: transparent; margin-left: auto; margin-right: auto; background-size: 0 auto; -webkit-animation: arrows 1.5s 0s infinite normal ease forwards; animation: arrows 1.5s 0s infinite normal ease forwards; position: absolute; width: 150px; height: 50px; bottom: -5px; left: 50%; margin-left: -75px; } .notification-old .arrow:before, .notification-old .arrow:after { content: " "; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; background: url("../images/notification-arrow.svg") no-repeat center top; background-size: 100% auto; } .notification-old .arrow:before { -webkit-animation: arrows 1.5s 0.25s infinite normal ease forwards; animation: arrows 1.5s 0.25s infinite normal ease forwards; } .notification-old .arrow:after { -webkit-animation: arrows 1.5s 0.5s infinite normal ease forwards; animation: arrows 1.5s 0.5s infinite normal ease forwards; } .notification-old:hover .arrow { display: none; } .header-right { display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 992px) { .header-right { align-items: flex-end; } .header-right .log-sign { padding-top: 0; } .header-right .log-sign a { width: 80px; font-size: 18px; } } @media (min-width: 992px) { .header-right { height: 69px; } } .header-right .right-top-btns { margin-left: 20px; } .main-baner .header-logo { display: none; } .main-baner .header-logo a span { display: none; } @media (max-width: 992px) { .main-baner .header-logo { display: block; } .main-baner .header-logo img { height: 40px; } } .playing .left_bar { z-index: 102; } @media (max-width: 992px) { .playing .left_bar { position: fixed; } } .playing .left_bar .logo img { opacity: 0; } .playing .main-baner { position: fixed; top: 0; left: 0; width: 100%; z-index: 101; background-size: cover; } .playing .main-baner .header-logo { display: block; margin-left: 20px; } .playing .main-baner .header-logo img { height: 60px; } @media (max-width: 768px) { .playing .main-baner .header-logo { margin-left: 0; } .playing .main-baner .header-logo img { height: 40px; } } @media screen and (max-width: 992px) and (orientation: landscape) { .playing .main-baner { display: none; } } @media screen and (max-width: 992px) { .playing .main-baner .right-top-btns > a:last-child { display: inline-block; margin-left: 12px; } } .playing .header { justify-content: space-between; } @media (max-width: 768px) { .playing .header { justify-content: space-around; } } .playing .header .balance { opacity: 0; } @media (min-width: 992px) { .playing .header .level { display: block; } } @media (max-width: 1223px) { .playing .header .balance { display: none; } } .playing .header .level.default:before, .playing .header .level.default:after { display: none; } .container { box-sizing: border-box; width: 100%; padding-right: 30px; padding-left: 30px; margin-right: auto; margin-left: auto; } @media (max-width: 768px) { .container { padding-right: 15px; padding-left: 15px; } } .align-items-center { align-items: center; } .h2 { position: relative; margin: 0 0 24px 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; font-size: 48px; line-height: 1; letter-spacing: -0.4px; color: #573681; } .h2::after { position: absolute; top: 0; left: 0; background-image: linear-gradient(to bottom, #cd2f86 10%, #423780 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; content: attr(data-content); } @media (max-width: 375px) { .h2 { font-size: 30px; } } @media (min-width: 375px) and (max-width: 768px) { .h2 { font-size: 38px; } } .cursor-pointer { cursor: pointer; } .d-flex { display: flex; } .blue-link { display: inline-block; border-bottom: 2px solid #87d7fd; padding-bottom: 1px; color: #87d7fd; transition: border-color 0.1s ease; } .blue-link:hover { color: #87d7fd; border-bottom-color: transparent; } .transparent { opacity: 0; } .position-relative { position: relative; } .wheel_wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center; color: #ffffff; z-index: 101; overflow-x: hidden; overflow-y: hidden; } .wheel_wrapper .close-modal-btn { right: 20px; top: 82px; z-index: 100; } .wheel_outside { position: fixed; width: 100%; height: 100%; z-index: 1; background: rgb(61, 8, 98); background: linear-gradient(181deg, rgb(61, 8, 98) 0%, rgb(207, 39, 129) 100%); opacity: 0.85; transition: opacity 1s ease-in; } .wheel_outside::before { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, #3d0862 0%, #3d0862 50%, #3d0862 75%, #cf2781 100%); opacity: 0; transition: opacity 1s ease-in; } #wheel_spin_btn { display: none; position: absolute; top: 20%; left: 80%; z-index: 100; cursor: pointer; transform: scale(0.8); transition: transform 0.1s ease-in-out; } #wheel_spin_btn #spin_btn_bg { transform-origin: 97px 91.5px; } #wheel_spin_btn:hover { transform: scale(1); } #wheel_spin_btn:hover #spin_btn_bg { -webkit-animation: rotate 0.8s linear infinite; animation: rotate 0.8s linear infinite; } @media (min-width: 992px) { #wheel_spin_btn { display: block; } } #wheel { width: 100%; height: auto; max-width: 1164px; max-height: calc(100vh + 71.5px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); z-index: 2; transition: transform 0.5s ease-in-out; } #wheel.loaded { transform: translate(-50%, -50%) scale(1); } @media (min-width: 768px) { #wheel { width: 100%; } } @media (min-width: 992px) { #wheel { width: 100%; margin-top: 50px; } } @media (min-width: 1200px) { #wheel { width: 100%; margin-top: 50px; } } @media (min-width: 1400px) { #wheel { width: 70%; margin-top: 50px; } } @media (max-height: 800px) { #wheel { margin-top: 40px; } } .wheel_text { font-family: "Exo 2", sans-serif; font-weight: 800; text-transform: uppercase; font-size: 20px; font-style: normal; letter-spacing: -0.01em; fill: #ffffff; } @media (max-width: 768px) { .wheel_text textPath { text-shadow: none !important; } } .whel_text--red { text-shadow: -2px -2px 0 #bc0801, 2px -2px 0 #bc0801, -2px 2px 0 #bc0801, 2px 2px 0 #bc0801; } .whel_text--orange { text-shadow: -2px -2px 0 #d33c01, 2px -2px 0 #d33c01, -2px 2px 0 #d33c01, 2px 2px 0 #d33c01; } .whel_text--pink { text-shadow: -2px -2px 0 #aa025a, 2px -2px 0 #aa025a, -2px 2px 0 #aa025a, 2px 2px 0 #aa025a; } .whel_text--blue { text-shadow: -2px -2px 0 #0c54d7, 2px -2px 0 #0c54d7, -2px 2px 0 #0c54d7, 2px 2px 0 #0c54d7; } .whel_text--green { text-shadow: -2px -2px 0 #00870e, 2px -2px 0 #00870e, -2px 2px 0 #00870e, 2px 2px 0 #00870e; } .whel_text--purple { text-shadow: -2px -2px 0 #6207af, 2px -2px 0 #6207af, -2px 2px 0 #6207af, 2px 2px 0 #6207af; } #wheel_button { transform: scale(1); transition: transform 0.1s ease-in-out; } #wheel_button:hover { transform: scale(1.1); } .wheel_title { position: absolute; top: 0; left: 0; padding: 5%; z-index: 2; text-align: center; } .wheel_title span { background: linear-gradient(to top, #faa914 0%, #ffdf5f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #faa914; font-size: 55px; font-weight: 800; line-height: 40px; letter-spacing: 0.48px; } @media (max-width: 992px) { .wheel_title span { font-size: 40px; line-height: 30px; } } .wheel_won #wheel { transition: all 0.5s ease-out; transform: scale(0.8); } .wheel_won .wheel_winscreen_border { transform: scale(1); } .wheel_won .wheel_outside { opacity: 0.9; } .wheel_won .wheel_outside::before { opacity: 1; } .wheel_winscreen_border, .wheel_winscreen_border * { box-sizing: border-box; } .wheel_winscreen_border { width: 100%; max-width: 880px; min-height: 700px; border-radius: 54px; padding: 20px; background-color: rgba(255, 255, 255, 0.55); position: relative; z-index: 2; box-shadow: 0 17px 38px 0 rgba(0, 0, 0, 0.3); transform: scale(0); transition: all 0.5s ease-in 0.5s; } .wheel_winscreen { width: 100%; height: 100%; min-height: 660px; padding: 10px 40px 40px 40px; border-radius: 40px; text-align: center; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.65); background: url("../images/pattern.png") left top 18px/62px auto repeat, url("../images/wheel/modal-bg.jpg") center top/cover no-repeat; background-blend-mode: color-burn; border-bottom: solid 5px #42155d; border-top: solid 2px #de91a3; } .wheel_winscreen__header { display: flex; align-items: center; justify-content: center; height: 174px; } .wheel_winscreen__header img { -webkit-animation: heartBeat; animation: heartBeat; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .wheel_winscreen__body h2 { font-size: 34px; font-weight: 600; } @media (max-width: 768px) { .wheel_winscreen__body h2 { font-size: 24px; } } .wheel_winscreen__reward_wrapper { position: relative; width: 100%; max-width: 545px; min-height: 159px; margin: 0 auto; } .wheel_winscreen__reward_wrapper::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 30px; -webkit-animation: pulse ease-in-out 1s infinite; animation: pulse ease-in-out 1s infinite; } .wheel_winscreen__reward { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 159px; position: relative; background-color: rgba(41, 8, 75, 0.3); border-radius: 30px; box-shadow: 0px 2px 0px 0px rgba(255, 186, 222, 0.06), inset 0px 5px 0px 0px rgba(13, 0, 47, 0.07), inset 0px 0px 95px 0px rgba(31, 0, 75, 0.32); overflow: hidden; } .wheel_winscreen__reward .name { font-family: "Exo 2", sans-serif; font-size: 29px; font-style: normal; text-transform: uppercase; font-weight: 800; text-shadow: -4px 0 #54105d, 0 4px #54105d, 4px 0 #54105d, 0 -4px #54105d; margin-right: 20px; -webkit-animation: lightSpeedInLeft; animation: lightSpeedInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .wheel_winscreen__reward .name span { display: block; font-size: 18px; } @media (max-width: 992px) { .wheel_winscreen__reward .name { margin: 15px 0 0 0; } } .wheel_winscreen__reward .icon { -webkit-animation: bounce-in-top; animation: bounce-in-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media (max-width: 992px) { .wheel_winscreen__reward { flex-direction: column; } } @-webkit-keyframes pulse { 0% { box-shadow: 0 0 15px 3px #ff4ecb; } 50% { box-shadow: 0 0 5px 3px #ff4ecb; } 100% { box-shadow: 0 0 15px 3px #ff4ecb; } } @keyframes pulse { 0% { box-shadow: 0 0 15px 3px #ff4ecb; } 50% { box-shadow: 0 0 5px 3px #ff4ecb; } 100% { box-shadow: 0 0 15px 3px #ff4ecb; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes bounce-in-top { 0% { transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-top { 0% { transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .fireworks-container > canvas { position: absolute; z-index: 1; } .wheel_winscreen__btn { display: inline-block; width: 234px; height: 166px; background: url("../images/wheel/btn.png") no-repeat center top; line-height: 166px; color: #ffffff; font-size: 35px; -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; -webkit-animation-delay: 2s; animation-delay: 2s; } @media (max-width: 992px) { .wheel_winscreen__btn { width: 150px; height: 107px; background-size: contain; line-height: 107px; font-size: 20px; } } .wheel_winscreen_border.screen_type_2 { min-height: 350px; transition: none; } .wheel_winscreen_border.screen_type_2 .wheel_winscreen { min-height: 310px; padding: 20px 40px 0 40px; background-position: center; } .wheel_winscreen_border.screen_type_2 .wheel_winscreen h2 { margin-bottom: 0; } .wheel_winscreen_border.screen_type_2 .wheel_winscreen__btn { -webkit-animation: none; animation: none; -webkit-animation-delay: 0ms; animation-delay: 0ms; } .games-toolbar, .games-toolbar * { box-sizing: border-box; } .games-toolbar { margin: 47px 0; } .games-toolbar__categories { width: 100%; display: flex; justify-content: space-around; padding: 0; margin: 0 0 25px 0; position: relative; z-index: 1; } .games-toolbar__categories::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #f7f7f7; border-radius: 20px; transform: skewX(-6deg); z-index: -1; } @media (max-width: 768px) { .games-toolbar__categories::before { transform: none; } } @media (max-width: 768px) { .games-toolbar__categories { flex-wrap: wrap; padding: 14px 14px 0 14px; } } .games-toolbar-categories__item { width: 10%; margin-top: -14px; padding: 0 0 20px 0; position: relative; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 27px; color: #24305b; text-align: center; text-transform: uppercase; cursor: pointer; z-index: 2; } @media (max-width: 768px) { .games-toolbar-categories__item { width: 50%; flex-basis: 0; flex-grow: 1; flex: 0 0 50%; padding: 0 0 10px 0; margin-top: 0; margin-bottom: 14px; display: flex; align-items: center; justify-content: flex-start; } .games-toolbar-categories__item:first-child { margin-top: 10px; } } .games-toolbar-categories__item::before { content: ""; display: block; width: 100%; height: 60px; background-image: var(--toolbar-category-icon, none); background-position: center top; background-repeat: no-repeat; } @media (max-width: 768px) { .games-toolbar-categories__item::before { width: 60px; height: 30px; background-size: 36.5px auto; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-popular::before { background-image: url("../images/games_toolbar/icons/popular.png"); } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-popular::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-new::before { background-image: url("../images/games_toolbar/icons/new.png"); } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-new::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-casino::before { background-image: url("../images/games_toolbar/icons/casino.png"); } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-casino::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-slots::before { min-width: 63px; background-image: url("../images/games_toolbar/icons/slots.png"); margin: -7px 0 7px 0; } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-slots::before { min-width: unset; margin: 0 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-table::before { background-image: url("../images/games_toolbar/icons/table.png"); margin: 5px 0 -5px 0; } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-table::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-jackpots::before { background-image: url("../images/games_toolbar/icons/jackpots.png"); } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-jackpots::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-megaways::before { background-image: url("../images/games_toolbar/icons/megaways.png"); } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-megaways::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-other::before { background-image: url("../images/games_toolbar/icons/other.png"); margin: 5px 0 -5px 0; } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-other::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-halloween::before { background-image: url("../images/games_toolbar/icons/halloween.png"); } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-halloween::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-providers::before { background-image: url("../images/games_toolbar/icons/providers.png"); margin: 4px 0 -4px 0; } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-providers::before { margin: 7px 0 0 0; } } .games-toolbar-categories__item.games-toolbar-categories__item_icon-search::before { background-image: url("../images/games_toolbar/icons/search.png"); } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_icon-search::before { margin: 7px 0 0 0; } } @media (hover: hover) { .games-toolbar-categories__item:hover { color: #ffffff; } .games-toolbar-categories__item:hover::before { background-position: bottom center; } .games-toolbar-categories__item:hover::after { content: ""; display: block; width: 100%; height: 100%; box-sizing: content-box; padding: 10px 0 0 0; position: absolute; bottom: 0; left: 50%; background: rgb(255, 166, 40); background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); box-shadow: 0px 5px 0px 0px rgb(181, 15, 89); border-radius: 10px; transform: translateX(-50%) skewX(-6deg); z-index: -1; } } @media (hover: hover) and (max-width: 768px) { .games-toolbar-categories__item:hover::after { transform: translateX(-50%); } } .games-toolbar-categories__item.games-toolbar-categories__item_active { color: #ffffff; } .games-toolbar-categories__item.games-toolbar-categories__item_active::before { background-position: bottom center; } .games-toolbar-categories__item.games-toolbar-categories__item_active::after { content: ""; display: block; width: 100%; height: 100%; box-sizing: content-box; padding: 10px 0 0 0; position: absolute; bottom: 0; left: 50%; background: rgb(255, 166, 40); background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); box-shadow: 0px 5px 0px 0px rgb(181, 15, 89); border-radius: 10px; transform: translateX(-50%) skewX(-6deg); z-index: -1; } @media (max-width: 768px) { .games-toolbar-categories__item.games-toolbar-categories__item_active::after { transform: translateX(-50%); } } @media (max-width: 1440px) { .games-toolbar-categories__item { font-size: 22px; } } @media (max-width: 1200px) { .games-toolbar-categories__item { font-size: 18px; } } @media (max-width: 768px) { .games-toolbar-categories__item { font-size: 16px; } } .games-toolbar__divider { width: 5%; position: relative; } .games-toolbar__divider::before { content: ""; width: 2px; height: 60%; position: absolute; top: 50%; left: 50%; background-color: #d2d3dc; transform: translate(-50%, -50%) skewX(-20deg); } @media (max-width: 768px) { .games-toolbar__divider { display: none; } } .games-toolbar__search { position: relative; } .games-toolbar__search input { width: 100%; min-height: 51px; padding: 0 20px 0 58px; color: #9da3b7; border: 3px solid #eeeeee; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 25px; background: url("../images/games_toolbar/search.png") no-repeat 20px center; border-radius: 28.5px; } .games-toolbar__search.games-toolbar__search_active input { background: none; } .games-toolbar__search .games-toolbar__search-cancel { width: 21px; height: 22px; position: absolute; top: 50%; left: 20px; margin-top: -11px; background: url("../images/games_toolbar/cancel.png") no-repeat center; cursor: pointer; } .games-toolbar__search-input::-moz-placeholder { font-weight: 600; color: #9da3b7; } .games-toolbar__search-input:-ms-input-placeholder { font-weight: 600; color: #9da3b7; } .games-toolbar__search-input::-ms-input-placeholder { font-weight: 600; color: #9da3b7; } .games-toolbar__search-input::placeholder { font-weight: 600; color: #9da3b7; } .games-toolbar__providers { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 180px); justify-content: space-between; grid-gap: 10px; padding: 0 20px; margin-top: 25px; } .games-toolbar-providers__item { position: relative; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 19px; color: #24305b; cursor: pointer; } .games-toolbar-providers__item::before { content: ""; display: inline-block; width: 23px; height: 16px; margin-right: 10px; background: url("../images/games_toolbar/joystick-active.png") no-repeat center; background-size: 100%; } .games-toolbar-providers__item:hover, .games-toolbar-providers__item.games-toolbar-providers__item_active { color: #ec3d67; } @media (max-width: 375px) { .categories__item--fixed-columns .game:last-child { display: none; } } @media (min-width: 1440px) { .categories__item--fixed-columns .game:last-child { display: none; } } .categories__item + .categories__item { margin-top: 46px; } .categories__item-name { display: flex; align-items: center; justify-content: space-between; } .categories__view-more { display: inline-block; padding: 7px 38px 14px 20px; background: none; border: none; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 21px; color: #23bdf1; position: relative; text-align: center; line-height: 1; cursor: pointer; z-index: 1; } .categories__view-more::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; border: 3px solid #b6edff; border-radius: 10px; transform: skewX(-6deg); transition: background-color 0.2s ease-in; z-index: -1; } .categories__view-more::after { content: ""; display: block; width: 8px; height: 11px; position: absolute; top: 50%; right: 20px; margin-top: -6.5px; background: url("../images/games_toolbar/arrow_right.png"); z-index: -1; } .categories__view-more:hover { color: #423780; } .categories__view-more:hover::before { background-color: #b6edff; } @media (max-width: 992px) { .categories__view-more { font-size: 18px; padding: 4px 24px 10px 10px; } .categories__view-more::after { right: 10px; } } .categories__no-games { font-size: 24px; font-weight: 600; color: #24305b; padding-bottom: 30px; } .slots-slider { position: relative; margin-bottom: 30px; } .slots-slider__surface { position: relative; padding: 18px 18px 18px; z-index: 1; transition: padding 0.25s ease-in; } .slots-slider__surface::before { content: ""; position: absolute; inset: 0; border: 3px solid #b6edff; border-radius: 26px; transform: skewX(-6deg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%); /* background-color: #f7f7f7; */ pointer-events: none; z-index: -1; transition: all 0.2s ease-in; } .slots-slider__surface::after { content: ""; position: absolute; inset: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); transform: skewX(-6deg); pointer-events: none; z-index: -2; } .slots-slider__surface_expanded { padding: 24px 24px 24px; } .slots-slider__surface_expanded::before { transform: none; } .slots-slider__title { position: absolute; top: -18px; right: 36px; display: inline-flex; align-items: center; padding: 5px 22px 7px; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 18px; letter-spacing: 0.4px; color: #ffffff; background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); border-radius: 12px; transform: skewX(-6deg); box-shadow: 0 6px 10px rgba(215, 35, 132, 0.3); text-transform: uppercase; white-space: nowrap; } .slots-slider__body { position: relative; display: flex; align-items: center; gap: 20px; min-height: 110px; } .slots-slider__surface_expanded .slots-slider__body { flex-direction: column; align-items: stretch; gap: 30px; min-height: 0; } .slots-slider__viewport { flex: 1; overflow-x: auto; overflow-y: visible; padding: 17px 4px 17px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .slots-slider__viewport::-webkit-scrollbar { display: none; } .slots-slider__list { display: flex; align-items: stretch; gap: 14px; -webkit-animation: slots-slider-fade-in 0.25s ease; animation: slots-slider-fade-in 0.25s ease; } .slots-slider__list_expanded { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; -webkit-animation: slots-slider-fade-in 0.25s ease; animation: slots-slider-fade-in 0.25s ease; } .slots-slider__item { display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 180px; padding: 8px 22px 8px 12px; border: 2px solid #b6edff; border-radius: 28px; /* background-color: rgba(255, 255, 255, 0.92); */ background-color: transparent; box-shadow: 0 4px 8px rgba(36, 48, 91, 0.08); color: #24305b; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 20px; line-height: 1.2; text-align: left; white-space: normal; cursor: pointer; transition: background-color 0.2s ease-in, border-color 0.2s ease-in, color 0.2s ease-in, box-shadow 0.2s ease-in; } @media (hover: hover) { .slots-slider__item:hover { border-color: #ff2865; color: #ec3d67; } } .slots-slider__item_active { background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); border-color: transparent; box-shadow: 0 8px 16px rgba(215, 35, 132, 0.35); color: #ffffff; } .slots-slider__item_active .slots-slider__name { color: #ffffff; } .slots-slider__item_active .slots-slider__image { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.2); } .slots-slider__image { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 16px; /* background: #f2f4ff; border: 2px solid #ebeefe; */ overflow: hidden; flex-shrink: 0; } .slots-slider__image svg { width: auto; height: calc(100% - 8px); } .slots-slider__item_active .slots-slider__image svg { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .slots-slider__image img { max-width: 65px; } .slots-slider__name { display: inline-block; max-width: 190px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .slots-slider__list_expanded .slots-slider__item { min-width: 0; width: 100%; white-space: normal; } .slots-slider__list_expanded .slots-slider__name { max-width: none; } .slots-slider__nav { width: 44px; height: 44px; border: none; border-radius: 50%; background: linear-gradient(181deg, #00BBFF 0%, #9B37FF 100%); box-shadow: 0 6px 12px rgba(155, 55, 255, 0.35); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 2; transition: transform 0.2s ease-in, opacity 0.2s ease-in; } .slots-slider__nav::before { content: ""; display: block; width: 12px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 1l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; } .slots-slider__nav_prev::before { transform: rotate(180deg); } .slots-slider__nav:disabled { opacity: 0.35; cursor: default; box-shadow: none; } .slots-slider__fade { position: absolute; top: 24px; bottom: 24px; width: 64px; height: 70px; pointer-events: none; z-index: 1; } .slots-slider__fade_left { left: 24px; /* background: linear-gradient(to right, #f7f7f7 70%, rgba(247,247,247,0)); */ background: linear-gradient(to right, #ffffff 70%, rgba(255, 255, 255, 0)); } .slots-slider__fade_right { right: 24px; /* background: linear-gradient(to left, #f7f7f7 70%, rgba(247,247,247,0)); */ background: linear-gradient(to left, #ffffff 70%, rgba(255, 255, 255, 0)); } .slots-slider__surface_expanded .slots-slider__fade { display: none; } .slots-slider__toggle { position: absolute; bottom: -15px; right: 36px; display: inline-flex; align-items: center; padding: 8px 40px 10px 22px; background: none; border: none; cursor: pointer; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 16px; line-height: 1; color: #23bdf1; background-color: #ffffff; text-transform: uppercase; z-index: 2; } .slots-slider__toggle::before { content: ""; position: absolute; inset: 0; border: 3px solid #b6edff; border-radius: 14px; transform: skewX(-6deg); transition: background-color 0.2s ease-in; z-index: -1; } .slots-slider__toggle::after { content: ""; position: absolute; top: 50%; right: 18px; width: 8px; height: 11px; margin-top: -5.5px; background: url("../images/games_toolbar/arrow_right.png") no-repeat center; background-size: contain; transform: rotate(90deg); transition: transform 0.2s ease-in; } @media (hover: hover) { .slots-slider__toggle:hover::before { background-color: rgba(182, 237, 255, 0.25); } } .slots-slider__toggle_active::after { transform: rotate(-90deg); } @media (max-width: 1400px) { .slots-slider__item { min-width: 170px; font-size: 17px; } } @media (max-width: 1200px) { .slots-slider__surface { padding: 24px 28px 72px; } .slots-slider__toggle { right: 28px; } .slots-slider__title { right: 28px; } } @media (max-width: 992px) { .slots-slider__surface { padding: 20px 24px 34px; } .slots-slider__surface::before, .slots-slider__surface::after { transform: none; } .slots-slider__title { right: 24px; transform: none; } .slots-slider__toggle::before { transform: none; } .slots-slider__toggle { right: 20px; } .slots-slider__nav { display: none; } .slots-slider__fade { display: none; } .slots-slider__item { min-width: 180px; } } @media (max-width: 768px) { .slots-slider__body { gap: 16px; } .slots-slider__list { gap: 12px; } .slots-slider__item { min-width: 160px; font-size: 14px; padding-right: 20px; } .slots-slider__image { width: 34px; height: 34px; border-radius: 14px; } .slots-slider__name { max-width: 130px; } .slots-slider__list_expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .slots-slider__toggle { font-size: 16px; } } @-webkit-keyframes slots-slider-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slots-slider-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .games-toolbar__search { margin-bottom: 30px; } .lang_en_IN .main-page-banner-top { font-size: 40px; } .lang_en_CA .main-page-banner-top { font-size: 43px; } .lang_de_DEFAULT .main-page-banner-btn a b { font-size: 52px; } @media (max-width: 768px) { .lang_de_DEFAULT .main-page-banner-btn a b { font-size: 35px; } } .lang_de_DEFAULT .main-page-banner-btn a span { font-size: 21px; } @media (max-width: 768px) { .lang_de_DEFAULT .main-page-banner-btn a span { font-size: 18px; } } .country_flag { display: inline-block; width: 25px; height: 25px; background-size: 25px 25px; background-repeat: no-repeat; vertical-align: middle; margin-right: 10px; } .country_flag.country_flag--ca { background-image: url("../images/flags/canada.svg"); } .country_flag.country_flag--in { background-image: url("../images/flags/india.svg"); } .country_flag.country_flag--de { background-image: url("../images/flags/germany.svg"); border-radius: 50%; background-size: auto 25px; } .country_flag.country_flag--default { background-image: url("../images/flags/default.svg"); } .language_footer .vs__dropdown-toggle { padding-left: 10px; min-width: 185px; } .language_footer .vs--disabled .vs__dropdown-toggle, .language_footer .vs--disabled .vs__clear, .language_footer .vs--disabled .vs__search, .language_footer .vs--disabled .vs__selected, .language_footer .vs--disabled .vs__open-indicator { background-color: transparent; } .dashboard-box { width: 100%; height: -webkit-min-content; height: -moz-min-content; height: min-content; } @media screen and (min-width: 1200px) { .dashboard-box { margin-left: 45px; } } .your-bonuses.dashboard-box { overflow: unset; } .page-content ul:not(.faq-ul):not(.faq-subul):not(.support-form_tabs) { list-style: none; list-style-position: inside; text-indent: -10px; margin-left: 20px; margin-bottom: 20px; } .page-content ul:not(.faq-ul):not(.faq-subul):not(.support-form_tabs) li::before { display: inline-block; width: 10px; content: "\2022"; font-size: 130%; line-height: 0; margin: 0 0.3rem 0 -0.25rem; position: relative; top: 0.08rem; color: #cd2f86; } #apg-ef83e30a-4b9f-4b33-be29-e30e68399bf0 { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 32px; } .feed-item--empty { opacity: 0; } .feed-item { transition: all 800ms; } .feed-enter, .feed-leave-to { opacity: 0; transform: translateY(-50px); } .feed-leave-active { position: absolute; } @media (max-width: 1200px) { .buy-crypto .account-summary { display: none; } } .buy-crypto a { display: inline-block; border-bottom: 2px solid #87d7fd; padding-bottom: 1px; color: #87d7fd; transition: border-color 0.1s ease; } .buy-crypto a:hover { color: #87d7fd; border-bottom-color: transparent; } .buy-crypto .your-bonuses-content { padding: 30px; } @media (max-width: 992px) { .buy-crypto .popup-message { font-size: 14px; padding: 15px; } .buy-crypto .popup-message.popup-message--info { background-size: 20px; background-position: 10px 10px; } } .offers-loading { display: flex; justify-content: center; align-items: center; font-weight: 400; } .offers-loading__spinner { width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #8636ff; border-radius: 50%; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; margin-right: 10px; } @-webkit-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .offers-item { display: flex; justify-content: space-between; align-items: center; box-shadow: inset 0px 0px 80px 20px rgba(71, 18, 81, 0.55); border-radius: 10px; padding: 10px 20px; } .offers-item + .offers-item { margin-top: 15px; } .offers-item:hover { box-shadow: inset 0px 0px 80px 20px rgba(71, 18, 81, 0.75); } @media (max-width: 1200px) { .offers-item { flex-direction: column; align-items: flex-start; } } .offers-item__name { font-size: 20px; } .offers-item__name div { font-size: 14px; font-weight: 400; color: #ffd98d; } .offers-item__error { display: inline-block; border: 2px solid #ff4051; color: #ffffff; font-weight: 400; padding: 5px 10px; border-radius: 5px; } @media (max-width: 1200px) { .offers-item__error { font-size: 14px; } } .offers-item__action { display: flex; align-items: center; } @media (max-width: 1200px) { .offers-item__action { width: 100%; justify-content: space-between; margin-top: 10px; } .offers-item__action .plain-button--small { min-width: unset; padding: 5px 10px; font-size: 18px; line-height: 20px; } } .offers-item__action img { display: inline-block; height: 15px; } @media (max-width: 1200px) { .offers-item__action img { margin: 15px 0; height: 10px; } } .offers-item--moonpay .offers-item__action img { height: 20px; } @media (max-width: 1200px) { .offers-item--moonpay .offers-item__action img { height: 15px; } } .offers-item__action button { margin-left: 15px; } @media (max-width: 1200px) { .offers-item__action button { margin-left: 0; } } .offers-cancel { display: flex; justify-content: center; align-items: center; margin-top: 10px; } .cashback-tab .your-bonuses-content { font-weight: 400; } .cashback-tab .your-bonuses-content ol { margin: 10px 15px; } .cashback-tab .your-bonuses-content p { margin-bottom: 9px; } @media (max-width: 1200px) { .cashback-tab .account-summary { display: none; } } .cashback-tab .your-bonuses-content a:not(.cashback-tab__qr-code):not(.plain-button) { display: inline-block; border-bottom: 2px solid #87d7fd; padding-bottom: 1px; color: #87d7fd; transition: border-color 0.1s ease; } .cashback-tab .your-bonuses-content a:not(.cashback-tab__qr-code):not(.plain-button):hover { color: #87d7fd; border-bottom-color: transparent; } .cashback-tab .your-bonuses-content { padding: 30px; } .cashback-tab__content { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } @media (max-width: 1200px) { .cashback-tab__content { flex-direction: column; align-items: flex-start; } .cashback-tab__content > div { order: 2; } } .cashback-tab__qr-code { display: block; padding: 10px 10px 10px 10px; background-color: #ffffff; margin-left: 20px; border-radius: 10px; } @media (max-width: 1200px) { .cashback-tab__qr-code { margin-left: 0; margin-bottom: 20px; order: 1 !important; } } .cashback-tab__footer { display: flex; justify-content: space-between; align-items: center; box-shadow: inset 0px 0px 80px 20px rgba(71, 18, 81, 0.55); border-radius: 10px; padding: 15px; } .cashback-tab__footer > div { display: flex; align-items: center; } @media (max-width: 1200px) { .cashback-tab__footer { flex-direction: column; align-items: flex-start; } .cashback-tab__footer > div + div { margin-top: 10px; } .cashback-tab__footer .plain-button--small { min-width: unset; padding: 5px 10px; font-size: 18px; line-height: 20px; } } .cashback-tab__telegram-logo, .cashback-tab__bot-logo { height: 25px; } .cashback-tab__bot-logo { margin-left: 5px; margin-right: 10px; } .game-page, .game-page * { box-sizing: border-box; } .game-page { padding: 40px 0 0 0; font-family: "Cabin", sans-serif; font-weight: 400; font-style: normal; font-size: 22px; line-height: 36px; letter-spacing: -0.22px; } @media (max-width: 768px) { .game-page { padding: 20px 0; font-size: 18px; line-height: 30px; } } .game-page__header { display: flex; justify-content: space-between; align-items: flex-start; } .game-page__header > div:first-child { width: 100%; margin-right: 100px; } .game-page__header > div:last-child { display: flex; flex-direction: column; justify-content: center; align-items: center; } @media (max-width: 768px) { .game-page__header { flex-direction: column; align-items: flex-start; } .game-page__header > div:first-child { order: 2; } .game-page__header > div:last-child { order: 1; width: 100%; margin-bottom: 20px; } } .game-page__title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 24px 0; } .game-page__title h1 { position: relative; margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-style: italic; font-size: 48px; line-height: 1; letter-spacing: -0.4px; color: #573681; } .game-page__title h1::after { position: absolute; top: 0; left: 0; background-image: linear-gradient(to bottom, #cd2f86 10%, #423780 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; content: attr(data-content); } @media (max-width: 375px) { .game-page__title h1 { font-size: 30px; } } @media (min-width: 375px) and (max-width: 768px) { .game-page__title h1 { font-size: 38px; } } @media (max-width: 1200px) { .game-page__title { flex-direction: column; align-items: flex-start; } } .game-page__provider { font-size: 22px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; color: #24305b; } .game-page__provider a { color: #24305b; text-decoration: none; } .game-page__provider a:hover { text-decoration: underline; } .game-page__rating { display: flex; align-items: center; position: relative; padding: 5px 15px; z-index: 1; align-items: center; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; font-size: 22px; background: linear-gradient(to top, #faa914 0%, #ffdf5f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .game-page__rating::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 3px solid #f7f7f7; border-radius: 10px; transform: skewX(-6deg); z-index: -1; } @media (max-width: 1200px) { .game-page__rating { margin: 12px 0 0 0; } } .game-page__rating-stars { display: flex; margin-right: 10px; } .game-page__rating-stars > svg + svg { margin-left: 5px; } .game-page__image { width: 287px; height: 193px; border-radius: 20px; position: relative; z-index: 2; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35); } .game-page__image img { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 100%; min-width: 100%; transition: 0.4s; } .game-page__image-wrapper { display: block; width: 100%; height: 100%; border: 6px solid #fff; border-radius: 20px; overflow: hidden; position: relative; z-index: 1; } .game-page__categories { margin: 0 0 24px 0; } .game-page__category { padding: 5px 15px; margin: 0 10px 0 0; position: relative; z-index: 1; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 22px; color: #24305b; text-align: center; text-transform: uppercase; cursor: pointer; } .game-page__category::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #f7f7f7; border-radius: 10px; transform: skewX(-6deg); z-index: -1; } .game-page__category:hover { color: #ffffff; } .game-page__category:hover::before { background: rgb(255, 166, 40); background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); box-shadow: 0px 5px 0px 0px rgb(181, 15, 89); } .game-page__players { display: flex; align-items: center; gap: 5px; position: absolute; bottom: 10px; left: 10px; padding: 4px 8px; background-color: #9b37ff; border: 1px solid #ab83ee; border-radius: 5px; color: #ffffff; font-weight: 600; font-size: 14px; font-family: "Barlow Condensed", sans-serif; font-style: italic; line-height: 1; z-index: 1; } .game-page__players .game-page__players-icon { display: inline-block; width: 8px; height: 8px; background-color: #1FFF20; border-radius: 50%; position: relative; box-shadow: 0 0 10px 3px rgb(31, 255, 32); -webkit-animation: shine 2s infinite ease-in-out; animation: shine 2s infinite ease-in-out; } @media (max-width: 768px) { .game-page__players { font-size: 12px; padding: 2px 4px; bottom: unset; top: 5px; left: unset; right: 5px; } .game-page__players .game-page__players-icon { width: 6px; height: 6px; box-shadow: 0 0 8px 2px rgb(31, 255, 32); } .game-page__players svg { width: 10px; height: 10px; } } .game-page__play { text-align: center; margin: 20px 0 0 0; } .game-page__play-btn { display: inline-block; padding: 7px 38px 14px 20px; background: none; border: none; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 21px; color: #23bdf1; position: relative; text-align: center; line-height: 1; cursor: pointer; z-index: 1; } .game-page__play-btn::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; border: 3px solid #b6edff; border-radius: 10px; transform: skewX(-6deg); transition: background-color 0.2s ease-in; z-index: -1; } .game-page__play-btn::after { content: ""; display: block; width: 8px; height: 11px; position: absolute; top: 50%; right: 20px; margin-top: -6.5px; background: url("../images/games_toolbar/arrow_right.png"); z-index: -1; } .game-page__play-btn:hover { color: #423780; } .game-page__play-btn:hover::before { background-color: #b6edff; } .game-page__description { font-size: 18px; } .game-page__description h1 { font-size: 28px; font-weight: 700; color: #2b1d57; margin-bottom: 16px; } .game-page__description h2 { font-size: 22px; font-weight: 600; color: #3c2e6e; margin-top: 24px; margin-bottom: 12px; } .game-page__description h3 { font-size: 18px; font-weight: 600; color: #4a3b7f; margin-top: 20px; margin-bottom: 10px; } .game-page__description ul { padding-left: 20px; margin-bottom: 20px; list-style-type: disc; } .game-page__description li { color: #444; line-height: 1.6; margin-bottom: 8px; } .owl-carousel .owl-stage { display: flex; } .game-page__reviews { background: linear-gradient(180deg, #0074e3 0%, #9e30dc 100%); color: #ffffff; font-size: 18px; line-height: 30px; padding: 100px 30px; margin: 40px 0 0 0; box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.35); } .game-page__reviews-title { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -0.4px; text-align: center; margin: 0 0 40px 0; } .game-page__review { border: 1px dashed #ffffff; border-radius: 20px; padding: 15px; display: flex; flex: 1 0 auto; height: 100%; } .game-page__review-header { line-height: 1; margin-bottom: 10px; } .game-page__review-footer { margin-top: 10px; } .game-page__review-author { background: linear-gradient(to top, #faa914 0%, #ffdf5f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 700; line-height: 30px; text-transform: uppercase; letter-spacing: 0.48px; } .ib-container { width: 100%; min-height: 400px; padding: 35px 50px 30px 50px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; border-radius: 40px; text-align: left; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.65); background: url("../images/pattern.png") left top 22px/62px auto repeat, url("../images/login-bg.png") center top/cover no-repeat; background-blend-mode: color-burn; position: relative; border-bottom: solid 5px #42155d; border-top: solid 2px #de91a3; letter-spacing: 0.57px; } .ib-border { width: 100%; max-width: 600px; border-radius: 54px; padding: 20px; background-color: rgba(255, 255, 255, 0.55); position: relative; box-shadow: 0 17px 38px 0 rgba(0, 0, 0, 0.3); z-index: 2; } .ib__title { text-transform: uppercase; font-size: 34px; line-height: 1.1765; font-style: italic; font-weight: 700; display: block; margin: 0 0 40px 0; letter-spacing: 0.57px; text-align: center; } .ib-container > div { text-align: center; font-size: 18px; font-weight: 400; } .ib-container p + p { margin-top: 20px; } .ib-container .plain-button { display: inline-block; } .ib-container strong { font-weight: 600; } .ib-container a { display: inline-block; border-bottom: 2px solid #87d7fd; padding-bottom: 1px; color: #87d7fd !important; transition: border-color 0.1s ease; } .ib-container a:hover { color: #87d7fd; border-bottom-color: transparent; } .ib__generating { text-align: center; border: 5px dotted #fbe569; padding: 10px 0; } .ib__generating > div { text-transform: uppercase; font-size: 26px; line-height: 1.1765; font-style: italic; font-weight: 700; letter-spacing: 0.57px; } .ib__generating > div.animating { -webkit-animation: blink 1s linear infinite; animation: blink 1s linear infinite; } @-webkit-keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } @media screen and (max-width: 500px) { .ib-container { padding: 40px 30px; } .ib__title { font-size: 32px; } } .mobile-title { display: none; } .main-menu-btn { margin-top: 0; } .main-menu-btn span { background: rgba(255, 255, 255, 0.9); } .main-menu-btn span:nth-child(1) { width: 70%; } .main-menu-btn span:nth-child(3) { width: 50%; } .mobil-menu-active .main-menu-btn span:nth-child(1), .mobil-menu-active .main-menu-btn span:nth-child(3) { width: 100%; } .mobil-menu-active .main-menu-btn span { background: #fff; } .right-top-btns .hamburger { display: none; } .hamburger-btn { pointer-events: unset !important; } .left_bar nav ul li:last-child { display: none; } .\--visible-while-playing { display: none !important; } .settings-menu__verification { display: none; } .settings-menu__verification img { max-height: 23px !important; } .custom-amount-mobile { display: none; } .cc-selector__amount .radio-price[for=choose-amount-4] { display: none; } .bonus-select { display: none; } @media (max-width: 1200px) { .deposit-form { order: 2; } .deposit-banner-container { order: 1; } } @media (max-width: 979px) { .left_bar { top: 65px; } } @media (max-width: 767px) { .mobile-title { display: block; margin-bottom: 10px; font-size: 24px; font-weight: 500; text-align: center; } .account-verification-panel { margin-top: -15px; } .modal-open .main-baner, .playing .main-baner { position: fixed; top: 0; left: 0; z-index: 102; } .modal-open:not(.gameplay-demo) .main .main-baner { position: unset; top: unset; left: unset; z-index: unset; } .top-bar nav { padding: 0; } .left_bar nav ul li:last-child { display: block; } .left_bar--logged-in { top: 99px; } .playing .left_bar--logged-in { top: 55px; } .setting-menu ul li a { display: block; width: 100%; } .header--logged-in .main-menu-btn { margin: 0; order: 1; } .playing .header--logged-in .main-menu-btn { display: none; } .header--logged-in .balance { order: 2; padding: 0 0 0 40px; } .header--logged-in .balance:before { width: 40px; height: 35px; } .header--logged-in > .balance > .amount { margin-left: 0; } .playing .header--logged-in .balance { display: none !important; } .balance-content { margin-top: 0; top: 99px; } .playing .balance-content { top: 55px; } .header--logged-in { justify-content: space-between; padding-left: 10px; padding-right: 10px; } .playing .header--logged-in { justify-content: space-between; } .playing .\--visible-while-playing { display: block !important; } .playing .\--hidden-while-playing { display: none !important; } .modal-open .header--logged-in { box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3); } .header--logged-in > .balance > .amount { width: auto; } .main-baner .header--logged-in .header-logo { order: 3; } .playing .main-baner .header--logged-in .header-logo { display: none; } .header--logged-in .h_user { display: none; } .header--logged-in .right-top-btns { width: 100%; order: 4; display: flex; flex-grow: 1; justify-content: center; margin-top: 5px; margin: 0; } .playing .header--logged-in .right-top-btns { width: auto; } .main-page-banner-interac { top: 5px; left: 10px; } .settings-menu__verification { display: list-item; } .account-verification-panel .your-bonuses-container { max-height: unset; } .dws-wrapper { padding-top: 50px; } .dws-wrapper--dashboard { width: 100%; padding-top: 0; padding-bottom: 120px; top: 99px; } .playing .dws-wrapper--dashboard { top: 55px; } .dws-wrapper--dashboard .dws-outside { display: none; } .dws-wrapper--dashboard .close-modal-btn { display: none; } .close-modal-btn { top: -20px !important; right: 5px !important; width: 24px; height: 24px; } .close-modal-cross:before, .close-modal-cross:after { height: 24px; width: 2px; } .dws-wrapper--dashboard .tabs-box { display: none; } .dws-wrapper--dashboard .tabs-container { width: 100%; } .dws-wrapper--dashboard .login-border { width: 100%; max-width: 100%; padding: 0; border-radius: 0; } .dws-wrapper--dashboard .dashboard-container { border-radius: 0; min-height: calc(100vh - 99px); } .playing .dws-wrapper--dashboard .dashboard-container { min-height: calc(100vh - 55px); } .dws-wrapper--dashboard .tabs-container { padding-right: 10px; } .dws-wrapper--dashboard .modal-message { top: 99px; } .playing .dws-wrapper--dashboard .modal-message { top: 55px; } .modal-open:not(.gameplay-demo) .right-top-btns > a:last-child, .modal-open.playing:not(.gameplay-demo) .right-top-btns > a:last-child { display: inline-block; } .modal-open:not(.gameplay-demo) .right-top-btns > a:last-child:before, .modal-open.playing:not(.gameplay-demo) .right-top-btns > a:last-child:before { background: linear-gradient(150deg, rgba(159, 55, 114, 0.8), rgba(255, 255, 255, 0.2)); } .modal-open:not(.gameplay-demo) .right-top-btns > a:last-child img, .modal-open.playing:not(.gameplay-demo) .right-top-btns > a:last-child img { max-height: 17px; } /* .bonus-select-option--selected .bonus-select-option__name { color: #ebb61a; } */ } @media (max-width: 767px) and (min-width: 320px) and (max-width: 767px) { .modal-open:not(.gameplay-demo) .right-top-btns > a:last-child, .modal-open.playing:not(.gameplay-demo) .right-top-btns > a:last-child { position: absolute; right: 0; margin-left: unset; } } @media (max-width: 767px) { .header-hidden .bonus-stack { top: 0; } } @media (max-width: 767px) { .playing.header-hidden .bonus-stack { top: 50px; } } @media (max-width: 767px) { .modal-open .bonus-btn.active + .bonus-stack, .modal-open .rewards-btn.active + .bonus-stack { position: fixed; width: 100%; height: calc(100vh - 99px); top: 99px; overflow-y: scroll; } .modal-open .bonus-btn.active + .bonus-stack > div, .modal-open .rewards-btn.active + .bonus-stack > div { padding-bottom: 119px; } .modal-open .bonus-btn.active + .bonus-stack .bonus, .modal-open .rewards-btn.active + .bonus-stack .bonus { top: 0; } } @media (max-width: 767px) { .modal-open.playing .bonus-btn.active + .bonus-stack, .modal-open.playing .rewards-btn.active + .bonus-stack { height: calc(100vh - 55px); top: 55px; } } @media (max-width: 767px) { .playing .right-top-btns .setting { display: none; } } @media (max-width: 767px) { .playing .right-top-btns .hamburger { display: inline-block; } } @media (max-width: 767px) { .account-form--profile > .form-row { flex-direction: row; justify-content: space-between; align-items: center; } } @media (max-width: 767px) { .account-summary { min-height: unset; } } @media (max-width: 767px) { .account-summary__label--balance { flex-flow: row wrap; } } @media (max-width: 767px) { .account-form > .form-row.form-row--row { flex-direction: row; justify-content: space-between; align-items: center; } } @media (max-width: 767px) { .account-form__value { width: unset; padding: 0; } } @media (max-width: 767px) { .account-form__label { flex: unset; margin-left: 0; } } @media (max-width: 767px) { .deposit-form-btn-box + .text-pink { margin: 0 auto; top: unset; } } @media (max-width: 767px) { .custom-amount-mobile { display: block; } } @media (max-width: 767px) { .custom-amount-desktop { display: none !important; } } @media (max-width: 767px) { .cc-selector__amount .radio-price[for=choose-amount-4] { display: block; } } @media (max-width: 767px) { .radiocard-cc { width: 105px; } } @media (max-width: 767px) { .cc-selector__amount { max-width: 320px; } } @media (max-width: 767px) { .cc-selector__amount .custom-input-field { width: 80%; } .cc-selector__amount .custom-input-field input { text-align: center; } } @media (max-width: 767px) { .cc-selector__amount label.error { width: 100% !important; text-align: center; margin-top: 10px !important; } } @media (max-width: 767px) { .deposit-no-bonus__title { font-size: 20px; } } @media (max-width: 767px) { .payment-methods { margin-bottom: 0; } } @media (max-width: 767px) { .payment-methods:not(.payment-methods--show-all) .radiocard-cc:not(:nth-child(2)):not(:nth-child(4)):not(:nth-child(6)) { display: none; } } @media (max-width: 767px) { .payment-methods__show-more, .deposit-bonuses__show-more { display: flex; justify-content: center; align-items: center; } } @media (max-width: 767px) { .payment-methods__show-more { margin-bottom: 15px; } } @media (max-width: 767px) { .deposit-bonuses__show-more { margin-top: 15px; } } @media (max-width: 767px) { .payment-methods__show-more svg, .deposit-bonuses__show-more svg { margin-right: 5px; } } @media (max-width: 767px) { .payment-methods__show-more--active svg, .deposit-bonuses__show-more--active svg { transform: rotate(180deg); } } @media (max-width: 767px) { .payment-methods__show-more span, .deposit-bonuses__show-more span { display: inline-block; border-bottom: 2px solid #87d7fd; padding-bottom: 1px; color: #87d7fd; transition: border-color 0.1s ease; } .payment-methods__show-more span:hover, .deposit-bonuses__show-more span:hover { color: #87d7fd; border-bottom-color: transparent; } } @media (max-width: 767px) { .deposit-panel .radiocard-cc.radio-price { width: 90px; } } @media (max-width: 767px) { .deposit-banner-container .deposit-bonus-note, .deposit-banner-container .nobonus, .deposit-banner-container .bonus-terms { display: none; } } @media (max-width: 767px) { .deposit-bonuses:not(.deposit-bonuses--show-all) .deposit-bonuses_item:not(:first-child) { display: none; } } @media (max-width: 767px) { .deposit-bonuses_item { padding: 0 10px; height: 70px; box-shadow: none; } } @media (max-width: 767px) { .deposit-bonuses_item::after { height: 70px; } } @media (max-width: 767px) { .deposit-bonuses_item span { display: none !important; } } @media (max-width: 767px) { .deposit-bonuses_item.\--active::before { display: none; } } @media (max-width: 767px) { .deposit-bonuses_item_name::before, .deposit-bonuses_item_name::after, .deposit-bonuses_item_description::before, .deposit-bonuses_item_description::after { text-shadow: none; } } @media (max-width: 767px) { .deposit-panel .popup-message { font-size: 14px; padding: 15px; } } @media (max-width: 767px) { .deposit-panel .popup-message { background: none; } } @media (max-width: 767px) { .deposit-banner { display: none; } } @media (max-width: 767px) { .bonus-select { display: block; width: 100%; max-width: 355px; margin: 0 auto; } } @media (max-width: 767px) { .bonus-select .vs__selected-options { width: 100%; } } @media (max-width: 767px) { .bonus-select .vs__selected { width: 100%; height: 100%; } } @media (max-width: 767px) { .bonus-select.vs--open .vs__selected { opacity: 0; } } @media (max-width: 767px) { .bonus-select .vs__dropdown-toggle { height: 80px; background-position: right 26px center; } } @media (max-width: 767px) { .bonus-select .vs__dropdown-menu { max-height: 300px; top: 2px; border-radius: 20px; } } @media (max-width: 767px) { .bonus-select .vs__selected { flex-direction: column; align-items: center; justify-content: center; line-height: 1.3; } } @media (max-width: 767px) { .bonus-select-option { display: flex; align-items: center; justify-content: space-between; line-height: 1.3; } } @media (max-width: 767px) { .bonus-select .vs__dropdown-option + .vs__dropdown-option { border-top: 1px solid rgba(255, 255, 255, 0.1); } } @media (max-width: 767px) { .bonus-select-option__radio { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 170, 216, 0.3); } } @media (max-width: 767px) { .bonus-select-option--selected .bonus-select-option__radio::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #ebb61a; } } @media (max-width: 767px) { .bonus-select-option__name { font-size: 20px; } } @media (max-width: 767px) { .bonus-select-option__description { width: 100%; white-space: wrap; font-size: 14px; font-weight: 400; } } @media (max-width: 767px) { .bonus-select-option__name--muted { width: 90%; font-weight: 400; } .bonus-select-option__name--muted > span { font-weight: 600; color: #fdba45; } } @media (max-width: 767px) { .vs__selected .bonus-select-option__description { width: 80%; } } @media (max-width: 767px) { .support-block-chat { width: 220px; left: calc(50% - 110px); } } @media (max-width: 767px) { .subtabs-box { width: 100%; flex-flow: row wrap; justify-content: space-around; } } @media (max-width: 767px) { .subtabs-box__tab { font-size: 18px; } } @media (max-width: 767px) { .game_iframe.game_iframe__fullscreen { height: calc(100% - 99px); margin-top: 99px; } } @media screen and (max-width: 767px) and (orientation: landscape) { .game_iframe.game_iframe__fullscreen { height: 100%; margin-top: 0; } } @media (max-width: 767px) { .playing .game_iframe.game_iframe__fullscreen { height: calc(100% - 55px); margin-top: 55px; } } @media screen and (max-width: 767px) and (orientation: landscape) { .playing .game_iframe.game_iframe__fullscreen { height: 100%; margin-top: 0; } } @media (max-width: 767px) { .playing .header .balance { display: flex; } } @media (max-width: 767px) { .login-border { width: calc(100% - 20px); padding: 10px; } } @media (max-width: 767px) { .vs__dropdown-toggle { padding: 1px 13px 0; } } @media (max-width: 767px) { .signup-form--step-2 .input-field { padding: 3px 13px; } } @media (max-width: 767px) { .d-xs-none { display: none; } } @media (max-width: 767px) { .bonus, .rewards .bonus { width: 260px; margin-left: -130px; } } @media (max-width: 767px) { .notification-bonus .bonus-title, .notification-default .bonus-title, .notification-deposit .bonus-title, .rewards .notification-bonus .bonus-title { font-size: 20px; padding: 15px; text-align: center; background-size: 20px auto; } } @media (max-width: 767px) { .notification-bonus .bonus-title, .notification-default .bonus-title, .notification-deposit .bonus-title { display: none; } } @media (max-width: 767px) { .rewards .notification-bonus .bonus-title { display: block; } } @media (max-width: 767px) { .notification-bonus .bonus-message, .notification-default .bonus-message, .notification-deposit .bonus-message { font-size: 18px; border-top-left-radius: 15px; border-top-right-radius: 15px; top: 2px; } } @media (max-width: 767px) { .rewards .notification-bonus .bonus-message { border-top-left-radius: 0; border-top-right-radius: 0; top: 0; } } @media (max-width: 767px) { .notification-bonus .text-gradient, .notification-default .text-gradient { font-size: 30px; } } @media (max-width: 767px) { .notification-bonus .text-gradient::before, .notification-default .text-gradient::before { text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6); -webkit-text-stroke-width: 3px; } } @media (max-width: 767px) { .notification-bonus .bonus-footer, .notification-default .bonus-footer { max-height: unset; background: none; padding: 10px; } } @media (max-width: 767px) { .notification-bonus .bonus-footer a, .notification-default .bonus-footer a { width: 110px; height: 35px; margin-top: 0; background-size: cover; font-size: 17px; line-height: 35px; } } @media (max-width: 767px) { .bonus-coins { width: 60px; height: 60px; background-size: 60px auto; margin: 0 0 -30px 0; } } @media (max-width: 767px) { #payment-modal-container { top: 109px; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-container { justify-content: flex-start; padding-top: 40px; } .dws-wrapper--signup-step-1 .signup-container::after { content: ""; display: block; position: absolute; width: 160px; height: 120px; top: 0; left: 50%; transform: translate(-50%, calc(-100% + 55px)); background: url("../images/Kong.png") no-repeat; background-size: 160px auto; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-forms-box { order: 2; margin-top: 20px; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-benefits__title, .dws-wrapper--signup-step-1 .signup-benefits__box { display: none; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-benefits--with-banner { min-height: auto; padding: 15px 0 20px 0; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-benefits-bonuses__item::before, .dws-wrapper--signup-step-1 .signup-benefits-bonuses__item:after { display: none; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-benefits-bonuses__item { padding: 0; height: auto; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-benefits-bonuses__item.signup-benefits-bonuses__item--plus { display: flex; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-benefits-bonuses__item { margin-top: 5px; } .dws-wrapper--signup-step-1 .signup-benefits-bonuses__item:first-child { margin-top: 0; } } @media (max-width: 767px) { .dws-wrapper--signup-step-1 .signup-benefits-bonuses__item--plus:last-child { display: none; } } @media (max-width: 539px) { .game, .game:nth-child(4n), .game:nth-child(3n), .game:nth-child(2n) { width: calc(50% - 15px); margin: 0 auto 15px auto; } .games.small .game, .games.small .game:nth-child(3n), .games.small .game:nth-child(4n), .games.small .game:nth-child(5n) { width: calc(50% - 15px); margin: 0 auto 15px auto; } .game-img .game_link { border-width: 3px; } .game.orange .game-img:before { border-bottom: 2px solid #ffb144; } .game.violet .game-img:before { border-bottom: 2px solid #c597fc; } .game.green .game-img:before { border-bottom: 2px solid #d1ccaa; } .game.red .game-img:before { border-bottom: 2px solid #ffb16a; } .game.dark-blue .game-img:before { border-bottom: 2px solid #bab8fa; } .game.yellow .game-img:before { border-bottom: 2px solid #ffe78e; } .support .page-content { padding-top: 30px; padding-right: 0; padding-bottom: 30px; padding-left: 0; } .support .support-text { padding-left: 30px; padding-right: 30px; } .login-container, .signup-container { padding: 30px; } .signup-form__controls-box { margin: 20px 0 15px 0; } .input-field--promocode { display: none; } .input-field--promocode.input-field--promocode__active { display: block; } .checkbox-with-label--at-signup { width: 100%; margin: 0; } .signup-form__spacer-line { width: calc(100% - 60px); margin: 20px auto; } .v-select--isd-code { position: unset; } #wheel { width: 110%; } .wheel_text { font-size: 24px; } .wheel_wrapper { top: 99px; overflow-y: auto; } .playing .wheel_wrapper { top: 55px; } .wheel_wrapper .close-modal-btn { display: none; } .wheel_winscreen_border { max-width: 100%; padding: 0; z-index: 3; } .wheel_winscreen { padding: 10px 20px 20px 20px; border-top-left-radius: 0; border-top-right-radius: 0; } .wheel_winscreen_border.screen_type_2 { min-height: 700px; } .balance-row { font-size: 18px; padding-left: 55px; } .balance-row img { width: 25px; } .balance-row span, .balance-row:first-child span { font-size: 22px; } } @media (max-width: 375px) { .radiocard-cc { width: 95px; } } @media (max-width: 319px) { .game, .game:nth-child(4n), .game:nth-child(3n), .game:nth-child(2n) { width: 100%; } .games.small .game, .games.small .game:nth-child(3n), .games.small .game:nth-child(4n), .games.small .game:nth-child(5n) { width: 100%; } .login-container, .signup-container { padding: 30px 15px; } .balance-content { width: 290px; } } .bottom-bar, .bottom-bar *, .bottom-bar-layer, .bottom-bar-layer * { box-sizing: border-box; } .bottom-bar { width: 100%; height: 36px; display: flex; justify-content: center; position: fixed; bottom: 0; left: 0; z-index: 1000; background: url("/images/bottom-bar/bottom-bar__bg.jpg") center center no-repeat; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); } .bottom-bar__container { display: flex; justify-content: space-around; align-items: center; height: 100%; padding: 0 20px; max-width: 320px; } .bottom-bar__link { display: block; cursor: pointer; } .bottom-bar__item:hover, .bottom-bar__item--active svg path { fill: #ffc955; } .bottom-bar__item--stroke:hover svg path, .bottom-bar__item--stroke:hover svg circle, .bottom-bar__item--stroke.bottom-bar__item--active svg circle, .bottom-bar__item--stroke.bottom-bar__item--active svg path { stroke: #ffc955; fill: none; } .bottom-bar-layer { position: fixed; top: 56px; left: 0; width: 100%; height: calc(100% - 56px - 36px); padding: 15px; background: url("../images/pattern.png") left top 22px/62px auto repeat, url("../images/login-bg.png") center top/cover no-repeat; background-blend-mode: color-burn; z-index: 999; overflow-y: auto; } .bottom-bar-layer__header { width: 100%; display: flex; justify-content: flex-start; margin-bottom: 15px; } .bottom-bar-layer__close-layer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: #ffffff; font-size: 14px; text-transform: uppercase; font-weight: 600; cursor: pointer; } .bottom-bar-layer__game-image { width: 27px; height: 27px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); overflow: hidden; } .bottom-bar-layer__game-image img { width: auto; height: 100%; } .bottom-bar-layer__divider { width: 100%; height: 3px; margin: 22px 0; background-color: rgba(235, 237, 241, 0.4); } .bottom-bar-layer__game-search-input { width: 100%; padding: 8px 20px 8px 50px; border: 2px solid #ede6eb; border-radius: 20px; background: url(../images/game_iframe_icons/search.png) #ffffff no-repeat 20px center; font-size: 20px; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 600; box-sizing: border-box; font-size: 18px; background-size: 18px auto; } .bottom-bar-layer__game-search-input::-moz-placeholder { color: #ab3185; opacity: 0.8; font-weight: 600; } .bottom-bar-layer__game-search-input:-ms-input-placeholder { color: #ab3185; opacity: 0.8; font-weight: 600; } .bottom-bar-layer__game-search-input::-ms-input-placeholder { color: #ab3185; opacity: 0.8; font-weight: 600; } .bottom-bar-layer__game-search-input::placeholder { color: #ab3185; opacity: 0.8; font-weight: 600; } .bottom-bar-layer__bets-table-wrapper { width: 100%; height: auto; background-color: rgba(41, 8, 75, 0.1882352941); border-radius: 30px; border-top: solid 4px rgba(13, 0, 47, 0.2509803922); border-bottom: solid 2px #7a2883; box-shadow: inset 0 0 95px 0 rgba(31, 0, 75, 0.3215686275); position: relative; overflow: hidden; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; background-image: linear-gradient(to right, rgba(229, 70, 160, 0.2), rgba(229, 70, 160, 0.2)); background-position: left top; background-size: 100% 40px; background-repeat: no-repeat; } .bottom-bar-layer__bets-table { width: 100%; border-collapse: collapse; font-size: 14px; } .bottom-bar-layer__bets-table thead th { height: 40px; font-weight: 600; } .bottom-bar-layer__bets-table thead th:last-child { width: 60px; } .bottom-bar-layer__bets-table tbody td { font-weight: 500; color: #ffcbcb; text-align: center; padding: 10px 0; border-bottom: solid 2px rgba(255, 143, 235, 0.1529411765); white-space: nowrap; } .bottom-bar-layer__bets-table tbody td:nth-child(2) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 320px) { .bottom-bar-layer__bets-table tbody td:nth-child(2) { max-width: 80px; } } .slide-up-enter-active, .slide-up-leave-active { transition: transform 0.3s ease; } .slide-up-enter { transform: translateY(100%); } .slide-up-enter-to { transform: translateY(0); } .slide-up-leave { transform: translateY(0); } .slide-up-leave-to { transform: translateY(100%); } @media (min-width: 980px) { .bottom-bar { display: none; } } @media screen and (orientation: landscape) { .bottom-bar { display: none; } .bottom-bar-layer { display: none; } } .ticker { display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden; padding: 20px; background: linear-gradient(90deg, #3c66d8, #8433d7); border-top: 7px solid #bee0fa; font-weight: 500; font-size: 13px; font-style: normal; color: #ffffff; } @media (min-width: 980px) { .ticker { display: none; } } .ticker::before, .ticker::after { content: ""; display: inline-block; width: 40px; height: 100%; background: transparent; position: absolute; top: 0; z-index: 2; } .ticker::before { left: -40px; box-shadow: 20px 0px 20px #4361d8; } .ticker::after { right: -40px; box-shadow: -20px 0px 20px #7f37d7; } .ticker-item { width: 125px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 5px; } .ticker-item__image { width: 40px; height: 40px; margin-right: 10px; border-radius: 5px; overflow: hidden; flex-shrink: 0; position: relative; } .ticker-item__image img { width: auto; height: 40px; max-width: unset; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* .ticker-item--current { color: #24305b; background: linear-gradient(270deg, rgb(255, 243, 88) 0%, rgb(255, 201, 85) 100%); } */ .ticker-item__username { margin-bottom: 5px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; width: 65px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticker-item__amount { display: flex; align-items: center; color: #FFD401; font-size: 14px; width: 65px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticker-item__amount::before { content: ""; width: 13px; height: 13px; display: inline-block; background: url("../images/ticker/coin.png") no-repeat center center/contain; margin-right: 5px; } .golden-text { background: linear-gradient(to top, #faa914 0%, #ffdf5f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffdf5f; white-space: nowrap; } .referral-page, .referral-page * { box-sizing: border-box; } .referral-page__header { position: relative; margin-top: 5px; } .referral-page__header::after { content: ""; display: block; width: 100%; height: 6px; position: absolute; left: 0; bottom: 0; background: rgb(255, 83, 255); background: linear-gradient(90deg, rgb(255, 83, 255) 0%, rgb(163, 108, 254) 52%, rgb(121, 255, 254) 100%); } .referral-guide { background: linear-gradient(180deg, #0074e3 0%, #9e30dc 100%); color: #ffffff; font-size: 18px; line-height: 30px; padding: 60px 30px; margin: 0; box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(0, 0, 0, 0.35); } .referral-guide__title { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.4px; text-align: center; margin: 0 0 40px 0; } .referral-guide__items { display: flex; gap: 15px; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .referral-guide__item { display: flex; flex-direction: column; align-items: center; border: 1px dashed #ffffff; border-radius: 20px; padding: 30px 15px; display: flex; flex: 1 1 calc((100% - 30px) / 3); max-width: calc((100% - 30px) / 3); font-size: 18px; text-align: center; } .referral-guide-item__icon { margin-bottom: 15px; } .referral-guide-item__icon img { width: auto; height: 40px; transition: transform 0.3s; } .referral-guide__item:hover img { transform: scale(1.2); } .referral-guide__footer { margin-top: 40px; text-align: center; font-family: "Cabin", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; } .referral-guide__footer a { color: #ffffff; text-decoration: underline; } .referral-guide__footer a:hover { text-decoration: none; } .referral-counters { color: #24305b; font-size: 18px; padding: 60px 30px 60px 30px; margin: 0; position: relative; display: flex; justify-content: center; gap: 15px; } .referral-counters__item { position: relative; width: 200px; padding: 30px; z-index: 1; text-align: center; } .referral-counters__item::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #f7f7f7; border-radius: 20px; transform: skewX(-6deg); z-index: -1; } .referral-counters__item-value { font-size: 36px; font-weight: 700; margin: 0; } .referral-counters__item-button { background: #0074e3; color: #ffffff; border: none; border-radius: 20px; padding: 8px 16px; font-family: "Barlow Condensed", sans-serif; font-style: italic; font-size: 16px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; transition: background 0.3s; position: absolute; bottom: -10px; right: -20px; } .referral-counters__item-button:hover { background: #9e30dc; } .referral-options { display: flex; gap: 15px; padding: 60px 30px 30px 30px; margin: 0; color: #24305b; font-size: 18px; position: relative; } .referral-options::before { content: ""; display: block; width: 100%; height: 6px; position: absolute; left: 0; top: 0; background: rgb(255, 83, 255); background: linear-gradient(90deg, rgb(255, 83, 255) 0%, rgb(163, 108, 254) 52%, rgb(121, 255, 254) 100%); } .referral-options__item { width: calc((100% - 30px) / 2); padding: 30px 60px; text-align: center; } .referral-options__item:last-child { border-left: 1px dashed #24305b; } .referral-options__item-title { margin: 0 0 30px 0; } .referral-options__item-content p { margin: 0 0 15px 0; } .referral-options__input { position: relative; display: inline-block; width: 100%; margin: 30px 0; } .referral-options__input input { width: 100%; height: 50px; position: relative; z-index: 2; border: 3px solid transparent; border-radius: 8px; padding: 10px 15px; background: transparent; color: #24305b; outline: none; } .referral-options__input::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 8px; padding: 3px; background: linear-gradient(90deg, rgb(255, 83, 255) 0%, rgb(163, 108, 254) 52%, rgb(121, 255, 254) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 1; pointer-events: none; } .referral-options__copy { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); z-index: 3; cursor: pointer; border: 2px solid rgb(163, 108, 254); background: #ffffff; color: rgb(163, 108, 254); border-radius: 8px; font-family: "Cabin", sans-serif; font-size: 13px; font-weight: 400; text-transform: uppercase; padding: 2px 8px; transition: background 0.3s; } .referral-options__copy:hover { background: rgb(163, 108, 254); color: #ffffff; } .referral-social { padding: 0 30px 60px 30px; margin: 0; color: #24305b; font-size: 18px; position: relative; text-align: center; } .referral-social::after { content: ""; display: block; width: 100%; height: 6px; position: absolute; left: 0; bottom: 0; background: rgb(255, 83, 255); background: linear-gradient(90deg, rgb(255, 83, 255) 0%, rgb(163, 108, 254) 52%, rgb(121, 255, 254) 100%); } .referral-social-items { display: flex; justify-content: center; gap: 30px; margin-top: 30px; } .referral-social__item { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; transition: background 0.3s; } .referral-social__item svg { width: auto; height: 15px; fill: #ffffff; } .referral-social__item--facebook { background-color: #3b5998; } .referral-social__item--x { background-color: #000000; } .referral-social__item--whatsapp { background-color: #25d366; } .referral-social__item--email { background-color: #d14836; } .referral-social__item:hover { background-color: #faa914; } .referral-tables { padding: 30px 30px 60px 30px; margin: 0; color: #24305b; font-size: 18px; } .referral-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; } .referral-tabs__item { padding: 15px 30px; border: 1px dashed #24305b; border-radius: 20px; cursor: pointer; transition: background 0.3s; } .referral-tabs__item svg { width: auto; height: 15px; fill: #24305b; margin-right: 5px; transition: all 0.3s; } .referral-tabs__item:not(.referral-tabs__item--active):hover { background: #f5f5f5; } .referral-tabs__item:not(.referral-tabs__item--active):hover svg { scale: 1.1; } .referral-tabs__item--active { background: linear-gradient(180deg, #0074e3 0%, #9e30dc 100%); color: #ffffff; } .referral-tabs__item--active svg { fill: #ffffff; } .referral-table { width: 100%; border-collapse: collapse; } .referral-table__header { background: #f7f7f7; } .referral-table__header th { padding: 15px 30px; text-align: left; font-weight: 400; font-size: 16px; color: #24305b; } .referral-table__header th:first-child { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .referral-table__header th:last-child { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .referral-table__body td { padding: 15px 30px; border-bottom: 2px solid #f7f7f7; vertical-align: middle; } .referral-table__body td svg { width: auto; height: 20px; margin-right: 5px; } .referral-table__body td svg.rank1 path { fill: #ffdf5f; } .referral-table__body td svg.rank2 path { fill: #c0c0c0; } .referral-table__body td svg.rank3 path { fill: #cd7f32; } .referral-table__you { display: inline-block; padding: 3px 10px; border-radius: 10px; border: 1px dashed #0074e3; color: #9e30dc; font-size: 14px; text-transform: uppercase; margin-left: 10px; } @media (max-width: 991px) { .referral-guide__items { justify-content: center; } .referral-guide__item { flex: 1 1 calc((100% - 30px) / 2); max-width: calc((100% - 30px) / 2); } .referral-options__item { padding: 0 30px; } } @media (max-width: 767px) { .referral-guide__item { flex: 1 1 100%; max-width: 100%; } .referral-options { flex-direction: column; } .referral-counters { flex-direction: column; gap: 15px; } .referral-counters__item { width: 100%; padding: 15px 15px; } .referral-counters__item-value { font-size: 24px; } .referral-options__item { width: 100%; padding: 30px 0; } .referral-options__item:last-child { border-left: none; border-top: 1px dashed #24305b; } .referral-tabs { flex-wrap: wrap; flex-direction: column; } .referral-table__header th { padding: 15px 15px; } .referral-table__body td { padding: 15px 15px; } } .btn--oauth { width: 100%; max-width: 400px; position: relative; border-radius: 20px; padding: 12px; font-size: 20px; letter-spacing: 0.02em; text-align: center; border: none; color: inherit; } .btn--facebook { background-color: #1877F2; -webkit-filter: drop-shadow(0 4px 0 #0f4b8b); filter: drop-shadow(0 4px 0 #0f4b8b); color: #ffffff !important; } .btn--facebook:hover { -webkit-filter: drop-shadow(0 4px 4px #0f4b8b); filter: drop-shadow(0 4px 4px #0f4b8b); } .btn--google { background-color: #ffffff; -webkit-filter: drop-shadow(0 4px 0 rgba(255, 255, 255, 0.5)); filter: drop-shadow(0 4px 0 rgba(255, 255, 255, 0.5)); color: #000000 !important; } .btn--google:hover { -webkit-filter: drop-shadow(0 4px 4px rgba(255, 255, 255, 0.5)); filter: drop-shadow(0 4px 4px rgba(255, 255, 255, 0.5)); } .btn--email { background-color: #f34c87; -webkit-filter: drop-shadow(0 4px 0 #c72c5e); filter: drop-shadow(0 4px 0 #c72c5e); color: #ffffff !important; } .btn--email:hover { -webkit-filter: drop-shadow(0 4px 4px #c72c5e); filter: drop-shadow(0 4px 4px #c72c5e); } .btn--oauth img { display: inline-block; width: 25px; height: auto; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); } .btn--oauth + .btn--oauth { margin-top: 15px; } .oauth__back { width: 24px; height: 24px; display: flex; align-items: center; position: absolute; top: 43px; left: 40px; background: linear-gradient(#fbe569, #f8ad37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 34px; cursor: pointer; } .oauth__back img { width: 24px; height: auto; } .oauth__back--signup { top: 34px; } .oauth-message { width: 100%; margin: 0 0 14px 0; padding: 10px; color: #ffcbcb; border: 3px solid rgba(255, 143, 235, 0.15); border-radius: 10px; font-size: 16px; text-align: center; } .safari-install-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; width: 270px; height: 80px; padding: 16px; background: #f7f7f7; background: linear-gradient(#f7f7f7, #f7f7f7) padding-box, linear-gradient(180deg, #007CD3, #3B4092) border-box; border: 4px solid transparent; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); line-height: 26px; font-family: "Cabin", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; color: #24305b; text-align: center; } .hamburger-open .safari-install-banner, .games-bar__modal-open .safari-install-banner, .install-app-popup-open .safari-install-banner, .header-layout-open .safari-install-banner, .modal-open .safari-install-banner { display: none; } .safari-install-banner__share-icon { display: inline-block; position: relative; top: -5px; width: 27px; height: 36px; margin-bottom: -36px; background: url("../images/safari/ios-share.svg") no-repeat center center; vertical-align: top; } .safari-install-banner__share2-icon { display: inline-block; position: relative; width: 14px; height: 17.5px; margin: 0 4px; background: url("../images/safari/ios-share2.svg") no-repeat center center; vertical-align: top; } .safari-install-banner__dots-icon { display: inline-block; position: relative; width: 15px; height: 15px; margin: 0 4px; background: url("../images/safari/ios-dots.svg") no-repeat center center; background-size: contain; vertical-align: middle; } .safari-install-banner__home-icon { display: inline-block; position: relative; top: -0.5px; width: 15px; height: 15px; margin: 0 4px; background: url("../images/safari/ios-home.svg") no-repeat center center; background-size: contain; vertical-align: middle; } .safari-install-banner__arrow-outer { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #3B4092; } .safari-install-banner__arrow-inner { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f7f7f7; } .safari-install-banner__close { position: absolute; top: 2.5px; right: 2.5px; width: 16px; height: 16px; background: url("../images/safari/close.svg") no-repeat center center; background-size: contain; cursor: pointer; } .safari-install-banner__install-button { display: inline-block; margin-top: 8px; padding: 6px 12px; background-color: transparent; border: 1px solid #007CD3; border-radius: 6px; font-size: 14px; color: #007CD3; cursor: pointer; text-decoration: none; } .safari-install-banner--modern { left: auto; right: 8px; transform: none; width: 320px; line-height: 22px; text-align: left; } .safari-install-banner--modern .safari-install-banner__arrow-outer { left: auto; right: 26px; transform: none; } .safari-install-banner--modern .safari-install-banner__arrow-inner { left: auto; right: 26px; transform: none; } .bottom-bar2 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 8px 28px; display: none; justify-content: space-between; align-items: center; background: url("../images/bottombar/bottom-bar__bg.jpg") center center/cover no-repeat; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; color: #fff; transition: transform 0.25s ease, padding 0.25s ease, opacity 0.25s ease; } .bottom-bar2--condensed { transform: translateY(4px); } .bottom-bar2__item { flex: 1; border: none; background: transparent; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; padding: 0; } .bottom-bar2__icon svg { width: 20px; height: 20px; } .bottom-bar2__label { font-size: 12px; letter-spacing: 0.6px; transition: opacity 0.2s ease, max-height 0.2s ease; overflow: hidden; } .bottom-bar2--condensed .bottom-bar2__label { opacity: 0; max-height: 0; } .bottom-bar2__item--active { color: #ffc955; } @media (max-width: 992px) { .bottom-bar2 { display: flex; } body { padding-bottom: 58px; } } .games-bar { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: normal; color: #24305b; padding: 24px; background: #fff; border-radius: 24px; } .games-bar, .games-bar * { box-sizing: border-box; } .games-bar button, .games-bar input { font: inherit; } .games-bar input::-moz-placeholder { color: #a0a0a0; } .games-bar input:-ms-input-placeholder { color: #a0a0a0; } .games-bar input::-ms-input-placeholder { color: #a0a0a0; } .games-bar input::placeholder { color: #a0a0a0; } .games-bar__search { position: relative; margin-bottom: 20px; } .games-bar__search-input { width: 100%; border: 2px solid #eeeeee; border-radius: 16px; padding: 12px 52px 12px 50px; font-size: 16px; background: #ffffff; color: #24305b; outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .games-bar__search-input:focus { border-color: #9b37ff; } .games-bar__search-icon, .games-bar__search-clear { position: absolute; top: 50%; transform: translateY(-50%); } .games-bar__search-icon { left: 20px; color: #24305b; transition: color 0.2s ease; } .games-bar__search:focus-within .games-bar__search-icon circle, .games-bar__search:focus-within .games-bar__search-icon path { stroke: #9b37ff; } .games-bar__search-icon svg { display: block; } .games-bar__search-clear { right: 18px; border: none; background: transparent; padding: 4px; cursor: pointer; color: #24305b; } .games-bar__toolbar { margin-bottom: 20px; position: relative; } .games-bar__toolbar-shell { position: relative; padding: 18px 150px 18px 30px; background: #f7f7f7; border-radius: 18px; transform: skewX(-6deg); /* box-shadow: 0 14px 30px rgba(36, 48, 91, 0.08); */ overflow: hidden; } .games-bar__toolbar-track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; transform: skewX(6deg); padding-right: 60px; } .games-bar__toolbar--no-browse .games-bar__toolbar-shell { padding-right: 30px; } .games-bar__toolbar--no-browse .games-bar__toolbar-track { padding-right: 0; } .games-bar__toolbar-track::-webkit-scrollbar { display: none; } .games-bar__toolbar-item { border: none; background: transparent; padding: 0; cursor: pointer; color: #24305b; white-space: nowrap; display: inline-flex; flex: 0 0 auto; text-decoration: none; } .games-bar__item-body { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; color: inherit; } .games-bar__item-body::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.7); transform: skewX(-6deg); transition: background 0.2s ease, box-shadow 0.2s ease; z-index: -1; } .games-bar__toolbar-item:hover .games-bar__item-body::before { background: #ebedf1; } .games-bar__toolbar-item--active .games-bar__item-body::before, .games-bar__toolbar-item--active:hover .games-bar__item-body::before { background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); } .games-bar__toolbar-item--active .games-bar__item-label { color: #fff; } .games-bar__item-icon svg { width: 24px; height: 24px; } .games-bar__toolbar-item--active .games-bar__item-icon svg linearGradient stop:first-child, .games-bar__toolbar-item--active .games-bar__item-icon svg radialGradient stop:first-child { stop-color: #faa914 !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg linearGradient stop:last-child, .games-bar__toolbar-item--active .games-bar__item-icon svg radialGradient stop:last-child, .games-bar__toolbar-item--active .games-bar__item-icon svg .gradient-stop-end { stop-color: #ffdf5f !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#9b37ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#9b37ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#9145fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#9145fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#8647fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#8647fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#378cfe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#378cfe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#4981ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#4981ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#9141fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#9141fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#7356fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#7356fe"] { fill: #faa914 !important; stroke: #faa914 !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#00bbff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#00bbff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#1cc0fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#1cc0fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#10c6fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#10c6fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#06c7fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#06c7fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#5371fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#5371fe"], .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#23a3ff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#23a3ff"] { fill: #ffdf5f !important; stroke: #ffdf5f !important; } .games-bar__toolbar-item--active .games-bar__item-icon svg [fill="#fff"], .games-bar__toolbar-item--active .games-bar__item-icon svg [stroke="#fff"] { fill: rgb(255, 40, 101) !important; stroke: rgb(255, 40, 101) !important; } .games-bar__toolbar-shadow { position: absolute; top: 0; right: 120px; width: 80px; height: 100%; background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.25) 100%); pointer-events: none; } .games-bar__browse { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); border: none; border-radius: 999px; padding: 8px 18px; background: #d6dae5; color: #24305b; font-size: 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; z-index: 2; } .games-bar__browse-icon svg { width: 20px; height: 20px; } .games-bar__category { margin-bottom: 32px; } .games-bar__category-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 14px; } .games-bar__category-title { font-size: 24px; font-style: italic; letter-spacing: 0.5px; } .games-bar__category-actions { display: flex; align-items: center; gap: 12px; } .games-bar__see-all { border: 2px solid #23bdf1; background: transparent; color: #23bdf1; border-radius: 999px; padding: 4px 16px; cursor: pointer; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; text-decoration: none; } .games-bar__arrows { display: flex; gap: 6px; } .games-bar__arrow { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #23bdf1; background: transparent; color: #23bdf1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .games-bar__arrow:disabled { opacity: 0.4; cursor: default; } .games-bar__category-rail { overflow-x: auto; padding-bottom: 8px; cursor: -webkit-grab; cursor: grab; } .games-bar__category-rail.is-dragging { cursor: -webkit-grabbing; cursor: grabbing; } .games-bar__category-rail::-webkit-scrollbar { height: 0; } .games-bar__category-list .games { display: flex; gap: 16px; flex-wrap: nowrap; } .games-bar__category-list .game { flex: 0 0 180px; } .games-bar__category-list .game-img .game_link { border-radius: 18px; } .games-bar__content { margin-top: 12px; } .games-bar__provider-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 14px; } .games-bar__category-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 14px; } .games-bar__provider-logo { width: 44px; height: 44px; border: 2px solid #eeeeee; border-radius: 12px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .games-bar__provider-logo img { max-width: 100%; max-height: 100%; } .games-bar__category-logo { width: 44px; height: 44px; border: 2px solid #eeeeee; border-radius: 12px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .games-bar__category-logo img { max-width: 100%; max-height: 100%; } .games-bar__category-logo--category img { max-width: 80%; max-height: 80%; } .games-bar__provider-title { font-size: 24px; } .games-bar__category-title { font-size: 24px; } .games-bar__results-grid.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .games-bar__empty { text-align: center; padding: 40px 0; font-size: 20px; } .games-bar-modal { position: fixed; inset: 0; z-index: 102; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: normal; color: #24305b; } .playing .games-bar-modal { z-index: 399; } .games-bar-modal, .games-bar-modal * { box-sizing: border-box; } .games-bar-modal button, .games-bar-modal input { font: inherit; } .games-bar-modal input::-moz-placeholder { color: #a0a0a0; } .games-bar-modal input:-ms-input-placeholder { color: #a0a0a0; } .games-bar-modal input::-ms-input-placeholder { color: #a0a0a0; } .games-bar-modal input::placeholder { color: #a0a0a0; } .games-bar-modal__overlay { position: absolute; inset: 0; background: rgba(18, 22, 40, 0.6); } .games-bar-modal__panel { position: relative; width: 100%; max-width: 960px; max-height: 90vh; min-height: 90vh; background: #fff; border-radius: 24px; border: 2px solid #23bdf1; padding: 30px; box-shadow: 0 30px 80px rgba(9, 11, 24, 0.35); overflow: hidden; display: flex; flex-direction: column; } .games-bar-modal__panel::-webkit-scrollbar { width: 10px; } .games-bar-modal__panel::-webkit-scrollbar-thumb { background: #23bdf1; border-radius: 10px; } .games-bar-modal__panel::-webkit-scrollbar-track { background: #eef3ff; } .games-bar-modal__close { position: absolute; top: 18px; right: 18px; border: none; background: transparent; cursor: pointer; } .games-bar-modal__tabs { display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: 18px; background: #f7f7f7; border-radius: 999px; } .games-bar-modal__tab { position: relative; border: none; background: #f7f7f7; padding: 10px 22px; font-size: 16px; color: #24305b; cursor: pointer; z-index: 0; white-space: nowrap; } .games-bar-modal__tabs .games-bar-modal__tab:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .games-bar-modal__tabs .games-bar-modal__tab:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .games-bar-modal__tab--active { background: linear-gradient(181deg, rgb(255, 166, 40) 0%, rgb(255, 40, 101) 37%, rgb(215, 35, 132) 100%); border-radius: 999px; } .games-bar-modal__tab--active { color: #ffffff; } .games-bar-modal__search { position: relative; margin-bottom: 20px; } .games-bar-modal__search-input { width: 100%; border: 2px solid #eeeeee; border-radius: 16px; padding: 12px 52px 12px 50px; font-size: 16px; background: #ffffff; color: #24305b; } .games-bar-modal__search-input:focus { border-color: #9b37ff; } .games-bar-modal__search-icon, .games-bar-modal__search-clear { position: absolute; top: 50%; transform: translateY(-50%); } .games-bar-modal__search-icon { left: 18px; color: #24305b; transition: color 0.2s ease; } .games-bar-modal__search:focus-within .games-bar-modal__search-icon circle, .games-bar-modal__search:focus-within .games-bar-modal__search-icon path { stroke: #9b37ff; } .games-bar-modal__search-clear { right: 18px; border: none; background: transparent; cursor: pointer; } .games-bar-modal__body { overflow-y: auto; padding-right: 6px; } .games-bar-modal__grid { display: grid; gap: 16px; } .games-bar-modal .games-bar__toolbar { margin-bottom: 14px; } .games-bar-modal__grid--slots, .games-bar-modal__grid--providers { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .games-bar-modal__card { border: none; border-radius: 16px; padding: 14px 16px; background: #f7f7f7; color: #24305b; display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; text-decoration: none; } .games-bar-modal__card:hover { background: #ebedf1; transform: translateY(-2px); } .games-bar-modal__card-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .games-bar-modal__card-icon img { max-width: 100%; max-height: 100%; } .games-bar-modal__grid--slots .games-bar-modal__card-icon img { max-width: 130%; max-height: 130%; } .games-bar-modal__card-label { font-size: 16px; text-align: left; } .games-bar-modal__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; } .games-bar-modal__heading-title { font-size: 24px; font-style: italic; letter-spacing: 0.5px; } .games-bar-modal__heading-image { width: 44px; height: 44px; border: 2px solid #eeeeee; border-radius: 12px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .games-bar-modal__heading-image img { max-width: 100%; max-height: 100%; } .games-bar-modal__heading-image--category img { max-width: 80%; max-height: 80%; } .games-bar-modal__category { margin-bottom: 20px; } .games-bar-modal__category-header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 14px; } .games-bar-modal__category-title { font-size: 24px; font-style: italic; letter-spacing: 0.5px; color: #24305b; } .games-bar-modal__category-actions { display: flex; align-items: center; gap: 10px; } .games-bar-modal__see-all { border: 2px solid #23bdf1; background: transparent; color: #23bdf1; border-radius: 999px; padding: 3px 9px; cursor: pointer; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; display: inline-flex; align-items: center; text-decoration: none; } .games-bar-modal__see-all:hover { text-decoration: none; } .games-bar-modal__section--games .games-bar__modal-grid.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .games-bar-modal__section--bets { display: flex; flex-direction: column; } .games-bar-modal__bets-shell { width: 100%; background: #f7f7f7; border-radius: 20px; padding: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); overflow-x: auto; } .games-bar-modal__bets-table { width: 100%; border-collapse: collapse; color: #24305b; font-size: 13px; } .games-bar-modal__bets-table thead th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7190; padding: 0 6px 8px; border-bottom: 2px solid rgba(36, 48, 91, 0.1); white-space: nowrap; } .games-bar-modal__bets-table tbody td { padding: 10px 6px; border-bottom: 1px solid rgba(36, 48, 91, 0.08); font-size: 13px; } .games-bar-modal__bets-table tbody tr:last-child td { border-bottom: none; } .games-bar-modal__bets-table tbody tr.games-bar-modal__bets-date { background: rgba(255, 255, 255, 0.4); font-style: italic; text-align: center; } .games-bar-modal__bets-table tbody tr:hover { background: rgba(255, 255, 255, 0.7); } .games-bar-modal__bets-table tbody td:nth-child(3), .games-bar-modal__bets-table tbody td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .games-bar-modal__bets-table tbody td:nth-child(1) { white-space: nowrap; } .games-bar-modal__bets-table tbody td:nth-child(2) { width: 100%; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .games-bar-modal__bets-table tbody td span { display: block; text-align: center; color: #6b7190; font-weight: 500; } .games-bar-modal__empty { text-align: center; padding: 30px 0; } body.games-bar__modal-open { overflow: hidden; } .games-bar-modal-fade-enter-active, .games-bar-modal-fade-leave-active { transition: opacity 0.2s ease; } .games-bar-modal-fade-enter, .games-bar-modal-fade-leave-to { opacity: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 1200px) { .games-bar { padding: 20px; } .games-bar__category-list .game { flex: 0 0 160px; } } @media (max-width: 992px) { .games-bar-modal { padding: 0; align-items: stretch; justify-content: stretch; } .games-bar-modal__panel { width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; border: none; box-shadow: none; padding: 24px 16px 54px 16px; } .bottom-bar-condensed .games-bar-modal__panel { padding-bottom: 40px; } .games-bar { padding: 16px; } .games-bar__toolbar-shell { padding-right: 120px; } .games-bar__category-header { justify-content: space-between; } .games-bar__category-actions { justify-content: flex-end; } .games-bar-modal-fade-enter-active .games-bar-modal__panel, .games-bar-modal-fade-leave-active .games-bar-modal__panel { transition: transform 0.25s ease; } .games-bar-modal-fade-enter .games-bar-modal__panel, .games-bar-modal-fade-leave-to .games-bar-modal__panel { transform: translateY(100%); } .games-bar-modal__category-title { font-size: 20px; } .games-bar-modal__heading-title { font-size: 20px; } .games-bar-modal__category-header { min-height: 36px; } .games-bar-modal__heading-image { width: 36px; height: 36px; } } @media (max-width: 768px) { .games-bar__toolbar-shell { padding: 22px 18px 22px 18px; } .games-bar__toolbar-shadow { display: none; } .games-bar__browse { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 50%); padding: 6px 14px; font-size: 14px; gap: 6px; /* box-shadow: 0 6px 15px rgba(36, 48, 91, 0.18); */ } .games-bar__browse-icon svg { width: 16px; height: 16px; } .games-bar__toolbar-track { gap: 4px; } .games-bar-modal__grid--slots, .games-bar-modal__grid--providers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 320px) { .games-bar-modal__grid--slots, .games-bar-modal__grid--providers { grid-template-columns: 1fr; } .games-bar-modal__tab { padding: 8px 16px; } }