.mat-ripple-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity, transform 0ms cubic-bezier(0, 0, .2, 1);
    transform: scale3d(0, 0, 0)
}

.cdk-overlay-container,
.cdk-global-overlay-wrapper {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.cdk-overlay-container {
    position: fixed;
    z-index: 1000
}

.cdk-overlay-container:empty {
    display: none
}

.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 1000
}

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%
}

.cdk-overlay-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1000;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
    opacity: 0
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 1
}

.cdk-overlay-dark-backdrop {
    background: rgba(0, 0, 0, .32)
}

.cdk-overlay-transparent-backdrop {
    transition: visibility 1ms linear, opacity 1ms linear;
    visibility: hidden;
    opacity: 1
}

.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0;
    visibility: visible
}

.cdk-overlay-backdrop-noop-animation {
    transition: none
}

.cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    min-height: 1px
}

@keyframes cdk-text-field-autofill-start {}

@keyframes cdk-text-field-autofill-end {}

.mat-mdc-focus-indicator {
    position: relative
}

.mat-mdc-focus-indicator:before {
    inset: 0;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: var(--mat-mdc-focus-indicator-display, none);
    border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
    border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px)
}

.mat-mdc-focus-indicator:focus:before {
    content: ""
}

html {
    --mat-option-selected-state-label-text-color: #3f51b5;
    --mat-option-label-text-color: rgba(0, 0, 0, .87);
    --mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);
    --mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);
    --mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)
}

html {
    --mat-optgroup-label-text-color: rgba(0, 0, 0, .87)
}

html {
    --mat-option-label-text-font: Roboto, sans-serif;
    --mat-option-label-text-line-height: 24px;
    --mat-option-label-text-size: 16px;
    --mat-option-label-text-tracking: .03125em;
    --mat-option-label-text-weight: 400
}

html {
    --mat-optgroup-label-text-font: Roboto, sans-serif;
    --mat-optgroup-label-text-line-height: 24px;
    --mat-optgroup-label-text-size: 16px;
    --mat-optgroup-label-text-tracking: .03125em;
    --mat-optgroup-label-text-weight: 400
}

@keyframes mdc-linear-progress-buffering {}

html {
    --mdc-filled-text-field-caret-color: #3f51b5;
    --mdc-filled-text-field-focus-active-indicator-color: #3f51b5;
    --mdc-filled-text-field-focus-label-text-color: rgba(63, 81, 181, .87);
    --mdc-filled-text-field-container-color: whitesmoke;
    --mdc-filled-text-field-disabled-container-color: #fafafa;
    --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, .6);
    --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);
    --mdc-filled-text-field-input-text-color: rgba(0, 0, 0, .87);
    --mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);
    --mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);
    --mdc-filled-text-field-error-focus-label-text-color: #f44336;
    --mdc-filled-text-field-error-label-text-color: #f44336;
    --mdc-filled-text-field-error-caret-color: #f44336;
    --mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, .42);
    --mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, .06);
    --mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, .87);
    --mdc-filled-text-field-error-active-indicator-color: #f44336;
    --mdc-filled-text-field-error-focus-active-indicator-color: #f44336;
    --mdc-filled-text-field-error-hover-active-indicator-color: #f44336;
    --mdc-outlined-text-field-caret-color: #3f51b5;
    --mdc-outlined-text-field-focus-outline-color: #3f51b5;
    --mdc-outlined-text-field-focus-label-text-color: rgba(63, 81, 181, .87);
    --mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, .6);
    --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);
    --mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, .87);
    --mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);
    --mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);
    --mdc-outlined-text-field-error-caret-color: #f44336;
    --mdc-outlined-text-field-error-focus-label-text-color: #f44336;
    --mdc-outlined-text-field-error-label-text-color: #f44336;
    --mdc-outlined-text-field-outline-color: rgba(0, 0, 0, .38);
    --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, .06);
    --mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, .87);
    --mdc-outlined-text-field-error-focus-outline-color: #f44336;
    --mdc-outlined-text-field-error-hover-outline-color: #f44336;
    --mdc-outlined-text-field-error-outline-color: #f44336;
    --mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, .38)
}

html {
    --mdc-filled-text-field-label-text-font: Roboto, sans-serif;
    --mdc-filled-text-field-label-text-size: 16px;
    --mdc-filled-text-field-label-text-tracking: .03125em;
    --mdc-filled-text-field-label-text-weight: 400;
    --mdc-outlined-text-field-label-text-font: Roboto, sans-serif;
    --mdc-outlined-text-field-label-text-size: 16px;
    --mdc-outlined-text-field-label-text-tracking: .03125em;
    --mdc-outlined-text-field-label-text-weight: 400;
    --mat-form-field-container-text-font: Roboto, sans-serif;
    --mat-form-field-container-text-line-height: 24px;
    --mat-form-field-container-text-size: 16px;
    --mat-form-field-container-text-tracking: .03125em;
    --mat-form-field-container-text-weight: 400;
    --mat-form-field-outlined-label-text-populated-size: 16px;
    --mat-form-field-subscript-text-font: Roboto, sans-serif;
    --mat-form-field-subscript-text-line-height: 20px;
    --mat-form-field-subscript-text-size: 12px;
    --mat-form-field-subscript-text-tracking: .0333333333em;
    --mat-form-field-subscript-text-weight: 400
}

html {
    --mat-select-panel-background-color: white;
    --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);
    --mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);
    --mat-select-placeholder-text-color: rgba(0, 0, 0, .6);
    --mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);
    --mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);
    --mat-select-focused-arrow-color: rgba(63, 81, 181, .87);
    --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)
}

html {
    --mat-select-trigger-text-font: Roboto, sans-serif;
    --mat-select-trigger-text-line-height: 24px;
    --mat-select-trigger-text-size: 16px;
    --mat-select-trigger-text-tracking: .03125em;
    --mat-select-trigger-text-weight: 400
}

html {
    --mat-autocomplete-background-color: white
}

html {
    --mat-menu-item-label-text-color: rgba(0, 0, 0, .87);
    --mat-menu-item-icon-color: rgba(0, 0, 0, .87);
    --mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, .04);
    --mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, .04);
    --mat-menu-container-color: white
}

html {
    --mat-menu-item-label-text-font: Roboto, sans-serif;
    --mat-menu-item-label-text-size: 16px;
    --mat-menu-item-label-text-tracking: .03125em;
    --mat-menu-item-label-text-line-height: 24px;
    --mat-menu-item-label-text-weight: 400
}

html {
    --mat-paginator-container-text-color: rgba(0, 0, 0, .87);
    --mat-paginator-container-background-color: white;
    --mat-paginator-enabled-icon-color: rgba(0, 0, 0, .54);
    --mat-paginator-disabled-icon-color: rgba(0, 0, 0, .12)
}

html {
    --mat-paginator-container-size: 56px
}

html {
    --mat-paginator-container-text-font: Roboto, sans-serif;
    --mat-paginator-container-text-line-height: 20px;
    --mat-paginator-container-text-size: 12px;
    --mat-paginator-container-text-tracking: .0333333333em;
    --mat-paginator-container-text-weight: 400;
    --mat-paginator-select-trigger-text-size: 12px
}

.mat-mdc-tab-group {
    --mdc-tab-indicator-active-indicator-color: #3f51b5;
    --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);
    --mat-tab-header-pagination-icon-color: #000;
    --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-active-label-text-color: #3f51b5;
    --mat-tab-header-active-ripple-color: #3f51b5;
    --mat-tab-header-inactive-ripple-color: #3f51b5;
    --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-active-focus-label-text-color: #3f51b5;
    --mat-tab-header-active-hover-label-text-color: #3f51b5;
    --mat-tab-header-active-focus-indicator-color: #3f51b5;
    --mat-tab-header-active-hover-indicator-color: #3f51b5
}

.mat-mdc-tab-group.mat-accent {
    --mdc-tab-indicator-active-indicator-color: #ff4081;
    --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);
    --mat-tab-header-pagination-icon-color: #000;
    --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-active-label-text-color: #ff4081;
    --mat-tab-header-active-ripple-color: #ff4081;
    --mat-tab-header-inactive-ripple-color: #ff4081;
    --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-active-focus-label-text-color: #ff4081;
    --mat-tab-header-active-hover-label-text-color: #ff4081;
    --mat-tab-header-active-focus-indicator-color: #ff4081;
    --mat-tab-header-active-hover-indicator-color: #ff4081
}

.mat-mdc-tab-group.mat-warn {
    --mdc-tab-indicator-active-indicator-color: #f44336;
    --mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);
    --mat-tab-header-pagination-icon-color: #000;
    --mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-active-label-text-color: #f44336;
    --mat-tab-header-active-ripple-color: #f44336;
    --mat-tab-header-inactive-ripple-color: #f44336;
    --mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);
    --mat-tab-header-active-focus-label-text-color: #f44336;
    --mat-tab-header-active-hover-label-text-color: #f44336;
    --mat-tab-header-active-focus-indicator-color: #f44336;
    --mat-tab-header-active-hover-indicator-color: #f44336
}

.mat-mdc-tab-group.mat-background-primary {
    --mat-tab-header-with-background-background-color: #3f51b5;
    --mat-tab-header-with-background-foreground-color: white
}

.mat-mdc-tab-group.mat-background-accent {
    --mat-tab-header-with-background-background-color: #ff4081;
    --mat-tab-header-with-background-foreground-color: white
}

.mat-mdc-tab-group.mat-background-warn {
    --mat-tab-header-with-background-background-color: #f44336;
    --mat-tab-header-with-background-foreground-color: white
}

html {
    --mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);
    --mdc-checkbox-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-icon-color: #ff4081;
    --mdc-checkbox-selected-hover-icon-color: #ff4081;
    --mdc-checkbox-selected-icon-color: #ff4081;
    --mdc-checkbox-selected-pressed-icon-color: #ff4081;
    --mdc-checkbox-unselected-focus-icon-color: #212121;
    --mdc-checkbox-unselected-hover-icon-color: #212121;
    --mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);
    --mdc-checkbox-unselected-pressed-icon-color: rgba(0, 0, 0, .54);
    --mdc-checkbox-selected-focus-state-layer-color: #ff4081;
    --mdc-checkbox-selected-hover-state-layer-color: #ff4081;
    --mdc-checkbox-selected-pressed-state-layer-color: #ff4081;
    --mdc-checkbox-unselected-focus-state-layer-color: black;
    --mdc-checkbox-unselected-hover-state-layer-color: black;
    --mdc-checkbox-unselected-pressed-state-layer-color: black
}

html {
    --mdc-checkbox-state-layer-size: 40px
}

html {
    --mat-table-background-color: white;
    --mat-table-header-headline-color: rgba(0, 0, 0, .87);
    --mat-table-row-item-label-text-color: rgba(0, 0, 0, .87);
    --mat-table-row-item-outline-color: rgba(0, 0, 0, .12)
}

html {
    --mat-table-header-container-height: 56px;
    --mat-table-footer-container-height: 52px;
    --mat-table-row-item-container-height: 52px
}

html {
    --mat-table-header-headline-font: Roboto, sans-serif;
    --mat-table-header-headline-line-height: 22px;
    --mat-table-header-headline-size: 14px;
    --mat-table-header-headline-weight: 500;
    --mat-table-header-headline-tracking: .0071428571em;
    --mat-table-row-item-label-text-font: Roboto, sans-serif;
    --mat-table-row-item-label-text-line-height: 20px;
    --mat-table-row-item-label-text-size: 14px;
    --mat-table-row-item-label-text-weight: 400;
    --mat-table-row-item-label-text-tracking: .0178571429em;
    --mat-table-footer-supporting-text-font: Roboto, sans-serif;
    --mat-table-footer-supporting-text-line-height: 20px;
    --mat-table-footer-supporting-text-size: 14px;
    --mat-table-footer-supporting-text-weight: 400;
    --mat-table-footer-supporting-text-tracking: .0178571429em
}

html {
    --mat-badge-background-color: #3f51b5;
    --mat-badge-text-color: white;
    --mat-badge-disabled-state-background-color: #b9b9b9;
    --mat-badge-disabled-state-text-color: rgba(0, 0, 0, .38)
}

html {
    --mat-badge-text-font: Roboto, sans-serif;
    --mat-badge-text-size: 12px;
    --mat-badge-text-weight: 600;
    --mat-badge-small-size-text-size: 9px;
    --mat-badge-large-size-text-size: 24px
}

html {
    --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, .87);
    --mat-bottom-sheet-container-background-color: white
}

html {
    --mat-bottom-sheet-container-text-font: Roboto, sans-serif;
    --mat-bottom-sheet-container-text-line-height: 20px;
    --mat-bottom-sheet-container-text-size: 14px;
    --mat-bottom-sheet-container-text-tracking: .0178571429em;
    --mat-bottom-sheet-container-text-weight: 400
}

html {
    --mat-legacy-button-toggle-text-color: rgba(0, 0, 0, .38);
    --mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, .12);
    --mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, .54);
    --mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;
    --mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);
    --mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;
    --mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd;
    --mat-standard-button-toggle-text-color: rgba(0, 0, 0, .87);
    --mat-standard-button-toggle-background-color: white;
    --mat-standard-button-toggle-state-layer-color: black;
    --mat-standard-button-toggle-selected-state-background-color: #e0e0e0;
    --mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);
    --mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);
    --mat-standard-button-toggle-disabled-state-background-color: white;
    --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, .87);
    --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
    --mat-standard-button-toggle-divider-color: #e0e0e0
}

html {
    --mat-standard-button-toggle-height: 48px
}

html {
    --mat-legacy-button-toggle-text-font: Roboto, sans-serif;
    --mat-standard-button-toggle-text-font: Roboto, sans-serif
}

html {
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #3f51b5;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(63, 81, 181, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(63, 81, 181, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(63, 81, 181, .3);
    --mat-datepicker-toggle-active-state-icon-color: #3f51b5;
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(63, 81, 181, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
    --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .38);
    --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, .18);
    --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-date-outline-color: transparent;
    --mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, .38);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .24);
    --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);
    --mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, .38);
    --mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, .38);
    --mat-datepicker-calendar-container-background-color: white;
    --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)
}

html {
    --mat-datepicker-calendar-text-font: Roboto, sans-serif;
    --mat-datepicker-calendar-text-size: 13px;
    --mat-datepicker-calendar-body-label-text-size: 14px;
    --mat-datepicker-calendar-body-label-text-weight: 500;
    --mat-datepicker-calendar-period-button-text-size: 14px;
    --mat-datepicker-calendar-period-button-text-weight: 500;
    --mat-datepicker-calendar-header-text-size: 11px;
    --mat-datepicker-calendar-header-text-weight: 400
}

html {
    --mat-divider-color: rgba(0, 0, 0, .12)
}

html {
    --mat-expansion-container-background-color: white;
    --mat-expansion-container-text-color: rgba(0, 0, 0, .87);
    --mat-expansion-actions-divider-color: rgba(0, 0, 0, .12);
    --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, .04);
    --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, .04);
    --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, .26);
    --mat-expansion-header-text-color: rgba(0, 0, 0, .87);
    --mat-expansion-header-description-color: rgba(0, 0, 0, .54);
    --mat-expansion-header-indicator-color: rgba(0, 0, 0, .54)
}

html {
    --mat-expansion-header-collapsed-state-height: 48px;
    --mat-expansion-header-expanded-state-height: 64px
}

html {
    --mat-expansion-header-text-font: Roboto, sans-serif;
    --mat-expansion-header-text-size: 14px;
    --mat-expansion-header-text-weight: 500;
    --mat-expansion-header-text-line-height: inherit;
    --mat-expansion-header-text-tracking: inherit;
    --mat-expansion-container-text-font: Roboto, sans-serif;
    --mat-expansion-container-text-line-height: 20px;
    --mat-expansion-container-text-size: 14px;
    --mat-expansion-container-text-tracking: .0178571429em;
    --mat-expansion-container-text-weight: 400
}

html {
    --mat-grid-list-tile-header-primary-text-size: 14px;
    --mat-grid-list-tile-header-secondary-text-size: 12px;
    --mat-grid-list-tile-footer-primary-text-size: 14px;
    --mat-grid-list-tile-footer-secondary-text-size: 12px
}

html {
    --mat-icon-color: inherit
}

html {
    --mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);
    --mat-sidenav-container-background-color: white;
    --mat-sidenav-container-text-color: rgba(0, 0, 0, .87);
    --mat-sidenav-content-background-color: #fafafa;
    --mat-sidenav-content-text-color: rgba(0, 0, 0, .87);
    --mat-sidenav-scrim-color: rgba(0, 0, 0, .6)
}

html {
    --mat-stepper-header-icon-foreground-color: white;
    --mat-stepper-header-selected-state-icon-background-color: #3f51b5;
    --mat-stepper-header-selected-state-icon-foreground-color: white;
    --mat-stepper-header-done-state-icon-background-color: #3f51b5;
    --mat-stepper-header-done-state-icon-foreground-color: white;
    --mat-stepper-header-edit-state-icon-background-color: #3f51b5;
    --mat-stepper-header-edit-state-icon-foreground-color: white;
    --mat-stepper-container-color: white;
    --mat-stepper-line-color: rgba(0, 0, 0, .12);
    --mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, .04);
    --mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, .04);
    --mat-stepper-header-label-text-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, .87);
    --mat-stepper-header-error-state-label-text-color: #f44336;
    --mat-stepper-header-icon-background-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-error-state-icon-foreground-color: #f44336;
    --mat-stepper-header-error-state-icon-background-color: transparent
}

html {
    --mat-stepper-header-height: 72px
}

html {
    --mat-stepper-container-text-font: Roboto, sans-serif;
    --mat-stepper-header-label-text-font: Roboto, sans-serif;
    --mat-stepper-header-label-text-size: 14px;
    --mat-stepper-header-label-text-weight: 400;
    --mat-stepper-header-error-state-label-text-size: 16px;
    --mat-stepper-header-selected-state-label-text-size: 16px;
    --mat-stepper-header-selected-state-label-text-weight: 400
}

html {
    --mat-toolbar-container-background-color: whitesmoke;
    --mat-toolbar-container-text-color: rgba(0, 0, 0, .87)
}

html {
    --mat-toolbar-standard-height: 64px;
    --mat-toolbar-mobile-height: 56px
}

html {
    --mat-toolbar-title-text-font: Roboto, sans-serif;
    --mat-toolbar-title-text-line-height: 32px;
    --mat-toolbar-title-text-size: 20px;
    --mat-toolbar-title-text-tracking: .0125em;
    --mat-toolbar-title-text-weight: 500
}

:root { /* ---------- PRIMARY (GREEN) ---------- */
  --ui-color-primary-50:  #ecfdf5;
  --ui-color-primary-50-oklch: oklch(98.2% 0.018 155.826);

  --ui-color-primary-100: #d1fae5;
  --ui-color-primary-100-oklch: oklch(96.2% 0.044 156.743);

  --ui-color-primary-200: #a7f3d0;
  --ui-color-primary-200-oklch: oklch(92.5% 0.084 155.995);

  --ui-color-primary-300: #6ee7b7;
  --ui-color-primary-300-oklch: oklch(87.1% 0.15 154.449);

  --ui-color-primary-400: #4ade80;
  --ui-color-primary-400-oklch: oklch(79.2% 0.209 151.711);

  --ui-color-primary-500: #22c55e;
  --ui-color-primary-500-oklch: oklch(72.3% 0.219 149.579);

  --ui-color-primary-600: #16a34a;
  --ui-color-primary-600-oklch: oklch(62.7% 0.194 149.214);

  --ui-color-primary-700: #15803d;
  --ui-color-primary-700-oklch: oklch(52.7% 0.154 150.069);

  --ui-color-primary-800: #166534;
  --ui-color-primary-800-oklch: oklch(44.8% 0.119 151.328);

  --ui-color-primary-900: #14532d;
  --ui-color-primary-900-oklch: oklch(39.3% 0.095 152.535);

  --ui-color-primary-950: #052e16;
  --ui-color-primary-950-oklch: oklch(26.6% 0.065 152.934);

  /* ---------- SECONDARY / INFO (BLUE) ---------- */
  --ui-color-secondary-50: #eff6ff;
  --ui-color-secondary-50-oklch: oklch(97% 0.014 254.604);

  --ui-color-secondary-100: #dbeafe;
  --ui-color-secondary-100-oklch: oklch(93.2% 0.032 255.585);

  --ui-color-secondary-200: #bfdbfe;
  --ui-color-secondary-200-oklch: oklch(88.2% 0.059 254.128);

  --ui-color-secondary-300: #93c5fd;
  --ui-color-secondary-300-oklch: oklch(80.9% 0.105 251.813);

  --ui-color-secondary-400: #60a5fa;
  --ui-color-secondary-400-oklch: oklch(70.7% 0.165 254.624);

  --ui-color-secondary-500: #3b82f6;
  --ui-color-secondary-500-oklch: oklch(62.3% 0.214 259.815);

  --ui-color-secondary-600: #2563eb;
  --ui-color-secondary-600-oklch: oklch(54.6% 0.245 262.881);

  --ui-color-secondary-700: #1d4ed8;
  --ui-color-secondary-700-oklch: oklch(48.8% 0.243 264.376);

  --ui-color-secondary-800: #1e40af;
  --ui-color-secondary-800-oklch: oklch(42.4% 0.199 265.638);

  --ui-color-secondary-900: #1e3a8a;
  --ui-color-secondary-900-oklch: oklch(37.9% 0.146 265.522);

  --ui-color-secondary-950: #172554;
  --ui-color-secondary-950-oklch: oklch(28.2% 0.091 267.935);

  /* ---------- WARNING / YELLOW ---------- */
  --ui-color-warning-500: #f59e0b;
  --ui-color-warning-500-oklch: oklch(79.5% 0.184 86.047);

  /* ---------- ERROR / RED ---------- */
  --ui-color-error-500: #ef4444;
  --ui-color-error-500-oklch: oklch(63.7% 0.237 25.331);

  /* ---------- NEUTRALS ---------- */
  --ui-color-neutral-50: #f8fafc;
  --ui-color-neutral-50-oklch: oklch(98.4% 0.003 247.858);
  --ui-color-neutral-100: #f1f5f9;
  --ui-color-neutral-200: #e2e8f0;
  --ui-color-neutral-300: #cbd5f5;
  --ui-color-neutral-400: #94a3b8;
  --ui-color-neutral-500: #64748b;
  --ui-color-neutral-600: #475569;
  --ui-color-neutral-700: #334155;
  --ui-color-neutral-800: #1e293b;
  --ui-color-neutral-900: #0f172a;
  --ui-color-neutral-950: #020617; 


  --color-bg: #f3f3f4;
  --color-card: #ffffff;
  --color-header: #001f3b;
  --color-card-top: #f8f8f8;
  --color-card-top2: rgba(255, 255, 255, .7);
  --color-card-lay: #001f3b;
  --color-text: #090a0b;
  --color-text2: #7e8392;
  --color-primary: rgb(45 152 85);
  --color-secondary: #2563eb;
  --ui-primary var(--ui-color-primary-500);
  --ui-border: var(--ui-color-neutral-800);
  --ui-text-highlighted: #090a0b;
  --ui-active-button: #f3f8f1;
  --ui-ring-width: 1px;
  --ui-ring-color: color-mix(in oklab, var(--ui-primary) 25%, transparent);
  --ui-image-hero: url("/resources/img/soccer.webp");
  --ui-image-prediction: url("/dist/static/img/bg-soccer.png");
  --ui-card-divider: #f2f3f4;
  --ui-card-divider-b: #e5e6e9;
  --ui-card-wxw: #fafafa;
  --ui-tourna-grd: #f3f8f1;
  --ui-tourna-grd2: #edf4fc;
  --ui-bet-button: rgba(238, 238, 238);
  --sk-border: #e2e8f0;
  --sk-bg: #ffffff;

  --sk-grad-1: #d5e4ec3b;
  --sk-grad-2: #eaeff2c4;
  --sk-grad-3: #f6f7f8;
  --sk-grad-4: #d1e0ef40;


}

