:root {
    --cs-primary: #3d7dc8;
    --cs-secondary: #7700ec;
    --cs-info: #2777d5;
    --cs-success: #4ed0ca;
    --cs-warning: #e4ac50;
    --cs-danger: #fd4949;
    --cs-white: #161616;
    --cs-text-white: #adadad;
    --cs-shadow-white: #00000057;
    --cs-text-primary: #fff;
    --cs-text-secondary: #fff;
    --cs-text-info: #fff;
    --cs-text-success: #092e2c;
    --cs-text-warning: #392c15;
    --cs-text-danger: #4d0808;
    --cs-primary-half: rgb(61 125 200 / 50%);
    --cs-secondary-half: rgb(119 0 236 / 50%);
    --cs-success-half: rgb(78 208 202 / 50%);
    --cs-info-half: rgb(61 160 248 / 50%);
    --cs-warning-half: rgb(228 172 80 / 50%);
    --cs-danger-half: rgb(253 73 73 / 50%);

}

.pagination {
    --bs-pagination-bg: #35455b;
    --bs-pagination-color: #95a7c2;
    --bs-pagination-hover-color: #95a7c2;
    --bs-pagination-hover-bg: #495e7a;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #1f2938;
    --bs-pagination-active-border-color: #7e96ba;
    --bs-pagination-border-color: #475d7b;
    --bs-pagination-disabled-bg: #171a21;
    --bs-pagination-disabled-border-color: #273446;
    --bs-pagination-focus-bg: #3b4f6b;
    --bs-pagination-focus-box-shadow: unset;
}

.page-link:focus {
    color: #a7abb1;
}

.alert-danger {
    --bs-alert-color: #efc8cc;
    --bs-alert-bg: #4e2629;
    --bs-alert-border-color: #5e262b;
}

.alert-success {
    --bs-alert-color: #e0f3ea;
    --bs-alert-bg: #1c6443;
    --bs-alert-border-color: #337c5b;
}

.alert-info {
    --bs-alert-color: #ddf8fd;
    --bs-alert-bg: #18505c;
    --bs-alert-border-color: #32636e;
}

.alert-warning {
    --bs-alert-color: #fff8e3;
    --bs-alert-bg: #493e1b;
    --bs-alert-border-color: #5e5028;
}

.form-control:disabled {
    background-color: #181c23;
}

@font-face {
    font-family: 'BeaufortForLoL';
    src: url('../fonts/Beaufort/BeaufortforLOL-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #171a21;
    padding-top: 73px;
}

body,
input,
button,
select,
textarea {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #ffffff;
}

a,
a:hover,
a:active {
    text-decoration: none;
    color: #fff;
}

ul,
ol,
li {
    list-style: none;
}

header {
    background: #212630;
    color: #fefefe;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
}

.menu-item {
    position: relative;
}

header .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    max-width: 1366px;
    width: 90vw;
    margin: auto;
}

header .header-wrapper .header-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: start;
    position: relative;
}

header .logo img {
    height: 40px;
}

header .nav {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

header .nav a:not(.head-dropdown a) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5px;
    padding: 1.5rem 1rem;
    position: relative;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'BeaufortForLoL', 'Inter', sans-serif;
    transition: color 0.2s;
    min-width: 120px;
}

header .nav a:hover,
header .nav a.active {
    color: #dc9656;
}

