:root {
    --color-ball-red-03:    #831a2c;
    --color-ball-red-02:    #5e0917;
    --color-white:          #ffffff;
    --color-white-10:       rgba(255,255,255,0.10);
    --color-white-20:       rgba(255,255,255,0.20);
    --color-white-40:       rgba(255,255,255,0.40);
    --color-white-70:       rgba(255,255,255,0.70);
    --color-white-80:       rgba(255,255,255,0.80);
    --color-white-90:       rgba(255,255,255,0.90);
    --color-ball-yellow-05: #ffe73f;
    --color-ball-yellow-03: #eb991b;
    --color-ball-yellow-text: #EB9563;
    --color-ball-yellow-light: #F1E7A1;
    --color-ball-yellow-dark: #C8BB6B;
    --color-grey-05:        #f9f9f9;
    --color-grey-045:       #f3f3f3;
    --color-grey-04:        #e3e3e3;
    --color-grey-03:        #cacaca;
    --color-grey-02:        #adadad;
    --color-grey-01:        #898989;
    --color-grey-00:        #4f4f4f;
    --color-black-00:       #000000;
    --color-black-00-05:    rgba(0,0,0,0.05);
    --color-black-00-10:    rgba(0,0,0,0.1);
    --color-black-00-20:    rgba(0,0,0,0.2);
    --color-black-01:       #131313;
    --color-black-02:       #262626;
    --color-black-02-70:    rgba(38,38,38,0.7);
    --color-black-02-30:    rgba(38,38,38,0.3);
    --color-transparent:    transparent;

    --trans-ease: 0.3s ease-in-out;
    --trans-func: 0.7s cubic-bezier(0.68, 0.1, 0, 1);
    --trans-props-default: color, background-color, border-color, transform, opacity, box-shadow;

    
    --ws-max-width: 1520px;
    --ws-min-width:  320px;
    --ws-padding: 20px;
    --ws-section-gap: 10px;
    --ws-section-gap-large: 20px;
    --max-menu-items-width: 900px;

    --mi-icon-size: 60px;
    --mi-icon-small-size: 40px;

    --option-icon-size: 80px;
    --option-icon-size-small: 70px;
    --option-padding-h: 20px;
    --option-padding-v: 15px;

    --hint-icon-size: 20px;

    --max-rank-badge-width: 150px;

    
    --btn-small-gap:  10px;
    --btn-small-size: 45px;
    --btn-solid-size: 50px;
    --btn-small-br:   4px;
    --btn-small-padding-v: 8px;
    --btn-small-padding-h: 18px;
    --btn-icon-size-small: 18px;

    
    --theme-bg:                   var(--color-white);
    --theme-nav-bg:               var(--color-white-70);
    --theme-font:                 'Prosto One', sans-serif;
    --theme-text:                 var(--color-black-00);
    --theme-menu-normal:          var(--color-black-00);
    --theme-menu-hover:           var(--color-ball-red-03);
    --theme-menu-bg-hover:        var(--color-grey-045);
    --theme-reserve-text:         var(--color-ball-red-03);
    --theme-reserve-text-hover:   var(--color-white);
    --theme-reserve-bg:           var(--color-transparent);
    --theme-reserve-bg-hover:     var(--color-ball-red-03);
    --theme-reserve-border:       var(--color-ball-red-03);
    --theme-reserve-border-hover: var(--color-ball-red-03);
    --theme-wheat: var(--color-ball-yellow-03);

    
    --theme-option-text:         var(--color-black-00);
    --theme-option-text-hover:   var(--color-white);
    --theme-option-text-video:   var(--color-white-70);
    --theme-option-border:       var(--color-black-00);
    --theme-option-border-hover: var(--color-black-00);
    --theme-option-bg:           var(--color-transparent);
    --theme-option-bg-hover:     var(--color-black-00);
    --theme-option-info-bg:      var(--color-grey-03);
    --theme-option-info-hover:   var(--color-ball-yellow-text);
    --theme-option-info-bg-hover: var(--color-ball-yellow-03);
    --theme-option-rank-border:  var(--color-grey-04);
    --theme-option-rank-bg:      var(--color-grey-05);
    --theme-option-accident-bg:  var(--color-black-02);

    
    --theme-paid-bg:                  var(--color-ball-red-03);
    --theme-paid-btn-text:            var(--color-white-70);
    --theme-paid-btn-text-hover:      var(--color-white);
    --theme-paid-btn-text-solid:      var(--color-white);
    --theme-paid-btn-text-solid-hover:var(--color-black-00);
    --theme-paid-btn-border:          var(--color-white-10);
    --theme-paid-btn-border-hover:    var(--color-white-20);
    --theme-paid-btn-bg:              var(--color-white-10);
    --theme-paid-btn-bg-solid-hover:  var(--color-white-90);
    --theme-paid-cb-border:           var(--color-white-10);
    --theme-paid-sign:                var(--color-white-20);
    --theme-paid-hint-text: var(--color-white-70);
    --theme-paid-hint-icon: var(--color-white-40);
    --theme-paid-hint-text-hover: var(--color-ball-yellow-03);
    --theme-paid-hint-icon-hover: var(--color-ball-yellow-03);
    --theme-paid-link-hover: var(--color-white);   

    
    --theme-reserved-bg: var(--color-ball-yellow-light);
    --theme-reserved-text: var(--color-grey-00);
    --theme-reserved-text-solid: var(--color-black-00);
    --theme-reserved-btn-text: var(--color-grey-00);
    --theme-reserved-btn-text-solid: var(--color-black-00);
    --theme-reserved-btn-text-hover: var(--color-black-00);
    --theme-reserved-btn-bg: var(--color-black-00-05);
    --theme-reserved-btn-border: var(--color-black-00-05);
    --theme-reserved-btn-border-hover: var(--color-black-00-20);
    --theme-reserved-btn-border-solid-hover: var(--color-white);
    --theme-reserved-pay-text: var(--color-black-00);
    --theme-reserved-pay-bg: var(--color-white-70);
    --theme-reserved-pay-border: var(--color-black-02);
    --theme-reserved-pay-text-hover: var(--color-white);
    --theme-reserved-pay-border-hover: var(--color-ball-red-03);
    --theme-reserved-pay-bg-hover: var(--color-ball-red-03);
    --theme-reserved-badge-color: var(--color-white);
    --theme-reserved-badge-bg: var(--color-ball-red-03);
    --theme-reserved-cb-border: var(--color-black-00-10);
    --theme-reserved-sign: var(--color-black-00-20);
    --theme-reserved-hint-text: var(--color-grey-00);
    --theme-reserved-hint-icon: var(--color-black-00-20);
    --theme-reserved-hint-text-hover: var(--color-ball-red-03);
    --theme-reserved-hint-icon-hover: var(--color-ball-red-03);

    
    --text-normal:        13px/16px var(--theme-font);
    --text-normal-plus:   16px/18px var(--theme-font);
    --text-large:         20px/26px var(--theme-font);
    --text-large-plus:    24px/30px var(--theme-font);
    --text-xl:            40px/34px var(--theme-font);
    --text-currency:      30px/30px var(--theme-font);
    --text-button:        14px/16px var(--theme-font);
    --text-small-label:   12px/14px var(--theme-font);
    --text-small-link:    12px/14px var(--theme-font);
    --text-badge:          8px/14px var(--theme-font);
    --text-time-selector: 700 18px/normal var(--theme-font);
    --text-date-selector: 700 20px/normal var(--theme-font);
    --text-wheat-amount: 22px/18px var(--theme-font);
    --text-wheat-label:  12px/12px var(--theme-font);

    --option-hint-text: var(--text-small-label);
    --option-name-text: var(--text-normal-plus);
}