@font-face {
    font-family: primeicons;
    font-display: block;
    src: url(primeicons.ffecb2549ad1765a.eot);
    src: url(primeicons.ffecb2549ad1765ad41d.eot?#iefix) format("embedded-opentype"), url(primeicons.ba3f916dfb64be8c.woff2) format("woff2"), url(primeicons.f8b9e8a4e401b603.woff) format("woff"), url(primeicons.0112589c5695a9ed.ttf) format("truetype"), url(primeicons.943ab24c43224d29d41d.svg?#primeicons) format("svg");
    font-weight: 400;
    font-style: normal
}

.pi {
    font-family: primeicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.pi:before {
    --webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@keyframes fa-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.pi-check-square:before {
    content: "\e98c"
}

.pi-table:before {
    content: "\e969"
}

.pi-question-circle:before {
    content: "\e959"
}

.pi-filter:before {
    content: "\e94c"
}

.pi-clock:before {
    content: "\e940"
}

.pi-chevron-circle-left:before {
    content: "\e928"
}

.pi-chevron-circle-down:before {
    content: "\e929"
}

.pi-chevron-circle-right:before {
    content: "\e92a"
}

.pi-chevron-circle-up:before {
    content: "\e92b"
}

.pi-star:before {
    content: "\e937"
}

.pi-chevron-left:before {
    content: "\e900"
}

.pi-chevron-right:before {
    content: "\e901"
}

.pi-chevron-down:before {
    content: "\e902"
}

.pi-chevron-up:before {
    content: "\e903"
}

.pi-check:before {
    content: "\e909"
}

.pi-check-circle:before {
    content: "\e90a"
}

.pi-info-circle:before {
    content: "\e924"
}

html,
body,
div,
span,
object,
p,
a,
abbr,
code,
del,
img,
s,
small,
strong,
sub,
var,
b,
i,
center,
dd,
ol,
ul,
li,
form,
label,
table,
caption,
tbody,
thead,
tr,
th,
td,
article,
aside,
details,
embed,
footer,
header,
menu,
nav,
section,
summary,
time,
mark {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-weight: 400;
    font-size: 1rem
}

article,
aside,
details,
footer,
header,
menu,
nav,
section {
    display: block
}

html,
body {
    height: 100%
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

a {
    text-decoration: none;
    color: inherit
}

a:focus {
    outline: none
}

strong,
b {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none
}

input,
select,
button,
textarea,
form {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    margin: 0
}

[type=text],
[type=password],
[type=date],
[type=datetime],
[type=month],
[type=week],
[type=email],
[type=number],
[type=search],
[type=time],
[type=url],
[type=color],
textarea {
    border: none;
    border-radius: 0
}

input[type=button],
input[type=submit],
button {
    cursor: pointer;
    color: inherit
}

input[type=text]::-ms-clear {
    display: none;
    width: 0;
    height: 0
}

input[type=text]::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display: none
}

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

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(30px) translateZ(0);
        opacity: 0
    }

    to {
        transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-30px) translateZ(0);
        opacity: 0
    }

    to {
        transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

@keyframes slideLeft {
    0% {
        transform: translate(30px) translateZ(0);
        opacity: 0
    }

    to {
        transform: translate(0) translateZ(0);
        opacity: 1
    }
}

@keyframes slideRight {
    0% {
        transform: translate(-30px) translateZ(0);
        opacity: 0
    }

    to {
        transform: translate(0) translateZ(0);
        opacity: 1
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(.5) translateZ(0);
        opacity: 0
    }

    to {
        transform: scale(1) translateZ(0);
        opacity: 1
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1.5) translateZ(0);
        opacity: 0
    }

    to {
        transform: scale(1) translateZ(0);
        opacity: 1
    }
}

@keyframes flipUp {
    0% {
        transform: rotateX(90deg) translateZ(0);
        opacity: 0
    }

    to {
        transform: rotateX(0) translateZ(0);
        opacity: 1
    }
}

@keyframes flipDown {
    0% {
        transform: rotateX(90deg) translateZ(0);
        opacity: 0
    }

    to {
        transform: rotateX(0) translateZ(0);
        opacity: 1
    }
}

@font-face {
    font-family: Roboto Condensed;
    src: local("Roboto Condensed Light"), local("RobotoCondensed-Light"), url(assets/fonts/RobotoCondensed/Robotocondensedlight.woff2) format("woff2"), url(assets/fonts/RobotoCondensed/Robotocondensedlight.woff) format("woff"), url(assets/fonts/RobotoCondensed/Robotocondensedlight.ttf) format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Roboto Condensed;
    src: local("Roboto Condensed Light Italic"), local("RobotoCondensed-LightItalic"), url(assets/fonts/RobotoCondensed/Robotocondensedlightitalic.woff2) format("woff2"), url(assets/fonts/RobotoCondensed/Robotocondensedlightitalic.woff) format("woff"), url(assets/fonts/RobotoCondensed/Robotocondensedlightitalic.ttf) format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: Roboto Condensed;
    src: local("Roboto Condensed"), local("RobotoCondensed-Regular"), url(assets/fonts/RobotoCondensed/Robotocondensed.woff2) format("woff2"), url(assets/fonts/RobotoCondensed/Robotocondensed.woff) format("woff"), url(assets/fonts/RobotoCondensed/Robotocondensed.ttf) format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Roboto Condensed;
    src: local("Roboto Condensed Italic"), local("RobotoCondensed-Italic"), url(assets/fonts/RobotoCondensed/Robotocondenseditalic.woff2) format("woff2"), url(assets/fonts/RobotoCondensed/Robotocondenseditalic.woff) format("woff"), url(assets/fonts/RobotoCondensed/Robotocondenseditalic.ttf) format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: Roboto Condensed;
    src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"), url(assets/fonts/RobotoCondensed/Robotocondensedbold.woff2) format("woff2"), url(assets/fonts/RobotoCondensed/Robotocondensedbold.woff) format("woff"), url(assets/fonts/RobotoCondensed/Robotocondensedbold.ttf) format("truetype");
    font-weight: 600;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Roboto Condensed;
    src: local("Roboto Condensed Bold Italic"), local("RobotoCondensed-BoldItalic"), url(assets/fonts/RobotoCondensed/Robotocondensedbolditalic.woff2) format("woff2"), url(assets/fonts/RobotoCondensed/Robotocondensedbolditalic.woff) format("woff"), url(assets/fonts/RobotoCondensed/Robotocondensedbolditalic.ttf) format("truetype");
    font-weight: 600;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: feather;
    src: url(feather-icons.09db9e03da2a28845f41.eot?e0a20d6edb74f52c006bb300686580b0);
    src: url(feather-icons.09db9e03da2a28845f41.eot?e0a20d6edb74f52c006bb300686580b0#iefix) format("embedded-opentype"), url(feather-icons.6f319d0a4ee6e1195f41.woff?e0a20d6edb74f52c006bb300686580b0) format("woff"), url(feather-icons.9ba3b9a7282b22775f41.ttf?e0a20d6edb74f52c006bb300686580b0) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

[class^=ft-],
[class*=" ft-"] {
    font-family: feather !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1em
}

.ft-activity:before {
    content: "\f101"
}

.ft-airplay:before {
    content: "\f102"
}

.ft-alert-circle:before {
    content: "\f103"
}

.ft-alert-octagon:before {
    content: "\f104"
}

.ft-alert-triangle:before {
    content: "\f105"
}

.ft-align-center:before {
    content: "\f106"
}

.ft-align-justify:before {
    content: "\f107"
}

.ft-align-left:before {
    content: "\f108"
}

.ft-align-right:before {
    content: "\f109"
}

.ft-anchor:before {
    content: "\f10a"
}

.ft-aperture:before {
    content: "\f10b"
}

.ft-archive:before {
    content: "\f10c"
}

.ft-arrow-down-circle:before {
    content: "\f10d"
}

.ft-arrow-down-left:before {
    content: "\f10e"
}

.ft-arrow-down-right:before {
    content: "\f10f"
}

.ft-arrow-down:before {
    content: "\f110"
}

.ft-arrow-left-circle:before {
    content: "\f111"
}

.ft-arrow-left:before {
    content: "\f112"
}

.ft-arrow-right-circle:before {
    content: "\f113"
}

.ft-arrow-right:before {
    content: "\f114"
}

.ft-arrow-up-circle:before {
    content: "\f115"
}

.ft-arrow-up-left:before {
    content: "\f116"
}

.ft-arrow-up-right:before {
    content: "\f117"
}

.ft-arrow-up:before {
    content: "\f118"
}

.ft-at-sign:before {
    content: "\f119"
}

.ft-award:before {
    content: "\f11a"
}

.ft-bar-chart-2:before {
    content: "\f11b"
}

.ft-bar-chart:before {
    content: "\f11c"
}

.ft-battery-charging:before {
    content: "\f11d"
}

.ft-battery:before {
    content: "\f11e"
}

.ft-bell-off:before {
    content: "\f11f"
}

.ft-bell:before {
    content: "\f120"
}

.ft-bluetooth:before {
    content: "\f121"
}

.ft-bold:before {
    content: "\f122"
}

.ft-book-open:before {
    content: "\f123"
}

.ft-book:before {
    content: "\f124"
}

.ft-bookmark:before {
    content: "\f125"
}

.ft-box:before {
    content: "\f126"
}

.ft-briefcase:before {
    content: "\f127"
}

.ft-calendar:before {
    content: "\f128"
}

.ft-camera-off:before {
    content: "\f129"
}

.ft-camera:before {
    content: "\f12a"
}

.ft-cast:before {
    content: "\f12b"
}

.ft-check-circle:before {
    content: "\f12c"
}

.ft-check-square:before {
    content: "\f12d"
}

.ft-check:before {
    content: "\f12e"
}

.ft-chevron-down:before {
    content: "\f12f"
}

.ft-chevron-left:before {
    content: "\f130"
}

.ft-chevron-right:before {
    content: "\f131"
}

.ft-chevron-up:before {
    content: "\f132"
}

.ft-chevrons-down:before {
    content: "\f133"
}

.ft-chevrons-left:before {
    content: "\f134"
}

.ft-chevrons-right:before {
    content: "\f135"
}

.ft-chevrons-up:before {
    content: "\f136"
}

.ft-chrome:before {
    content: "\f137"
}

.ft-circle:before {
    content: "\f138"
}

.ft-clipboard:before {
    content: "\f139"
}

.ft-clock:before {
    content: "\f13a"
}

.ft-cloud-drizzle:before {
    content: "\f13b"
}

.ft-cloud-lightning:before {
    content: "\f13c"
}

.ft-cloud-off:before {
    content: "\f13d"
}

.ft-cloud-rain:before {
    content: "\f13e"
}

.ft-cloud-snow:before {
    content: "\f13f"
}

.ft-cloud:before {
    content: "\f140"
}

.ft-code:before {
    content: "\f141"
}

.ft-codepen:before {
    content: "\f142"
}

.ft-codesandbox:before {
    content: "\f143"
}

.ft-coffee:before {
    content: "\f144"
}

.ft-columns:before {
    content: "\f145"
}

.ft-command:before {
    content: "\f146"
}

.ft-compass:before {
    content: "\f147"
}

.ft-copy:before {
    content: "\f148"
}

.ft-corner-down-left:before {
    content: "\f149"
}

.ft-corner-down-right:before {
    content: "\f14a"
}

.ft-corner-left-down:before {
    content: "\f14b"
}

.ft-corner-left-up:before {
    content: "\f14c"
}

.ft-corner-right-down:before {
    content: "\f14d"
}

.ft-corner-right-up:before {
    content: "\f14e"
}

.ft-corner-up-left:before {
    content: "\f14f"
}

.ft-corner-up-right:before {
    content: "\f150"
}

.ft-cpu:before {
    content: "\f151"
}

.ft-credit-card:before {
    content: "\f152"
}

.ft-crop:before {
    content: "\f153"
}

.ft-crosshair:before {
    content: "\f154"
}

.ft-database:before {
    content: "\f155"
}

.ft-delete:before {
    content: "\f156"
}

.ft-disc:before {
    content: "\f157"
}

.ft-dollar-sign:before {
    content: "\f158"
}

.ft-download-cloud:before {
    content: "\f159"
}

.ft-download:before {
    content: "\f15a"
}

.ft-droplet:before {
    content: "\f15b"
}

.ft-edit-2:before {
    content: "\f15c"
}

.ft-edit-3:before {
    content: "\f15d"
}

.ft-edit:before {
    content: "\f15e"
}

.ft-external-link:before {
    content: "\f15f"
}

.ft-eye-off:before {
    content: "\f160"
}

.ft-eye:before {
    content: "\f161"
}

.ft-facebook:before {
    content: "\f162"
}

.ft-fast-forward:before {
    content: "\f163"
}

.ft-feather:before {
    content: "\f164"
}

.ft-figma:before {
    content: "\f165"
}

.ft-file-minus:before {
    content: "\f166"
}

.ft-file-plus:before {
    content: "\f167"
}

.ft-file-text:before {
    content: "\f168"
}

.ft-file:before {
    content: "\f169"
}

.ft-film:before {
    content: "\f16a"
}

.ft-filter:before {
    content: "\f16b"
}

.ft-flag:before {
    content: "\f16c"
}

.ft-folder-minus:before {
    content: "\f16d"
}

.ft-folder-plus:before {
    content: "\f16e"
}

.ft-folder:before {
    content: "\f16f"
}

.ft-framer:before {
    content: "\f170"
}

.ft-frown:before {
    content: "\f171"
}

.ft-gift:before {
    content: "\f172"
}

.ft-git-branch:before {
    content: "\f173"
}

.ft-git-commit:before {
    content: "\f174"
}

.ft-git-merge:before {
    content: "\f175"
}

.ft-git-pull-request:before {
    content: "\f176"
}

.ft-github:before {
    content: "\f177"
}

.ft-gitlab:before {
    content: "\f178"
}

.ft-globe:before {
    content: "\f179"
}

.ft-grid:before {
    content: "\f17a"
}

.ft-hard-drive:before {
    content: "\f17b"
}

.ft-hash:before {
    content: "\f17c"
}

.ft-headphones:before {
    content: "\f17d"
}

.ft-heart:before {
    content: "\f17e"
}

.ft-help-circle:before {
    content: "\f17f"
}

.ft-hexagon:before {
    content: "\f180"
}

.ft-home:before {
    content: "\f181"
}

.ft-image:before {
    content: "\f182"
}

.ft-inbox:before {
    content: "\f183"
}

.ft-info:before {
    content: "\f184"
}

.ft-instagram:before {
    content: "\f185"
}

.ft-italic:before {
    content: "\f186"
}

.ft-key:before {
    content: "\f187"
}

.ft-layers:before {
    content: "\f188"
}

.ft-layout:before {
    content: "\f189"
}

.ft-life-buoy:before {
    content: "\f18a"
}

.ft-link-2:before {
    content: "\f18b"
}

.ft-link:before {
    content: "\f18c"
}

.ft-linkedin:before {
    content: "\f18d"
}

.ft-list:before {
    content: "\f18e"
}

.ft-loader:before {
    content: "\f18f"
}

.ft-lock:before {
    content: "\f190"
}

.ft-log-in:before {
    content: "\f191"
}

.ft-log-out:before {
    content: "\f192"
}

.ft-mail:before {
    content: "\f193"
}

.ft-map-pin:before {
    content: "\f194"
}

.ft-map:before {
    content: "\f195"
}

.ft-maximize-2:before {
    content: "\f196"
}

.ft-maximize:before {
    content: "\f197"
}

.ft-meh:before {
    content: "\f198"
}

.ft-menu:before {
    content: "\f199"
}

.ft-message-circle:before {
    content: "\f19a"
}

.ft-message-square:before {
    content: "\f19b"
}

.ft-mic-off:before {
    content: "\f19c"
}

.ft-mic:before {
    content: "\f19d"
}

.ft-minimize-2:before {
    content: "\f19e"
}

.ft-minimize:before {
    content: "\f19f"
}

.ft-minus-circle:before {
    content: "\f1a0"
}

.ft-minus-square:before {
    content: "\f1a1"
}

.ft-minus:before {
    content: "\f1a2"
}

.ft-monitor:before {
    content: "\f1a3"
}

.ft-moon:before {
    content: "\f1a4"
}

.ft-more-horizontal:before {
    content: "\f1a5"
}

.ft-more-vertical:before {
    content: "\f1a6"
}

.ft-mouse-pointer:before {
    content: "\f1a7"
}

.ft-move:before {
    content: "\f1a8"
}

.ft-music:before {
    content: "\f1a9"
}

.ft-navigation-2:before {
    content: "\f1aa"
}

.ft-navigation:before {
    content: "\f1ab"
}

.ft-octagon:before {
    content: "\f1ac"
}

.ft-package:before {
    content: "\f1ad"
}

.ft-paperclip:before {
    content: "\f1ae"
}

.ft-pause-circle:before {
    content: "\f1af"
}

.ft-pause:before {
    content: "\f1b0"
}

.ft-pen-tool:before {
    content: "\f1b1"
}

.ft-percent:before {
    content: "\f1b2"
}

.ft-phone-call:before {
    content: "\f1b3"
}

.ft-phone-forwarded:before {
    content: "\f1b4"
}

.ft-phone-incoming:before {
    content: "\f1b5"
}

.ft-phone-missed:before {
    content: "\f1b6"
}

.ft-phone-off:before {
    content: "\f1b7"
}

.ft-phone-outgoing:before {
    content: "\f1b8"
}

.ft-phone:before {
    content: "\f1b9"
}

.ft-pie-chart:before {
    content: "\f1ba"
}

.ft-play-circle:before {
    content: "\f1bb"
}

.ft-play:before {
    content: "\f1bc"
}

.ft-plus-circle:before {
    content: "\f1bd"
}

.ft-plus-square:before {
    content: "\f1be"
}

.ft-plus:before {
    content: "\f1bf"
}

.ft-pocket:before {
    content: "\f1c0"
}

.ft-power:before {
    content: "\f1c1"
}

.ft-printer:before {
    content: "\f1c2"
}

.ft-radio:before {
    content: "\f1c3"
}

.ft-refresh-ccw:before {
    content: "\f1c4"
}

.ft-refresh-cw:before {
    content: "\f1c5"
}

.ft-repeat:before {
    content: "\f1c6"
}

.ft-rewind:before {
    content: "\f1c7"
}

.ft-rotate-ccw:before {
    content: "\f1c8"
}

.ft-rotate-cw:before {
    content: "\f1c9"
}

.ft-rss:before {
    content: "\f1ca"
}

.ft-save:before {
    content: "\f1cb"
}

.ft-scissors:before {
    content: "\f1cc"
}

.ft-search:before {
    content: "\f1cd"
}

.ft-send:before {
    content: "\f1ce"
}

.ft-server:before {
    content: "\f1cf"
}

.ft-settings:before {
    content: "\f1d0"
}

.ft-share-2:before {
    content: "\f1d1"
}

.ft-share:before {
    content: "\f1d2"
}

.ft-shield-off:before {
    content: "\f1d3"
}

.ft-shield:before {
    content: "\f1d4"
}

.ft-shopping-bag:before {
    content: "\f1d5"
}

.ft-shopping-cart:before {
    content: "\f1d6"
}

.ft-shuffle:before {
    content: "\f1d7"
}

.ft-sidebar:before {
    content: "\f1d8"
}

.ft-skip-back:before {
    content: "\f1d9"
}

.ft-skip-forward:before {
    content: "\f1da"
}

.ft-slack:before {
    content: "\f1db"
}

.ft-slash:before {
    content: "\f1dc"
}

.ft-sliders:before {
    content: "\f1dd"
}

.ft-smartphone:before {
    content: "\f1de"
}

.ft-smile:before {
    content: "\f1df"
}

.ft-speaker:before {
    content: "\f1e0"
}

.ft-square:before {
    content: "\f1e1"
}

.ft-star-s:before {
    content: "\f1e2"
}

.ft-star:before {
    content: "\f1e3"
}

.ft-stop-circle:before {
    content: "\f1e4"
}

.ft-sun:before {
    content: "\f1e5"
}

.ft-sunrise:before {
    content: "\f1e6"
}

.ft-sunset:before {
    content: "\f1e7"
}

.ft-tag:before {
    content: "\f1e8"
}

.ft-target:before {
    content: "\f1e9"
}

.ft-terminal:before {
    content: "\f1ea"
}

.ft-thermometer:before {
    content: "\f1eb"
}

.ft-thumbs-down:before {
    content: "\f1ec"
}

.ft-thumbs-up:before {
    content: "\f1ed"
}

.ft-toggle-left:before {
    content: "\f1ee"
}

.ft-toggle-right:before {
    content: "\f1ef"
}

.ft-trash-2:before {
    content: "\f1f0"
}

.ft-trash:before {
    content: "\f1f1"
}

.ft-trello:before {
    content: "\f1f2"
}

.ft-trending-down:before {
    content: "\f1f3"
}

.ft-trending-up:before {
    content: "\f1f4"
}

.ft-triangle:before {
    content: "\f1f5"
}

.ft-truck:before {
    content: "\f1f6"
}

.ft-tv:before {
    content: "\f1f7"
}

.ft-twitter:before {
    content: "\f1f8"
}

.ft-type:before {
    content: "\f1f9"
}

.ft-umbrella:before {
    content: "\f1fa"
}

.ft-underline:before {
    content: "\f1fb"
}

.ft-unlock:before {
    content: "\f1fc"
}

.ft-upload-cloud:before {
    content: "\f1fd"
}

.ft-upload:before {
    content: "\f1fe"
}

.ft-user-check:before {
    content: "\f1ff"
}

.ft-user-minus:before {
    content: "\f200"
}

.ft-user-plus:before {
    content: "\f201"
}

.ft-user-x:before {
    content: "\f202"
}

.ft-user:before {
    content: "\f203"
}

.ft-users:before {
    content: "\f204"
}

.ft-video-off:before {
    content: "\f205"
}

.ft-video:before {
    content: "\f206"
}

.ft-voicemail:before {
    content: "\f207"
}

.ft-volume-1:before {
    content: "\f208"
}

.ft-volume-2:before {
    content: "\f209"
}

.ft-volume-x:before {
    content: "\f20a"
}

.ft-volume:before {
    content: "\f20b"
}

.ft-watch:before {
    content: "\f20c"
}

.ft-wifi-off:before {
    content: "\f20d"
}

.ft-wifi:before {
    content: "\f20e"
}

.ft-wind:before {
    content: "\f20f"
}

.ft-x-circle:before {
    content: "\f210"
}

.ft-x-octagon:before {
    content: "\f211"
}

.ft-x-square:before {
    content: "\f212"
}

.ft-x:before {
    content: "\f213"
}

.ft-youtube:before {
    content: "\f214"
}

.ft-zap-off:before {
    content: "\f215"
}

.ft-zap:before {
    content: "\f216"
}

.ft-zoom-in:before {
    content: "\f217"
}

.ft-zoom-out:before {
    content: "\f218"
}

p {
    line-height: 1.4
}

p b,
p strong {
    font-weight: 600
}

p i {
    font-style: italic
}

small {
    display: inline-block
}

.uppercase {
    text-transform: uppercase
}

.lowercase {
    text-transform: lowercase
}

.normalcase,
.transform-none {
    text-transform: none
}

.capitalize {
    text-transform: capitalize
}

.small-text,
small {
    font-size: 14px
}

@media screen and (max-width: 768px) {

    .small-text,
    small {
        font-size: 13px
    }
}

@media screen and (max-width: 640px) {

    .small-text,
    small {
        font-size: 12px
    }
}

.medium-text {
    font-size: 15px
}

.base-text {
    font-size: 16px
}

.tiny-text {
    font-size: 13px
}

@media screen and (max-width: 480px) {
    .tiny-text {
        font-size: 12px
    }
}

.large-text {
    font-size: 18px
}

@media screen and (max-width: 768px) {
    .large-text {
        font-size: 17px
    }
}

@media screen and (max-width: 640px) {
    .large-text {
        font-size: 16px
    }
}

.huge-text {
    font-size: 20px
}

@media screen and (max-width: 768px) {
    .huge-text {
        font-size: 18px
    }
}

@media screen and (max-width: 640px) {
    .huge-text {
        font-size: 16px
    }
}

@media screen and (max-width: 480px) {
    .huge-text {
        font-size: 15px
    }
}

.bold-text {
    font-weight: 700
}

.normal-text {
    font-weight: 400 !important
}

.bolder-text {
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial
}

.solid-text {
    font-weight: 700;
    text-transform: uppercase
}

.line-text {
    position: relative;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    width: 100%
}

.line-text:before {
    content: "";
    position: absolute;
    width: 100%;
    top: 50%;
    border-bottom: 1px solid #dee2e6;
    margin-left: -5px;
    transform: translate(-100%)
}

.line-text:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
    top: 50%;
    margin-left: 5px
}

.gradient-text {
    display: inline-block !important;
    font-family: Roboto Condensed, Arial Narrow, sans-serif !important;
    background: linear-gradient(135deg, #8b0000 0%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700 !important
}

.primary-dark-text {
    color: #8b0000 !important;
}

.secondary-dark-text {
    color: #622951 !important
}

.primary-text {
    color: #781426 !important
}

.light-text {
    color: #a4a7ad
}

.muted-text {
    color: #6c757d
}

.success-text,
.green-text {
    color: #00a672 !important
}

.red-text {
    color: #ed6d72 !important
}

.win,
.draw,
.lose {
    color: #fff
}

.win {
    background-color: #00a672
}

.draw {
    background-color: #6c757d
}

.lose {
    background-color: #ed6d72
}

.link {
    font-weight: 500;
    cursor: pointer;
    transition: color .2s ease-in
}

@media screen and (max-width: 480px) {
    .link {
        font-size: 12px
    }
}

.link.-primary,
.link:hover {
    color: #781426
}

.link.-underline {
    position: relative;
    display: inline-block
}

.link.-underline:before {
    content: "";
    position: absolute;
    height: 0;
    color: inherit;
    border-bottom: 1px solid;
    width: 100%;
    left: 0;
    transition: opacity .05s linear, bottom .1s .1s;
    opacity: 0;
    bottom: 7px
}

.link.-underline:hover:before {
    width: 100%;
    left: 0;
    bottom: 0;
    opacity: 1;
    transition: opacity .1s linear, bottom .2s
}

.full-text-mark {
    max-width: 100% !important
}

.full-text-mark mark {
    padding-left: 3em !important;
    padding-right: 3em !important
}

@media screen and (max-width: 880px) {
    .full-text-mark mark {
        padding-left: 1em !important;
        padding-right: 1em !important
    }
}

.full-text-image {
    max-width: 100% !important;
    text-align: center
}

.full-text-image img {
    border-radius: 4px
}

.heading {
    padding-bottom: 1em
}

@media screen and (max-width: 480px) {
    .heading {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: .7em
    }
}

.h1,
.h2,
.xgs-game-header_team-name,
.h3,
.h4,
.h5,
.h6 {
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    line-height: 1.3;
    display: block;
    font-weight: 700
}

.h1.-underline,
.h2.-underline,
.-underline.xgs-game-header_team-name,
.h3.-underline,
.h4.-underline,
.h5.-underline,
.h6.-underline {
    padding-bottom: .7em;
    border-bottom: 2px solid #e9ecef
}

@media screen and (max-width: 640px) {

    .h1.-underline,
    .h2.-underline,
    .-underline.xgs-game-header_team-name,
    .h3.-underline,
    .h4.-underline,
    .h5.-underline,
    .h6.-underline {
        border-width: 1px
    }
}

.h1.-primary,
.h2.-primary,
.-primary.xgs-game-header_team-name,
.h3.-primary,
.h4.-primary,
.h5.-primary,
.h6.-primary {
    color: #781426
}

.h1 {
    font-size: 38px
}

@media screen and (max-width: 1340px) {
    .h1 {
        font-size: 34px
    }
}

@media screen and (max-width: 1024px) {
    .h1 {
        font-size: 32px
    }
}

@media screen and (max-width: 640px) {
    .h1 {
        font-size: 30px
    }
}

@media screen and (max-width: 480px) {
    .h1 {
        font-size: 28px
    }
}

.h2,
.xgs-game-header_team-name {
    font-size: 26px
}

@media screen and (max-width: 880px) {

    .h2,
    .xgs-game-header_team-name {
        font-size: 24px
    }
}

@media screen and (max-width: 640px) {

    .h2,
    .xgs-game-header_team-name {
        font-size: 22px
    }
}

@media screen and (max-width: 480px) {

    .h2,
    .xgs-game-header_team-name {
        font-size: 20px
    }
}

.h3 {
    font-size: 24px
}

@media screen and (max-width: 640px) {
    .h3 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    .h3 {
        font-size: 18px
    }
}

.h4 {
    font-size: 22px
}

@media screen and (max-width: 640px) {
    .h4 {
        font-size: 18px
    }
}

@media screen and (max-width: 480px) {
    .h4 {
        font-size: 16px
    }
}

.h5 {
    font-size: 19px
}

@media screen and (max-width: 640px) {
    .h5 {
        font-size: 17px
    }
}

@media screen and (max-width: 480px) {
    .h5 {
        font-size: 14px
    }
}

.h6 {
    font-size: 16px
}

@media screen and (max-width: 640px) {
    .h6 {
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    .h6 {
        font-size: 14px
    }
}

.text-content {
    font-size: 16px;
    line-height: 1.7
}

@media screen and (max-width: 640px) {
    .text-content {
        font-size: 16px
    }
}

.text-content ul {
    list-style: disc;
    padding-left: 1.3em;
    margin-top: .5em;
    margin-bottom: 1.2em;
    line-height: 1.5
}

.text-content ol {
    list-style: decimal;
    padding-left: 1.3em;
    margin-top: .5em;
    margin-bottom: 1.2em
}

.text-content strong,
.text-content b {
    font-weight: 700
}

.text-content i,
.text-content em,
.text-content blockquote {
    font-style: italic
}

.text-content blockquote {
    border-left: 3px solid #a4a7ad;
    background: rgba(0, 0, 0, .05);
    padding: 5px 5px 5px 15px
}

.text-content table {
    box-shadow: 0 3px 10px #0000001a;
    width: 100%;
    text-align: left;
    max-width: 100%;
    overflow: auto
}

@media screen and (max-width: 880px) {
    .text-content table {
        font-size: .9em
    }
}

@media screen and (max-width: 640px) {
    .text-content table {
        font-size: .8em;
        line-height: 1.1
    }
}

.text-content table th {
    font-weight: 600
}

.text-content table th,
.text-content table td {
    border-bottom: 1px solid #e9ecef;
    padding: 10px 20px
}

@media screen and (max-width: 1340px) {

    .text-content table th,
    .text-content table td {
        padding: 10px 15px
    }
}

@media screen and (max-width: 880px) {

    .text-content table th,
    .text-content table td {
        padding: 10px
    }
}

@media screen and (max-width: 640px) {

    .text-content table th,
    .text-content table td {
        padding: 10px 5px
    }

    .text-content table th:first-child,
    .text-content table td:first-child {
        padding-left: 10px
    }

    .text-content table th:last-child,
    .text-content table td:last-child {
        padding-left: 10px
    }
}

.text-content p {
    margin-bottom: 1em;
    line-height: 1.5
}

.text-content a:not([class^=btn-]) {
    color: #781426;
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: color .1s linear;
    z-index: 1;
    padding: 0 2px;
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial
}

.text-content a:not([class^=btn-]):after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    border-bottom: 1px solid #781426;
    z-index: -1;
    transition: border-bottom-color .3s ease-in-out, border-bottom-width .15s ease-in-out;
    border-radius: 2px
}

.text-content a:not([class^=btn-]):hover:after {
    border-bottom-color: #78142633;
    border-bottom-width: 1.3em;
    transition: border-bottom-color .05s ease-in-out, border-bottom-width .15s ease-in-out
}

.text-content a:not([class^=btn-]):after {
    bottom: 3px
}

.text-content mark {
    display: block;
    background: rgba(42, 166, 174, .1);
    color: #781426;
    padding: 15px;
    line-height: 1.5;
    border-radius: 4px
}

.text-content mark.xgs-mark {
    display: inline-flex;
    width: 2.4em;
    height: 1.75em;
    padding: 2px;
    min-width: 2.4em;
    font-size: .9em
}

.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4,
.text-content h5,
.text-content h6 {
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    padding-top: .6em;
    margin: .6em 0;
    line-height: 1.2;
    font-weight: 700
}

.text-content h1 {
    font-size: 1.8em;
    margin-top: 0
}

@media screen and (max-width: 640px) {
    .text-content h1 {
        font-size: 1.55em
    }
}

.text-content h2 {
    font-size: 1.45em
}

@media screen and (max-width: 640px) {
    .text-content h2 {
        font-size: 1.3em
    }
}

.text-content h3 {
    font-size: 1.2em
}

@media screen and (max-width: 640px) {
    .text-content h3 {
        font-size: 1.15em
    }
}

.text-content h4 {
    font-size: 1.1em
}

@media screen and (max-width: 640px) {
    .text-content h4 {
        font-size: 1.1em
    }
}

.text-content h5,
.text-content h6 {
    font-size: 1em
}

@media screen and (max-width: 640px) {

    .text-content h5,
    .text-content h6 {
        font-size: 1em
    }
}

.text-content img {
    max-width: 100%;
    height: auto
}

.text-content img.screenshot {
    max-width: 860px;
    margin-left: -10px
}

.text-content img.alignleft {
    float: left;
    margin-right: 25px
}

.text-content img.alignright {
    float: right;
    margin-left: 25px
}

.text-content figure {
    width: auto !important
}

.text-content figcaption {
    margin-top: 10px
}

.text-content iframe {
    max-width: 100%
}

.text-content hr {
    border: none;
    height: 2px;
    background: #a4a7ad
}

.text-content .text-left {
    text-align: left
}

.text-content .text-center {
    text-align: center
}

.text-content .text-right {
    text-align: right
}

.text-content .huge-text {
    font-size: 20px !important
}

.text-content [id] {
    position: relative
}

.text-content [id]:before {
    content: "";
    display: block;
    height: 54px;
    margin-top: 54px;
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    width: 100%
}

.xgs-scroll-content {
    max-height: 60vh;
    overflow: auto;
    margin-right: -10px;
    padding-right: 10px;
    position: relative
}

@media screen and (max-width: 640px) {
    .xgs-scroll-content {
        margin-right: 0;
        padding-right: 0;
        max-height: initial
    }
}

.xgs-scroll-content::-webkit-scrollbar {
    width: 6px
}

.xgs-scroll-content::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #e9ecef
}

.xgs-scroll-content::-webkit-scrollbar-thumb {
    background: linear-gradient(-180deg, #781426 0%, #aa3026);
    border-radius: 4px
}

html {
    min-height: 100%;
    height: 100%
}

body {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(73, 80, 87, .1);
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
    text-rendering: optimizeLegibility;
    background: #f8f9fa;
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    font-size: 16px;
    color: #534f59;
    min-width: 320px;
    background: url(assets/img/gradient.svg) no-repeat center;
    background-size: cover;
    background-attachment: fixed
}

@media screen and (max-width: 768px) {
    body {
        font-size: 15px
    }
}

::selection {
    background: #781426;
    color: #fff
}

::-moz-selection {
    background: #781426;
    color: #fff
}

.cdk-overlay-connected-position-bounding-box {
    position: fixed !important
}

.bg-gray-200 {
    background-color: #e9ecef !important;
    color: #212529 !important
}

.bg-gray-200:after {
    border-color: #e9ecef !important
}

.bg-gray-200.-darker {
    background-color: #e0e4e9 !important
}

.bg-gray-300 {
    background-color: #dee2e6 !important;
    color: #212529 !important
}

.bg-gray-300:after {
    border-color: #dee2e6 !important
}

.bg-gray-300.-darker {
    background-color: #d5dadf !important
}

.bg-gray-500 {
    background-color: #a4a7ad !important;
    color: #fff !important
}

.bg-gray-500:after {
    border-color: #a4a7ad !important
}

.bg-gray-500.-darker {
    background-color: #9c9fa6 !important
}

.bg-primary {
    background-color: #8b0000 !important;
    color: #fff !important
}

.bg-primary:after {
    border-color: #8b0000 !important
}

.bg-primary.-darker {
    background-color: #8b0000 !important
}

.bg-secondary {
    background-color: #aa3026 !important;
    color: #fff !important
}

.bg-secondary:after {
    border-color: #aa3026 !important
}

.bg-secondary.-darker {
    background-color: #964776 !important
}

.bg-success {
    background-color: #00a672 !important;
    color: #fff !important
}

.bg-success:after {
    border-color: #00a672 !important
}

.bg-success.-darker {
    background-color: #009767 !important
}

.bg-danger {
    background-color: #ed6d72 !important;
    color: #fff !important
}

.bg-danger:after {
    border-color: #ed6d72 !important
}

.bg-danger.-darker {
    background-color: #eb5f65 !important
}

.text-white {
    color: #fff !important
}

.text-gray-400 {
    color: #ced4da !important
}

.text-gray-500 {
    color: #a4a7ad !important
}

.text-gray-600 {
    color: #6c757d !important
}

.text-primary {
    color: #8b0000 !important
}

.text-primary-dark {
    color: #8b0000 !important
}

.text-secondary {
    color: #aa3026 !important
}

.text-success {
    color: #00a672 !important
}

.text-muted {
    color: #6c757d !important
}

.text-danger {
    color: #ed6d72 !important
}

.bg-primary-gradient {
    background-image: linear-gradient(90deg, #781426 0%, #0D0608) !important;
    color: #fff !important
}

.bg-primary-gradient:after,
.bg-primary-gradient:before {
    background-image: linear-gradient(90deg, #781426 0%, #0D0608) !important
}

.bg-metal-gradient {
    background-image: linear-gradient(90deg, #343a40, #495057) !important;
    color: #fff !important
}

.bg-metal-gradient:after,
.bg-metal-gradient:before {
    background-image: linear-gradient(90deg, #343a40, #495057) !important
}

.xgs-wrapper {
    min-height: calc(100% + 100px);
    padding: 0 20px;
    display: flex;
    flex-direction: column
}

@media screen and (max-width: 768px) {
    .xgs-wrapper {
        padding: 0 10px
    }
}

@media screen and (max-width: 640px) {
    .xgs-wrapper {
        padding: 54px 0 52px;
        min-height: calc(100% + 200px)
    }
}

@media screen and (max-width: 480px) {
    .xgs-wrapper {
        min-height: 100%
    }
}

.xgs-ad-wrapper {
    padding-top: 120px;
    background: url(assets/img/custom-bg.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed
}

.xgs-ad-wrapper .xgs-page {
    box-shadow: 0 0 20px 5px #000000b3;
    overflow: hidden
}

.xgs-inner {
    display: flex;
    min-height: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 4px
}

@media screen and (max-width: 480px) {
    .xgs-inner {
        border-radius: 0
    }
}

.xgs-inner>*:not(router-outlet) {
    width: 100%
}

.xgs-main {
    flex: 1;
    background: #fff;
    box-shadow: 0 10px 35px 10px #0000001a;
    padding: 30px 30px 50px
}

.xgs-main.-overlay-tabs {
    z-index: 100
}

@media screen and (max-width: 640px) {
    .xgs-main.-overlay-tabs {
        z-index: 250
    }
}

.xgs-main.-tabs {
    padding-top: 100px
}

@media screen and (max-width: 768px) {
    .xgs-main.-tabs {
        padding-top: 90px
    }
}

@media screen and (max-width: 640px) {
    .xgs-main.-tabs {
        padding-top: 70px
    }
}

@media screen and (max-width: 480px) {
    .xgs-main.-tabs {
        padding-top: 60px
    }
}

@media screen and (max-width: 1340px) {
    .xgs-main {
        padding-left: 25px;
        padding-right: 25px
    }
}

@media screen and (max-width: 880px) {
    .xgs-main {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media screen and (max-width: 640px) {
    .xgs-main {
        padding: 25px 10px 30px
    }
}

@media screen and (max-width: 480px) {
    .xgs-main {
        padding-top: 20px
    }
}

.full-width {
    margin: 0 -30px;
    display: block
}

@media screen and (max-width: 1340px) {
    .full-width {
        margin: 0 -25px
    }
}

@media screen and (max-width: 768px) {
    .full-width {
        margin: 0 -20px
    }
}

@media screen and (max-width: 640px) {
    .full-width {
        margin: 0 -10px
    }
}

@media screen and (max-width: 480px) {
    .full-width-xs {
        margin-left: -10px;
        margin-right: -10px
    }
}

.xgs-page {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column
}

.xgs-page.-narrow {
    width: 550px
}

.xgs-page.-full {
    width: 100%
}

.xgs-sidebar {
    overflow: hidden;
    height: 100%
}

.xgs-sidebar-widget {
    padding-top: 22px;
    margin: 0 15px
}

.xgs-sidebar-widget .xgs-sidebar-widget-li {
    background: rgba(233, 236, 239, .5);
    border-left: 1px solid rgba(164, 167, 173, .15);
    margin: auto -15px;
    padding: 15px
}

.xgs-sidebar-widget .xgs-sidebar-widget-li:nth-child(2n) {
    background-color: #fff;
    border-left: none
}

.xgs-sidebar-widget.-page-height {
    height: calc(100vh - 130px);
    top: 0
}

.xgs-block {
    margin-top: 50px;
    margin-bottom: 50px
}

.xgs-block.-page-last {
    margin-bottom: -50px
}

@media screen and (max-width: 768px) {
    .xgs-block {
        margin-top: 40px;
        margin-bottom: 40px
    }
}

@media screen and (max-width: 640px) {
    .xgs-block {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

.xgs-block.-small {
    margin-top: 30px;
    margin-bottom: 30px
}

@media screen and (max-width: 768px) {
    .xgs-block.-small {
        margin-top: 25px;
        margin-bottom: 25px
    }
}

@media screen and (max-width: 640px) {
    .xgs-block.-small {
        margin-top: 20px;
        margin-bottom: 20px
    }
}

.xgs-section {
    padding-top: 50px;
    padding-bottom: 50px
}

@media screen and (max-width: 768px) {
    .xgs-section {
        padding-top: 40px;
        padding-bottom: 40px
    }
}

@media screen and (max-width: 640px) {
    .xgs-section {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

.xgs-section.-small {
    padding-top: 30px;
    padding-bottom: 30px
}

@media screen and (max-width: 768px) {
    .xgs-section.-small {
        padding-top: 25px;
        padding-bottom: 25px
    }
}

@media screen and (max-width: 640px) {
    .xgs-section.-small {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

.container {
    padding-right: 10px;
    padding-left: 10px
}

@media (max-width: 1340px) {
    .container {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 1024px) {
    .container {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 880px) {
    .container {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 768px) {
    .container {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 640px) {
    .container {
        padding-right: 5px;
        padding-left: 5px
    }
}

@media (max-width: 480px) {
    .container {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

@media (max-width: 350px) {
    .container {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    margin-right: -10px;
    margin-left: -10px
}

@media (max-width: 1340px) {
    .row {
        margin-right: -10px;
        margin-left: -10px
    }
}

@media (max-width: 1024px) {
    .row {
        margin-right: -10px;
        margin-left: -10px
    }
}

@media (max-width: 880px) {
    .row {
        margin-right: -6.6666666667px;
        margin-left: -6.6666666667px
    }
}

@media (max-width: 768px) {
    .row {
        margin-right: -6.6666666667px;
        margin-left: -6.6666666667px
    }
}

@media (max-width: 640px) {
    .row {
        margin-right: -5px;
        margin-left: -5px
    }
}

@media (max-width: 480px) {
    .row {
        margin-right: -3.3333333333px;
        margin-left: -3.3333333333px
    }
}

@media (max-width: 350px) {
    .row {
        margin-right: -3.3333333333px;
        margin-left: -3.3333333333px
    }
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.small-gutters {
    margin-right: -7.5px;
    margin-left: -7.5px
}

@media screen and (max-width: 640px) {
    .small-gutters {
        margin-right: -5px;
        margin-left: -5px
    }
}

.small-gutters>[class*=col-] {
    padding-right: 7.5px;
    padding-left: 7.5px
}

@media screen and (max-width: 640px) {
    .small-gutters>[class*=col-] {
        padding-right: 5px;
        padding-left: 5px
    }
}

.col-xs-12,
.col-sm-12,
.col-sm-6,
.col-sm-4,
.col-md-12,
.col-lg-12,
.col-lg-8,
.col-lg-6,
.col-lg-4,
.col-xl-6,
.col-xxl-7,
.col-xxl-5,
.col-12,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}

@media (max-width: 1340px) {

    .col-xs-12,
    .col-sm-12,
    .col-sm-6,
    .col-sm-4,
    .col-md-12,
    .col-lg-12,
    .col-lg-8,
    .col-lg-6,
    .col-lg-4,
    .col-xl-6,
    .col-xxl-7,
    .col-xxl-5,
    .col-12,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3 {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 1024px) {

    .col-xs-12,
    .col-sm-12,
    .col-sm-6,
    .col-sm-4,
    .col-md-12,
    .col-lg-12,
    .col-lg-8,
    .col-lg-6,
    .col-lg-4,
    .col-xl-6,
    .col-xxl-7,
    .col-xxl-5,
    .col-12,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3 {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 880px) {

    .col-xs-12,
    .col-sm-12,
    .col-sm-6,
    .col-sm-4,
    .col-md-12,
    .col-lg-12,
    .col-lg-8,
    .col-lg-6,
    .col-lg-4,
    .col-xl-6,
    .col-xxl-7,
    .col-xxl-5,
    .col-12,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3 {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 768px) {

    .col-xs-12,
    .col-sm-12,
    .col-sm-6,
    .col-sm-4,
    .col-md-12,
    .col-lg-12,
    .col-lg-8,
    .col-lg-6,
    .col-lg-4,
    .col-xl-6,
    .col-xxl-7,
    .col-xxl-5,
    .col-12,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3 {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 640px) {

    .col-xs-12,
    .col-sm-12,
    .col-sm-6,
    .col-sm-4,
    .col-md-12,
    .col-lg-12,
    .col-lg-8,
    .col-lg-6,
    .col-lg-4,
    .col-xl-6,
    .col-xxl-7,
    .col-xxl-5,
    .col-12,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3 {
        padding-right: 5px;
        padding-left: 5px
    }
}

@media (max-width: 480px) {

    .col-xs-12,
    .col-sm-12,
    .col-sm-6,
    .col-sm-4,
    .col-md-12,
    .col-lg-12,
    .col-lg-8,
    .col-lg-6,
    .col-lg-4,
    .col-xl-6,
    .col-xxl-7,
    .col-xxl-5,
    .col-12,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3 {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

@media (max-width: 350px) {

    .col-xs-12,
    .col-sm-12,
    .col-sm-6,
    .col-sm-4,
    .col-md-12,
    .col-lg-12,
    .col-lg-8,
    .col-lg-6,
    .col-lg-4,
    .col-xl-6,
    .col-xxl-7,
    .col-xxl-5,
    .col-12,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3 {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%
}

.col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%
}

.col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%
}

.offset-1 {
    margin-left: 8.3333333333%
}

@media (max-width: 1340px) {
    .col-xxl-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }

    .col-xxl-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }
}

@media (max-width: 1024px) {
    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media (max-width: 880px) {
    .col-lg-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-8 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (max-width: 768px) {
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (max-width: 640px) {
    .col-sm-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (max-width: 480px) {
    .col-xs-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.grid-5 {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px
}

.grid-5>.cell {
    position: relative;
    width: 100%;
    min-height: 1px;
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 10px;
    padding-left: 10px
}

@media (max-width: 1340px) {
    .grid-5>.cell {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 1024px) {
    .grid-5>.cell {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 880px) {
    .grid-5>.cell {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 768px) {
    .grid-5>.cell {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 640px) {
    .grid-5>.cell {
        padding-right: 5px;
        padding-left: 5px
    }
}

@media (max-width: 480px) {
    .grid-5>.cell {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

@media (max-width: 350px) {
    .grid-5>.cell {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

@media (max-width: 880px) {
    .grid-lg-4 {
        display: flex;
        flex-wrap: wrap;
        margin-right: -6.6666666667px;
        margin-left: -6.6666666667px
    }

    .grid-lg-4>.cell {
        position: relative;
        width: 100%;
        min-height: 1px;
        flex: 0 0 25%;
        max-width: 25%;
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 880px) and (max-width: 1340px) {
    .grid-lg-4>.cell {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 880px) and (max-width: 1024px) {
    .grid-lg-4>.cell {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 880px) and (max-width: 880px) {
    .grid-lg-4>.cell {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 880px) and (max-width: 768px) {
    .grid-lg-4>.cell {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 880px) and (max-width: 640px) {
    .grid-lg-4>.cell {
        padding-right: 5px;
        padding-left: 5px
    }
}

@media (max-width: 880px) and (max-width: 480px) {
    .grid-lg-4>.cell {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

@media (max-width: 880px) and (max-width: 350px) {
    .grid-lg-4>.cell {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

@media (max-width: 480px) {
    .grid-xs-3 {
        display: flex;
        flex-wrap: wrap;
        margin-right: -3.3333333333px;
        margin-left: -3.3333333333px
    }

    .grid-xs-3>.cell {
        position: relative;
        width: 100%;
        min-height: 1px;
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 480px) and (max-width: 1340px) {
    .grid-xs-3>.cell {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 480px) and (max-width: 1024px) {
    .grid-xs-3>.cell {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media (max-width: 480px) and (max-width: 880px) {
    .grid-xs-3>.cell {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 480px) and (max-width: 768px) {
    .grid-xs-3>.cell {
        padding-right: 6.6666666667px;
        padding-left: 6.6666666667px
    }
}

@media (max-width: 480px) and (max-width: 640px) {
    .grid-xs-3>.cell {
        padding-right: 5px;
        padding-left: 5px
    }
}

@media (max-width: 480px) and (max-width: 480px) {
    .grid-xs-3>.cell {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

@media (max-width: 480px) and (max-width: 350px) {
    .grid-xs-3>.cell {
        padding-right: 3.3333333333px;
        padding-left: 3.3333333333px
    }
}

.text-small {
    font-size: 14px !important
}

@media screen and (max-width: 480px) {
    .text-small {
        font-size: 13px !important
    }
}

.text-medium {
    font-size: 15px !important
}

@media screen and (max-width: 480px) {
    .text-medium {
        font-size: 14px !important
    }
}

.text-base {
    font-size: 16px !important
}

@media screen and (max-width: 480px) {
    .text-base {
        font-size: 15px !important
    }
}

.text-large {
    font-size: 18px !important
}

@media screen and (max-width: 480px) {
    .text-large {
        font-size: 17px !important
    }
}

.text-huge {
    font-size: 20px !important
}

@media screen and (max-width: 480px) {
    .text-huge {
        font-size: 19px !important
    }
}

@media (max-width: 880px) {
    .text-lg-medium {
        font-size: 15px !important
    }
}

@media screen and (max-width: 880px) and (max-width: 480px) {
    .text-lg-medium {
        font-size: 14px !important
    }
}

@media (max-width: 880px) {
    .text-lg-huge {
        font-size: 20px !important
    }
}

@media screen and (max-width: 880px) and (max-width: 480px) {
    .text-lg-huge {
        font-size: 19px !important
    }
}

@media (max-width: 768px) {
    .text-md-small {
        font-size: 14px !important
    }
}

@media screen and (max-width: 768px) and (max-width: 480px) {
    .text-md-small {
        font-size: 13px !important
    }
}

@media (max-width: 640px) {
    .text-sm-tiny {
        font-size: 13px !important
    }
}

@media screen and (max-width: 640px) and (max-width: 480px) {
    .text-sm-tiny {
        font-size: 12px !important
    }
}

@media (max-width: 640px) {
    .text-sm-small {
        font-size: 14px !important
    }
}

@media screen and (max-width: 640px) and (max-width: 480px) {
    .text-sm-small {
        font-size: 13px !important
    }
}

@media (max-width: 640px) {
    .text-sm-base {
        font-size: 16px !important
    }
}

@media screen and (max-width: 640px) and (max-width: 480px) {
    .text-sm-base {
        font-size: 15px !important
    }
}

@media (max-width: 640px) {
    .text-sm-large {
        font-size: 18px !important
    }
}

@media screen and (max-width: 640px) and (max-width: 480px) {
    .text-sm-large {
        font-size: 17px !important
    }
}

@media (max-width: 480px) {
    .text-xs-tiny {
        font-size: 13px !important
    }
}

@media screen and (max-width: 480px) and (max-width: 480px) {
    .text-xs-tiny {
        font-size: 12px !important
    }
}

@media (max-width: 480px) {
    .text-xs-small {
        font-size: 14px !important
    }
}

@media screen and (max-width: 480px) and (max-width: 480px) {
    .text-xs-small {
        font-size: 13px !important
    }
}

@media (max-width: 480px) {
    .text-xs-medium {
        font-size: 15px !important
    }
}

@media screen and (max-width: 480px) and (max-width: 480px) {
    .text-xs-medium {
        font-size: 14px !important
    }
}

@media (max-width: 480px) {
    .text-xs-large {
        font-size: 18px !important
    }
}

@media screen and (max-width: 480px) and (max-width: 480px) {
    .text-xs-large {
        font-size: 17px !important
    }
}

@media (max-width: 350px) {
    .text-xxs-tiny {
        font-size: 13px !important
    }
}

@media screen and (max-width: 350px) and (max-width: 480px) {
    .text-xxs-tiny {
        font-size: 12px !important
    }
}

@media (max-width: 350px) {
    .text-xxs-base {
        font-size: 16px !important
    }
}

@media screen and (max-width: 350px) and (max-width: 480px) {
    .text-xxs-base {
        font-size: 15px !important
    }
}

.flex-box {
    display: flex !important
}

.v-start {
    display: flex !important;
    align-items: flex-start !important
}

.h-start {
    display: flex !important;
    justify-content: flex-start !important
}

.v-end {
    display: flex !important;
    align-items: flex-end !important
}

.h-end {
    display: flex !important;
    justify-content: flex-end !important
}

.v-center {
    display: flex !important;
    align-items: center !important
}

.h-center {
    display: flex !important;
    justify-content: center !important
}

.v-baseline {
    display: flex !important;
    align-items: baseline !important
}

.v-between {
    display: flex !important;
    align-items: space-between !important
}

.h-between {
    display: flex !important;
    justify-content: space-between !important
}

.h-around {
    display: flex !important;
    justify-content: space-around !important
}

.f-column {
    display: flex !important;
    flex-direction: column !important
}

.f-row-reverse {
    display: flex !important;
    flex-direction: row-reverse !important
}

.text-left {
    text-align: left !important
}

.text-center {
    text-align: center !important
}

.text-right {
    text-align: right !important
}

@media (max-width: 1340px) {
    .f-xxl-column {
        display: flex !important;
        flex-direction: column !important
    }

    .f-xxl-column-reverse {
        display: flex !important;
        flex-direction: column-reverse !important
    }
}

@media (max-width: 880px) {
    .h-lg-center {
        display: flex !important;
        justify-content: center !important
    }

    .f-lg-column {
        display: flex !important;
        flex-direction: column !important
    }

    .f-lg-column-reverse {
        display: flex !important;
        flex-direction: column-reverse !important
    }

    .text-lg-center {
        text-align: center !important
    }
}

@media (max-width: 768px) {
    .h-md-center {
        display: flex !important;
        justify-content: center !important
    }

    .h-md-between {
        display: flex !important;
        justify-content: space-between !important
    }

    .f-md-column {
        display: flex !important;
        flex-direction: column !important
    }

    .f-md-column-reverse {
        display: flex !important;
        flex-direction: column-reverse !important
    }

    .text-md-center {
        text-align: center !important
    }
}

@media (max-width: 640px) {
    .h-sm-end {
        display: flex !important;
        justify-content: flex-end !important
    }

    .v-sm-center {
        display: flex !important;
        align-items: center !important
    }

    .h-sm-center {
        display: flex !important;
        justify-content: center !important
    }

    .h-sm-around {
        display: flex !important;
        justify-content: space-around !important
    }

    .f-sm-column {
        display: flex !important;
        flex-direction: column !important
    }

    .f-sm-row {
        display: flex !important;
        flex-direction: row !important
    }

    .f-sm-row-reverse {
        display: flex !important;
        flex-direction: row-reverse !important
    }

    .text-sm-center {
        text-align: center !important
    }
}

@media (max-width: 480px) {
    .v-xs-center {
        display: flex !important;
        align-items: center !important
    }

    .h-xs-center {
        display: flex !important;
        justify-content: center !important
    }

    .f-xs-column {
        display: flex !important;
        flex-direction: column !important
    }

    .text-xs-left {
        text-align: left !important
    }
}

.d-none {
    display: none !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-table {
    display: table !important
}

.d-table-row {
    display: table-row !important
}

.d-table-cell {
    display: table-cell !important
}

.d-flex {
    display: flex !important
}

.d-inline-flex {
    display: inline-flex !important
}

@media (max-width: 1340px) {
    .d-xxl-none {
        display: none !important
    }

    .d-xxl-inline {
        display: inline !important
    }

    .d-xxl-inline-block {
        display: inline-block !important
    }

    .d-xxl-block {
        display: block !important
    }

    .d-xxl-table {
        display: table !important
    }

    .d-xxl-table-row {
        display: table-row !important
    }

    .d-xxl-table-cell {
        display: table-cell !important
    }

    .d-xxl-flex {
        display: flex !important
    }

    .d-xxl-inline-flex {
        display: inline-flex !important
    }
}

@media (max-width: 1024px) {
    .d-xl-none {
        display: none !important
    }

    .d-xl-inline {
        display: inline !important
    }

    .d-xl-inline-block {
        display: inline-block !important
    }

    .d-xl-block {
        display: block !important
    }

    .d-xl-table {
        display: table !important
    }

    .d-xl-table-row {
        display: table-row !important
    }

    .d-xl-table-cell {
        display: table-cell !important
    }

    .d-xl-flex {
        display: flex !important
    }

    .d-xl-inline-flex {
        display: inline-flex !important
    }
}

@media (max-width: 880px) {
    .d-lg-none {
        display: none !important
    }

    .d-lg-inline {
        display: inline !important
    }

    .d-lg-inline-block {
        display: inline-block !important
    }

    .d-lg-block {
        display: block !important
    }

    .d-lg-table {
        display: table !important
    }

    .d-lg-table-row {
        display: table-row !important
    }

    .d-lg-table-cell {
        display: table-cell !important
    }

    .d-lg-flex {
        display: flex !important
    }

    .d-lg-inline-flex {
        display: inline-flex !important
    }
}

@media (max-width: 768px) {
    .d-md-none {
        display: none !important
    }

    .d-md-inline {
        display: inline !important
    }

    .d-md-inline-block {
        display: inline-block !important
    }

    .d-md-block {
        display: block !important
    }

    .d-md-table {
        display: table !important
    }

    .d-md-table-row {
        display: table-row !important
    }

    .d-md-table-cell {
        display: table-cell !important
    }

    .d-md-flex {
        display: flex !important
    }

    .d-md-inline-flex {
        display: inline-flex !important
    }
}

@media (max-width: 640px) {
    .d-sm-none {
        display: none !important
    }

    .d-sm-inline {
        display: inline !important
    }

    .d-sm-inline-block {
        display: inline-block !important
    }

    .d-sm-block {
        display: block !important
    }

    .d-sm-table {
        display: table !important
    }

    .d-sm-table-row {
        display: table-row !important
    }

    .d-sm-table-cell {
        display: table-cell !important
    }

    .d-sm-flex {
        display: flex !important
    }

    .d-sm-inline-flex {
        display: inline-flex !important
    }
}

@media (max-width: 480px) {
    .d-xs-none {
        display: none !important
    }

    .d-xs-inline {
        display: inline !important
    }

    .d-xs-inline-block {
        display: inline-block !important
    }

    .d-xs-block {
        display: block !important
    }

    .d-xs-table {
        display: table !important
    }

    .d-xs-table-row {
        display: table-row !important
    }

    .d-xs-table-cell {
        display: table-cell !important
    }

    .d-xs-flex {
        display: flex !important
    }

    .d-xs-inline-flex {
        display: inline-flex !important
    }
}

@media (max-width: 350px) {
    .d-xxs-none {
        display: none !important
    }

    .d-xxs-inline {
        display: inline !important
    }

    .d-xxs-inline-block {
        display: inline-block !important
    }

    .d-xxs-block {
        display: block !important
    }

    .d-xxs-table {
        display: table !important
    }

    .d-xxs-table-row {
        display: table-row !important
    }

    .d-xxs-table-cell {
        display: table-cell !important
    }

    .d-xxs-flex {
        display: flex !important
    }

    .d-xxs-inline-flex {
        display: inline-flex !important
    }
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: 5px !important
}

.p-2 {
    padding: 10px !important
}

.p-3 {
    padding: 15px !important
}

.p-4 {
    padding: 20px !important
}

.p-5 {
    padding: 30px !important
}

.p-6 {
    padding: 40px !important
}

.p-7 {
    padding: 50px !important
}

.p-auto {
    padding: auto !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: 5px !important
}

.pt-2 {
    padding-top: 10px !important
}

.pt-3 {
    padding-top: 15px !important
}

.pt-5 {
    padding-top: 30px !important
}

.pr-0 {
    padding-right: 0 !important
}

.pr-1 {
    padding-right: 5px !important
}

.pr-2 {
    padding-right: 10px !important
}

.pr-3 {
    padding-right: 15px !important
}

.pr-4 {
    padding-right: 20px !important
}

.pr-5 {
    padding-right: 30px !important
}

.pr-6 {
    padding-right: 40px !important
}

.pr-7 {
    padding-right: 50px !important
}

.pr-auto {
    padding-right: auto !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: 5px !important
}

.pb-2 {
    padding-bottom: 10px !important
}

.pb-3 {
    padding-bottom: 15px !important
}

.pb-4 {
    padding-bottom: 20px !important
}

.pl-0 {
    padding-left: 0 !important
}

.pl-1 {
    padding-left: 5px !important
}

.pl-2 {
    padding-left: 10px !important
}

.pl-3 {
    padding-left: 15px !important
}

.pl-4 {
    padding-left: 20px !important
}

.pl-5 {
    padding-left: 30px !important
}

.pl-6 {
    padding-left: 40px !important
}

.pl-7 {
    padding-left: 50px !important
}

.pl-auto {
    padding-left: auto !important
}

.m-0 {
    margin: 0 !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: 5px !important
}

.mt-2 {
    margin-top: 10px !important
}

.mt-3 {
    margin-top: 15px !important
}

.mt-4 {
    margin-top: 20px !important
}

.mt-5 {
    margin-top: 30px !important
}

.mt-6 {
    margin-top: 40px !important
}

.mr-1 {
    margin-right: 5px !important
}

.mr-2 {
    margin-right: 10px !important
}

.mr-3 {
    margin-right: 15px !important
}

.mr-4 {
    margin-right: 20px !important
}

.mr-5 {
    margin-right: 30px !important
}

.mr-6 {
    margin-right: 40px !important
}

.mr-7 {
    margin-right: 50px !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: 5px !important
}

.mb-2 {
    margin-bottom: 10px !important
}

.mb-3 {
    margin-bottom: 15px !important
}

.mb-4 {
    margin-bottom: 20px !important
}

.mb-5 {
    margin-bottom: 30px !important
}

.mb-6 {
    margin-bottom: 40px !important
}

.ml-1 {
    margin-left: 5px !important
}

.ml-2 {
    margin-left: 10px !important
}

.ml-3 {
    margin-left: 15px !important
}

.ml-4 {
    margin-left: 20px !important
}

.ml-5 {
    margin-left: 30px !important
}

.ml-auto {
    margin-left: auto !important
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: 5px !important;
    margin-right: 5px !important
}

.mx-2 {
    margin-left: 10px !important;
    margin-right: 10px !important
}

.mx-4 {
    margin-left: 20px !important;
    margin-right: 20px !important
}

.mx-5 {
    margin-left: 30px !important;
    margin-right: 30px !important
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.my-1 {
    margin-top: 5px !important;
    margin-bottom: 5px !important
}

.my-3 {
    margin-top: 15px !important;
    margin-bottom: 15px !important
}

.my-4 {
    margin-top: 20px !important;
    margin-bottom: 20px !important
}

.my-5 {
    margin-top: 30px !important;
    margin-bottom: 30px !important
}

.py-1 {
    padding-top: 5px !important;
    padding-bottom: 5px !important
}

.py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

.py-4 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
}

.py-5 {
    padding-top: 30px !important;
    padding-bottom: 30px !important
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: 5px !important;
    padding-right: 5px !important
}

.px-2 {
    padding-left: 10px !important;
    padding-right: 10px !important
}

.px-4 {
    padding-left: 20px !important;
    padding-right: 20px !important
}

.px-5 {
    padding-left: 30px !important;
    padding-right: 30px !important
}

.px-6 {
    padding-left: 40px !important;
    padding-right: 40px !important
}

.px-7 {
    padding-left: 50px !important;
    padding-right: 50px !important
}

@media (max-width: 1340px) {
    .p-xxl-0 {
        padding: 0 !important
    }

    .p-xxl-1 {
        padding: 5px !important
    }

    .p-xxl-2 {
        padding: 10px !important
    }

    .p-xxl-3 {
        padding: 15px !important
    }

    .p-xxl-4 {
        padding: 20px !important
    }

    .p-xxl-5 {
        padding: 30px !important
    }

    .p-xxl-6 {
        padding: 40px !important
    }

    .p-xxl-7 {
        padding: 50px !important
    }

    .p-xxl-auto {
        padding: auto !important
    }

    .pr-xxl-0 {
        padding-right: 0 !important
    }

    .pr-xxl-1 {
        padding-right: 5px !important
    }

    .pr-xxl-2 {
        padding-right: 10px !important
    }

    .pr-xxl-3 {
        padding-right: 15px !important
    }

    .pr-xxl-4 {
        padding-right: 20px !important
    }

    .pr-xxl-5 {
        padding-right: 30px !important
    }

    .pr-xxl-6 {
        padding-right: 40px !important
    }

    .pr-xxl-7 {
        padding-right: 50px !important
    }

    .pr-xxl-auto {
        padding-right: auto !important
    }

    .pl-xxl-0 {
        padding-left: 0 !important
    }

    .pl-xxl-1 {
        padding-left: 5px !important
    }

    .pl-xxl-2 {
        padding-left: 10px !important
    }

    .pl-xxl-3 {
        padding-left: 15px !important
    }

    .pl-xxl-4 {
        padding-left: 20px !important
    }

    .pl-xxl-5 {
        padding-left: 30px !important
    }

    .pl-xxl-6 {
        padding-left: 40px !important
    }

    .pl-xxl-7 {
        padding-left: 50px !important
    }

    .pl-xxl-auto {
        padding-left: auto !important
    }

    .mt-xxl-2 {
        margin-top: 10px !important
    }

    .mr-xxl-0 {
        margin-right: 0 !important
    }

    .mr-xxl-2 {
        margin-right: 10px !important
    }

    .mr-xxl-3 {
        margin-right: 15px !important
    }

    .ml-xxl-0 {
        margin-left: 0 !important
    }
}

@media (max-width: 1024px) {
    .p-xl-0 {
        padding: 0 !important
    }

    .p-xl-1 {
        padding: 5px !important
    }

    .p-xl-2 {
        padding: 10px !important
    }

    .p-xl-3 {
        padding: 15px !important
    }

    .p-xl-4 {
        padding: 20px !important
    }

    .p-xl-5 {
        padding: 30px !important
    }

    .p-xl-6 {
        padding: 40px !important
    }

    .p-xl-7 {
        padding: 50px !important
    }

    .p-xl-auto {
        padding: auto !important
    }

    .pr-xl-0 {
        padding-right: 0 !important
    }

    .pr-xl-1 {
        padding-right: 5px !important
    }

    .pr-xl-2 {
        padding-right: 10px !important
    }

    .pr-xl-3 {
        padding-right: 15px !important
    }

    .pr-xl-4 {
        padding-right: 20px !important
    }

    .pr-xl-5 {
        padding-right: 30px !important
    }

    .pr-xl-6 {
        padding-right: 40px !important
    }

    .pr-xl-7 {
        padding-right: 50px !important
    }

    .pr-xl-auto {
        padding-right: auto !important
    }

    .pl-xl-0 {
        padding-left: 0 !important
    }

    .pl-xl-1 {
        padding-left: 5px !important
    }

    .pl-xl-2 {
        padding-left: 10px !important
    }

    .pl-xl-3 {
        padding-left: 15px !important
    }

    .pl-xl-4 {
        padding-left: 20px !important
    }

    .pl-xl-5 {
        padding-left: 30px !important
    }

    .pl-xl-6 {
        padding-left: 40px !important
    }

    .pl-xl-7 {
        padding-left: 50px !important
    }

    .pl-xl-auto {
        padding-left: auto !important
    }
}

@media (max-width: 880px) {
    .p-lg-0 {
        padding: 0 !important
    }

    .p-lg-1 {
        padding: 5px !important
    }

    .p-lg-2 {
        padding: 10px !important
    }

    .p-lg-3 {
        padding: 15px !important
    }

    .p-lg-4 {
        padding: 20px !important
    }

    .p-lg-5 {
        padding: 30px !important
    }

    .p-lg-6 {
        padding: 40px !important
    }

    .p-lg-7 {
        padding: 50px !important
    }

    .p-lg-auto {
        padding: auto !important
    }

    .pr-lg-0 {
        padding-right: 0 !important
    }

    .pr-lg-1 {
        padding-right: 5px !important
    }

    .pr-lg-2 {
        padding-right: 10px !important
    }

    .pr-lg-3 {
        padding-right: 15px !important
    }

    .pr-lg-4 {
        padding-right: 20px !important
    }

    .pr-lg-5 {
        padding-right: 30px !important
    }

    .pr-lg-6 {
        padding-right: 40px !important
    }

    .pr-lg-7 {
        padding-right: 50px !important
    }

    .pr-lg-auto {
        padding-right: auto !important
    }

    .pl-lg-0 {
        padding-left: 0 !important
    }

    .pl-lg-1 {
        padding-left: 5px !important
    }

    .pl-lg-2 {
        padding-left: 10px !important
    }

    .pl-lg-3 {
        padding-left: 15px !important
    }

    .pl-lg-4 {
        padding-left: 20px !important
    }

    .pl-lg-5 {
        padding-left: 30px !important
    }

    .pl-lg-6 {
        padding-left: 40px !important
    }

    .pl-lg-7 {
        padding-left: 50px !important
    }

    .pl-lg-auto {
        padding-left: auto !important
    }

    .mt-lg-5 {
        margin-top: 30px !important
    }

    .mr-lg-2 {
        margin-right: 10px !important
    }

    .mb-lg-3 {
        margin-bottom: 15px !important
    }

    .ml-lg-0 {
        margin-left: 0 !important
    }

    .mx-lg-3 {
        margin-left: 15px !important;
        margin-right: 15px !important
    }

    .px-lg-4 {
        padding-left: 20px !important;
        padding-right: 20px !important
    }
}

@media (max-width: 768px) {
    .p-md-0 {
        padding: 0 !important
    }

    .p-md-1 {
        padding: 5px !important
    }

    .p-md-2 {
        padding: 10px !important
    }

    .p-md-3 {
        padding: 15px !important
    }

    .p-md-4 {
        padding: 20px !important
    }

    .p-md-5 {
        padding: 30px !important
    }

    .p-md-6 {
        padding: 40px !important
    }

    .p-md-7 {
        padding: 50px !important
    }

    .p-md-auto {
        padding: auto !important
    }

    .pt-md-3 {
        padding-top: 15px !important
    }

    .pr-md-0 {
        padding-right: 0 !important
    }

    .pr-md-1 {
        padding-right: 5px !important
    }

    .pr-md-2 {
        padding-right: 10px !important
    }

    .pr-md-3 {
        padding-right: 15px !important
    }

    .pr-md-4 {
        padding-right: 20px !important
    }

    .pr-md-5 {
        padding-right: 30px !important
    }

    .pr-md-6 {
        padding-right: 40px !important
    }

    .pr-md-7 {
        padding-right: 50px !important
    }

    .pr-md-auto {
        padding-right: auto !important
    }

    .pb-md-1 {
        padding-bottom: 5px !important
    }

    .pb-md-3 {
        padding-bottom: 15px !important
    }

    .pb-md-4 {
        padding-bottom: 20px !important
    }

    .pb-md-5 {
        padding-bottom: 30px !important
    }

    .pl-md-0 {
        padding-left: 0 !important
    }

    .pl-md-1 {
        padding-left: 5px !important
    }

    .pl-md-2 {
        padding-left: 10px !important
    }

    .pl-md-3 {
        padding-left: 15px !important
    }

    .pl-md-4 {
        padding-left: 20px !important
    }

    .pl-md-5 {
        padding-left: 30px !important
    }

    .pl-md-6 {
        padding-left: 40px !important
    }

    .pl-md-7 {
        padding-left: 50px !important
    }

    .pl-md-auto {
        padding-left: auto !important
    }

    .mt-md-3 {
        margin-top: 15px !important
    }

    .mt-md-4 {
        margin-top: 20px !important
    }

    .mb-md-3 {
        margin-bottom: 15px !important
    }

    .ml-md-3 {
        margin-left: 15px !important
    }

    .mx-md-1 {
        margin-left: 5px !important;
        margin-right: 5px !important
    }

    .mx-md-3 {
        margin-left: 15px !important;
        margin-right: 15px !important
    }

    .my-md-1 {
        margin-top: 5px !important;
        margin-bottom: 5px !important
    }

    .px-md-1 {
        padding-left: 5px !important;
        padding-right: 5px !important
    }

    .px-md-3 {
        padding-left: 15px !important;
        padding-right: 15px !important
    }
}

@media (max-width: 640px) {
    .p-sm-0 {
        padding: 0 !important
    }

    .p-sm-1 {
        padding: 5px !important
    }

    .p-sm-2 {
        padding: 10px !important
    }

    .p-sm-3 {
        padding: 15px !important
    }

    .p-sm-4 {
        padding: 20px !important
    }

    .p-sm-5 {
        padding: 30px !important
    }

    .p-sm-6 {
        padding: 40px !important
    }

    .p-sm-7 {
        padding: 50px !important
    }

    .p-sm-auto {
        padding: auto !important
    }

    .pt-sm-0 {
        padding-top: 0 !important
    }

    .pr-sm-0 {
        padding-right: 0 !important
    }

    .pr-sm-1 {
        padding-right: 5px !important
    }

    .pr-sm-2 {
        padding-right: 10px !important
    }

    .pr-sm-3 {
        padding-right: 15px !important
    }

    .pr-sm-4 {
        padding-right: 20px !important
    }

    .pr-sm-5 {
        padding-right: 30px !important
    }

    .pr-sm-6 {
        padding-right: 40px !important
    }

    .pr-sm-7 {
        padding-right: 50px !important
    }

    .pr-sm-auto {
        padding-right: auto !important
    }

    .pb-sm-0 {
        padding-bottom: 0 !important
    }

    .pb-sm-2 {
        padding-bottom: 10px !important
    }

    .pl-sm-0 {
        padding-left: 0 !important
    }

    .pl-sm-1 {
        padding-left: 5px !important
    }

    .pl-sm-2 {
        padding-left: 10px !important
    }

    .pl-sm-3 {
        padding-left: 15px !important
    }

    .pl-sm-4 {
        padding-left: 20px !important
    }

    .pl-sm-5 {
        padding-left: 30px !important
    }

    .pl-sm-6 {
        padding-left: 40px !important
    }

    .pl-sm-7 {
        padding-left: 50px !important
    }

    .pl-sm-auto {
        padding-left: auto !important
    }

    .mt-sm-2 {
        margin-top: 10px !important
    }

    .mt-sm-3 {
        margin-top: 15px !important
    }

    .mt-sm-4 {
        margin-top: 20px !important
    }

    .mt-sm-5 {
        margin-top: 30px !important
    }

    .mt-sm-6 {
        margin-top: 40px !important
    }

    .mr-sm-0 {
        margin-right: 0 !important
    }

    .mr-sm-1 {
        margin-right: 5px !important
    }

    .mr-sm-2 {
        margin-right: 10px !important
    }

    .mr-sm-4 {
        margin-right: 20px !important
    }

    .mr-sm-auto {
        margin-right: auto !important
    }

    .mb-sm-0 {
        margin-bottom: 0 !important
    }

    .mb-sm-1 {
        margin-bottom: 5px !important
    }

    .mb-sm-2 {
        margin-bottom: 10px !important
    }

    .mb-sm-3 {
        margin-bottom: 15px !important
    }

    .mb-sm-4 {
        margin-bottom: 20px !important
    }

    .ml-sm-0 {
        margin-left: 0 !important
    }

    .ml-sm-1 {
        margin-left: 5px !important
    }

    .ml-sm-2 {
        margin-left: 10px !important
    }

    .ml-sm-3 {
        margin-left: 15px !important
    }

    .mx-sm-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-sm-1 {
        margin-left: 5px !important;
        margin-right: 5px !important
    }

    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .px-sm-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-sm-2 {
        padding-left: 10px !important;
        padding-right: 10px !important
    }
}

@media (max-width: 480px) {
    .p-xs-0 {
        padding: 0 !important
    }

    .p-xs-1 {
        padding: 5px !important
    }

    .p-xs-2 {
        padding: 10px !important
    }

    .p-xs-3 {
        padding: 15px !important
    }

    .p-xs-4 {
        padding: 20px !important
    }

    .p-xs-5 {
        padding: 30px !important
    }

    .p-xs-6 {
        padding: 40px !important
    }

    .p-xs-7 {
        padding: 50px !important
    }

    .p-xs-auto {
        padding: auto !important
    }

    .pt-xs-0 {
        padding-top: 0 !important
    }

    .pt-xs-3 {
        padding-top: 15px !important
    }

    .pr-xs-0 {
        padding-right: 0 !important
    }

    .pr-xs-1 {
        padding-right: 5px !important
    }

    .pr-xs-2 {
        padding-right: 10px !important
    }

    .pr-xs-3 {
        padding-right: 15px !important
    }

    .pr-xs-4 {
        padding-right: 20px !important
    }

    .pr-xs-5 {
        padding-right: 30px !important
    }

    .pr-xs-6 {
        padding-right: 40px !important
    }

    .pr-xs-7 {
        padding-right: 50px !important
    }

    .pr-xs-auto {
        padding-right: auto !important
    }

    .pb-xs-1 {
        padding-bottom: 5px !important
    }

    .pb-xs-3 {
        padding-bottom: 15px !important
    }

    .pb-xs-4 {
        padding-bottom: 20px !important
    }

    .pb-xs-5 {
        padding-bottom: 30px !important
    }

    .pl-xs-0 {
        padding-left: 0 !important
    }

    .pl-xs-1 {
        padding-left: 5px !important
    }

    .pl-xs-2 {
        padding-left: 10px !important
    }

    .pl-xs-3 {
        padding-left: 15px !important
    }

    .pl-xs-4 {
        padding-left: 20px !important
    }

    .pl-xs-5 {
        padding-left: 30px !important
    }

    .pl-xs-6 {
        padding-left: 40px !important
    }

    .pl-xs-7 {
        padding-left: 50px !important
    }

    .pl-xs-auto {
        padding-left: auto !important
    }

    .m-xs-0 {
        margin: 0 !important
    }

    .mt-xs-0 {
        margin-top: 0 !important
    }

    .mt-xs-1 {
        margin-top: 5px !important
    }

    .mt-xs-2 {
        margin-top: 10px !important
    }

    .mt-xs-3 {
        margin-top: 15px !important
    }

    .mt-xs-4 {
        margin-top: 20px !important
    }

    .mr-xs-0 {
        margin-right: 0 !important
    }

    .mr-xs-1 {
        margin-right: 5px !important
    }

    .mb-xs-0 {
        margin-bottom: 0 !important
    }

    .mb-xs-2 {
        margin-bottom: 10px !important
    }

    .mb-xs-3 {
        margin-bottom: 15px !important
    }

    .ml-xs-0 {
        margin-left: 0 !important
    }

    .ml-xs-1 {
        margin-left: 5px !important
    }

    .ml-xs-2 {
        margin-left: 10px !important
    }

    .mx-xs-1 {
        margin-left: 5px !important;
        margin-right: 5px !important
    }

    .mx-xs-2 {
        margin-left: 10px !important;
        margin-right: 10px !important
    }

    .mx-xs-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .py-xs-4 {
        padding-top: 20px !important;
        padding-bottom: 20px !important
    }

    .py-xs-7 {
        padding-top: 50px !important;
        padding-bottom: 50px !important
    }

    .px-xs-2 {
        padding-left: 10px !important;
        padding-right: 10px !important
    }
}

@media (max-width: 350px) {
    .p-xxs-0 {
        padding: 0 !important
    }

    .p-xxs-1 {
        padding: 5px !important
    }

    .p-xxs-2 {
        padding: 10px !important
    }

    .p-xxs-3 {
        padding: 15px !important
    }

    .p-xxs-4 {
        padding: 20px !important
    }

    .p-xxs-5 {
        padding: 30px !important
    }

    .p-xxs-6 {
        padding: 40px !important
    }

    .p-xxs-7 {
        padding: 50px !important
    }

    .p-xxs-auto {
        padding: auto !important
    }

    .pr-xxs-0 {
        padding-right: 0 !important
    }

    .pr-xxs-1 {
        padding-right: 5px !important
    }

    .pr-xxs-2 {
        padding-right: 10px !important
    }

    .pr-xxs-3 {
        padding-right: 15px !important
    }

    .pr-xxs-4 {
        padding-right: 20px !important
    }

    .pr-xxs-5 {
        padding-right: 30px !important
    }

    .pr-xxs-6 {
        padding-right: 40px !important
    }

    .pr-xxs-7 {
        padding-right: 50px !important
    }

    .pr-xxs-auto {
        padding-right: auto !important
    }

    .pl-xxs-0 {
        padding-left: 0 !important
    }

    .pl-xxs-1 {
        padding-left: 5px !important
    }

    .pl-xxs-2 {
        padding-left: 10px !important
    }

    .pl-xxs-3 {
        padding-left: 15px !important
    }

    .pl-xxs-4 {
        padding-left: 20px !important
    }

    .pl-xxs-5 {
        padding-left: 30px !important
    }

    .pl-xxs-6 {
        padding-left: 40px !important
    }

    .pl-xxs-7 {
        padding-left: 50px !important
    }

    .pl-xxs-auto {
        padding-left: auto !important
    }

    .px-xxs-1 {
        padding-left: 5px !important;
        padding-right: 5px !important
    }
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.hide {
    display: none
}

.flex-1 {
    flex: 1
}

.flex-4 {
    flex: 4
}

.flex-5 {
    flex: 5
}

.wide {
    width: 100%
}

@media screen and (max-width: 640px) {
    .wide-sm {
        width: 100%
    }
}

@media screen and (max-width: 480px) {
    .wide-xs {
        width: 100%
    }
}

.height-100 {
    height: 100%
}

.round {
    border-radius: 50%
}

.overflow-hidden {
    overflow: hidden
}

*[hidden] {
    visibility: hidden !important
}

.cursor-pointer {
    cursor: pointer !important
}

.cursor-not-allowed {
    cursor: not-allowed !important
}

.cursor-default {
    cursor: default !important
}

.cursor-help {
    cursor: help !important
}

.height-auto {
    height: auto !important
}

.width-auto {
    width: auto !important
}

.no-wrap {
    white-space: nowrap !important
}

.xgs-perspective {
    perspective: 1000px
}

.xgs-perspective_block.-left {
    transform: rotateX(5deg) rotateY(20deg) rotate(-2deg) translate(10%)
}

@media screen and (max-width: 880px) {
    .xgs-perspective_block.-left {
        transform: none
    }
}

.xgs-perspective_block.-right {
    transform: rotateX(5deg) rotateY(-20deg) rotate(2deg) translate(-10%)
}

@media screen and (max-width: 880px) {
    .xgs-perspective_block.-right {
        transform: none
    }
}

.watermark {
    position: absolute;
    font-size: 70px;
    opacity: .2;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 100
}

@media screen and (max-width: 640px) {
    .watermark {
        font-size: 50px
    }
}

@media screen and (max-width: 640px) {
    .watermark {
        font-size: 35px
    }
}

.mat-option {
    color: #000000de
}

.mat-option:hover:not(.mat-option-disabled),
.mat-option:focus:not(.mat-option-disabled) {
    background: rgba(0, 0, 0, .04)
}

.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
    background: rgba(0, 0, 0, .04)
}

.mat-ripple-element {
    background-color: #0000001a
}

.mat-spinner circle {
    stroke: #29a7ae
}

.mat-spinner.mat-accent circle {
    stroke: #622951
}

.mat-spinner.mat-warn circle {
    stroke: #f44336
}

.mat-form-field-type-mat-native-select .mat-form-field-infix:after {
    color: #0000008a
}

.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix:after {
    color: #00000061
}

.mat-form-field.mat-accent .mat-input-element {
    caret-color: #622951
}

.mat-form-field.mat-warn .mat-input-element,
.mat-form-field-invalid .mat-input-element {
    caret-color: #f44336
}

.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix:after {
    color: #f44336
}

.mat-form-field-disabled .mat-form-field-prefix,
.mat-form-field-disabled .mat-form-field-suffix {
    color: #00000061
}

.mat-form-field-label {
    color: #0009
}

.mat-form-field.mat-focused .mat-form-field-label {
    color: #29a7ae
}

.mat-form-field.mat-focused .mat-form-field-label.mat-accent {
    color: #622951
}

.mat-form-field.mat-focused .mat-form-field-label.mat-warn {
    color: #f44336
}

.mat-form-field-ripple {
    background-color: #000000de
}

.mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: #29a7ae
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
    background-color: #622951
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {
    background-color: #f44336
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix:after {
    color: #29a7ae
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix:after {
    color: #622951
}

.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix:after {
    color: #f44336
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,
.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {
    color: #f44336
}

.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,
.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {
    background-color: #f44336
}

.mat-form-field-appearance-legacy .mat-form-field-label,
.mat-form-field-appearance-legacy .mat-hint {
    color: #0000008a
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: #0000006b
}

.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .42) 33%, transparent 0%);
    background-size: 4px 100%;
    background-repeat: repeat-x
}

.mat-form-field-appearance-standard .mat-form-field-underline {
    background-color: #0000006b
}

.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .42) 33%, transparent 0%);
    background-size: 4px 100%;
    background-repeat: repeat-x
}

.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: #0000000a
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
    background-color: #00000005
}

.mat-form-field-appearance-fill .mat-form-field-underline:before {
    background-color: #0000006b
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {
    color: #00000061
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline:before {
    background-color: transparent
}

.mat-form-field-appearance-outline .mat-form-field-outline {
    color: #0000001f
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: #000000de
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: #29a7ae
}

.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {
    color: #622951
}

.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick,
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: #f44336
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
    color: #00000061
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
    color: #0000000f
}

.mat-select-value {
    color: #000000de
}

.mat-select-placeholder {
    color: #0000006b
}

.mat-select-disabled .mat-select-value {
    color: #00000061
}

.mat-select-arrow {
    color: #0000008a
}

.mat-select-panel {
    background: white
}

.mat-select-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f
}

.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
    background: rgba(0, 0, 0, .12)
}

.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    color: #29a7ae
}

.mat-form-field.mat-focused.mat-accent .mat-select-arrow {
    color: #622951
}

.mat-form-field.mat-focused.mat-warn .mat-select-arrow,
.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {
    color: #f44336
}

.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
    color: #00000061
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #622951
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: #6229518a
}

.mat-slide-toggle.mat-checked .mat-ripple-element {
    background-color: #622951
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
    background-color: #29a7ae
}

.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
    background-color: #29a7ae8a
}

.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {
    background-color: #29a7ae
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {
    background-color: #f44336
}

.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {
    background-color: #f443368a
}

.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element {
    background-color: #f44336
}

.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {
    background-color: #000
}

.mat-slide-toggle-thumb {
    box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f;
    background-color: #fafafa
}

.mat-slide-toggle-bar {
    background-color: #00000061
}

.mat-slider-track-background {
    background-color: #00000042
}

.mat-slider.mat-primary .mat-slider-track-fill,
.mat-slider.mat-primary .mat-slider-thumb,
.mat-slider.mat-primary .mat-slider-thumb-label {
    background-color: #29a7ae
}

.mat-slider.mat-primary .mat-slider-thumb-label-text {
    color: #000
}

.mat-slider.mat-primary .mat-slider-focus-ring {
    background-color: #29a7ae33
}

.mat-slider.mat-accent .mat-slider-track-fill,
.mat-slider.mat-accent .mat-slider-thumb,
.mat-slider.mat-accent .mat-slider-thumb-label {
    background-color: #622951
}

.mat-slider.mat-accent .mat-slider-thumb-label-text {
    color: #fff
}

.mat-slider.mat-accent .mat-slider-focus-ring {
    background-color: #62295133
}

.mat-slider.mat-warn .mat-slider-track-fill,
.mat-slider.mat-warn .mat-slider-thumb,
.mat-slider.mat-warn .mat-slider-thumb-label {
    background-color: #f44336
}

.mat-slider.mat-warn .mat-slider-thumb-label-text {
    color: #fff
}

.mat-slider.mat-warn .mat-slider-focus-ring {
    background-color: #f4433633
}

.mat-slider:hover .mat-slider-track-background,
.mat-slider.cdk-focused .mat-slider-track-background {
    background-color: #00000061
}

.mat-slider.mat-slider-disabled .mat-slider-track-background,
.mat-slider.mat-slider-disabled .mat-slider-track-fill,
.mat-slider.mat-slider-disabled .mat-slider-thumb,
.mat-slider.mat-slider-disabled:hover .mat-slider-track-background {
    background-color: #00000042
}

.mat-slider.mat-slider-min-value .mat-slider-focus-ring {
    background-color: #0000001f
}

.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
    background-color: #000000de
}

.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
    background-color: #00000042
}

.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
    border-color: #00000042;
    background-color: transparent
}

.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb,
.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
    border-color: #00000061
}

.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb,
.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
    border-color: #00000042
}

.mat-slider-has-ticks .mat-slider-wrapper:after {
    border-color: #000000b3
}

.mat-slider-horizontal .mat-slider-ticks {
    background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent);
    background-image: -moz-repeating-linear-gradient(.0001deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-slider-vertical .mat-slider-ticks {
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-tab-label {
    color: #000000de
}

html {
    --mat-badge-background-color: #29a7ae;
    --mat-badge-text-color: black;
    --mat-badge-disabled-state-background-color: #b9b9b9;
    --mat-badge-disabled-state-text-color: rgba(0, 0, 0, .38)
}

html {
    --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, .87);
    --mat-bottom-sheet-container-background-color: white
}

html {
    --mat-legacy-button-toggle-text-color: rgba(0, 0, 0, .38);
    --mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, .12);
    --mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, .54);
    --mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;
    --mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);
    --mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;
    --mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd;
    --mat-standard-button-toggle-text-color: rgba(0, 0, 0, .87);
    --mat-standard-button-toggle-background-color: white;
    --mat-standard-button-toggle-state-layer-color: black;
    --mat-standard-button-toggle-selected-state-background-color: #e0e0e0;
    --mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);
    --mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);
    --mat-standard-button-toggle-disabled-state-background-color: white;
    --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, .87);
    --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
    --mat-standard-button-toggle-divider-color: #e0e0e0
}

html {
    --mat-standard-button-toggle-height: 48px
}

html {
    --mat-datepicker-calendar-date-selected-state-text-color: black;
    --mat-datepicker-calendar-date-selected-state-background-color: #29a7ae;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(41, 167, 174, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: black;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(41, 167, 174, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(41, 167, 174, .3);
    --mat-datepicker-toggle-active-state-icon-color: #29a7ae;
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(41, 167, 174, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
    --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .38);
    --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, .18);
    --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-date-outline-color: transparent;
    --mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, .38);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .24);
    --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);
    --mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, .38);
    --mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, .38);
    --mat-datepicker-calendar-container-background-color: white;
    --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)
}

html {
    --mat-divider-color: rgba(0, 0, 0, .12)
}

html {
    --mat-expansion-container-background-color: white;
    --mat-expansion-container-text-color: rgba(0, 0, 0, .87);
    --mat-expansion-actions-divider-color: rgba(0, 0, 0, .12);
    --mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, .04);
    --mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, .04);
    --mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, .26);
    --mat-expansion-header-text-color: rgba(0, 0, 0, .87);
    --mat-expansion-header-description-color: rgba(0, 0, 0, .54);
    --mat-expansion-header-indicator-color: rgba(0, 0, 0, .54)
}

html {
    --mat-expansion-header-collapsed-state-height: 48px;
    --mat-expansion-header-expanded-state-height: 64px
}

html {
    --mat-icon-color: inherit
}

html {
    --mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);
    --mat-sidenav-container-background-color: white;
    --mat-sidenav-container-text-color: rgba(0, 0, 0, .87);
    --mat-sidenav-content-background-color: #fafafa;
    --mat-sidenav-content-text-color: rgba(0, 0, 0, .87);
    --mat-sidenav-scrim-color: rgba(0, 0, 0, .6)
}

html {
    --mat-stepper-header-icon-foreground-color: black;
    --mat-stepper-header-selected-state-icon-background-color: #29a7ae;
    --mat-stepper-header-selected-state-icon-foreground-color: black;
    --mat-stepper-header-done-state-icon-background-color: #29a7ae;
    --mat-stepper-header-done-state-icon-foreground-color: black;
    --mat-stepper-header-edit-state-icon-background-color: #29a7ae;
    --mat-stepper-header-edit-state-icon-foreground-color: black;
    --mat-stepper-container-color: white;
    --mat-stepper-line-color: rgba(0, 0, 0, .12);
    --mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, .04);
    --mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, .04);
    --mat-stepper-header-label-text-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, .87);
    --mat-stepper-header-error-state-label-text-color: #f44336;
    --mat-stepper-header-icon-background-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-error-state-icon-foreground-color: #f44336;
    --mat-stepper-header-error-state-icon-background-color: transparent
}

html {
    --mat-stepper-header-height: 72px
}

html {
    --mat-toolbar-container-background-color: whitesmoke;
    --mat-toolbar-container-text-color: rgba(0, 0, 0, .87)
}

html {
    --mat-toolbar-standard-height: 64px;
    --mat-toolbar-mobile-height: 56px
}

mat-slider.mat-slider-horizontal {
    width: 100%;
    padding: 0;
    height: 12px;
    cursor: pointer
}

mat-slider.mat-slider-horizontal:hover,
mat-slider.mat-slider-horizontal.mat-slider-sliding {
    cursor: default
}

mat-slider.mat-slider-horizontal:hover .mat-slider-track-background,
mat-slider.mat-slider-horizontal.mat-slider-sliding .mat-slider-track-background {
    background-color: #e9ecef
}

mat-slider.mat-slider-horizontal.mat-slider-disabled .mat-slider-track-fill {
    background: linear-gradient(90deg, #ced4da, #a4a7ad)
}

mat-slider.mat-slider-horizontal:not(.mat-slider-disabled).cdk-mouse-focused .mat-slider-thumb,
mat-slider.mat-slider-horizontal :not(.mat-slider-disabled).cdk-program-focused .mat-slider-thumb,
mat-slider.mat-slider-horizontal :not(.mat-slider-disabled).cdk-touch-focused .mat-slider-thumb {
    transform: scale(1.2)
}

mat-slider.mat-slider-horizontal .mat-slider-thumb-container,
mat-slider.mat-slider-horizontal .mat-slider-track-fill,
mat-slider.mat-slider-horizontal .mat-slider-track-background {
    transition: none
}

mat-slider.mat-slider-horizontal .mat-slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

mat-slider.mat-slider-horizontal .mat-slider-track-wrapper,
mat-slider.mat-slider-horizontal .mat-slider-track-background {
    height: 4px;
    border-radius: 2px
}

mat-slider.mat-slider-horizontal .mat-slider-track-fill {
    background: linear-gradient(90deg, #781426 0%, #aa3026);
    height: 4px;
    border-radius: 1px
}

mat-slider.mat-slider-horizontal .mat-slider-track-background {
    background: #e9ecef !important
}

mat-slider.mat-slider-horizontal .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
    border-color: #dde2e6
}

mat-slider.mat-slider-horizontal .mat-slider-thumb {
    width: 16px;
    height: 16px;
    right: -8px;
    top: -8px;
    transform: scale(1);
    transition: transform .4s cubic-bezier(.25, .8, .25, 1);
    background: #fff !important;
    box-shadow: 0 1px 3px 1px #0003, 0 2px 1px #00000024, 0 1px 3px #0000001f
}

mat-slider.mat-slider-horizontal.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-track-background {
    margin-left: -7px
}

mat-slider.mat-slider-horizontal.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
    background: #fff;
    border: none
}

mat-slider.mat-slider-horizontal .mat-slider-focus-ring {
    background: linear-gradient(90deg, #781426 0%, #aa3026);
    opacity: .1
}

mat-slider.mat-slider-impact .mat-slider-track-fill {
    background: #781426 !important
}

mat-slider.mat-slider-impact .mat-slider-track-background {
    background: #aa3026 !important
}

mat-slider.mat-slider-axis .mat-slider-track-wrapper {
    background: #e9ecef
}

mat-slider.mat-slider-axis .mat-slider-track-wrapper:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background: #e9ecef;
    z-index: 1
}

mat-slider.mat-slider-axis .mat-slider-track-fill {
    background: linear-gradient(-90deg, #00a672 0%, #008d60) !important;
    display: block
}

mat-slider.mat-slider-axis .mat-slider-track-background {
    display: none;
    border-radius: 2px;
    overflow: hidden
}

mat-slider.mat-slider-axis[aria-valuenow="0"] .mat-slider-thumb {
    background: #fff
}

mat-slider.mat-slider-axis.-negative .mat-slider-track-wrapper:before {
    left: auto;
    right: 0
}

mat-slider.mat-slider-axis.-negative .mat-slider-track-fill {
    display: none
}

mat-slider.mat-slider-axis.-negative .mat-slider-track-background {
    background: linear-gradient(-90deg, #ed6d72 0%, #ea565c) !important;
    background-size: 50%;
    display: block
}

mat-form-field {
    width: 100%
}

mat-form-field .mat-form-field-infix {
    width: auto
}

mat-form-field .mat-form-field-infix {
    border: none
}

mat-form-field.mat-form-field-appearance-legacy .mat-form-field-underline {
    bottom: 0
}

mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix {
    padding: 5px 0
}

mat-form-field.mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 0
}

mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    color: #495057 !important
}

mat-form-field.mat-focused .mat-form-field-ripple {
    background: linear-gradient(135deg, #781426 0%, #622951 100%)
}

mat-form-field .mat-form-field-label {
    font-family: Roboto Condensed, Arial Narrow, sans-serif
}

@media screen and (max-width: 480px) {
    mat-select {
        font-size: 14px
    }
}

mat-select.mat-auto-width {
    width: auto
}

mat-select.mat-auto-width .mat-select-value {
    max-width: 100%;
    width: auto;
    overflow: visible
}

mat-select .mat-select-arrow {
    color: #a4a7ad;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

mat-select.mat-select-disabled {
    opacity: .7
}

mat-select.mat-select-disabled .mat-select-arrow {
    opacity: .7
}

mat-select .mat-select-value-text {
    font-weight: 700;
    color: #534f59
}

mat-select * {
    font-family: Roboto Condensed, Arial Narrow, sans-serif
}

mat-select .mat-select-placeholder {
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    color: #534f59 !important
}

mat-option {
    color: #534f59
}

mat-option * {
    font-family: Roboto Condensed, Arial Narrow, sans-serif
}

mat-option:hover:not(.mat-option-disabled):not(.mat-active),
mat-option:focus:not(.mat-option-disabled):not(.mat-active) {
    background: #f8f9fa !important
}

mat-option.mat-selected {
    font-weight: 700;
    color: #534f59
}

.mat-ripple-element {
    background: rgba(33, 37, 41, .05) !important
}

.mat-select-content,
.mat-select-panel-done-animating {
    opacity: 1 !important;
    background: #fff !important
}

mat-slide-toggle.mat-slide-toggle.mat-slide-toggle-large .mat-slide-toggle-bar {
    height: 26px;
    width: 46.8px
}

mat-slide-toggle.mat-slide-toggle.mat-slide-toggle-large .mat-slide-toggle-thumb,
mat-slide-toggle.mat-slide-toggle.mat-slide-toggle-large .mat-slide-toggle-thumb-container {
    height: 20.8px;
    width: 20.8px
}

mat-slide-toggle.mat-slide-toggle.mat-slide-toggle-large.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(26px, 0, 0);
    left: -2px
}

mat-slide-toggle.mat-slide-toggle.mat-slide-toggle-large .mat-slide-toggle-bar {
    background: #a4a7ad;
    transition: all .3s linear;
    position: relative;
    border-radius: 13px
}

mat-slide-toggle.mat-slide-toggle * {
    font-family: Roboto Condensed, Arial Narrow, sans-serif
}

mat-slide-toggle.mat-slide-toggle.mat-disabled {
    opacity: 1
}

mat-slide-toggle.mat-slide-toggle.mat-disabled .mat-slide-toggle-bar {
    opacity: .6
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar {
    height: 20px;
    width: 36px
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar:after {
    display: none
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb,
mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb-container {
    height: 16px;
    width: 16px
}

mat-slide-toggle.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(20px, 0, 0);
    left: -2px
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb-container {
    top: 2px;
    left: 2px
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar {
    background: #a4a7ad;
    transition: all .3s linear;
    position: relative;
    border-radius: 10px
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #a4a7ad;
    z-index: -1;
    border-radius: 10px
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-content {
    color: #495057;
    font-size: 15px
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-ripple {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    height: 30px;
    width: 30px;
    z-index: 1;
    pointer-events: none;
    opacity: .6
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-ripple .mat-ripple-element {
    top: calc(50% - 15px) !important;
    left: calc(50% - 15px) !important;
    height: 30px !important;
    width: 30px !important;
    background: linear-gradient(135deg, #781426 0%, #622951 100%) !important
}

mat-slide-toggle.mat-slide-toggle.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background: #fff !important;
    box-shadow: 0 1px 3px 1px #0003, 0 2px 1px #00000024, 0 1px 3px #0000001f;
    z-index: 1000
}

mat-slide-toggle.mat-slide-toggle.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background: linear-gradient(90deg, #781426 0%, #aa3026 80%)
}

mat-button-toggle {
    line-height: 1
}

mat-button-toggle.mat-button-toggle {
    color: #6c757d
}

mat-button-toggle.mat-button-toggle-disabled {
    background: #f8f9fa
}

mat-button-toggle.mat-button-toggle-disabled * {
    cursor: not-allowed
}

mat-button-toggle .mat-button-toggle-label-content {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    line-height: 32px;
    color: #a4a7ad
}

@media screen and (max-width: 640px) {
    mat-button-toggle .mat-button-toggle-label-content {
        line-height: 28px;
        font-size: 13px;
        padding: 0 15px
    }
}

@media screen and (max-width: 480px) {
    mat-button-toggle .mat-button-toggle-label-content {
        line-height: 26px;
        font-size: 12px;
        padding: 1px 12px 0
    }
}

mat-button-toggle.mat-button-toggle-checked {
    background-color: #e9ecef
}

mat-button-toggle.mat-button-toggle-checked .mat-button-toggle-label-content {
    color: #6c757d
}

mat-button-toggle.mat-button-toggle-checked .mat-button-toggle-focus-overlay {
    border-bottom-width: 32px
}

@media screen and (max-width: 640px) {
    mat-button-toggle.mat-button-toggle-checked .mat-button-toggle-focus-overlay {
        border-bottom-width: 28px
    }
}

@media screen and (max-width: 480px) {
    mat-button-toggle.mat-button-toggle-checked .mat-button-toggle-focus-overlay {
        border-bottom-width: 26px
    }
}

mat-button-toggle-group.mat-button-toggle-group {
    box-shadow: none !important;
    border: 1px solid #dee2e6;
    border-radius: 2px
}

mat-button-toggle-group.mat-button-toggle-group .mat-button-toggle+.mat-button-toggle {
    border-left: 1px solid #dee2e6
}

.mat-icon {
    font-size: 0
}

.mat-icon.icon-xs {
    width: 12px;
    height: 12px
}

@media screen and (max-width: 640px) {
    .mat-icon.icon-xs {
        width: 11px;
        height: 11px
    }
}

@media screen and (max-width: 480px) {
    .mat-icon.icon-xs {
        width: 10px;
        height: 10px
    }
}

.mat-icon.icon-sm {
    width: 22px;
    height: 22px
}

.mat-icon.icon-lg {
    width: 28px;
    height: 28px
}

.mat-mdc-tab-group {
    --mdc-tab-indicator-active-indicator-color: #781426;
    --mat-tab-header-inactive-label-text-color: #a4a7ad;
    --mat-tab-header-active-label-text-color: #781426;
    --mat-tab-header-active-ripple-color: #781426;
    --mat-tab-header-inactive-ripple-color: #781426;
    --mat-tab-header-active-focus-label-text-color: #781426;
    --mat-tab-header-active-hover-label-text-color: #781426;
    --mat-tab-header-active-focus-indicator-color: #781426;
    --mat-tab-header-active-hover-indicator-color: #781426;
    --mat-tab-header-inactive-hover-label-text-color: #781426
}

.mat-mdc-tab-group .mat-mdc-tab-header {
    --mat-tab-header-label-text-font: inherit;
    --mat-tab-header-label-text-size: inherit;
    --mat-tab-header-label-text-tracking: inherit;
    --mat-tab-header-label-text-transform: uppercase;
    --mat-tab-header-label-text-line-height: inherit;
    --mat-tab-header-label-text-weight: bold;
    --mdc-tab-indicator-active-indicator-color: #781426;
    --mdc-tab-indicator-active-indicator-height: 3px;
    --mdc-secondary-navigation-tab-container-height: 70px
}

.mat-mdc-tab-group .mat-mdc-tab {
    font-size: inherit;
    text-transform: uppercase
}

.mat-mdc-tab-group .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
    color: #781426
}

.btn-text,
.btn-patreon,
.btn-telegram,
.btn-facebook,
.btn-white,
.btn-black,
.btn-dark,
.btn-gray,
.btn-danger,
.btn-success,
.btn-secondary,
.btn-primary,
.btn-default,
.btn-gradient,
.btn-shape {
    height: 38px;
    padding: 0 20px;
    border-radius: 2px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    font-size: 14px;
    background: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: background .3s cubic-bezier(0, 0, .1, 1), color .3s cubic-bezier(0, 0, .1, 1), opacity .3s cubic-bezier(0, 0, .1, 1), border-color .3s cubic-bezier(0, 0, .1, 1);
    border: 1px solid transparent;
    text-align: center
}

@media screen and (max-width: 640px) {

    .btn-text,
    .btn-patreon,
    .btn-telegram,
    .btn-facebook,
    .btn-white,
    .btn-black,
    .btn-dark,
    .btn-gray,
    .btn-danger,
    .btn-success,
    .btn-secondary,
    .btn-primary,
    .btn-default,
    .btn-gradient,
    .btn-shape {
        height: 36px;
        font-size: 13px
    }
}

@media screen and (max-width: 480px) {

    .btn-text,
    .btn-patreon,
    .btn-telegram,
    .btn-facebook,
    .btn-white,
    .btn-black,
    .btn-dark,
    .btn-gray,
    .btn-danger,
    .btn-success,
    .btn-secondary,
    .btn-primary,
    .btn-default,
    .btn-gradient,
    .btn-shape {
        height: 34px
    }
}

.btn-text:hover,
.btn-patreon:hover,
.btn-telegram:hover,
.btn-facebook:hover,
.btn-white:hover,
.btn-black:hover,
.btn-dark:hover,
.btn-gray:hover,
.btn-danger:hover,
.btn-success:hover,
.btn-secondary:hover,
.btn-primary:hover,
.btn-default:hover,
.btn-gradient:hover,
.btn-shape:hover {
    text-decoration: none
}

.btn-text i,
.btn-patreon i,
.btn-telegram i,
.btn-facebook i,
.btn-white i,
.btn-black i,
.btn-dark i,
.btn-gray i,
.btn-danger i,
.btn-success i,
.btn-secondary i,
.btn-primary i,
.btn-default i,
.btn-gradient i,
.btn-shape i {
    font-size: 15px;
    transform: translateY(-1px)
}

.btn-shape {
    background: rgba(0, 0, 0, 0);
    background: none;
    border: none;
    border-radius: 2px;
    padding: 0 20px;
    height: 38px;
    margin: 0;
    font-size: 14px;
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    text-transform: uppercase;
    transition: all .2s linear;
    color: #495057
}

.btn-shape:hover {
    background-color: #0000;
    text-decoration: none
}

.btn-shape:disabled,
.btn-shape.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-shape.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-shape.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-shape.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-shape.-hollow {
    color: #0000;
    background: transparent;
    border-color: #0000;
    overflow: hidden
}

.btn-shape.-hollow:hover {
    background: rgba(0, 0, 0, .1)
}

.btn-shape.-reverse {
    color: #0000;
    background: #495057;
    border-color: #495057
}

.btn-shape.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-shape.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-shape.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-shape.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-shape.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-shape.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-shape.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-shape.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-shape.-wide {
    width: 100%
}

.btn-shape .mat-spinner circle {
    stroke: #fff
}

.btn-shape:hover {
    color: #000
}

.btn-shape.-light,
.xgs-tooltip a.btn-shape {
    color: #fff
}

.btn-shape.-light:hover,
.xgs-tooltip a.btn-shape:hover {
    background: #42484f
}

.btn-shape i {
    margin-right: 5px;
    display: inline-block
}

.btn-pure,
.xgs-password-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    color: #495057;
    opacity: .9;
    display: inline-flex;
    align-items: center
}

.btn-pure.-light,
.xgs-tooltip a.btn-pure,
.-light.xgs-password-toggle-btn,
.xgs-tooltip a.xgs-password-toggle-btn {
    color: #fff
}

.btn-pure i,
.xgs-password-toggle-btn i {
    margin-right: 5px;
    display: inline-block
}

.btn-pure:hover,
.xgs-password-toggle-btn:hover {
    opacity: 1
}

.btn-circle-icon {
    display: inline-flex;
    background: transparent;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    height: 30px;
    width: 30px;
    min-height: 30px;
    min-width: 30px;
    padding: 5px;
    position: relative
}

@media (hover: hover) {
    .btn-circle-icon.-success:before {
        background: rgba(0, 166, 114, .07)
    }

    .btn-circle-icon.-success.-border:hover:not(:disabled) {
        border-color: #00a672
    }
}

.btn-circle-icon.-success .ft-thumbs-up {
    transform: translateY(-1px)
}

@media (hover: hover) {
    .btn-circle-icon.-danger:before {
        background: rgba(237, 109, 114, .07)
    }

    .btn-circle-icon.-danger.-border:hover:not(:disabled) {
        border-color: #ed6d72
    }
}

.btn-circle-icon.-danger .ft-thumbs-down {
    transform: translate(-1px)
}

.btn-circle-icon.-small {
    height: 24px;
    width: 24px;
    min-height: 24px;
    min-width: 24px;
    padding: 4px
}

@media screen and (max-width: 640px) {
    .btn-circle-icon.-small {
        height: 22px;
        width: 22px;
        min-height: 22px;
        min-width: 22px
    }
}

.btn-circle-icon.-large {
    height: 36px;
    width: 36px;
    min-height: 36px;
    min-width: 36px;
    padding: 4px
}

@media screen and (max-width: 640px) {
    .btn-circle-icon.-large {
        height: 34px;
        width: 34px;
        min-height: 34px;
        min-width: 34px
    }
}

@media screen and (max-width: 640px) {
    .btn-circle-icon {
        height: 28px;
        width: 28px;
        min-height: 28px;
        min-width: 28px
    }
}

.btn-circle-icon:disabled {
    opacity: .5;
    cursor: default
}

.btn-circle-icon:before {
    transition: all .2s linear;
    border-radius: 50%;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: scale(.5);
    opacity: 0;
    background: rgba(0, 0, 0, .07)
}

.btn-circle-icon.-border {
    border: 1px solid #ced4da;
    transition: border-color .3s cubic-bezier(0, 0, .1, 1);
    color: #6c757d
}

@media (hover: hover) {
    .btn-circle-icon.-border:hover:not(:disabled) {
        border-color: #ced4da00
    }
}

.btn-circle-icon.-light,
.xgs-tooltip a.btn-circle-icon {
    color: #fff
}

.btn-circle-icon.-light:before,
.xgs-tooltip a.btn-circle-icon:before {
    background: rgba(0, 0, 0, .2)
}

.btn-circle-icon.-primary {
    border-color: #781426;
    background: #781426;
    color: #fff
}

.btn-circle-icon.-primary.-border {
    border-color: #781426;
    color: #781426;
    background: none
}

@media (hover: hover) {
    .btn-circle-icon:not(:disabled):hover:before {
        transform: scale(1);
        opacity: 1
    }
}

.btn-aside {
    border-radius: 2px 0 0 2px;
    height: 34px;
    width: 34px;
    padding: 0;
    font-size: 16px;
    box-shadow: 0 3px 10px #0000001a;
    transition: all .1s linear
}

@media screen and (max-width: 1024px) {
    .btn-aside {
        border-radius: 2px
    }
}

.btn-aside i {
    font-size: 16px
}

.btn-aside:hover {
    width: 38px;
    padding-right: 4px
}

.btn-gradient {
    color: #f8f9fa;
    background: transparent;
    background: linear-gradient(90deg, #781426 0%, #aa3026);
    border: none;
    transition: box-shadow .2s linear
}

.btn-gradient:hover {
    background-color: #0000;
    text-decoration: none
}

.btn-gradient:disabled,
.btn-gradient.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-gradient.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-gradient.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-gradient.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-gradient.-hollow {
    color: transparent;
    background: transparent;
    border-color: transparent;
    overflow: hidden
}

.btn-gradient.-hollow:hover {
    background: rgba(0, 0, 0, .1)
}

.btn-gradient.-reverse {
    color: transparent;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-gradient.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-gradient.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-gradient.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-gradient.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-gradient.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-gradient.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-gradient.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-gradient.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-gradient.-wide {
    width: 100%
}

.btn-gradient .mat-spinner circle {
    stroke: #fff
}

.btn-gradient:hover {
    background: linear-gradient(90deg, #781426 0%, #aa3026);
    box-shadow: 0 6px 12px -6px #00000080
}

.btn-default {
    color: #f8f9fa;
    background: #534f59;
    border-color: #ced4da !important
}

.btn-default:hover {
    background-color: #49454e;
    text-decoration: none
}

.btn-default:disabled,
.btn-default.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-default.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-default.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-default.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-default.-hollow {
    color: #534f59;
    background: transparent;
    border-color: #534f59;
    overflow: hidden
}

.btn-default.-hollow:hover {
    background: rgba(83, 79, 89, .1)
}

.btn-default.-reverse {
    color: #534f59;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-default.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-default.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-default.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-default.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-default.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-default.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-default.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-default.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-default.-wide {
    width: 100%
}

.btn-default .mat-spinner circle {
    stroke: #fff
}

.btn-default:hover {
    border-color: transparent !important
}

.btn-primary {
    color: #f8f9fa;
    background: #781426
}

.btn-primary:hover {
    background-color: #26969e;
    text-decoration: none
}

.btn-primary:disabled,
.btn-primary.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-primary.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-primary.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-primary.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-primary.-hollow {
    color: #781426;
    background: transparent;
    border-color: #781426;
    overflow: hidden
}

.btn-primary.-hollow:hover {
    background: rgba(42, 166, 174, .1)
}

.btn-primary.-reverse {
    color: #781426;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-primary.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-primary.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-primary.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-primary.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-primary.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-primary.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-primary.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-primary.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-primary.-wide {
    width: 100%
}

.btn-primary .mat-spinner circle {
    stroke: #fff
}

.btn-secondary {
    color: #f8f9fa;
    background: #aa3026
}

.btn-secondary:hover {
    background-color: #924573;
    text-decoration: none
}

.btn-secondary:disabled,
.btn-secondary.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-secondary.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-secondary.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-secondary.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-secondary.-hollow {
    color: #aa3026;
    background: transparent;
    border-color: #aa3026;
    overflow: hidden
}

.btn-secondary.-hollow:hover {
    background: rgba(160, 76, 126, .1)
}

.btn-secondary.-reverse {
    color: #aa3026;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-secondary.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-secondary.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-secondary.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-secondary.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-secondary.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-secondary.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-secondary.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-secondary.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-secondary.-wide {
    width: 100%
}

.btn-secondary .mat-spinner circle {
    stroke: #fff
}

.btn-success {
    color: #f8f9fa;
    background: #00a672
}

.btn-success:hover {
    background-color: #009264;
    text-decoration: none
}

.btn-success:disabled,
.btn-success.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-success.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-success.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-success.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-success.-hollow {
    color: #00a672;
    background: transparent;
    border-color: #00a672;
    overflow: hidden
}

.btn-success.-hollow:hover {
    background: rgba(0, 166, 114, .1)
}

.btn-success.-reverse {
    color: #00a672;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-success.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-success.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-success.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-success.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-success.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-success.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-success.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-success.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-success.-wide {
    width: 100%
}

.btn-success .mat-spinner circle {
    stroke: #fff
}

.btn-danger {
    color: #f8f9fa;
    background: #ed6d72
}

.btn-danger:hover {
    background-color: #eb5b60;
    text-decoration: none
}

.btn-danger:disabled,
.btn-danger.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-danger.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-danger.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-danger.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-danger.-hollow {
    color: #ed6d72;
    background: transparent;
    border-color: #ed6d72;
    overflow: hidden
}

.btn-danger.-hollow:hover {
    background: rgba(237, 109, 114, .1)
}

.btn-danger.-reverse {
    color: #ed6d72;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-danger.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-danger.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-danger.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-danger.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-danger.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-danger.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-danger.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-danger.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-danger.-wide {
    width: 100%
}

.btn-danger .mat-spinner circle {
    stroke: #fff
}

.btn-gray {
    color: #f8f9fa;
    background: #a4a7ad
}

.btn-gray:hover {
    background-color: #999da3;
    text-decoration: none
}

.btn-gray:disabled,
.btn-gray.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-gray.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-gray.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-gray.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-gray.-hollow {
    color: #a4a7ad;
    background: transparent;
    border-color: #a4a7ad;
    overflow: hidden
}

.btn-gray.-hollow:hover {
    background: rgba(164, 167, 173, .1)
}

.btn-gray.-reverse {
    color: #a4a7ad;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-gray.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-gray.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-gray.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-gray.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-gray.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-gray.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-gray.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-gray.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-gray.-wide {
    width: 100%
}

.btn-gray .mat-spinner circle {
    stroke: #fff
}

.btn-dark {
    color: #f8f9fa;
    background: #495057
}

.btn-dark:hover {
    background-color: #40464c;
    text-decoration: none
}

.btn-dark:disabled,
.btn-dark.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-dark.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-dark.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-dark.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-dark.-hollow {
    color: #495057;
    background: transparent;
    border-color: #495057;
    overflow: hidden
}

.btn-dark.-hollow:hover {
    background: rgba(73, 80, 87, .1)
}

.btn-dark.-reverse {
    color: #495057;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-dark.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-dark.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-dark.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-dark.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-dark.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-dark.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-dark.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-dark.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-dark.-wide {
    width: 100%
}

.btn-dark .mat-spinner circle {
    stroke: #fff
}

.btn-black {
    color: #f8f9fa;
    background: #000
}

.btn-black:hover {
    background-color: #000;
    text-decoration: none
}

.btn-black:disabled,
.btn-black.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-black.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-black.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-black.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-black.-hollow {
    color: #000;
    background: transparent;
    border-color: #000;
    overflow: hidden
}

.btn-black.-hollow:hover {
    background: rgba(0, 0, 0, .1)
}

.btn-black.-reverse {
    color: #000;
    background: #f8f9fa;
    border-color: #f8f9fa
}

.btn-black.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-black.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-black.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-black.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-black.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-black.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-black.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-black.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-black.-wide {
    width: 100%
}

.btn-black .mat-spinner circle {
    stroke: #fff
}

.btn-white {
    color: #781426;
    background: #fff
}

.btn-white:hover {
    background-color: #f5f5f5;
    text-decoration: none
}

.btn-white:disabled,
.btn-white.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-white.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-white.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-white.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-white.-hollow {
    color: #fff;
    background: transparent;
    border-color: #fff;
    overflow: hidden
}

.btn-white.-hollow:hover {
    background: rgba(255, 255, 255, .1)
}

.btn-white.-reverse {
    color: #fff;
    background: #781426;
    border-color: #781426
}

.btn-white.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-white.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-white.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-white.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-white.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-white.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-white.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-white.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-white.-wide {
    width: 100%
}

.btn-white .mat-spinner circle {
    stroke: #fff
}

.btn-facebook {
    color: #fff;
    background: #0866FF;
    border-radius: 100px
}

.btn-facebook:hover {
    background-color: #005cf3;
    text-decoration: none
}

.btn-facebook:disabled,
.btn-facebook.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-facebook.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-facebook.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-facebook.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-facebook.-hollow {
    color: #0866ff;
    background: transparent;
    border-color: #0866ff;
    overflow: hidden
}

.btn-facebook.-hollow:hover {
    background: rgba(8, 102, 255, .1)
}

.btn-facebook.-reverse {
    color: #0866ff;
    background: #fff;
    border-color: #fff
}

.btn-facebook.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-facebook.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-facebook.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-facebook.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-facebook.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-facebook.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-facebook.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-facebook.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-facebook.-wide {
    width: 100%
}

.btn-facebook .mat-spinner circle {
    stroke: #fff
}

.btn-facebook.-white {
    background: #fff;
    color: #0866ff
}

.btn-facebook.-white:before {
    background-image: url(assets/img/icons/facebook.svg);
    background-color: #38b0e3;
    background-size: 1em;
    background-position: .3em .35em;
    border-radius: 50%;
    width: 2.2em;
    height: 2.2em
}

.btn-facebook.-white:hover {
    background-color: #f5f5f5
}

.btn-facebook:before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-image: url(assets/img/icons/facebook-white.svg);
    background-size: 1.25em;
    background-repeat: no-repeat;
    margin-right: 10px
}

.btn-telegram {
    color: #fff;
    background: #38B0E3;
    border-radius: 100px
}

.btn-telegram:hover {
    background-color: #26a9e0;
    text-decoration: none
}

.btn-telegram:disabled,
.btn-telegram.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-telegram.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-telegram.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-telegram.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-telegram.-hollow {
    color: #38b0e3;
    background: transparent;
    border-color: #38b0e3;
    overflow: hidden
}

.btn-telegram.-hollow:hover {
    background: rgba(56, 176, 227, .1)
}

.btn-telegram.-reverse {
    color: #38b0e3;
    background: #fff;
    border-color: #fff
}

.btn-telegram.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-telegram.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-telegram.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-telegram.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-telegram.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-telegram.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-telegram.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-telegram.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-telegram.-wide {
    width: 100%
}

.btn-telegram .mat-spinner circle {
    stroke: #fff
}

.btn-telegram.-white {
    background: #fff;
    color: #1e94d3
}

.btn-telegram.-white:before {
    background-image: url(assets/img/telegram/tg-badge.svg);
    background-color: #38b0e3;
    background-size: 1em;
    background-position: .3em .35em;
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em
}

.btn-telegram.-white:hover {
    background-color: #f5f5f5
}

.btn-telegram:before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-image: url(assets/img/telegram/tg-badge.svg);
    background-size: 1.25em;
    background-repeat: no-repeat;
    margin-right: 5px
}

.btn-patreon {
    color: #fff;
    background: #f86754;
    border-radius: 100px
}

.btn-patreon:hover {
    background-color: #f75640;
    text-decoration: none
}

.btn-patreon:disabled,
.btn-patreon.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-patreon.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-patreon.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-patreon.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-patreon.-hollow {
    color: #f86754;
    background: transparent;
    border-color: #f86754;
    overflow: hidden
}

.btn-patreon.-hollow:hover {
    background: rgba(248, 103, 84, .1)
}

.btn-patreon.-reverse {
    color: #f86754;
    background: #fff;
    border-color: #fff
}

.btn-patreon.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-patreon.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-patreon.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-patreon.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-patreon.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-patreon.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-patreon.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-patreon.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-patreon.-wide {
    width: 100%
}

.btn-patreon .mat-spinner circle {
    stroke: #fff
}

.btn-patreon.-white {
    background: #fff;
    color: #002c49
}

.btn-patreon.-white:before {
    background-image: url(assets/img/patreon/patreon.svg)
}

.btn-patreon.-white:hover {
    background-color: #f5f5f5
}

.btn-patreon:before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-image: url(assets/img/patreon/patreon-mark-orange.svg);
    background-size: 1.25em;
    background-repeat: no-repeat;
    margin-right: 10px
}

.btn-patreon:hover {
    background-color: #f75640;
    background-size: 1.25em !important;
    background-position: left 1.5em center !important
}

@media screen and (max-width: 480px) {
    .btn-mobile-wide {
        width: 100% !important
    }
}

@media screen and (max-width: 480px) {
    .btn-mobile-broad {
        width: 80% !important
    }
}

.btn-text {
    color: #495057;
    background: rgba(0, 0, 0, 0)
}

.btn-text:hover {
    background-color: #0000;
    text-decoration: none
}

.btn-text:disabled,
.btn-text.-disabled {
    cursor: default;
    opacity: .8;
    pointer-events: none
}

.btn-text.-rounded {
    border-radius: 100px;
    padding-left: 25px;
    padding-right: 25px
}

.btn-text.-rounded.-large {
    padding-left: 30px;
    padding-right: 30px
}

@media screen and (max-width: 640px) {
    .btn-text.-rounded {
        padding-left: 20px;
        padding-right: 20px
    }
}

.btn-text.-hollow {
    color: #0000;
    background: transparent;
    border-color: #0000;
    overflow: hidden
}

.btn-text.-hollow:hover {
    background: rgba(0, 0, 0, .1)
}

.btn-text.-reverse {
    color: #0000;
    background: #495057;
    border-color: #495057
}

.btn-text.-large {
    height: 44px;
    padding: 0 20px;
    font-size: 15px
}

@media screen and (max-width: 640px) {
    .btn-text.-large {
        height: 42px
    }
}

@media screen and (max-width: 480px) {
    .btn-text.-large {
        height: 40px;
        font-size: 14px
    }
}

.btn-text.-huge {
    height: 64px;
    padding: 0 40px;
    font-size: 20px
}

@media screen and (max-width: 1024px) {
    .btn-text.-huge {
        height: 60px;
        font-size: 18px;
        padding: 0 35px
    }
}

@media screen and (max-width: 640px) {
    .btn-text.-huge {
        height: 58px;
        font-size: 17px;
        padding: 0 30px
    }
}

@media screen and (max-width: 480px) {
    .btn-text.-huge {
        height: 52px;
        font-size: 15px
    }
}

.btn-text.-small {
    height: 32px;
    padding: 0 13px;
    font-size: 11px
}

.btn-text.-wide {
    width: 100%
}

.btn-text .mat-spinner circle {
    stroke: #fff
}

.btn-text.-light,
.xgs-tooltip a.btn-text {
    color: #f8f9fa
}

.btn-scroll-to {
    position: fixed;
    bottom: 82px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 6px 12px -6px #00000080;
    z-index: 10;
    display: none
}

@media screen and (max-width: 480px) {
    .btn-scroll-to {
        display: flex
    }
}

.btn-scroll-to:active {
    opacity: 1
}

[type=text],
[type=password],
[type=date],
[type=datetime],
[type=month],
[type=week],
[type=email],
[type=number],
[type=search],
[type=time],
[type=url],
[type=color],
textarea {
    border: none;
    border-radius: 0;
    padding: .5em;
    font-size: 16px
}

input:-webkit-autofill,
input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px #eff2f5 inset !important
}

input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important
}

input:-webkit-autofill {
    -webkit-text-fill-color: #6c757d !important
}

.input,
.textarea {
    color: #6c757d;
    font-weight: 500;
    border: 2px solid #eff2f5;
    font-size: 16px;
    transition: all .2s linear;
    max-width: 100%;
    padding: 0 15px;
    height: 40px;
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    border-radius: 4px;
    background: #eff2f5
}

.input::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder {
    color: #a4a7ad;
    font-weight: 400;
    font-size: 16px
}

@media screen and (max-width: 480px) {

    .input::-webkit-input-placeholder,
    .textarea::-webkit-input-placeholder {
        font-size: 14px
    }
}

.input:-moz-placeholder,
.textarea:-moz-placeholder {
    color: #a4a7ad;
    font-weight: 400;
    font-size: 16px
}

@media screen and (max-width: 480px) {

    .input:-moz-placeholder,
    .textarea:-moz-placeholder {
        font-size: 14px
    }
}

.input::-moz-placeholder,
.textarea::-moz-placeholder {
    color: #a4a7ad;
    font-weight: 400;
    font-size: 16px
}

@media screen and (max-width: 480px) {

    .input::-moz-placeholder,
    .textarea::-moz-placeholder {
        font-size: 14px
    }
}

.input:-ms-input-placeholder,
.textarea:-ms-input-placeholder {
    color: #a4a7ad;
    font-weight: 400;
    font-size: 16px
}

@media screen and (max-width: 480px) {

    .input:-ms-input-placeholder,
    .textarea:-ms-input-placeholder {
        font-size: 14px
    }
}

@media screen and (max-width: 640px) {

    .input,
    .textarea {
        padding: 0 .6em
    }
}

.input:focus,
.textarea:focus {
    background: transparent;
    color: #495057
}

.input:focus,
.textarea:focus {
    border-color: #dde2e6
}

.input:disabled,
.textarea:disabled,
.input.-disabled,
.-disabled.textarea {
    background-color: #e9ecef4d;
    cursor: default;
    color: #a4a7ad !important;
    -webkit-text-fill-color: inherit
}

.input.-hollow,
.-hollow.textarea {
    background: none;
    border-color: #dee2e6
}

.input.-hollow:hover,
.-hollow.textarea:hover {
    border-color: #ced4da
}

.input.-pure,
.-pure.textarea {
    border: none;
    background: none
}

.input.-large,
.-large.textarea {
    height: 50px;
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial;
    border-width: 2px;
    font-size: 17px
}

@media screen and (max-width: 640px) {

    .input.-large,
    .-large.textarea {
        height: 48px;
        font-size: 15px
    }
}

.input.-small,
.-small.textarea {
    height: 32px
}

.input.-wide,
.-wide.textarea {
    width: 100%
}

.input.-rounded,
.-rounded.textarea {
    border-radius: 10em;
    padding-left: .8em;
    padding-right: .8em
}

.input.-highlight,
.-highlight.textarea {
    animation: highlight-input 1s .5s ease-in-out
}

.textarea {
    min-width: 100%;
    padding: 15px;
    height: auto
}

.textarea.-static {
    resize: none
}

@keyframes highlight-input {
    0% {
        border-color: #e9ecef
    }

    50% {
        border-color: #a4a7ad
    }

    to {
        border-color: #e9ecef
    }
}

.xgs-password-toggle-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 16px;
    transition: color .3s cubic-bezier(0, 0, .1, 1)
}

.xgs-password-toggle-btn i {
    margin-right: 0
}

.xgs-password-toggle-btn:hover {
    color: #495057
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0)
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0)
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0)
    }
}

.checkbox {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #534f59;
    transition: color .3s ease-out
}

.checkbox:hover {
    color: #2d2b30
}

@keyframes dothabottomcheck {
    0% {
        height: 0
    }

    to {
        height: 5.95px
    }
}

@keyframes dothatopcheck {
    0% {
        height: 0
    }

    50% {
        height: 0
    }

    to {
        height: 13.94px
    }
}

.xgs-tabs-container:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 3px solid #e9ecef
}

@media screen and (max-width: 480px) {
    .xgs-tabs-container:after {
        border-bottom-width: 2px
    }
}

.xgs-tabs {
    display: flex;
    justify-content: flex-start;
    overflow: auto;
    position: relative;
    white-space: nowrap;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none
}

.xgs-tabs::-webkit-scrollbar {
    display: none
}

.xgs-tabs.-page {
    font-size: 18px
}

@media screen and (max-width: 480px) {
    .xgs-tabs.-page {
        margin-top: 0
    }
}

@media screen and (max-width: 480px) {
    .xgs-tabs {
        justify-content: flex-start;
        max-width: 100vw;
        height: 40px
    }
}

.xgs-tabs-ink-bar {
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    background: #781426;
    transition: all .3s linear;
    z-index: 1
}

.xgs-tabs-ink-bar .xgs-tabs-ink-bar-inner {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8b0000;
}

@media screen and (max-width: 480px) {
    .xgs-tabs-ink-bar {
        height: 2px
    }
}

.xgs-tab {
    flex: 1;
    display: flex;
    position: relative;
    transition: all .15s linear;
    cursor: pointer;
    color: #6c757d
}

@media screen and (max-width: 480px) {
    .xgs-tab {
        display: inline-flex;
        flex: 1;
        height: 100%;
        transition: all .2s linear
    }
}

.xgs-tab:hover {
    color: #495057;
    background: #f5f6f8
}

@media screen and (max-width: 480px) {
    .xgs-tab:hover {
        background: none
    }
}

.xgs-tab.-inactive {
    pointer-events: none
}

.xgs-tab.-active {
    color: #8b0000;
    cursor: default;
    font-weight: 700
}

.xgs-tab_placeholder {
    font-weight: 700;
    visibility: hidden
}

.xgs-tab_label {
    position: absolute;
    left: 0;
    top: 0
}

.xgs-tab_link {
    padding: 22px;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    z-index: 1;
    white-space: nowrap;
    position: relative
}

@media screen and (max-width: 768px) {
    .xgs-tab_link {
        padding: 20px;
        font-size: 16px
    }
}

@media screen and (max-width: 640px) {
    .xgs-tab_link {
        padding: 15px 10px;
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    .xgs-tab_link {
        padding: 10px 15px;
        font-size: 14px;
        height: 100%
    }
}

.xgs-tab_link.-featured:after {
    content: "";
    width: .4em;
    height: .4em;
    border-radius: 50%;
    background-color: #00a672;
    margin-left: .4em
}

.xgs-tab_icon {
    margin-right: 5px;
    width: 20px !important;
    height: 20px !important
}

@media screen and (max-width: 640px) {
    .xgs-tab_icon {
        width: 18px !important;
        height: 18px !important
    }
}

@media screen and (max-width: 480px) {
    .xgs-tab_icon {
        margin-right: 4px;
        width: 16px !important;
        height: 16px !important
    }
}

.xgs-mark-group {
    display: flex
}

.xgs-mark-group>.xgs-mark:first-child {
    border-radius: 2px 0 0 2px
}

.xgs-mark-group>.xgs-mark:last-child {
    border-radius: 0 2px 2px 0
}

.xgs-mark {
    width: 42px;
    min-width: 42px;
    height: 30px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    background-color: #e9ecef;
    color: #6c757d;
    font-weight: 700;
    line-height: 1
}

@media screen and (max-width: 640px) {
    .xgs-mark {
        width: 32px;
        min-width: 32px;
        height: 24px
    }
}

@media screen and (max-width: 480px) {
    .xgs-mark {
        width: 30px;
        min-width: 30px;
        height: 23px
    }
}

.xgs-mark.-w_100 {
    width: 100% !important
}

.xgs-mark.-w_auto {
    width: auto !important;
    padding-left: .4em;
    padding-right: .4em
}

.xgs-mark.-tiny {
    min-width: 30px;
    height: 22px
}

.xgs-mark.-medium {
    width: 39px;
    min-width: 39px;
    height: 28px
}

@media screen and (max-width: 640px) {
    .xgs-mark.-medium {
        width: 30px;
        min-width: 30px;
        height: 24px
    }
}

@media screen and (max-width: 480px) {
    .xgs-mark.-medium {
        width: 26px;
        min-width: 26px;
        height: 20px
    }
}

.xgs-mark.-small {
    width: 36px;
    min-width: 36px;
    height: 26px
}

@media screen and (max-width: 640px) {
    .xgs-mark.-small {
        width: 28px;
        min-width: 28px;
        height: 22px
    }
}

@media screen and (max-width: 480px) {
    .xgs-mark.-small {
        width: 22px;
        min-width: 22px;
        height: 18px
    }
}

.xgs-mark.-large {
    width: 50px;
    min-width: 50px;
    height: 36px
}

@media screen and (max-width: 640px) {
    .xgs-mark.-large {
        width: 36px;
        min-width: 36px;
        height: 28px
    }
}

@media screen and (max-width: 480px) {
    .xgs-mark.-large {
        width: 32px;
        min-width: 32px;
        height: 24px
    }
}

.xgs-mark.-larger {
    width: 60px;
    min-width: 60px;
    height: 44px;
    font-size: 22px
}

@media screen and (max-width: 768px) {
    .xgs-mark.-larger {
        width: 54px;
        min-width: 54px;
        height: 34px;
        font-size: 17px
    }
}

@media screen and (max-width: 640px) {
    .xgs-mark.-larger {
        width: 50px;
        min-width: 50px;
        height: 36px;
        font-size: 18px
    }
}

@media screen and (max-width: 480px) {
    .xgs-mark.-larger {
        width: 40px;
        min-width: 40px;
        height: 29px;
        font-size: 14px
    }
}

@media screen and (max-width: 350px) {
    .xgs-mark.-larger {
        width: 32px;
        min-width: 32px;
        height: 24px;
        font-size: 12px
    }
}

.xgs-mark.-huge {
    width: 75px;
    min-width: 75px;
    height: 56px;
    font-size: 28px
}

@media screen and (max-width: 768px) {
    .xgs-mark.-huge {
        width: 68px;
        min-width: 68px;
        height: 50px;
        font-size: 25px
    }
}

@media screen and (max-width: 640px) {
    .xgs-mark.-huge {
        width: 60px;
        min-width: 60px;
        height: 46px;
        font-size: 23px
    }
}

@media screen and (max-width: 640px) {
    .xgs-mark.-huge {
        width: 56px;
        min-width: 56px;
        height: 42px;
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    .xgs-mark.-huge {
        width: 50px;
        min-width: 50px;
        height: 38px;
        font-size: 18px
    }
}

.xgs-mark.-pure {
    background: none;
    color: inherit;
    font-weight: 400
}

.xgs-mark.-text {
    min-width: 75px;
    font-size: .9em;
    width: auto;
    padding: 0 2px;
    display: inline-flex
}

@media screen and (max-width: 768px) {
    .xgs-mark.-text {
        min-width: 65px
    }
}

@media screen and (max-width: 640px) {
    .xgs-mark.-text {
        min-width: 60px
    }
}

@media screen and (max-width: 350px) {
    .xgs-mark.-text {
        min-width: 40px
    }

    .xgs-mark.-text .text-sm-tiny {
        font-size: 11px !important
    }
}

.xgs-mark-square {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    background-color: #e9ecef
}

@media screen and (max-width: 768px) {
    .xgs-mark-square {
        width: 28px;
        height: 28px;
        font-size: 14px
    }
}

.xgs-mark-square.-small {
    width: 20px;
    height: 20px;
    border-radius: 2px
}

.mark,
.xg-score_mark {
    padding: 5px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    color: #534f59
}

@media screen and (max-width: 768px) {

    .mark,
    .xg-score_mark {
        height: 34px
    }
}

@media screen and (max-width: 640px) {

    .mark,
    .xg-score_mark {
        height: 28px
    }
}

.mark.-pure,
.-pure.xg-score_mark {
    font-weight: 400
}

.mark.-small,
.-small.xg-score_mark {
    height: 24px
}

@media screen and (max-width: 880px) {

    .mark.-small,
    .-small.xg-score_mark {
        height: 22px
    }
}

@media screen and (max-width: 640px) {

    .mark.-small,
    .-small.xg-score_mark {
        height: 21px
    }
}

@media screen and (max-width: 480px) {

    .mark.-small,
    .-small.xg-score_mark {
        height: 18px;
        font-size: 11px
    }
}

.mark.-large,
.-large.xg-score_mark {
    height: 40px
}

@media screen and (max-width: 1340px) {

    .mark.-large,
    .-large.xg-score_mark {
        height: 36px
    }
}

.mark.-huge,
.-huge.xg-score_mark {
    height: 56px;
    width: 75px;
    font-size: 28px
}

@media screen and (max-width: 1340px) {

    .mark.-huge,
    .-huge.xg-score_mark {
        height: 48px;
        font-size: 25px;
        width: 64px
    }
}

@media screen and (max-width: 768px) {

    .mark.-huge,
    .-huge.xg-score_mark {
        height: 44px;
        font-size: 21px;
        width: 58px
    }
}

@media screen and (max-width: 640px) {

    .mark.-huge,
    .-huge.xg-score_mark {
        height: 42px;
        font-size: 19px;
        width: 56px
    }
}

@media screen and (max-width: 480px) {

    .mark.-huge,
    .-huge.xg-score_mark {
        height: 40px;
        font-size: 18px;
        width: 53px
    }
}

.mark.-wide,
.-wide.xg-score_mark {
    width: 100%
}

.mark.-gray-light,
.-gray-light.xg-score_mark {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #606060
}

.mark.-win,
.-win.xg-score_mark {
    background-color: #00a672;
    color: #fff;
    border-color: #00a672
}

.mark.-draw,
.-draw.xg-score_mark {
    background-color: #a4a7ad;
    color: #fff;
    border-color: #a4a7ad
}

.mark.-lose,
.-lose.xg-score_mark {
    background-color: #ed6d72;
    border-color: #ed6d72;
    color: #fff
}

.mark.-primary,
.-primary.xg-score_mark {
    background-color: #781426;
    border-color: #781426;
    color: #fff
}

.mark.-arrow-bottom,
.-arrow-bottom.xg-score_mark {
    position: relative
}

.mark.-arrow-bottom:after,
.-arrow-bottom.xg-score_mark:after {
    content: "";
    top: 100%;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: inherit;
    border-width: 7px;
    margin-left: -7px
}

@media screen and (max-width: 640px) {

    .mark.-arrow-bottom:after,
    .-arrow-bottom.xg-score_mark:after {
        border-width: 4px;
        margin-left: -4px
    }
}

.xg-score {
    display: flex
}

.xg-score_mark {
    color: #fff;
    min-width: 48px;
    font-size: 18px
}

@media screen and (max-width: 880px) {
    .xg-score_mark {
        font-size: 17px
    }
}

@media screen and (max-width: 768px) {
    .xg-score_mark {
        min-width: 44px
    }
}

@media screen and (max-width: 640px) {
    .xg-score_mark {
        min-width: 38px;
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    .xg-score_mark {
        min-width: 34px
    }
}

.xg-score_mark:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #2aa6ae
}

.xg-score_mark:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    background-color: #aa3026
}

.xg-score.-large .xg-score_mark {
    font-size: 28px;
    height: 56px;
    width: 75px
}

@media screen and (max-width: 1340px) {
    .xg-score.-large .xg-score_mark {
        height: 48px;
        font-size: 25px
    }
}

@media screen and (max-width: 768px) {
    .xg-score.-large .xg-score_mark {
        height: 44px;
        font-size: 21px
    }
}

@media screen and (max-width: 640px) {
    .xg-score.-large .xg-score_mark {
        height: 40px;
        font-size: 18px
    }
}

.xg-score.-small .xg-score_mark {
    height: 28px;
    min-width: 38px;
    font-size: 15px;
    padding: 0 5px
}

@media screen and (max-width: 768px) {
    .xg-score.-small .xg-score_mark {
        height: 24px;
        min-width: 32px;
        font-size: 14px
    }
}

@media screen and (max-width: 640px) {
    .xg-score.-small .xg-score_mark {
        height: 24px;
        min-width: 32px;
        font-size: 14px
    }
}

@media screen and (max-width: 480px) {
    .xg-score.-small .xg-score_mark {
        height: 20px;
        padding: 0 2px;
        min-width: 28px;
        font-size: 11px
    }
}

.xgs-mark-text {
    padding: 15px;
    display: block;
    border-radius: 2px
}

@media screen and (max-width: 480px) {
    .xgs-mark-text {
        font-size: 14px
    }
}

.xgs-mark-text.-single-line {
    padding: 8px
}

.xgs-mark-text_link {
    cursor: pointer;
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial
}

.xgs-mark-text_link:after {
    bottom: 3px
}

.xgs-mark-text.-danger {
    background: #FBD1D3;
    color: #dc5b5e
}

.xgs-mark-text.-danger .xgs-mark-text_link {
    color: #dc5b5e;
    position: relative;
    display: inline-block;
    transition: color .1s linear;
    z-index: 1;
    padding: 0 2px
}

.xgs-mark-text.-danger .xgs-mark-text_link:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    border-bottom: 1px solid #DC5B5E;
    z-index: -1;
    transition: border-bottom-color .3s ease-in-out, border-bottom-width .15s ease-in-out;
    border-radius: 2px
}

.xgs-mark-text.-danger .xgs-mark-text_link:hover:after {
    border-bottom-color: #dc5b5e33;
    border-bottom-width: 1.3em;
    transition: border-bottom-color .05s ease-in-out, border-bottom-width .15s ease-in-out
}

.xgs-mark-text.-warning {
    background: #FFE7C2;
    color: #d77f4c
}

.xgs-mark-text.-warning .xgs-mark-text_link {
    color: #d77f4c;
    position: relative;
    display: inline-block;
    transition: color .1s linear;
    z-index: 1;
    padding: 0 2px
}

.xgs-mark-text.-warning .xgs-mark-text_link:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    border-bottom: 1px solid #D77F4C;
    z-index: -1;
    transition: border-bottom-color .3s ease-in-out, border-bottom-width .15s ease-in-out;
    border-radius: 2px
}

.xgs-mark-text.-warning .xgs-mark-text_link:hover:after {
    border-bottom-color: #d77f4c33;
    border-bottom-width: 1.3em;
    transition: border-bottom-color .05s ease-in-out, border-bottom-width .15s ease-in-out
}

.xgs-widget {
    box-shadow: 0 3px 10px #0000001a;
    margin-bottom: 20px;
    display: block;
    outline: none;
    max-width: 100vw;
    overflow: hidden;
    border-radius: 4px;
    background: #fff
}

.xgs-widget.-link {
    cursor: pointer
}

.xgs-widget.-small .xgs-widget_header {
    padding: 12px 15px
}

.xgs-widget.-small .xgs-widget_body {
    padding: 15px
}

@media screen and (max-width: 640px) {
    .xgs-widget {
        box-shadow: none;
        border-bottom: 1px solid #e9ecef
    }
}

@media screen and (max-width: 480px) {
    .xgs-widget {
        border-radius: 0
    }
}

.xgs-widget_header {
    background: linear-gradient(135deg, #8b0000 0%, #000000 100%);
    color: #fff;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px
}

@media screen and (max-width: 640px) {
    .xgs-widget_header {
        padding: 12px 15px;
        font-size: 13px
    }
}

@media screen and (max-width: 480px) {
    .xgs-widget_header {
        padding: 10px
    }
}

.xgs-team.-side_h .xgs-widget_header {
    background: linear-gradient(90deg, #781426 0%, #622951 200%)
}

.xgs-team.-side_a .xgs-widget_header {
    background: linear-gradient(-90deg, #622951 0%, #781426 200%)
}

.xgs-widget_body {
    padding: 20px
}

@media screen and (max-width: 640px) {
    .xgs-widget_body {
        padding: 15px;
        border: 1px solid #e9ecef;
        border-bottom: none
    }
}

@media screen and (max-width: 480px) {
    .xgs-widget_body {
        padding: 10px
    }
}

.xgs-widget_footer {
    padding: 20px;
    border-top: 1px solid #e9ecef;
    margin-top: -20px
}

@media screen and (max-width: 640px) {
    .xgs-widget_footer {
        padding: 15px;
        border: 1px solid #e9ecef;
        border-bottom: none;
        margin-top: -15px
    }
}

@media screen and (max-width: 480px) {
    .xgs-widget_footer {
        padding: 10px;
        margin-top: -10px
    }
}

xgs-patreon {
    display: block
}

.patreon {
    width: 100%;
    box-shadow: 0 3px 10px #0000001f;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #002c49;
    display: block;
    border-radius: 4px
}

@media screen and (max-width: 640px) {
    .patreon {
        box-shadow: none;
        border: 1px solid #e9ecef
    }
}

.patreon p {
    line-height: 1.1
}

.patreon:hover .btn-patreon {
    background-color: #f75c48
}

.patreon img {
    max-height: 100%
}

.patreon.-orange {
    background-color: #f86754;
    color: #fff
}

.patreon.-orange:hover .btn-patreon {
    background-color: #f9f9f9
}

.patreon.-orange .patreon_wordmark {
    color: #002c49
}

.patreon.-orange .btn-patreon {
    background-color: #fff;
    color: #f86754
}

.patreon.-orange .btn-patreon:before {
    background-image: url(assets/img/patreon/patreon.svg)
}

.patreon.-orange .btn-patreon:hover {
    background-color: #f9f9f9
}

.patreon.-navy {
    background-color: #002c49;
    color: #fff
}

.patreon_wordmark {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #f86754
}

.patreon-ribbon {
    min-height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26px;
    padding: 20px
}

.patreon-ribbon:hover .patreon-ribbon_icon {
    transform: scale(1.1)
}

@media screen and (max-width: 1340px) {
    .patreon-ribbon {
        font-size: 25px
    }
}

@media screen and (max-width: 1024px) {
    .patreon-ribbon {
        font-size: 24px
    }
}

@media screen and (max-width: 880px) {
    .patreon-ribbon {
        font-size: 24px
    }
}

@media screen and (max-width: 768px) {
    .patreon-ribbon {
        flex-direction: column;
        height: auto;
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    .patreon-ribbon {
        padding: 20px
    }
}

.patreon.-orange .patreon-ribbon .patreon-ribbon_icon {
    color: #fff
}

.patreon-ribbon .patreon-ribbon_icon {
    width: 64px;
    height: 64px;
    margin-right: 20px;
    color: #f86754;
    transition: transform .2s ease
}

@media screen and (max-width: 880px) {
    .patreon-ribbon .patreon-ribbon_icon {
        width: 45px;
        height: 45px
    }
}

@media screen and (max-width: 768px) {
    .patreon-ribbon .patreon-ribbon_icon {
        width: 55px;
        height: 55px;
        margin-right: 0;
        margin-bottom: 15px
    }
}

.patreon-ribbon_question {
    display: inline-block;
    font-weight: 500;
    font-style: italic;
    margin-bottom: .3em;
    width: 100%
}

@media screen and (max-width: 768px) {
    .patreon-ribbon_question {
        text-align: center;
        display: inline-block;
        margin-bottom: 10px
    }
}

.patreon-ribbon_cta {
    font-weight: 600;
    text-transform: uppercase
}

@media screen and (max-width: 768px) {
    .patreon-ribbon_cta {
        text-align: center
    }
}

@media screen and (max-width: 480px) {
    .patreon-ribbon .btn-patreon {
        width: 100%
    }
}

.patreon-rectangle {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 10px 150px;
    background-image: url(assets/img/patreon/patreon-network-white.svg);
    background-position: center bottom -38px;
    background-size: 120%;
    background-repeat: no-repeat;
    font-size: 21px
}

@media screen and (max-width: 1340px) {
    .patreon-rectangle {
        font-size: 19px
    }
}

.patreon-rectangle.-orange {
    background-image: url(assets/img/patreon/patreon-network-orange.svg)
}

.patreon-rectangle.-navy {
    background-image: url(assets/img/patreon/patreon-network-navy.svg)
}

.patreon-rectangle_question {
    padding: 1em;
    border-radius: 100px;
    background-color: #f86754;
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 50px;
    min-height: 120px;
    display: flex;
    align-items: center;
    position: relative;
    line-height: 1.2
}

.patreon-rectangle_question:after {
    content: "";
    background: url(assets/img/patreon/patreon-popup-arrow-orange.svg) no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    width: 40px;
    height: 30px;
    left: 16%;
    top: 100%;
    margin-top: -5px
}

.patreon-rectangle_cta {
    text-align: center;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 5px
}

.patreon-rectangle.-orange .patreon-rectangle_question,
.patreon-rectangle.-navy .patreon-rectangle_question {
    background-color: #fff;
    color: #002c49
}

.patreon-rectangle.-orange .patreon-rectangle_question:after,
.patreon-rectangle.-navy .patreon-rectangle_question:after {
    background-image: url(assets/img/patreon/patreon-popup-arrow-white.svg)
}

.patreon-square {
    padding: 45px 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 250px;
    font-size: 25px;
    text-align: center;
    color: #002c49;
    background: url(assets/img/patreon/patreon-wordmark-navy.svg) no-repeat left 20px top 20px;
    background-size: 60px
}

@media screen and (max-width: 1340px) {
    .patreon-square {
        font-size: 23px
    }
}

@media screen and (max-height: 900px) {
    .patreon-square {
        display: none
    }
}

.patreon-square_question {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 35px;
    line-height: 1.6
}

.patreon-square.-orange,
.patreon-square.-navy {
    background-image: url(assets/img/patreon/patreon-wordmark-white.svg);
    color: #fff
}

.border-right {
    border-right: 1px solid #e9ecef
}

.border-top {
    border-top: 1px solid #e9ecef
}

.xgs-card {
    box-shadow: 0 3px 10px #0000001a;
    padding: 25px 20px;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow .15s ease-in
}

@media screen and (max-width: 640px) {
    .xgs-card {
        box-shadow: none;
        border: 1px solid #e9ecef;
        padding: 20px 15px
    }
}

@media screen and (max-width: 480px) {
    .xgs-card {
        padding: 20px 10px;
        border-radius: 0;
        border-right: none;
        border-left: none
    }
}

@media (hover: hover) {
    .xgs-card.-action:hover {
        box-shadow: 0 3px 10px #0003
    }
}

.xgs-image-card {
    box-shadow: 0 3px 10px #0000001a;
    padding: 15px;
    border-radius: 8px;
    transition: .3s cubic-bezier(0, 0, .1, 1);
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background-color: #e9ecef;
    background-size: auto 100%
}

.xgs-image-card_title {
    display: flex;
    margin: auto -15px -15px;
    padding: 25px 15px 15px;
    background: linear-gradient(0deg, #221c37, rgba(45, 117, 129, 0) 100%);
    flex: 1
}

.xgs-image-card_title>* {
    line-height: 1.2
}

.xgs-image-card_date {
    margin-top: 5px;
    opacity: .8;
    font-size: 14px
}

.xgs-image-card_link:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media (hover: hover) {
    .xgs-image-card:hover {
        box-shadow: 0 3px 10px #0003;
        background-size: auto 103%
    }

    .xgs-image-card:hover:before {
        opacity: .7
    }
}

.xgs-panel {
    margin-bottom: 10px;
    box-shadow: 0 3px 10px #0000001a;
    border-radius: 4px;
    padding: 18px 20px;
    display: block;
    transition: box-shadow .15s ease-in
}

@media screen and (max-width: 768px) {
    .xgs-panel.-padding_small {
        padding: 15px
    }
}

@media screen and (max-width: 640px) {
    .xgs-panel.-padding_small {
        padding: 10px 15px
    }
}

@media screen and (max-width: 480px) {
    .xgs-panel.-padding_small {
        padding: 10px
    }
}

@media (hover: hover) {
    .xgs-panel:hover:not(.-disabled):not(.-static) {
        box-shadow: 0 3px 10px #0003
    }
}

@media screen and (max-width: 640px) {
    .xgs-panel+.xgs-panel {
        border-top: none
    }
}

@media screen and (max-width: 640px) {
    .xgs-panel {
        padding: 15px;
        box-shadow: none;
        border: 1px solid #e9ecef;
        margin-bottom: 0;
        border-radius: 0
    }

    .xgs-panel:first-child {
        border-radius: 4px 4px 0 0
    }

    .xgs-panel:last-child {
        border-radius: 0 0 4px 4px
    }
}

@media screen and (max-width: 480px) {
    .xgs-panel {
        padding: 12px 10px;
        border-radius: 0 !important;
        margin-left: -10px;
        margin-right: -10px;
        border-right: none;
        border-left: none
    }
}

.xgs-panel.-pure {
    box-shadow: none;
    transition: all .2s linear;
    opacity: .8 !important;
    margin-bottom: 0
}

.xgs-panel.-pure:hover {
    box-shadow: 0 3px 10px #0000001a;
    opacity: 1 !important
}

.xgs-panel.-pure+.xgs-panel:not(.-pure) {
    margin-top: 10px
}

.xgs-panel.-static {
    cursor: default
}

.xgs-panel_link {
    margin: -18px -20px;
    padding: 18px 20px
}

.xgs-panel_link.-disabled {
    cursor: default;
    pointer-events: none
}

@media screen and (max-width: 640px) {
    .xgs-panel_link {
        margin: -15px;
        padding: 15px
    }
}

@media screen and (max-width: 480px) {
    .xgs-panel_link {
        margin: -12px -10px;
        padding: 12px 10px
    }
}

.xgs-ribbon {
    min-height: 170px;
    box-shadow: 0 3px 10px #0000001a;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    position: relative
}

.xgs-ribbon.-shadow_solid {
    box-shadow: 0 2px 12px #0000004d
}

.xgs-ribbon.-small {
    min-height: 130px
}

.xgs-ribbon.-small .xgs-ribbon_container {
    padding: 20px
}

.xgs-ribbon.-large {
    min-height: 210px
}

.xgs-ribbon.-large .xgs-ribbon_container {
    padding: 30px
}

.xgs-ribbon_top {
    padding: 8px 20px;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (max-width: 640px) {
    .xgs-ribbon_top {
        padding: 10px 20px
    }
}

.xgs-ribbon_link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.xgs-ribbon_container {
    padding: 30px 20px;
    width: 100%;
    position: relative;
    z-index: 1
}

@media screen and (max-width: 640px) {
    .xgs-ribbon_container {
        padding-left: 10px;
        padding-right: 10px
    }
}

@media screen and (max-width: 480px) {
    .xgs-ribbon {
        border-radius: 0
    }
}

.xgs-ribbon_img {
    max-width: 100px
}

@media screen and (max-width: 768px) {
    .xgs-ribbon_img {
        max-width: 75px
    }
}

.xgs-ribbon_content {
    font-size: 24px
}

@media screen and (max-width: 880px) {
    .xgs-ribbon_content {
        font-size: 22px
    }
}

@media screen and (max-width: 768px) {
    .xgs-ribbon_content {
        font-size: 20px
    }
}

.xgs-ribbon_content small {
    font-size: .8em
}

.xgs-ribbon_text {
    font-size: 24px
}

@media screen and (max-width: 880px) {
    .xgs-ribbon_text {
        font-size: 20px
    }
}

@media screen and (max-width: 640px) {
    .xgs-ribbon_text {
        font-size: 18px
    }
}

@media screen and (max-width: 480px) {
    .xgs-ribbon_text {
        font-size: 16px
    }
}

.xgs-ribbon_cover {
    width: 350px;
    background-position: 100% center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    min-height: 100%
}

@media screen and (max-width: 1024px) {
    .xgs-ribbon_cover {
        width: 320px
    }
}

@media screen and (max-width: 768px) {
    .xgs-ribbon_cover {
        width: 100%;
        min-height: 100px;
        background-size: 170%
    }
}

@media screen and (max-width: 480px) {
    .xgs-ribbon_cover {
        min-height: 90px
    }
}

.xgs-ribbon_blur {
    background-size: 150%;
    filter: blur(10px);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-position: -130% center;
    opacity: .125
}

.xgs-ribbon_btn {
    position: static
}

.xgs-ribbon_btn:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 768px) {
    .xgs-ribbon_btn {
        min-width: 200px
    }
}

@media screen and (max-width: 640px) {
    .xgs-ribbon_btn {
        min-width: 250px
    }
}

@media screen and (max-width: 640px) {
    .xgs-under-tab-ribbon {
        margin-top: -20px
    }
}

.xgs-bookmaker-ribbon {
    color: #fff
}

@media screen and (max-width: 640px) {
    .xgs-bookmaker-ribbon {
        flex-direction: column;
        min-height: 230px
    }
}

.xgs-bookmaker-ribbon .xgs-ribbon_container {
    z-index: auto
}

@media screen and (max-width: 640px) {
    .xgs-bookmaker-ribbon .xgs-ribbon_container {
        padding-top: 15px;
        position: static
    }
}

.xgs-bookmaker-ribbon .xgs-ribbon_top {
    background: rgba(0, 0, 0, .1)
}

.xgs-bookmaker-ribbon .xgs-ribbon_top.-hidden {
    display: none !important
}

@media screen and (max-width: 640px) {
    .xgs-bookmaker-ribbon .xgs-ribbon_top.-hidden {
        display: flex
    }
}

.xgs-bookmaker-ribbon .xgs-ribbon_top:not(.-hidden)+.xgs-ribbon_container {
    padding-top: 50px
}

@media screen and (max-width: 640px) {
    .xgs-bookmaker-ribbon .xgs-ribbon_top:not(.-hidden)+.xgs-ribbon_container {
        padding-top: 15px
    }
}

@media screen and (max-width: 640px) {
    .xgs-bookmaker-ribbon .xgs-ribbon_top {
        padding: 0 0 20px;
        background: none;
        position: static
    }
}

.xgs-bookmaker-ribbon_btn {
    background: #8248db;
    transition: all .3s cubic-bezier(0, 0, .1, 1);
    position: relative;
    z-index: 2;
    min-width: 200px
}

@media screen and (max-width: 1340px) {
    .xgs-bookmaker-ribbon_btn {
        min-width: 160px
    }
}

@media screen and (max-width: 1024px) {
    .xgs-bookmaker-ribbon_btn {
        min-width: 200px
    }
}

@media screen and (max-width: 880px) {
    .xgs-bookmaker-ribbon_btn {
        min-width: 160px
    }
}

@media screen and (max-width: 768px) {
    .xgs-bookmaker-ribbon_btn {
        min-width: 200px
    }
}

@media screen and (max-width: 640px) {
    .xgs-bookmaker-ribbon_btn {
        min-width: 250px
    }
}

@media (hover: hover) {
    .xgs-bookmaker-ribbon_btn:hover {
        transform: scale(1.1)
    }
}

.xgs-state-1 {
    background: #ABE1D2 !important;
    color: #00845a !important
}

.xgs-state-2 {
    background: #C7EBCB !important;
    color: #27975a !important
}

.xgs-state-3 {
    background: #E6EBC7 !important;
    color: #6b9000 !important
}

.xgs-state-4 {
    background: #F4F3C7 !important;
    color: #9d8f0b !important
}

.xgs-state-5 {
    background: #FFE7C2 !important;
    color: #d77f4c !important
}

.xgs-state-6 {
    background: #FFDECC !important;
    color: #e2663e !important
}

.xgs-state-7 {
    background: #FBD1D3 !important;
    color: #dc5b5e !important
}

.xgs-text-state-1 {
    color: #00845a !important
}

.xgs-text-state-1.-faded {
    color: #abe1d2 !important
}

.xgs-text-state-2 {
    color: #27975a !important
}

.xgs-text-state-2.-faded {
    color: #c7ebcb !important
}

.xgs-text-state-3 {
    color: #6b9000 !important
}

.xgs-text-state-3.-faded {
    color: #e6ebc7 !important
}

.xgs-text-state-4 {
    color: #9d8f0b !important
}

.xgs-text-state-4.-faded {
    color: #f4f3c7 !important
}

.xgs-text-state-5 {
    color: #d77f4c !important
}

.xgs-text-state-5.-faded {
    color: #ffe7c2 !important
}

.xgs-text-state-6 {
    color: #e2663e !important
}

.xgs-text-state-6.-faded {
    color: #ffdecc !important
}

.xgs-text-state-7 {
    color: #dc5b5e !important
}

.xgs-text-state-7.-faded {
    color: #fbd1d3 !important
}

.xgs-bg-state-1 {
    background: #ABE1D2 !important
}

.xgs-bg-state-1.-contrast {
    background: #00845A !important
}

.xgs-bg-state-2 {
    background: #C7EBCB !important
}

.xgs-bg-state-2.-contrast {
    background: #27975A !important
}

.xgs-bg-state-3 {
    background: #E6EBC7 !important
}

.xgs-bg-state-3.-contrast {
    background: #6B9000 !important
}

.xgs-bg-state-4 {
    background: #F4F3C7 !important
}

.xgs-bg-state-4.-contrast {
    background: #9D8F0B !important
}

.xgs-bg-state-5 {
    background: #FFE7C2 !important
}

.xgs-bg-state-5.-contrast {
    background: #D77F4C !important
}

.xgs-bg-state-6 {
    background: #FFDECC !important
}

.xgs-bg-state-6.-contrast {
    background: #E2663E !important
}

.xgs-bg-state-7 {
    background: #FBD1D3 !important
}

.xgs-bg-state-7.-contrast {
    background: #DC5B5E !important
}

.xgs-link,
.xgs-tooltip a {
    color: #781426;
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: color .1s linear;
    z-index: 1;
    padding: 0 2px;
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial;
    line-height: 1.1
}

.xgs-link:after,
.xgs-tooltip a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    border-bottom: 1px solid #781426;
    z-index: -1;
    transition: border-bottom-color .3s ease-in-out, border-bottom-width .15s ease-in-out;
    border-radius: 2px
}

.xgs-link:hover:after,
.xgs-tooltip a:hover:after {
    border-bottom-color: #78142633;
    border-bottom-width: 1.3em;
    transition: border-bottom-color .05s ease-in-out, border-bottom-width .15s ease-in-out
}

.xgs-link.-light,
.xgs-tooltip a {
    color: #fff;
    position: relative;
    display: inline-block;
    transition: color .1s linear;
    z-index: 1;
    padding: 0 2px
}

.xgs-link.-light:after,
.xgs-tooltip a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    border-bottom: 1px solid #fff;
    z-index: -1;
    transition: border-bottom-color .3s ease-in-out, border-bottom-width .15s ease-in-out;
    border-radius: 2px
}

.xgs-link.-light:hover:after,
.xgs-tooltip a:hover:after {
    border-bottom-color: #fff3;
    border-bottom-width: 1.3em;
    transition: border-bottom-color .05s ease-in-out, border-bottom-width .15s ease-in-out
}

.xgs-default-link {
    color: #781426;
    cursor: pointer;
    text-decoration: underline
}

.xgs-link-disabled {
    pointer-events: none;
    cursor: default
}

.xgs-spinner {
    margin: 0 5px;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    position: relative;
    display: inline-block
}

.xgs-spinner:before,
.xgs-spinner:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%
}

.xgs-spinner:before {
    border: 1px solid;
    opacity: .2
}

.xgs-spinner:after {
    border-top: 1px solid;
    border-right: 1px solid transparent;
    animation: spinner .8s linear infinite
}

@keyframes spinner {
    to {
        transform: rotate(360deg)
    }
}

.ngx-spinner {
    left: auto !important;
    right: 10px !important
}

.xgs-notification,
.xgs-notification-error,
.xgs-notification-success {
    color: #fffc;
    box-shadow: 0 3px 10px #0000001a;
    padding: 10px 8px 8px 15px !important;
    background: rgba(73, 80, 87, .97);
    font-size: 15px
}

@media screen and (max-width: 480px) {

    .xgs-notification,
    .xgs-notification-error,
    .xgs-notification-success {
        margin-top: 18px !important
    }
}

.xgs-notification-success {
    background: rgba(42, 166, 174, .97);
    color: #fff;
    font-size: 16px
}

.xgs-notification-error {
    background: rgba(160, 76, 126, .97);
    color: #fff;
    font-size: 16px
}

.xgs-sidebar-nav {
    margin-bottom: 30px
}

.xgs-sidebar-nav_item {
    display: block;
    margin: 0;
    padding: 0
}

.xgs-sidebar-nav-header {
    margin: 30px 20px 15px
}

.xgs-sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    border-top: 1px solid #e9ecef;
    cursor: pointer;
    border-left: 3px solid transparent;
    min-height: 44px;
    transition: box-shadow .3s cubic-bezier(0, 0, .1, 1)
}

.xgs-sidebar-nav-link.-active {
    cursor: default;
    transition: border .3s linear
}

.xgs-sidebar.-left .xgs-sidebar-nav-link.-active {
    border-right: 3px solid #781426
}

.xgs-sidebar.-right .xgs-sidebar-nav-link.-active {
    border-left: 3px solid #781426
}

.xgs-sidebar-nav-link.-active .ft-chevron-right {
    display: none
}

.xgs-sidebar-nav-link.-active:hover {
    box-shadow: none
}

.xgs-sidebar-nav-link.-disabled {
    color: #ced4da;
    cursor: default
}

.xgs-sidebar-nav-link:hover:not(.-disabled) {
    box-shadow: 0 0 10px #00000014
}

.xgs-sidebar-nav-link img {
    width: 26px;
    height: 26px
}

.xgs-tag {
    height: 30px;
    border-radius: 2px;
    padding: 0 8px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: #e9ecef;
    color: #6c757d
}

.xgs-tag.-inline {
    font-size: .85em;
    height: 1.3em;
    padding: .1em .2em;
    margin-left: .4em;
    line-height: .85em
}

@media screen and (max-width: 640px) {
    .xgs-tag {
        font-size: 13px;
        height: 26px
    }
}

@media screen and (max-width: 480px) {
    .xgs-tag {
        font-size: 12px;
        height: 25px
    }
}

.xgs-tooltip {
    box-shadow: none !important;
    background: rgba(73, 80, 87, .98) !important;
    border-radius: 4px !important;
    color: #e9ecef !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 8px 10px !important;
    visibility: hidden !important;
    text-align: left !important
}

.xgs-tooltip:last-of-type {
    visibility: visible !important
}

.xgs-tooltip.tooltip-top:after {
    border-color: rgba(73, 80, 87, .98) transparent transparent !important
}

.xgs-tooltip.tooltip-bottom:after {
    border-color: transparent transparent rgba(73, 80, 87, .98) !important
}

.xgs-tooltip.tooltip-left:after {
    border-color: transparent transparent transparent rgba(73, 80, 87, .98) !important
}

.xgs-tooltip.tooltip-right:after {
    border-color: transparent rgba(73, 80, 87, .98) transparent transparent !important
}

.xgs-tooltip.-single-line {
    white-space: nowrap
}

hr.xgs-hr {
    height: 1px;
    border: none;
    background-color: #e9ecef
}

.xgs-scroll-down-hint {
    width: 30px;
    height: 50px;
    border: 2px solid #781426;
    border-radius: 60px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -15px;
    margin-bottom: -25px;
    animation: 1s .5s slideIn ease-in-out both
}

.xgs-scroll-down-hint.-hidden {
    animation: .5s slideOut ease-in-out both
}

.xgs-scroll-down-hint:before {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%);
    background: #781426;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 1.5s infinite
}

@keyframes wheel {
    to {
        opacity: 0;
        top: 40px
    }
}

@keyframes slideOut {
    0% {
        margin-bottom: -25px;
        opacity: 1
    }

    to {
        margin-bottom: -50px;
        opacity: 0
    }
}

@keyframes slideIn {
    0% {
        margin-bottom: 25px;
        opacity: 0
    }

    to {
        margin-bottom: -25px;
        opacity: 1
    }
}

.xgs-fixtures-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6
}

@media screen and (max-width: 640px) {
    .xgs-fixtures-view-header {
        flex-direction: column;
        align-items: flex-start;
        border-bottom: none;
        padding-bottom: 0
    }
}

.xgs-fixtures_header {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    min-height: 24px;
    margin-bottom: 20px;
    margin-top: 25px
}

@media screen and (max-width: 640px) {
    .xgs-fixtures_header {
        min-height: 20px;
        margin-bottom: 15px;
        margin-top: 20px
    }
}

@media screen and (max-width: 480px) {
    .xgs-fixtures_header {
        margin-bottom: 10px;
        margin-top: 15px;
        font-size: 14px
    }
}

.xgs-fixtures_odds {
    position: absolute;
    right: 0
}

.xgs-panel+.xgs-fixtures_header {
    margin-top: 40px
}

@media screen and (max-width: 640px) {
    .xgs-panel+.xgs-fixtures_header {
        margin-top: 30px
    }
}

@media screen and (max-width: 480px) {
    .xgs-panel+.xgs-fixtures_header {
        margin-top: 20px
    }
}

.xgs-landing-card {
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50%;
    background-color: #fff;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

@media screen and (max-width: 1340px) {
    .xgs-landing-card {
        min-height: 300px
    }
}

@media screen and (max-width: 1024px) {
    .xgs-landing-card {
        min-height: 260px;
        padding: 15px 20px
    }
}

@media screen and (max-width: 880px) {
    .xgs-landing-card {
        max-width: 600px;
        width: 100%;
        margin: 0 auto
    }
}

@media screen and (max-width: 768px) {
    .xgs-landing-card {
        max-width: 500px;
        box-shadow: 0 3px 10px #0000001a;
        border: none;
        border-radius: 4px
    }

    .xgs-landing-card .xgs-panel,
    .xgs-landing-card .xgs-card {
        box-shadow: 0 3px 10px #0000001a;
        border: none;
        margin-bottom: 10px
    }
}

@media screen and (max-width: 640px) {
    .xgs-landing-card {
        min-height: 200px
    }
}

@media screen and (max-width: 480px) {
    .xgs-landing-card {
        min-height: 180px
    }
}

.xgs-landing-card.-image {
    background: none;
    padding: 0;
    overflow: visible
}

.xgs-landing-card.-pure {
    background: none;
    box-shadow: none !important;
    padding: 0;
    overflow: visible
}

.xgs-landing-card.-right {
    transform: rotateX(5deg) rotateY(-20deg) rotate(2deg) translate(-10%)
}

@media screen and (max-width: 880px) {
    .xgs-landing-card.-right {
        transform: none
    }
}

.xgs-landing-card.-left {
    transform: rotateX(5deg) rotateY(20deg) rotate(-2deg) translate(10%)
}

@media screen and (max-width: 880px) {
    .xgs-landing-card.-left {
        transform: none
    }
}

.xgs-landing-image {
    box-shadow: 0 3px 10px #0000001a;
    border-radius: 4px;
    max-width: 100%
}

.xgs-landing-text {
    width: 70%;
    margin: 0 auto;
    position: relative
}

@media screen and (max-width: 1340px) {
    .xgs-landing-text {
        width: 80%
    }
}

@media screen and (max-width: 1024px) {
    .xgs-landing-text {
        width: 90%
    }
}

@media screen and (max-width: 880px) {
    .xgs-landing-text {
        max-width: 600px;
        width: 100%
    }
}

@media screen and (max-width: 768px) {
    .xgs-landing-text {
        max-width: 500px
    }
}

.xgs-landing-text br {
    display: block;
    padding-bottom: 1em
}

@media screen and (max-width: 880px) {
    .xgs-landing-text br {
        display: none
    }
}

.xgs-landing-text .h1 {
    margin-bottom: .5em;
    line-height: 1.3
}

@media screen and (max-width: 480px) {
    .xgs-landing-text .h1 {
        line-height: 1.1;
        position: relative
    }
}

.xgs-landing-text ol {
    list-style-type: decimal;
    padding-left: 1em
}

.xgs-landing-text ol li {
    margin-bottom: .5em
}

.xgs-landing-text p,
.xgs-landing-text ul,
.xgs-landing-text ol {
    line-height: 1.4;
    font-size: 24px;
    margin-bottom: .5em
}

@media screen and (max-width: 1340px) {

    .xgs-landing-text p,
    .xgs-landing-text ul,
    .xgs-landing-text ol {
        font-size: 22px
    }
}

@media screen and (max-width: 1024px) {

    .xgs-landing-text p,
    .xgs-landing-text ul,
    .xgs-landing-text ol {
        font-size: 20px
    }
}

@media screen and (max-width: 768px) {

    .xgs-landing-text p,
    .xgs-landing-text ul,
    .xgs-landing-text ol {
        font-size: 19px
    }
}

@media screen and (max-width: 640px) {

    .xgs-landing-text p,
    .xgs-landing-text ul,
    .xgs-landing-text ol {
        font-size: 18px
    }
}

.xgs-landing-section {
    padding: 100px 0;
    margin: 0 -10px;
    position: relative
}

.xgs-landing-section .col-6,
.xgs-landing-section .xgs-landing-section_block {
    opacity: 0;
    transition: transform .6s ease-out, opacity .6s ease-out
}

.xgs-landing-section .col-6:first-child,
.xgs-landing-section .xgs-landing-section_block:first-child {
    transform: translate(-20%)
}

@media screen and (max-width: 880px) {

    .xgs-landing-section .col-6:first-child,
    .xgs-landing-section .xgs-landing-section_block:first-child {
        transform: translateY(-20%)
    }
}

.xgs-landing-section .col-6:last-child,
.xgs-landing-section .xgs-landing-section_block:last-child {
    transform: translate(20%)
}

@media screen and (max-width: 880px) {

    .xgs-landing-section .col-6:last-child,
    .xgs-landing-section .xgs-landing-section_block:last-child {
        transform: translateY(20%)
    }
}

@media screen and (max-width: 880px) {

    .xgs-landing-section:nth-child(2n) .col-6:first-child,
    .xgs-landing-section:nth-child(2n) .xgs-landing-section_block:first-child {
        transform: translateY(20%)
    }
}

@media screen and (max-width: 880px) {

    .xgs-landing-section:nth-child(2n) .col-6:last-child,
    .xgs-landing-section:nth-child(2n) .xgs-landing-section_block:last-child {
        transform: translateY(-20%)
    }
}

.xgs-landing-section.-animate .col-6,
.xgs-landing-section.-animate xgs-odds,
.xgs-landing-section.-animate xgs-game-forecast,
.xgs-landing-section.-animate .xgs-landing-section_block {
    transform: translate(0) !important;
    opacity: 1 !important
}

.xgs-landing-section.-highlighted {
    background-color: #7814260d
}

@media screen and (max-width: 1340px) {
    .xgs-landing-section {
        padding: 90px 0
    }
}

@media screen and (max-width: 1024px) {
    .xgs-landing-section {
        padding: 80px 0
    }
}

@media screen and (max-width: 768px) {
    .xgs-landing-section {
        padding: 70px 0
    }
}

@media screen and (max-width: 640px) {
    .xgs-landing-section {
        margin: 0 -5px;
        padding-left: 20px;
        padding-right: 20px
    }

    .xgs-landing-section.-highlighted {
        background-color: #7814261a
    }
}

@media screen and (max-width: 350px) {
    .xgs-landing-section {
        padding-left: 10px;
        padding-right: 10px
    }
}

.xgs-landing-section_number {
    position: absolute;
    font-size: 150px !important;
    font-weight: 800;
    opacity: .1;
    top: -110px;
    left: -15px
}

@media screen and (max-width: 880px) {
    .xgs-landing-section_number {
        display: block
    }
}

@media screen and (max-width: 768px) {
    .xgs-landing-section_number {
        font-size: 130px !important;
        top: -90px
    }
}

.-animate .xgs-landing-btn {
    animation: buttonPulse .8s 1s ease-in-out
}

@keyframes buttonPulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1)
    }
}

.xgs-wrapper:has(.xgs-modal) {
    min-height: 100%
}

.xgs-modal-wrapper {
    height: 100%;
    display: flex;
    align-items: center
}

@media screen and (max-width: 640px) {
    .xgs-modal-wrapper {
        padding-bottom: 0
    }
}

.xgs-modal {
    background: #fff;
    border-radius: 4px;
    min-height: 600px;
    display: flex;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 3px 10px #0000001a
}

@media screen and (max-width: 640px) {
    .xgs-modal {
        min-height: auto;
        height: 100%;
        padding: 40px 0
    }
}

.xgs-modal>* {
    flex: 1
}

.xgs-modal_background {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right
}

.xgs-modal-form {
    margin: auto;
    max-width: 370px;
    width: calc(100% - 60px);
    align-items: center;
    justify-content: center;
    position: relative
}

.xgs-modal-form.-wide {
    max-width: 90%
}

.xgs-modal-form input {
    width: 100%
}

.xgs-modal-form button[type=submit]:disabled {
    opacity: .5
}

.xgs-prospect-line {
    cursor: help
}

.xgs-prospect-line:after,
.xgs-prospect-line:before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    top: 0
}

.xgs-prospect-line:after {
    width: 100%;
    border-left: 4px solid #fff
}

@media screen and (max-width: 640px) {
    .xgs-prospect-line:after {
        width: 3px
    }
}

.xgs-prospect-line:before {
    background: #dee2e6;
    z-index: 2;
    width: 4px
}

@media screen and (max-width: 640px) {
    .xgs-prospect-line:before {
        width: 3px
    }
}

.xgs-tournament-prospects {
    margin-top: 20px
}

.xgs-tournament-prospects_item {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 15px
}

.xgs-tournament-prospects_item:before {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 5px;
    background: #dee2e6;
    border-radius: 50%;
    display: inline-block
}

.xgs-prospect-1:before {
    background: #00a672
}

.xgs-prospect-2:before {
    background: #4882d9
}

.xgs-prospect-3:before {
    background: #b08aea
}

.xgs-prospect-4:before {
    background: #ed6d72
}

.xgs-prospect-fade:before {
    opacity: .7
}

.xgs-highlight {
    background: #dee2e6;
    padding: 6px 4px;
    border-radius: 4px;
    display: inline-block
}

.xgs-highlight-0 {
    background: #ced4da;
    color: #495057
}

.xgs-highlight-1 {
    background: #ceeaed;
    color: #2d7581
}

.xgs-highlight-2 {
    background: #f4e3e8;
    color: #b35871
}

.xgs-header {
    height: 100px;
    display: flex;
    align-items: center;
    color: #f8f9fa;
    position: relative
}

@media screen and (max-width: 880px) {
    .xgs-header {
        z-index: 300;
        display: flex;
        justify-content: flex-end
    }
}

@media screen and (max-width: 640px) {
    .xgs-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(135deg, #8b0000 0%, #000000 100%);
        padding: 10px;
        height: 54px;
        display: flex;
        justify-content: flex-end
    }
}

.xgs-ad-wrapper .xgs-header {
    background: linear-gradient(135deg, #8b0000 0%, #000000 100%);
    padding: 0 30px;
    z-index: 200;
    position: relative;
    box-shadow: 0 3px 10px #0000001a
}

.xgs-header .btn-patreon,
.xgs-header .btn-telegram {
    margin-left: auto
}

@media screen and (max-width: 640px) {

    .xgs-header .btn-patreon,
    .xgs-header .btn-telegram {
        font-size: 11px;
        height: 28px;
        padding: .7em 1.2em
    }
}

.xgs-header-logo {
    margin-right: 2rem;
    min-width: 110px;
    height: 46px
}

@media screen and (max-width: 1024px) {
    .xgs-header-logo {
        margin-right: 1.5em
    }
}

@media screen and (max-width: 880px) {
    .xgs-header-logo {
        position: relative;
        z-index: 1;
        margin-right: auto
    }
}

@media screen and (max-width: 640px) {
    .xgs-header-logo {
        margin-right: 1rem;
        position: fixed;
        z-index: 1;
        left: 10px;
        width: 300%;
    }
}

.xgs-header-logo img {
    max-width: 100%;
    max-height: 100%
}

.xgs-header-popup {
    box-shadow: 0 10px 20px 10px #0000000d;
    background: rgba(73, 80, 87, .98);
    border-radius: 4px
}

.xgs-header-popup:after {
    bottom: 100%;
    left: 20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: #0000;
    border-bottom-color: #495057;
    border-width: 5px;
    margin-left: -5px;
    transition: border-bottom-color .2s linear
}

xgs-main-menu,
.xgs-main-nav {
    display: flex;
    flex: 1
}

.xgs-main-menu {
    display: flex;
    color: #f8f9fa;
    position: relative;
    width: 100%;
    align-items: center
}

@media screen and (max-width: 1024px) {
    .xgs-main-menu {
        justify-content: space-around;
        padding-right: 30px
    }
}

@media screen and (max-width: 880px) {
    .xgs-main-menu {
        padding-right: 0
    }
}

@media screen and (max-width: 640px) {
    .xgs-main-menu {
        justify-content: flex-end
    }
}

.xgs-main-menu_item {
    margin: 0 20px;
    position: relative
}

@media screen and (max-width: 1340px) {
    .xgs-main-menu_item {
        margin: 0 10px
    }
}

@media screen and (max-width: 1024px) {
    .xgs-main-menu_item {
        margin: 0 5px
    }
}

.xgs-main-menu_title {
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: border-bottom .3s linear;
    white-space: nowrap
}

.xgs-main-menu_link {
    padding: 4px 0;
    position: relative;
    display: inline-block;
    display: inline-flex;
    align-items: center
}

.xgs-main-menu_link:before {
    content: "";
    position: absolute;
    height: 0;
    color: inherit;
    border-bottom: 1px solid;
    width: 100%;
    left: 0;
    transition: opacity .05s linear, bottom .1s .1s;
    opacity: 0;
    bottom: 7px
}

.xgs-main-menu_link:hover:before {
    width: 100%;
    left: 0;
    bottom: 0;
    opacity: 1;
    transition: opacity .1s linear, bottom .2s
}

.xgs-main-menu_link:hover:before {
    bottom: 4px
}

@media screen and (max-width: 480px) {
    .xgs-main-menu_link {
        font-size: 12px
    }
}

.xgs-main-menu_link .ft-chevron-down {
    transform: translate(2px, -1px);
    font-size: 14px
}

.xgs-main-menu_link.-has-sub:before,
.xgs-main-menu_link.-has-sub:hover:before {
    display: none !important
}

.xgs-main-menu_link.-active:before {
    display: none
}

.xgs-main-menu_link.-active .xgs-main-menu_title {
    border-bottom: 2px solid #fff
}

.xgs-odds {
    font-weight: 400;
    display: flex;
    flex-direction: column;
    background: white;
    position: relative
}

@media screen and (max-width: 640px) {
    .xgs-odds {
        margin-bottom: -1px;
        font-size: 13px
    }
}

.xgs-odds.-has-bookmaker {
    cursor: pointer
}

.xgs-odds.-has-label {
    margin-top: 60px
}

@media screen and (max-width: 640px) {
    .xgs-odds.-has-label {
        margin-top: 50px;
        font-size: 12px
    }
}

.xgs-odds.-has-label .xgs-odds-cell_label,
.xgs-odds.-has-label .xgs-odds_label {
    display: block
}

.xgs-odds_container {
    margin: 0 -10px;
    display: flex;
    justify-content: space-between
}

.xgs-odds_container>div:first-child {
    font-size: 0
}

@media screen and (max-width: 640px) {
    .xgs-odds_container {
        justify-content: space-around
    }
}

@media screen and (max-width: 480px) {
    .xgs-odds_container {
        margin: 0
    }
}

.xgs-odds_category {
    position: relative
}

.xgs-odds_category.-forecast {
    display: flex !important
}

.xgs-odds_label {
    display: none;
    text-align: center;
    margin-bottom: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -65px);
    white-space: nowrap
}

@media screen and (max-width: 640px) {
    .xgs-odds_label {
        transform: translate(-50%, -50px)
    }
}

.xgs-odds_bookmaker-link {
    display: inline-block;
    overflow: hidden;
    padding: 0 2px;
    border-radius: 2px
}

.xgs-odds_logo {
    height: 30px;
    border-radius: 2px;
    font-size: 0
}

@media screen and (max-width: 640px) {
    .xgs-odds_logo {
        height: 26px;
        width: 76px
    }
}

@media screen and (max-width: 480px) {
    .xgs-odds_logo {
        height: 24px;
        width: 71px
    }
}

.xgs-odds_link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer
}

.xgs-odds-category {
    display: flex;
    margin-left: -4px;
    margin-right: -4px
}

.xgs-odds-cell {
    display: flex;
    flex-direction: column;
    margin: 0 4px;
    text-align: center;
    position: relative
}

@media screen and (max-width: 640px) {
    .xgs-odds-cell {
        margin: 0 2px
    }
}

.xgs-odds-cell_label {
    display: none;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -45px);
    font-size: 13px
}

@media screen and (max-width: 640px) {
    .xgs-odds-cell_label {
        transform: translate(-50%, -35px);
        font-size: 12px
    }
}

@media screen and (max-width: 480px) {
    .xgs-odds-cell_label {
        font-size: 11px
    }
}

.xgs-odds-cell_value {
    background: #e9ecef;
    padding: 3px 0;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width: 480px) {
    .xgs-odds-cell_value {
        width: 32px !important;
        height: 25px !important
    }
}

.xgs-odds-cell .xgs-mark.-pure {
    position: absolute;
    right: 100%
}

.xgs-odds-section {
    border-top: 1px solid #e9ecef;
    margin-top: 20px;
    padding: 20px 0
}

.xgs-odds-table {
    margin-bottom: -10px
}

.xgs-odds-table_column {
    display: flex
}

.xgs-odds-table-header {
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px
}

@media screen and (max-width: 640px) {
    .xgs-odds-table-header {
        font-size: 12px;
        margin-bottom: 15px
    }
}

.xgs-odds-table-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

@media screen and (max-width: 640px) {
    .xgs-odds-table-cell {
        margin-bottom: 5px
    }
}

.xgs-fixture {
    flex: 1;
    width: 100%;
    margin: -2px 0
}

@media screen and (max-width: 640px) {
    .xgs-fixture {
        margin: 0
    }
}

.xgs-fixture_datetime {
    line-height: 1.2;
    text-align: center;
    min-width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: -5px 0
}

.xgs-fixture_datetime.-small {
    font-size: 14px
}

@media screen and (max-width: 768px) {
    .xgs-fixture_datetime.-small {
        font-size: 13px
    }
}

@media screen and (max-width: 640px) {
    .xgs-fixture_datetime.-small {
        font-size: 12px
    }
}

@media screen and (max-width: 768px) {
    .xgs-fixture_datetime {
        font-size: 14px;
        min-width: 40px
    }
}

@media screen and (max-width: 640px) {
    .xgs-fixture_datetime {
        font-size: 13px
    }
}

.xgs-fixture_link {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.xgs-fixture_details {
    align-items: center;
    flex: 1;
    display: flex
}

.xgs-fixture_team {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial
}

.xgs-fixture_team.-muted span {
    opacity: .6
}

.xgs-fixture_team:first-child {
    justify-content: flex-end;
    text-align: right
}

@media screen and (max-width: 480px) {
    .xgs-fixture_team:first-child {
        padding-left: 0
    }
}

.xgs-fixture_team img {
    width: 32px;
    height: 32px;
    margin: 0 10px
}

@media screen and (max-width: 640px) {
    .xgs-fixture_team img {
        width: 24px;
        height: 24px;
        margin: 0 5px
    }
}

@media screen and (max-width: 480px) {
    .xgs-fixture_team img {
        width: 24px;
        height: 24px;
        margin: 0 4px
    }
}

@media screen and (max-width: 350px) {
    .xgs-fixture_team img {
        width: 18px;
        height: 18px
    }
}

@keyframes headerSlide {
    0% {
        transform: translateY(-100%)
    }

    to {
        transform: translate(0)
    }
}

.xgs-game-header {
    background: #fff;
    padding-bottom: 0;
    overflow: visible;
    position: relative
}

.xgs-game-header.-sticky {
    z-index: 70;
    animation: headerSlide .3s;
    padding-top: 15px;
    box-sizing: content-box;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: -30px;
    border-radius: 0
}

.xgs-game-header.-sticky .xgs-game-header_team {
    padding-left: 30px;
    padding-right: 30px;
    position: absolute
}

.xgs-game-header.-sticky .xgs-game-header_datetime {
    display: none
}

.xgs-game-header.-sticky .xgs-game-header_team-logo {
    width: 32px;
    height: 32px
}

.xgs-game-header.-sticky .xgs-game-header_team-form {
    display: none
}

.xgs-game-header.-sticky .xgs-game-header_team-name {
    font-size: 18px;
    display: none
}

.xgs-game-header.-sticky .xgs-game-nav {
    margin-top: 10px
}

@media screen and (max-width: 640px) {
    .xgs-game-header_team-name {
        font-size: 18px
    }
}

@media screen and (max-width: 480px) {
    .xgs-game-header_team-name {
        font-size: 17px
    }
}

.xgs-game-header_team-name.-muted {
    opacity: .7
}

.xgs-game-header_team-logo {
    width: 90px;
    height: 90px
}

@media screen and (max-width: 880px) {
    .xgs-game-header_team-logo {
        width: 80px;
        height: 80px
    }
}

@media screen and (max-width: 640px) {
    .xgs-game-header_team-logo {
        width: 70px;
        height: 70px
    }
}

@media screen and (max-width: 480px) {
    .xgs-game-header_team-logo {
        width: 64px;
        height: 64px
    }
}

@media screen and (max-width: 350px) {
    .xgs-game-header_team-logo {
        width: 58px;
        height: 58px
    }
}

.xgs-game-header_team-logo img {
    width: 100%
}

.xgs-game-header_team-form {
    height: 16px;
    margin-top: 4px
}

@media screen and (max-width: 480px) {
    .xgs-game-header_datetime {
        flex: 1;
        position: absolute;
        left: 50%;
        transform: translate(-50%)
    }
}

.xgs-game-statistics-mark-group {
    display: flex;
    text-align: center;
    position: relative
}

.xgs-game-statistics-mark-group>div {
    margin: 0 3px
}

@media screen and (max-width: 640px) {
    .xgs-game-statistics-mark-group>div {
        margin: 0 3px
    }
}

@media screen and (max-width: 480px) {
    .xgs-game-statistics-mark-group>div {
        margin: 0 2px
    }
}

.xgs-game-statistics-mark-group .xgs-mark {
    margin-bottom: .3em
}

.xgs-team-goals {
    text-align: center
}

.xgs-team-goals:last-child {
    margin-left: 5px
}

@media screen and (max-width: 640px) {
    .xgs-team-goals:last-child {
        margin-left: 3px
    }
}

@media screen and (max-width: 480px) {
    .xgs-team-goals:last-child {
        margin-left: 2px
    }
}

.xgs-team-goals_xg {
    font-size: 14px
}

@media screen and (max-width: 640px) {
    .xgs-team-goals_xg {
        font-size: 13px
    }
}

@media screen and (max-width: 480px) {
    .xgs-team-goals_xg {
        font-size: 10px
    }
}

.xgs-blog-hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #622951;
    width: 100%;
    height: 200px;
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    border-radius: 5px
}

@media screen and (max-width: 768px) {
    .xgs-blog-hero {
        height: 150px;
        padding: 20px
    }
}

@media screen and (max-width: 640px) {
    .xgs-blog-hero {
        height: 120px;
        padding: 15px
    }
}

.xgs-blog-hero h1 {
    font-weight: 400;
    font-size: 40px;
    margin-bottom: 0
}

@media screen and (max-width: 768px) {
    .xgs-blog-hero h1 {
        font-size: 30px
    }
}

@media screen and (max-width: 640px) {
    .xgs-blog-hero h1 {
        font-size: 26px
    }
}

.xgs-editor-panel {
    min-height: 90px
}

.xgs-editor-panel .btn-default:hover {
    background: #e9ecef;
    border-color: transparent !important
}

.xgs-editor-panel .btn-default:hover:after,
.xgs-editor-panel .btn-default:hover:before {
    display: none
}

.xgs-editor-panel_label {
    line-height: 24px
}

@media screen and (max-width: 480px) {
    .xgs-editor-panel .tiny-text {
        font-size: 13px
    }

    .xgs-editor-panel mat-select {
        font-size: 16px
    }
}

.xgs-editor-value {
    position: relative;
    min-height: 30px;
    display: flex;
    align-items: center;
    flex: 1;
    background: #fff;
    font-size: 16px
}

@media (hover: none) {
    .xgs-editor-value .xgs-editor-value_placeholder {
        visibility: hidden
    }

    .xgs-editor-value .xgs-editor-value_input {
        position: absolute;
        left: 0;
        visibility: visible !important
    }
}

.xgs-editor-value.-disabled .xgs-editor-value_input,
.xgs-editor-value.-disabled .xgs-editor-value_placeholder {
    color: #6c757d;
    -webkit-text-fill-color: #6c757d;
    opacity: 1
}

.xgs-editor-value_input {
    width: 100%
}

.xgs-editor-value_input.-hidden {
    visibility: hidden
}

.xgs-editor-value_placeholder {
    margin-right: 3px !important;
    white-space: nowrap
}

.xgs-editor-value_placeholder,
.xgs-editor-value_input {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    line-height: 24px;
    height: 24px;
    font-family: Roboto Condensed, Arial Narrow, sans-serif;
    font-size: 16px;
    color: #534f59;
    display: inline-flex;
    align-items: center
}

.xgs-editor-value_select {
    font-size: 16px
}

.xgs-editor-value_select .mat-select-value-text,
.xgs-editor-value_select .mat-option.mat-selected {
    font-weight: 400 !important
}

.xgs-standings-wrapper {
    display: block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: white
}

.xgs-forecast-vote {
    position: relative
}

.xgs-forecast-vote-line {
    height: 8px;
    background-color: #ed6d72;
    width: 100%;
    transition: margin .3s linear;
    border-radius: 4px;
    overflow: hidden
}

.xgs-forecast-vote-line.-small {
    height: 6px
}

@media screen and (max-width: 480px) {
    .xgs-forecast-vote-line.-small {
        height: 5px
    }
}

.xgs-forecast-vote-line.-disabled,
.xgs-forecast-vote-line.-disabled .xgs-forecast-vote-line_agree {
    background-color: #dee2e6 !important
}

.xgs-forecast-vote-line_agree {
    background-color: #00a672;
    width: 50%;
    height: 100%;
    position: relative;
    transition: width .3s linear;
    border-radius: 4px
}

.xgs-forecast-vote-line_agree.-static {
    position: static
}

.xgs-forecast-vote-line_agree.-static .game-vote-line_values {
    transform: none;
    margin-left: 120px;
    margin-right: 120px
}

.xgs-forecast-vote-line_values {
    position: absolute;
    left: 50%;
    top: 27px;
    transform: translate(-50%);
    transition: all .3s linear
}

@media screen and (max-width: 768px) {
    .xgs-forecast-vote-line_values {
        left: 50% !important
    }
}

@media screen and (max-width: 640px) {
    .xgs-forecast-vote-line_values {
        top: 21px
    }
}

@media screen and (max-width: 480px) {
    .xgs-forecast-vote-line_values {
        top: 16px
    }
}

.xgs-forecast-vote-line_values.-left {
    left: 160px !important
}

@media screen and (max-width: 768px) {
    .xgs-forecast-vote-line_values.-left {
        left: 50% !important
    }
}

.xgs-forecast-vote-line_values.-right {
    left: 100% !important;
    margin-left: -160px
}

@media screen and (max-width: 768px) {
    .xgs-forecast-vote-line_values.-right {
        left: 50% !important;
        margin-left: 0 !important
    }
}

.xgs-scroll-arrow {
    position: absolute;
    top: 50%;
    padding: 0;
    border: none;
    background: none;
    outline: none;
    color: #fff;
    box-shadow: 0 3px 10px #0000001a;
    font-size: 35px;
    transform: translateY(-50%);
    transition: opacity .3s cubic-bezier(0, 0, .1, 1)
}

@media (hover: none) {
    .xgs-scroll-arrow {
        display: none
    }
}

.xgs-scroll-arrow.-left {
    left: 0
}

.xgs-scroll-arrow.-right {
    right: 0
}


.bookmaker {
    background: white;
    border-radius: 20px;
    padding: 7px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}
img {
    vertical-align: middle;
    border-style: none;
}



.hoRCwP{color:#090a0b;margin:0;font-weight:600;font-size:16px;line-height:20px}.ixrffO{flex-shrink:0;transition:transform .25s;transform:rotate(0)}.fiNJGr{position:relative;display:flex;align-items:flex-start;padding-top:20px;padding-bottom:16px}.fiNJGr .sc-111vqmd-4{font-size:12px;line-height:16px;color:#7e8392}.huPwvB{display:flex;-webkit-box-align:center;align-items:center;gap:15px;flex:1 1 auto}.frUyaB{display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;flex-shrink:0;overflow:hidden;color:#cbcdd3;width:20px;height:14px}.eGizna{max-width:100%;max-height:100%;display:block}.lazyloaded{opacity:1;transition:opacity var(--transition-duration)}a{cursor:pointer;transition:color .25s}.AVnUo{padding:0 8px 16px}.kpWEEP{padding-inline:12px}.ZRiEM{background:#f8f8f8;border-radius:10px;padding:8px}.iaUjKt{background:#fff;border-radius:10px;padding-inline:12px}.FxUrp{display:flex;gap:12px;-webkit-box-align:center;align-items:center;padding-block:8px;border-bottom:1px solid #f2f3f4;overflow:hidden}.FxUrp:last-child{border-bottom:none}.bQlTLd{width:20px;display:flex;-webkit-box-pack:center;justify-content:center}.MpqhF{display:flex;flex-direction:column;gap:2px;flex:1 1 0%;min-width:0}.hZcWSM{font-size:12px;line-height:16px;font-weight:500;color:#7e8392}.cgwNli{display:flex;gap:8px;-webkit-box-align:center;align-items:center}.foceOV{width:4px;min-width:4px;height:4px;background:#e5e6e9;border-radius:50%}.foceOV:last-of-type{display:none}.hrAySH{color:#11b05a}.foteGp{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kyGeIG{display:flex;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;gap:4px}.keEVVC{display:flex;-webkit-box-align:center;align-items:center;color:#7e8392;transition:.25s}.keEVVC:hover{color:#11b05a}.cfjQWc{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.flTyPk{white-space:nowrap}.iyTfHo{width:20px;height:20px;flex-shrink:0}.eBbbgX{color:#090a0b;white-space:nowrap}.WdaPP{white-space:nowrap}.fmdhcA{color:#7e8392}.jwMazk{color:#090a0b}.lazyloaded{opacity:1;transition:opacity var(--transition-duration)}a{cursor:pointer;transition:color .25s}

@media (min-width: 768px) {
    .eAPQXi {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
        color: #cbcdd3;
        width: 18px;
        height: 18px;
    }

    .fdYpUu {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
        color: #cbcdd3;
        width: 30px;
        height: 30px;
    }
}

@media (min-width: 768px) {
    .fhEluS {
        transition: 0.25s;
        transform-origin: 50% 0;
        transform: rotatex(0);
        opacity: 1;
        overflow: visible;
        height: auto;
    }

    .hpPvWt {
        padding-inline: 6px;
    }
}

@media (min-width: 768px) {
    .hpPvWt {
        padding-inline: 15px;
    }
}

.esABlP {
    padding-inline: 16px;
}

@media (min-width: 768px) {
    .esABlP {
        padding-inline: 30px;
    }

    .eAXAfg::after {
        top: 0;
    }

    .kqmojO {
        font-size: 11px;
        line-height: 12px;
        position: relative;
        width: 100%;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        height: 40px;
        color: var(--color-text2);
        text-transform: uppercase;
        transition: background-color 0.25s, color 0.25s;
        margin: auto;
        max-width: 760px;
        font-weight: 500;
    }

    .kqmojO:hover {
        background-color: var(--color-card-top);
        
    }
}

.kIFtjI {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-direction: column;
    gap: 12px;
    padding-inline: 10px;
    margin-bottom: 15px;
    margin-top: 25px;
}

@media (min-width: 768px) {
    .kIFtjI {
        margin-top: 30px;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        padding-inline: 15px;
    }
}

@media (min-width: 768px) {
    .eIHCZe {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .byxdUl {
        font-size: 11px;
        line-height: 12px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        color: #fff;
        background: #f14c45;
    }

    .bZQzlG {
        font-size: 11px;
        line-height: 12px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        color: #fff;
        background: var(--color-primary);
    }

    .dKDKyE {
        font-size: 11px;
        line-height: 12px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        color: #fff;
        background: #cbcdd3;
    }

    .dHxDFU:not(:last-of-type)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 12px;
        width: calc(100% - 24px);
        height: 1px;
        background: #f2f3f4;
        backface-visibility: hidden;
        -webkit-font-smoothing: subpixel-antialiased;
    }

    .iLRgmV {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 4px 8px;
        gap: 6px;
        font-weight: 500;
        border-radius: 8px;
        transition: background 0.25s;
    }
}

@media (hover: hover) {
    .iLRgmV:hover {
        background: linear-gradient(90deg,
                var(--color-card-top) 0,
                rgba(248, 248, 248, 0) 100%);
        cursor: pointer;
    }
}

@media (min-width: 768px) {
    .iLRgmV {
        flex-direction: initial;
        -webkit-box-align: center;
        align-items: center;
        gap: 10px;
    }
}

@media (min-width: 768px) {
    .dSsigE {
        gap: initial;
    }
}

@media (min-width: 768px) {
    .kWBSIF {
        gap: 8px;
    }

    .fwbGnc {
        position: absolute;
        inset: 0;
    }
}

@media (min-width: 768px) {
    .kNTalG {
        width: 200px;
    }
}

.esbhnW {
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.iztCrh {
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #7e8392;
}

.bAavID {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex: 1 1 0%;
    width: 0;
}

.huCtwe {
    position: absolute;
    left: 0;
    bottom: 14px;
    height: 32px;
    width: 2px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .huCtwe {
        display: none;
    }
}

@media (min-width: 768px) {
    .bvWwSG {
        display: flex;
        margin-left: 15px;
    }
}

@media (min-width: 768px) {
    .dDFJAN {
        -webkit-box-align: initial;
        align-items: initial;
        flex-direction: column;
        width: 60px;
        min-width: 60px;
        gap: 4px;
        padding-right: initial;
    }

    .eYrqTP {
        min-width: 4px;
        height: 4px;
        background: #e5e6e9;
        border-radius: 50%;
    }
}

@media (min-width: 768px) {
    .eYrqTP {
        display: none;
    }
}

.eKJwvm {
    font-size: 12px;
    line-height: 16px;
    position: relative;
    z-index: 1;
    color: var(--color-text2);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
    max-width: 100%;
    margin: 0;
}

@media (min-width: 768px) {
    .eKJwvm {
        font-size: 11px;
        line-height: 16px;
    }
}

@media (min-width: 768px) {
    .hdZfIn {
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        font-size: 12px;
        line-height: 16px;
        transition: color 0.25s;
        
    }

    .bAhpay {
        position: relative;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        font-size: 12px;
        line-height: 16px;
        transition: color 0.25s;
        color: #7e8392;
    }
}

@media (min-width: 768px) {
    .kdcjrx {
        order: initial;
        margin-left: 0;
    }
}

.iiAsXC {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 15px;
    flex: 1 1 0%;
}

@media (min-width: 400px) {
    .iiAsXC {
        flex: initial;
    }
}

.hSCXdH {
    height: 44px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background: #f8f8f8;
    padding-left: 15px;
    padding-right: 12px;
}

@media (min-width: 768px) {
    .hSCXdH {
        gap: 10px;
    }
}

.jyQUOh:hover {
    background: 0 0;
}

/* Mobile layout */
@media (min-width: 768px) {
    .zcUMK {
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        color: #7e8392;
    }

    .zcUMK:first-child {
        color: var(--color-primary);
    }

    .hbICwL {
        font-size: 12px;
        line-height: 16px;
        color: #7e8392;
    }

    .dpbXln .sc-1g2gfht-4 {
        color: #7e8392;
    }

    .dpbXln:first-child .sc-1g2gfht-4 {
        color: var(--color-primary);
    }

    .dpbXln:last-child .sc-1g2gfht-4 {
        color: #4a90e2;
    }
}


.cdTxqS {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .cdTxqS {
        margin-top: 10px;
    }
}

.fxEuuq {
    font-size: 12px;
    line-height: 16px;
    
    font-weight: 700;
}

.eQseJI {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.kGUaYs {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #7e8392;
}

.eeIYzx {
    position: relative;
    padding: 6px 16px 6px 12px;
    background: var(--color-card);
    border-radius: 8px;
    width: 100%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .eeIYzx {
        min-width: 101px;
    }
}

.cefXfj {
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    flex: 1 1 0%;
}

.ekiJhb {
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 8px;
}

.ekiJhb:hover {
    color: initial;
}

.iQOaaC {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: rgb(203, 205, 211);
    width: 60px;
    height: 60px;
}

.eAPQXi {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: rgb(203, 205, 211);
    width: 18px;
    height: 18px;
}

.fdYpUu {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: rgb(203, 205, 211);
    width: 30px;
    height: 30px;
}

.fAPWyp {
    
    padding-left: 10px;
        padding-right: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

@media (min-width: 768px) {
    .fAPWyp {
        font-size: 16px;
        line-height: 20px;
    }
}

.eAXAfg::after {
    top: 0;
}

.kqmojO {
    font-size: 11px;
    line-height: 12px;
    position: relative;
    width: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 40px;
    color: var(--color-text2);
    text-transform: uppercase;
    transition: background-color 0.25s,
        color 0.25s;
    margin: auto;
    max-width: 760px;
    font-weight: 500;
}

.kqmojO:hover {
    background-color: rgb(248, 248, 248);
    
}

.fhEluS {
    transition: 0.25s;
    transform-origin: 50% 0;
    transform: rotatex(0deg);
    opacity: 1;
    overflow: visible;
    height: auto;
}

.kIFtjI {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-direction: column;
    gap: 12px;
    padding-inline: 10px;
    margin-bottom: 15px;
    margin-top: 25px;
}

@media (min-width: 768px) {
    .kIFtjI {
        margin-top: 30px;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        padding-inline: 15px;
    }
}

@media (min-width: 768px) {
    .eIHCZe {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

.esABlP {
    padding-inline: 16px;
}

@media (min-width: 768px) {
    .esABlP {
        padding-inline: 30px;
    }
}

.hpPvWt {
    padding-inline: 6px;
}

@media (min-width: 768px) {
    .hpPvWt {
        padding-inline: 15px;
    }
}

.dKDKyE {
    font-size: 11px;
    line-height: 12px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    color: rgb(255, 255, 255);
    background: rgb(203, 205, 211);
}

.bZQzlG {
    font-size: 11px;
    line-height: 12px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    color: rgb(255, 255, 255);
    background: rgb(118, 169, 99);
}

.byxdUl {
    font-size: 11px;
    line-height: 12px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    color: rgb(255, 255, 255);
    background: rgb(241, 76, 69);
}

.dHxDFU {
    position: relative;
    padding: 4px;
}

.dHxDFU:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 12px;
    width: calc(100% - 24px);
    height: 1px;
    background: rgb(242, 243, 244);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

.iLRgmV {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    gap: 6px;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.25s;
}

@media (hover: hover) {
    .iLRgmV:hover {
        background: linear-gradient(90deg,
                var(--color-card-top) 0,
                rgba(248, 248, 248, 0) 100%);
        cursor: pointer;
    }
}

@media (min-width: 768px) {
    .iLRgmV {
        flex-direction: initial;
        -webkit-box-align: center;
        align-items: center;
        gap: 10px;
    }
}

.dSsigE {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    gap: 8px;
}

@media (min-width: 768px) {
    .dSsigE {
        gap: initial;
    }
}

.kWBSIF {
    display: flex;
    flex: 1 1 0%;
    -webkit-box-align: center;
    align-items: center;
    gap: 4px;
}

@media (min-width: 768px) {
    .kWBSIF {
        gap: 8px;
    }
}

.iUfAma {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.jncOYI {
    display: flex;
    gap: 10px;
    -webkit-box-align: center;
    align-items: center;
    flex: 1 1 0%;
}

.fwbGnc {
    position: absolute;
    inset: 0;
}

.kNTalG {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: 2px;
    width: 100%;
}

@media (min-width: 768px) {
    .kNTalG {
        width: 200px;
    }
}

.iztCrh {
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--color-text2);
}

.esbhnW {
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.bAavID {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex: 1 1 0%;
    width: 0;
}

.huCtwe {
    position: absolute;
    left: 0;
    bottom: 14px;
    height: 32px;
    width: 2px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .huCtwe {
        display: none;
    }
}

.bvWwSG {
    display: none;
    width: 20px;
}

@media (min-width: 768px) {
    .bvWwSG {
        display: flex;
        margin-left: 15px;
    }
}

.dDFJAN {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .dDFJAN {
        -webkit-box-align: initial;
        align-items: initial;
        flex-direction: column;
        width: 60px;
        min-width: 60px;
        gap: 4px;
        padding-right: initial;
    }
}

.eYrqTP {
    min-width: 4px;
    height: 4px;
    background: var(--ui-card-divider-b);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .eYrqTP {
        display: none;
    }
}

.eKJwvm {
    font-size: 12px;
    line-height: 16px;
    position: relative;
    z-index: 1;
    color: var(--color-text2);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
    max-width: 100%;
    margin: 0;
}

@media (min-width: 768px) {
    .eKJwvm {
        font-size: 11px;
        line-height: 16px;
    }
}

.fUZLA {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 16px;
    
}

.cguIVO {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 42px;
    -webkit-box-pack: center;
    justify-content: center;
    color: var(--color-text2);
    -webkit-box-align: center;
    align-items: center;
    width: 24px;
    background-color: var(--color-card-top);
    border-radius: 8px;
}

.bAhpay {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 12px;
    line-height: 16px;
    transition: color 0.25s;
    color: var(--color-text2);
}

.hdZfIn {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 12px;
    line-height: 16px;
    transition: color 0.25s;
    
}

.gMBPyP {
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    gap: 8px;
    position: relative;
}

.kdcjrx {
    order: 1;
    margin-left: 12px;
}

@media (min-width: 768px) {
    .kdcjrx {
        order: initial;
        margin-left: 0;
    }
}

.iiAsXC {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 15px;
    flex: 1 1 0%;
}

@media (min-width: 400px) {
    .iiAsXC {
        flex: initial;
    }
}

.hSCXdH {
    height: 44px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background: var(--color-card-top);
    padding-left: 15px;
    padding-right: 12px;
}

@media (min-width: 768px) {
    .hSCXdH {
        gap: 10px;
    }
}

.jLyKab {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text2);
}

.irdcwi {
    background: var(--color-card-top);
    border-radius: 10px;
    padding: 0 8px;
}

.eEVvvY {
    background: var(--color-card);
    border-radius: 10px;
}

.jyQUOh:hover {
    background: transparent;
}

@supports (-webkit-overflow-scrolling: touch) {}

* {
    box-sizing: border-box;
}

.dCXAxu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bgQNFH {
    display: flex;
    gap: 5px;
}

.cuYnrr {
    height: 6px;
    border-radius: 4px;
    background: rgb(126, 131, 146);
    width: 30%;
    transition: 0.25s;
}

.cuYnrr:first-child {
    background: rgb(118, 169, 99);
}

.ecPtwu {
    height: 6px;
    border-radius: 4px;
    background: rgb(126, 131, 146);
    width: 28%;
    transition: 0.25s;
}

.eFGbJe {
    height: 6px;
    border-radius: 4px;
    background: rgb(126, 131, 146);
    width: 42%;
    transition: 0.25s;
}

.eFGbJe:last-child {
    background: rgb(74, 144, 226);
}

.oURsR {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    gap: 10px;
}

.zcUMK {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: var(--color-text2);
}

.zcUMK:first-child {
    color: rgb(118, 169, 99);
}

.hbICwL {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text2);
}

.dpbXln {
    display: flex;
    gap: 10px;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    flex: 1 1 0%;
}

.dpbXln .sc-1g2gfht-4 {
    color: var(--color-text2);
}

.dpbXln:first-child {
    text-align: left;
    -webkit-box-pack: start;
    justify-content: flex-start;
}

.dpbXln:first-child .sc-1g2gfht-4 {
    color: rgb(118, 169, 99);
}

.dpbXln:last-child {
    text-align: right;
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.dpbXln:last-child .sc-1g2gfht-4 {
    color: rgb(74, 144, 226);
}

.jcnSTJ {
    margin-bottom: 15px;
}

.eGDoMz {
    margin-inline: -10px;
}

@media (min-width: 768px) {
    .eGDoMz {
        margin-inline: -15px;
    }
}

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

h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

img {
    vertical-align: middle;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

h3 {
    margin-bottom: 8px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

h3 {
    font-size: 28px;
}

.cursorDefault {
    cursor: default;
}

.ixrffO {
    flex-shrink: 0;
    transition: transform 0.25s;
    transform: rotate(0deg);
}

.iQnnmC {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: rgb(203, 205, 211);
    width: 20px;
    height: 20px;
}

.iQOaaC {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: #cbcdd3;
    width: 60px;
    height: 60px;
}

.iQnnmC {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: #cbcdd3;
    width: 20px;
    height: 20px;
}

.GPeE {
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    font-weight: 700;
    margin: 0;
}

.eAFMot {
    font-size: 11px;
    line-height: 12px;
    text-align: left;
    font-weight: 400;
    margin: 0;
}

.gWaPGE {
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    font-weight: 500;
    margin: 0;
}

.eSXSZt {
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    color: var(--color-text2);
    font-weight: 400;
    margin: 0;
}

.guVAv {
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    font-weight: 500;
    margin: 0;
}

.iKzMAt {
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    color: var(--color-text2);
    font-weight: 500;
    margin: 0;
}

.gtYCvP {
    position: relative;
    display: flex;
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 15px;
    flex-direction: column;
    align-items: flex-start;
}

.jeScDA {
    position: relative;
    display: flex;
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 15px;
    flex-direction: column;
    align-items: flex-start;
}

.cjXUkf {
    position: relative;
    display: flex;
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 15px;
    flex-direction: column;
    align-items: flex-end;
}

.dBrXpm {
    margin-bottom: 15px;
}

.idTGcx {
    padding-right: 0 !important;
}

.kUfBsV {
    display: flex;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
}

.iMjNgM {
    padding: 4px 6px;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background-color: var(--color-primary);
}

.eVzjuD {
    padding: 4px 6px;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background-color: #7e8392;
}

.fUNtBL {
    padding: 4px 6px;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background-color: #f14c45;
}

.kVhMHX {
    padding-bottom: 15px;
}

.idQcIq {
    padding: 20px 15px 25px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 4px;
    border-bottom: 1px solid var(--ui-card-divider-b);
}

.jhHapm {
    padding-bottom: 25px;
}

.jhHapm .sc-1apryfq-0 {
    padding-bottom: 50px;
}

.kvHVKA {
    overflow: hidden;
    position: absolute;
    inset: 0;
}

.jgXyJt {
    width: 100%;
    height: 100%;
}

.prethemed-image {
    background-image: var(--ui-image-prediction);
    background-position: center;
    object-fit: cover;
}

.iCoJFk {
    display: flex;
    flex-direction: column;
    -webkit-box-pack: start;
    justify-content: flex-start;
    z-index: 1;
}

.esnfXe {
    margin-bottom: 5px;
}

.epvpin {
    display: flex;
    flex-direction: column;
}

.ggctGP {
    margin-bottom: 4px;
}

.eYCfSL {
    color: #7e8392;
}

.cSmtrv {
    position: absolute;
    width: 100%;
    bottom: 0;
    transform: translatey(50%);
    padding-left: 8px;
    padding-right: 8px;
}

.bpkblU {
    text-align: right;
    flex-direction: column-reverse;
    align-items: flex-end;
}

.bpkblU .sc-1apryfq-5 {
    margin-right: 0;
    margin-left: 10px;
}

.klFWaq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-card-top);
    border: 1px solid var(--ui-card-divider-b);
    border-radius: 100px;
    overflow: hidden;
}

.cQDySQ {
    margin-right: 10px;
    color: var(--color-primary);
}

.beaOfu {
    margin-right: 10px;
    color: #4a90e2;
}

.iRKwzl {
    border-right: 1px solid #e5e6e9;
    padding: 6px 13px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background: linear-gradient(-90deg,
            rgba(243, 248, 241, 0) 0,
            var(--ui-tourna-grd) 100%);
}

.eFyLDA {
    border-right: 1px solid #e5e6e9;
    padding: 6px 13px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background: linear-gradient(-270deg,
            rgba(243, 248, 241, 0) 0,
            var(--ui-tourna-grd2) 100%);
}

.dkdhH {
    display: flex;
    flex-direction: column;
}

.hgkMeo {
    -webkit-box-pack: start;
    justify-content: flex-start;
    flex-direction: row-reverse;
    text-align: right;
}

.hgkMeo .sc-1iqj1yr-1 {
    margin-right: 0;
    margin-left: 10px;
}

.gThBva {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 10px;
}

.iVdcoR {
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--ui-card-divider-b);
    background: var(--color-card);
    overflow: hidden;
}

.jsPlIM {
    text-align: center;
    margin-bottom: 6px;
    font-weight: 400;
}

.azwsm {
    padding: 8px 11px;
    border-radius: 4px;
    background: var(--color-card-top);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.gcjRIx {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.cgRIfS:first-child {
    border-top: none;
}

.gtYCvP::before {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 5px;
    background-color: var(--color-primary);
}

.jeScDA::before {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 5px;
    background-color: #7e8392;
}

.cjXUkf::before {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    inset: 0 0 0 auto;
    margin: auto;
    border-radius: 5px;
    background-color: #f14c45;
}

.iMjNgM:not(:last-child) {
    margin-right: 5px;
}

.eVzjuD:not(:last-child) {
    margin-right: 5px;
}

.eFyLDA:last-child {
    border-right: none;
}

.gcjRIx:first-child .sc-bmp82v-3 {
    margin-right: 6px;
}

.gcjRIx:last-child .sc-bmp82v-3 {
    margin-left: 6px;
}

.gtYCvP {
    padding: 0 20px;
    flex-direction: row;
}

.gtYCvP {
    padding: 0 20px;
}

.jeScDA {
    padding: 0 20px;
    flex-direction: row;
}

.jeScDA {
    padding: 0 20px;
}

.cjXUkf {
    padding: 0 20px;
    flex-direction: row-reverse;
}

.cjXUkf {
    padding: 0 20px;
}

.dBrXpm {
    margin-bottom: 10px;
}

.idQcIq {
    padding-left: 30px;
    padding-right: 30px;
}

.idQcIq {
    column-gap: 120px;
}

.iCoJFk {
    -webkit-box-align: center;
    align-items: center;
    flex-direction: row;
}

.esnfXe {
    margin-right: 10px;
}

.cSmtrv {
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;
}

.bpkblU {
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    flex-direction: row;
}

.gThBva {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0;
}

@media (min-width: 768px) {
    .gThBva {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 0;
    }
}

.gThBva {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 10px;
}