header .nav a:not(.head-dropdown a):after {
    opacity: 0;
    content: '';
    background: linear-gradient(45deg, #e88b29, #ffce5d);
    height: 3px;
    position: absolute;
    width: 100%;
    bottom: -3px;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1;
}

header .nav a:not(.head-dropdown a):before {
    content: '';
    position: absolute;
    top: 75%;
    left: 50%;
    width: 500%;
    height: 500%;
    background: radial-gradient(circle, rgb(224 163 107 / 30%) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0.3);
    transition: transform 0.4s ease;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

header .nav a:not(.head-dropdown a):hover:after,
header .nav a:not(.head-dropdown a).active:after {
    opacity: 1;
}

header .nav a:not(.head-dropdown a):hover:before,
header .nav a:not(.head-dropdown a).active:before {
    opacity: 0.5;
}

header .account-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.head-dropdown {
    display: none;
    position: absolute;
    left: 0;
    background: linear-gradient(156deg, #343434b5, #2f1d1da8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0;
    min-width: 100%;
    z-index: 1000;
    backdrop-filter: blur(10px);
    margin-top: 2.5px;
}

.head-dropdown li a {
    display: block;
    padding: 0.6rem 1rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: invert(1);
}

.menu-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mnav {
    padding: .5rem 0;
}

.mnav-list>.mnav-item {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.mnav-link,
.mnav-toggle {
    width: 100%;
    text-align: left;
    padding: .6rem 1rem;
    border: 0;
    background: none;
    font-weight: 500;
    text-decoration: none;
    display: block;
}

.mnav-link {
    color: inherit;
}

.mnav-toggle {
    cursor: pointer;
}

.mnav-link.is-active,
.mnav-sublink.is-active {
    font-weight: 700;
}

.mnav-sub {
    padding: .25rem 0 .75rem 0;
}

.mnav-sub .mnav-sublink {
    display: block;
    padding: .5rem 1.5rem;
    text-decoration: none;
    color: inherit;
}

.mnav-sub .mnav-sublink:hover {
    text-decoration: underline;
}

.offcanvas {
    background-color: #212630c7;
    backdrop-filter: blur(15px);
    --bs-offcanvas-width: 70vw !important;
    --bs-border-color: #3c414d;
}

.mnav-list>.mnav-item {
    border: 0;
}

.container-fluid {
    max-width: 1366px;
    width: 90vw;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    text-align: center;
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all .2s ease-in, width 0, height 0, top 0, left 0 !important;
    -moz-transition: all .2s ease-in, width 0, height 0, top 0, left 0 !important;
    transition: all .2s ease-in, width 0, height 0, top 0, left 0 !important;
    cursor: pointer !important;
    outline: 0;
    font-family: 'BeaufortForLoL', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.button:hover {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.button:hover:before {
    -webkit-animation: shine .5s 0s linear;
    -moz-animation: shine .5s 0s linear;
    animation: shine .5s 0s linear
}

.button:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow .2s ease-in;
    -moz-transition: box-shadow .2s ease-in;
    transition: box-shadow .2s ease-in
}

.button:before {
    content: "";
    display: block;
    width: 0;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 15px 3px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg)
}

.button .overlay {
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: blink .5s linear
}

.button.button-sm {
    padding: 3px 6px
}

.button.button-big {
    display: block;
    font-size: 16px;
    font-weight: 500
}

.button.button-primary {
    background-color: var(--cs-primary);
    color: var(--cs-text-primary);
    border: 1px solid var(--cs-primary)
}

.button.button-primary:hover {
    box-shadow: 0 3px 7px 0 var(--cs-primary-half)
}

.button.button-primary:active {
    box-shadow: 0 0 0 0 transparent
}

.button.button-secondary {
    background-color: var(--cs-secondary);
    color: var(--cs-text-secondary);
    border: 1px solid var(--cs-secondary)
}

.button.button-secondary:hover {
    box-shadow: 0 3px 7px 0 var(--cs-secondary-half)
}

.button.button-secondary:active {
    box-shadow: 0 0 0 0 transparent
}

.button.button-info {
    background-color: var(--cs-info);
    color: var(--cs-text-info);
    border: 1px solid var(--cs-info)
}

.button.button-info:hover {
    box-shadow: 0 3px 7px 0 var(--cs-info-half)
}

.button.button-info:active {
    box-shadow: 0 0 0 0 transparent
}

.button.button-success {
    background-color: var(--cs-success);
    color: var(--cs-text-success);
    border: 1px solid var(--cs-success)
}

.button.button-success:hover {
    color: var(--cs-text-success);
    box-shadow: 0 3px 7px 0 var(--cs-success-half)
}

.button.button-success:active {
    color: var(--cs-text-success);
    box-shadow: 0 0 0 0 transparent
}

.button.button-warning {
    background-color: var(--cs-warning);
    color: var(--cs-text-warning);
    border: 0 !important
}

.button.button-warning:hover {
    color: var(--cs-text-warning);
    box-shadow: 0 3px 7px 0 var(--cs-warning-half)
}

.button.button-warning:active {
    color: var(--cs-text-warning);
    box-shadow: 0 0 0 0 transparent
}

.button.button-danger {
    background-color: var(--cs-danger);
    color: var(--cs-text-danger);
    border: 1px solid #fd4949
}

.button.button-danger:hover {
    color: var(--cs-text-danger);
    box-shadow: 0 3px 7px 0 var(--cs-danger-half)
}

.button.button-danger:active {
    color: var(--cs-text-danger);
    box-shadow: 0 0 0 0 transparent
}

.button.button-white {
    background-color: var(--cs-white);
    color: var(--cs-text-white);
    border: 0;
    box-shadow: 0 1px 2px var(--cs-shadow-white)
}

.button.button-white:hover {
    color: var(--cs-text-white);
    box-shadow: 0 3px 7px 0 var(--cs-shadow-white)
}

.button.button-white:active {
    color: var(--cs-text-white);
    box-shadow: 0 0 0 0 transparent
}

.button.button-white.active:hover {
    color: var(--cs-text-primary)
}

.button.active {
    background: var(--cs-primary);
    color: var(--cs-text-primary)
}

.button .c-ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: 0 0
}

.button .c-ripple__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25)
}

.button .c-ripple.is-active .c-ripple__circle {
    -webkit-animation: a-ripple .4s ease-in;
    animation: a-ripple .4s ease-in
}

.button.disabled,
.button:disabled,
button:disabled {
    pointer-events: none !important;
    opacity: .8 !important;
    filter: grayscale(.5) !important
}

@-webkit-keyframes a-ripple {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    100% {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0
    }
}

@keyframes a-ripple {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    100% {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0
    }
}

@-webkit-keyframes shine {
    from {
        opacity: 0;
        left: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0;
        left: 100%
    }
}

@-moz-keyframes shine {
    from {
        opacity: 0;
        left: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0;
        left: 100%
    }
}

@keyframes shine {
    from {
        opacity: 0;
        left: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0;
        left: 100%
    }
}

.form-control,
.form-select {
    border: 2px solid #323948;
    background-color: #2b323f;
    color: #fff;
    appearance: none;
    border-radius: 8px 10px;
    padding: 8px 12px;
    resize: none;
    transition: height .5s ease-out
}

.form-control:focus,
.form-select:focus {
    border: 2px solid var(--cs-primary);
    background-color: #2b323f;
    color: #fff
}

.modal.fade.show {
    background: #00000036;
}

.modal-content {
    border: 0;
    backdrop-filter: blur(8px) brightness(1.3);
    background: linear-gradient(45deg, #212630db, #31343be3);
    color: #fff;
}

.modal-body label {
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
}

.auth-modal-wrapper {
    display: flex;
    background: #232933a3;
    border-radius: 6px;
    overflow: hidden;
}

.auth-modal-wrapper .login-form-main {
    width: 100%;
}

.auth-modal-wrapper .switch-pane-container {
    align-items: center;
    display: flex;
    min-height: 450px;
    width: 40%;
    padding: 40px;
    flex-shrink: 0;
    position: relative;
    background-position: center top;
    background-size: cover
}

.auth-modal-wrapper .switch-pane-container h2 {
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: 'BeaufortForLoL', 'Inter', sans-serif;
}

.auth-modal-wrapper .switch-pane-container p {
    text-align: center;
    color: #fff;
    font-size: 14px
}

.auth-modal-wrapper .switch-pane-container button {
    width: 100%
}

.auth-modal-wrapper .switch-pane-container .switch-pane-content {
    width: 100%;
    z-index: 2
}

.auth-modal-wrapper .switch-pane-container .blue-background {
    background-color: #263238;
    height: 100%;
    left: 0;
    opacity: .7;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.auth-modal-wrapper .switch-pane-container .btn-close {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 2;
    width: 12px;
    filter: invert(1);
    color: #fff;
    fill: #fff
}

.auth-modal-wrapper .login-form-main .form-group {
    margin-bottom: .5rem;
}

.sideline {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #d7d7d7;
}

.sideline:after,
.sideline:before {
    content: '';
    border-top: 1px solid #ebebeb;
    margin: 0 20px 0 0;
    flex: 1 0 20px
}

.sideline:after {
    margin: 0 0 0 20px
}

.social-buttons {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.social-button {
    width: calc((100% - .6rem) / 2);
    font-weight: 500;
    justify-content: left;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 12px;
}

.social-button i {
    font-size: 20px;
}

.swiper {
    width: 100%;
    height: 250px;
}

.swiper-wrapper {
    user-select: none;
}

.main-slider .swiper-pagination {
    bottom: 5rem !important;
}

.swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
    border-radius: 999px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .5);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.4rem;
}

.sub-wrapper {
    margin-top: -5rem;
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.sub-wrapper .left-side {
    background-color: #212630d1;
    width: 300px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.sub-wrapper .center-side {
    background-color: #212630d1;
    width: 100%;
    flex-shrink: 1;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.sub-wrapper .center-side h5.section-title {
    margin-left: 1rem;
    margin-bottom: 0;
    background: #272f38cc;
    width: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.sub-wrapper .center-side h5.section-title i {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3c4856;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    margin-right: 1rem;
    font-size: 25px;
}

.login-side-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0 1rem;
}

.header-linear {
    height: 3px;
    width: 100%;
    background-size: 200% 200% !important;
    background: #4180c9;
    background: -moz-linear-gradient(87deg, #4180c9 0, #708eb3 11%, #b37ad1 22%, #c63c3c 36%, #eb6b31 48%, #989765 58%, #3c779e 68%, #7635d7 85%, #31ebd6 100%);
    background: -webkit-linear-gradient(87deg, #4180c9 0, #708eb3 11%, #b37ad1 22%, #c63c3c 36%, #eb6b31 48%, #989765 58%, #3c779e 68%, #7635d7 85%, #31ebd6 100%);
    background: linear-gradient(87deg, #4180c9 0, #708eb3 11%, #b37ad1 22%, #c63c3c 36%, #eb6b31 48%, #989765 58%, #3c779e 68%, #7635d7 85%, #31ebd6 100%);
    -webkit-animation: header-linear 5s ease infinite;
    -moz-animation: header-linear 5s ease infinite;
    animation: header-linear 5s ease infinite;
    position: fixed;
    top: 73px;
    z-index: 999;
}

@-webkit-keyframes header-linear {
    0% {
        background-position: 10% 0
    }

    50% {
        background-position: 91% 100%
    }

    100% {
        background-position: 10% 0
    }
}

@-moz-keyframes header-linear {
    0% {
        background-position: 10% 0
    }

    50% {
        background-position: 91% 100%
    }

    100% {
        background-position: 10% 0
    }
}

@keyframes header-linear {
    0% {
        background-position: 10% 0
    }

    50% {
        background-position: 91% 100%
    }

    100% {
        background-position: 10% 0
    }
}

.progress-container {
    width: 100%;
    height: 12px;
    border: 2px solid #ca854f59;
    background: repeating-linear-gradient(to right, #000000, #000000 10px, transparent 10px, transparent 11px), linear-gradient(to right, #1b1b1b, #490f0f1c);
    background-size: cover;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 3px #000000;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(to right, #31211d, #281914 10px, #000000 10px, #000000f5 11px), linear-gradient(to right, #000000, #000000);
    position: relative;
}

.progress-fill:after {
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: linear-gradient(90deg, #ffffff00, #ca854f85);
}

.server-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem;
}

.server-status-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.3rem;
}

.server-status-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    flex-shrink: 1;
    white-space: nowrap;
    font-family: 'BeaufortForLoL', 'Inter', sans-serif;
    font-weight: 800;
    color: #ca854f;
}

.server-status-info .progress-container {
    width: 60%;
    flex-shrink: 0;
}

.responsive-image {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.responsive-image {
    position: relative;
    z-index: 1;
    background-image: url("data:image/gif;base64,R0lGODlhAQABANUgAIWFhbOzs5OTk3x8fKOjo5WVlYyMjK+vr4ODg6ysrLq6up+fn5ycnKampry8vHV1daqqqpqamoqKipeXl3p6eoeHh7GxsXd3d6GhoZGRkYGBgY6Ojri4uH5+fqioqLW1tf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmVkYTJiM2ZhYywgMjAyMS8xMS8xNy0xNzoyMzoxOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIzLjEgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUM3NkQ0Nzk3RDJCMTFFQzgwNkRFMDgwOTU1MDBDRjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUM3NkQ0N0E3RDJCMTFFQzgwNkRFMDgwOTU1MDBDRjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1Qzc2RDQ3NzdEMkIxMUVDODA2REUwODA5NTUwMENGNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1Qzc2RDQ3ODdEMkIxMUVDODA2REUwODA5NTUwMENGNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAUDACAALAAAAAABAAEAAAYDQEcQACH5BAUDACAALAAAAAABAAEAAAYDQEUQACH5BAUDACAALAAAAAABAAEAAAYDQE4QACH5BAUDACAALAAAAAABAAEAAAYDwE8QACH5BAUDACAALAAAAAABAAEAAAYDwEAQACH5BAUDACAALAAAAAABAAEAAAYDQEsQACH5BAUDACAALAAAAAABAAEAAAYDwEMQACH5BAUDACAALAAAAAABAAEAAAYDwEQQACH5BAUDACAALAAAAAABAAEAAAYDQEgQACH5BAUDACAALAAAAAABAAEAAAYDQE8QACH5BAUDACAALAAAAAABAAEAAAYDwEYQACH5BAUDACAALAAAAAABAAEAAAYDQEIQACH5BAUDACAALAAAAAABAAEAAAYDQEwQACH5BAUDACAALAAAAAABAAEAAAYDwEUQACH5BAUDACAALAAAAAABAAEAAAYDQEYQACH5BAUDACAALAAAAAABAAEAAAYDwEgQACH5BAUDACAALAAAAAABAAEAAAYDwEkQACH5BAUDACAALAAAAAABAAEAAAYDwEIQACH5BAUDACAALAAAAAABAAEAAAYDQEEQACH5BAUDACAALAAAAAABAAEAAAYDwEwQACH5BAUDACAALAAAAAABAAEAAAYDwE0QACH5BAUDACAALAAAAAABAAEAAAYDQEMQACH5BAUDACAALAAAAAABAAEAAAYDQEkQACH5BAUDACAALAAAAAABAAEAAAYDwEoQACH5BAUDACAALAAAAAABAAEAAAYDQEAQACH5BAUDACAALAAAAAABAAEAAAYDQEQQACH5BAUDACAALAAAAAABAAEAAAYDQE0QACH5BAUDACAALAAAAAABAAEAAAYDwE4QACH5BAUDACAALAAAAAABAAEAAAYDwEEQACH5BAUDACAALAAAAAABAAEAAAYDQEoQACH5BAUDACAALAAAAAABAAEAAAYDwEsQACH5BAUDACAALAAAAAABAAEAAAYDwEcQACH5BAUDACAALAAAAAABAAEAAAYDwEsQACH5BAUDACAALAAAAAABAAEAAAYDQEoQACH5BAUDACAALAAAAAABAAEAAAYDwEEQACH5BAUDACAALAAAAAABAAEAAAYDwE4QACH5BAUDACAALAAAAAABAAEAAAYDQE0QACH5BAUDACAALAAAAAABAAEAAAYDQEQQACH5BAUDACAALAAAAAABAAEAAAYDQEAQACH5BAUDACAALAAAAAABAAEAAAYDwEoQACH5BAUDACAALAAAAAABAAEAAAYDQEkQACH5BAUDACAALAAAAAABAAEAAAYDQEMQACH5BAUDACAALAAAAAABAAEAAAYDwE0QACH5BAUDACAALAAAAAABAAEAAAYDwEwQACH5BAUDACAALAAAAAABAAEAAAYDQEEQACH5BAUDACAALAAAAAABAAEAAAYDwEIQACH5BAUDACAALAAAAAABAAEAAAYDwEkQACH5BAUDACAALAAAAAABAAEAAAYDwEgQACH5BAUDACAALAAAAAABAAEAAAYDQEYQACH5BAUDACAALAAAAAABAAEAAAYDwEUQACH5BAUDACAALAAAAAABAAEAAAYDQEwQACH5BAUDACAALAAAAAABAAEAAAYDQEIQACH5BAUDACAALAAAAAABAAEAAAYDwEYQACH5BAUDACAALAAAAAABAAEAAAYDQE8QACH5BAUDACAALAAAAAABAAEAAAYDQEgQACH5BAUDACAALAAAAAABAAEAAAYDwEQQACH5BAUDACAALAAAAAABAAEAAAYDwEMQACH5BAUDACAALAAAAAABAAEAAAYDQEsQACH5BAUDACAALAAAAAABAAEAAAYDwEAQACH5BAUDACAALAAAAAABAAEAAAYDwE8QACH5BAUDACAALAAAAAABAAEAAAYDQE4QACH5BAUDACAALAAAAAABAAEAAAYDQEUQACH5BAUDACAALAAAAAABAAEAAAYDQEcQADs=");
    background-repeat: repeat;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pace-inactive {
    display: none
}

.pace .pace-progress {
    background: #29d;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
    opacity: 1;
    -webkit-transform: rotate(3deg) translate(0, -4px);
    -moz-transform: rotate(3deg) translate(0, -4px);
    -ms-transform: rotate(3deg) translate(0, -4px);
    -o-transform: rotate(3deg) translate(0, -4px);
    transform: rotate(3deg) translate(0, -4px)
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 10px;
    -webkit-animation: pace-spinner .4s linear infinite;
    -moz-animation: pace-spinner .4s linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner .4s linear infinite;
    animation: pace-spinner .4s linear infinite
}

@-webkit-keyframes pace-spinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes pace-spinner {
    0% {
        -moz-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes pace-spinner {
    0% {
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-ms-keyframes pace-spinner {
    0% {
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes pace-spinner {
    0% {
        transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.find_out div {
    overflow: hidden;
    font-size: 16px;
    color: #7f7f7f;
    line-height: 26px;
    width: 100%;
}

.find_out div::first-line {
    font-size: 20px;
    color: #e6e6e6;
}

.find_out .top {
    height: 113px;
    background: #374044;
    background: -webkit-linear-gradient(152deg, rgba(55, 64, 68, 1) 0%, rgba(25, 29, 33, 1) 100%);
    background: -moz-linear-gradient(152deg, rgba(55, 64, 68, 1) 0%, rgba(25, 29, 33, 1) 100%);
    background: linear-gradient(152deg, rgba(55, 64, 68, 1) 0%, rgba(25, 29, 33, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#374044", endColorstr="#191D21", GradientType=0);
    display: flex;
}

.find_out .top>div:first-child {
    margin: 30px 0 0 36px;
}

.find_out .top>div:last-child {
    margin: 4px 0 0 6px;
    transition: .1s;
}

.find_out .top:hover>div:first-child::first-line {
    color: white;
}

.find_out .top:hover>div:last-child {
    margin: -6px 0 0 6px;
    transition: .2s;
}

.find_out .bottom {
    height: 113px;
    background: #443B37;
    background: -webkit-linear-gradient(152deg, rgba(68, 59, 55, 1) 0%, rgba(44, 35, 31, 1) 100%);
    background: -moz-linear-gradient(152deg, rgba(68, 59, 55, 1) 0%, rgba(44, 35, 31, 1) 100%);
    background: linear-gradient(152deg, rgba(68, 59, 55, 1) 0%, rgba(44, 35, 31, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#443B37", endColorstr="#2C231F", GradientType=0);
    display: flex;
}

.find_out .bottom>div:first-child {
    margin: -24px 0 0 7px;
    transition: .1s;
}

.find_out .bottom:hover>div:first-child {
    margin: -34px 0 0 7px;
    transition: .2s;
}

.find_out .bottom:hover>div:last-child::first-line {
    color: white;
}

.find_out .bottom>div:last-child {
    margin: 29px 0 0 14px;
}

.footer {
    position: relative;
    background: #212630;
    color: #9c9c9c;
    margin: 0 auto;
    margin-top: 3rem;
    width: 100%;
}

.footer section {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 105px 0 105px 320px;
    width: 100%;
    max-width: 1280px;
}

.footer h2 {
    float: left;
    margin: 0 36px 0 0;
    height: 100px;
}

.footer .terms {
    display: flex;
    margin: -5px 0 0 0;
    padding-left: 2px;
    gap: 1rem;
}

.footer .terms a {
    padding: 0 0px;
    color: #dfdfdf;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
}

.footer .terms li:first-child a {
    padding-left: 0;
}

address {
    margin: 13px 0 0 0;
}

address p,
address a {
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    color: #9c9c9c;
}

address .txt_gap {
    width: 10px;
    display: inline-block;
}

address .copyright {
    margin: 10px 0 0 0;
    color: #dfdfdf;
}

address a {
    color: #f38708;
}

.ko-item-tooltip {
    position: absolute;
    z-index: 999;
    pointer-events: none;
    display: none
}

.ko-tooltip-item {
    width: 32px;
    height: 32px;
    background-size: 46px;
    flex-shrink: 0;
    z-index: 2;
    background-color: #80808036;
    position: relative;
}

.ko-tooltip-item .duration {
    font-size: 10px;
    position: absolute;
    bottom: 0;
    left: 3px;
    text-shadow: 0 0px 4px black;
}

.ko-item-tooltip .ko-item {
    min-width: 260px;
    max-width: 400px
}

.ko-item {
    background: rgba(0, 0, 0, .95);
    font-family: Verdana, Roboto, sans-serif !important;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
    text-shadow: #000 1px 1px 1px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    overflow: hidden
}

.ko-item * {
    font-family: Verdana, Roboto, sans-serif !important
}

.ko-item.tooltip {
    position: absolute;
    z-index: 999;
    pointer-events: none;
    opacity: 1
}

.ko-item .item-gear {
    color: rgba(192, 192, 192);
    font-size: 10px;
    text-align: center
}

.ko-item .item-seperator {
    height: 2px;
    width: 100%;
    background-color: #874;
    margin: 2px 0
}

.ko-item .item-header {
    display: flex;
    justify-content: start;
    align-items: start;
    margin-top: -2px
}

.ko-item .item-header .item-icon {
    width: 38px;
    height: 38px;
    margin-right: 2px;
    background-size: 53px;
    flex-shrink: 0
}

.ko-item .item-header .item-name {
    font-size: 11px;
    font-weight: 600;
    margin: 3px 0;
    max-width: 78%
}

.ko-item .general,
.ko-item-color.general {
    color: #ffffffff
}

.ko-item .magic,
.ko-item-color.magic {
    color: #8080ff
}

.ko-item .lair,
.ko-item-color.lair {
    color: #ff0
}

.ko-item .craft,
.ko-item-color.craft {
    color: #80ff00
}

.ko-item .unique,
.ko-item-color.unique {
    color: #dcc77c
}

.ko-item .upgrade,
.ko-item-color.upgrade {
    color: #c87cc7
}

.ko-item .set,
.ko-item-color.set {
    color: #ff3c3c
}

.ko-item .familiar,
.ko-item-color.familiar {
    color: #c87cc7
}

.ko-item .event,
.ko-item-color.event {
    color: #1affff
}

.ko-item .cosplay,
.ko-item-color.cosplay {
    color: #32f7cc
}

.ko-item .rebirth,
.ko-item-color.rebirth {
    color: #ec8ea9
}

.ko-item .rebirth-unique,
.ko-item-color.rebirth-unique {
    color: #e99a55
}

.ko-item .item-main-properties {
    display: flex;
    justify-content: end;
    flex-direction: column;
    align-items: end
}

.ko-item .item-main-properties .item-grade {
    font-size: 10px
}

.ko-item .item-main-properties .item-type {
    font-size: 10px;
    color: #fff
}

.ko-item .item-durability {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center
}

.ko-item .item-durability span {
    font-size: 10px
}

.ko-item .item-durability .durability-progress {
    width: 100%;
    height: 7px;
    background-color: #ff8a00;
    width: 45px
}

.ko-item .item-properties {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.ko-item .item-properties.set-properties {
    text-align: center
}

.ko-item .item-properties.set-properties .item-set-info .item-set-name {
    color: #bcc54f
}

.ko-item .item-properties.set-properties .item-set-info .item-set-part {
    color: #c1c961
}

.ko-item .item-properties .item-property-bonus {
    color: #88c329
}

.ko-item .item-properties .item-property-resist {
    color: #5cd1e5
}

.ko-item .item-properties .item-property-damage {
    color: #75c76e
}

.ko-item .item-properties .item-property-req {
    color: #ff3c3c
}

.ko-item .item-property-warning {
    color: #ff3c3c;
    font-size: 10px;
    text-align: right
}

.ko-item .item-grade {
    font-size: 10px;
    text-align: center
}

.ko-item .item-grade.high,
.ko-item .item-grade.low,
.ko-item .item-grade.middle {
    color: #80ff00
}

.ko-item .item-grade.upgrade {
    color: #c87cc7
}

.ko-item .item-grade.rebirth {
    color: #ec8ea9
}

.ko-item .item-grade.rebirth-unique {
    color: #e99a55
}

.ko-item .item-grade.unique {
    color: #dcc77c
}

.ko-item .item-description {
    font-size: 10px;
    text-align: center;
    line-height: 20px
}

.ko-item .item-seperator:last-of-type {
    margin-bottom: 10px
}

.set-icon {
    position: relative;
    overflow: hidden
}

.set-icon::before {
    background: linear-gradient(to right, rgb(255 255 255 / 29%) 0, rgb(255 255 255 / 84%) 100%);
    content: "";
    display: block;
    height: 200%;
    left: -120%;
    position: absolute;
    top: 0;
    transform: skewX(230deg);
    width: 50%;
    z-index: 2;
    filter: brightness(2) blur(5px);
    -webkit-filter: brightness(2) blur(5px)
}

.set-icon::before {
    -webkit-animation: shine 3s infinite ease-in-out;
    animation: shine 3s infinite ease-in-out
}

@-webkit-keyframes shine {
    0% {
        left: -120%
    }

    25% {
        left: -120%
    }

    50% {
        left: -120%
    }

    100% {
        left: 230%
    }
}

@keyframes shine {
    0% {
        left: -120%
    }

    25% {
        left: -120%
    }

    50% {
        left: -120%
    }

    100% {
        left: 230%
    }
}

.page-header {
    background-image: url(../images/slider/slider2.png);
    background-size: cover;
    background-position: top center;
    height: 180px;
    width: 100%;
}

.page-header h1 {
    margin: 0;
    padding-top: 2rem;
    font-size: 2rem;
    text-shadow: 0 2px 3px #000;
    font-weight: 600;
    font-family: 'BeaufortForLoL', 'Inter';
}

.alert-result {
    background: linear-gradient(45deg, #2e5c4c, #2b4e71);
    margin: 0 1rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
    font-weight: 400;
}

.alert-result.danger {
    background: linear-gradient(45deg, #5c2e2e, #713d2b);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    margin: auto;
    margin: 3rem auto;
}

.loading-spinner .loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.dropdown-menu {
    --bs-dropdown-bg: #212630c4;
    --bs-dropdown-link-color: #ffffff;
    --bs-dropdown-link-hover-bg: #e9ecef;
    backdrop-filter: blur(5px);
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 992px) {
    body {
        padding-top: 59px;
    }

    header {
        padding: 0.5rem;
    }

    header .nav,
    header .account-bar {
        display: none;
    }

    .container-fluid {
        width: 100%;
    }

    .sub-wrapper {
        flex-direction: column;
    }

    .sub-wrapper .left-side,
    .sub-wrapper .center-side {
        width: 100%;
    }

    .modal .modal-dialog {
        min-width: unset !important;
    }

    .swiper {
        height: 210px;
    }

    .auth-modal-wrapper {
        flex-direction: column-reverse;
        zoom: 0.8;
    }

    .auth-modal-wrapper .switch-pane-container {
        min-height: auto;
        width: 100%;
        padding: 1rem;
    }

    .auth-modal-wrapper .switch-pane-container p {
        display: none;
    }

    .footer section {
        padding: 1rem;
    }

    .footer h2 {
        float: unset;
        width: 100%;
        text-align: center;
    }

    .footer .terms {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 1rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    address {
        text-align: center;
    }

    .honor_hall {
        flex-direction: column;
    }

    .honor_hall .hero_cont {
        width: 100% !important;
    }

    .concept-image {
        display: none;
    }

    .header-linear {
        top: 56px;
    }

    .page-header h1 {
        text-align: center;
    }

    header .header-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .menu-logo-wrapper {
        width: 100%;
    }
}