.dark-mode {
        
    --theme-bg:                   var(--color-black-02);
    --theme-nav-bg:               var(--color-black-02-70);
    --theme-text:                 var(--color-black-00);
    --theme-menu-normal:          var(--color-grey-02);
    --theme-menu-hover:           var(--color-white-90);
    --theme-menu-bg-hover:        var(--color-black-01);
    --theme-reserve-text:         var(--color-grey-02);
    --theme-reserve-text-hover:   var(--color-black-01);
    --theme-reserve-bg:           var(--color-transparent);
    --theme-reserve-bg-hover:     var(--color-white-80);
    --theme-reserve-border:       var(--color-grey-00);
    --theme-reserve-border-hover: var(--color-white-80);
    --theme-wheat: var(--color-ball-yellow-03);

    
    --theme-option-text:         var(--color-grey-02);
    --theme-option-text-hover:   var(--color-white-80);
    --theme-option-text-video:   var(--color-grey-02);
    --theme-option-border:       var(--color-grey-00);
    --theme-option-border-hover: var(--color-black-00);
    --theme-option-bg:           var(--color-transparent);
    --theme-option-bg-hover:     var(--color-black-01);
    --theme-option-info-bg:      var(--color-grey-01);
    --theme-option-info-hover:   var(--color-ball-yellow-text);
    --theme-option-info-bg-hover: var(--color-ball-yellow-03);
    --theme-option-rank-border:  var(--color-grey-00);
    --theme-option-rank-bg:      var(--color-white-10);
    --theme-option-accident-bg:  var(--color-black-02);

    --theme-paid-bg:                  var(--color-ball-red-02);
    --theme-paid-btn-text:            var(--color-white-40);
    --theme-paid-btn-text-hover:      var(--color-white-70);
    --theme-paid-btn-text-solid:      var(--color-white-70);
    --theme-paid-btn-text-solid-hover:var(--color-black-00);
    --theme-paid-btn-border:          var(--color-white-10);
    --theme-paid-btn-border-hover:    var(--color-white-20);
    --theme-paid-btn-bg:              var(--color-white-10);
    --theme-paid-btn-bg-solid-hover:  var(--color-white-90);
    --theme-paid-hint-text: var(--color-white-40);
    --theme-paid-hint-icon: var(--color-white-20);
    --theme-paid-link-hover: var(--color-white-90);
    

    --theme-reserved-bg: var(--color-ball-yellow-dark);
    --theme-reserved-text: var(--color-grey-00);
    --theme-reserved-text-solid: var(--color-black-00);
    --theme-reserved-btn-text: var(--color-grey-00);
    --theme-reserved-btn-text-solid: var(--color-black-00);
    --theme-reserved-btn-text-hover: var(--color-black-00);
    --theme-reserved-btn-bg: var(--color-black-00-05);
    --theme-reserved-btn-border: var(--color-black-00-05);
    --theme-reserved-btn-border-hover: var(--color-black-00-20);
    --theme-reserved-badge-bg: var(--color-ball-red-02);
    --theme-reserved-badge-color: var(--color-white-70);
}