body{ background-image: url('../images/bg.jpg'); background-size: cover; background-repeat: no-repeat; font-family: "Figtree", sans-serif; color: #ddd; min-height: 100vh;}
.overlay-bg{ opacity: .8; background-image: linear-gradient(to right top, #0e383e, #0c3038, #0c2831, #0c202a, #0b1822, #0b1822, #0b1822, #0b1822, #0c202a, #0c2831, #0c3038, #0e383e); position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
a.full-anchor{ cursor: crosshair; width: 100%; height: 100%; position: absolute!important; top: 0; left: 0; z-index: 3!important;}
.content-box{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;}
.content-inner{ width: 100%; max-width: 1400px; height: auto; }
.content-inner .sw-row{ display: flex; justify-content: space-between; align-items: center; gap: 15px;}
.content-inner .sw-row .welcome-prompt{ overflow: hidden; transition: all .3s ease; padding: 30px; flex-direction: column; display: flex; justify-content: center; align-items: start; position: relative; flex: 1 0 auto;  height: 300px; border-radius: 20px; background-color: #0c3038; }
.content-inner .sw-row .sw-buttons{ height: 300px; flex: 1 0 auto; max-width: calc(33% - 5px); display: flex; flex-direction: column; }
.content-inner .sw-row .sw-buttons.sub-buttons{ height: auto; gap: 15px; flex-direction: row; max-width: 100%; }
.content-inner .sw-row .sw-buttons .sw-button{ overflow: hidden; transition: all .3s ease; flex-direction: column; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 145px; border-radius: 10px; background-color: #212b35; }
.content-inner .sw-row .sw-buttons .sw-button+.sw-button{ margin-top: 15px; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button{ height: 300px; margin-top: 15px; }
.content-inner .sw-row .sw-buttons .sw-button .title{ font-size: 24px; font-weight: bold; }
.content-inner .sw-row .sw-buttons .sw-button .info{ font-weight: bold; font-size: 30px; }
.content-inner .sw-row .welcome-prompt .title{ font-weight: bold; font-size: 30px; }
.content-inner .sw-row .welcome-prompt .description{ font-weight: bold; font-size: 18px; }

.content-inner .sw-row .sw-buttons:not(.sub-buttons) .sw-button:after,
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button.sw-contact:after,
.content-inner .sw-row .welcome-prompt:after{ z-index: 1; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: #002A78; background: linear-gradient(63deg,rgba(0, 42, 120, 1) 31%, rgba(214, 0, 0, 1) 80%); opacity: .65;  }
.content-inner .sw-row .sw-buttons .sw-button *,
.content-inner .sw-row .welcome-prompt *{ position: relative; z-index: 2;}

.content-inner .sw-row .welcome-prompt{ background-image: url('../images/promo_clan_3.webp'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.content-inner .sw-row .sw-buttons .sw-button.connect-sw{ background-image: url('../images/promo_sw.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.content-inner .sw-row .sw-buttons .sw-button.connect-ts{ background-image: url('../images/promo_ts.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button.steam-gr{ padding-bottom: 30px; flex-direction: column; justify-content: start; align-items: start; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .head-content{ padding: 20px 30px 0 30px; color: #ff1000; width: 100%; text-align: left; font-weight: 900; font-size: 20px;}
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul{ padding: 0 30px; max-height: 420px; overflow-y: auto; list-style: nonne;  margin: 0; width: 100%;}
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul li{ list-style: none; width: 100%;}
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul li a{ position: relative; width: 100%; display: block; padding: 7px 0; text-decoration: none; font-weight: 600; color: #9669ff; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul li a span.fury{ margin-right: 10px; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul li a span{ color: #f2f2f2; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul li a span.clan-tag{ margin-right: 10px; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul li a .role{ color: #ffc107; position: absolute; right: 0; top: 5px; }

.content-inner .sw-row .sw-buttons.sub-buttons .sw-button.sw-info{ justify-content: center; align-items: center; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .row-item{ padding: 30px 30px 0 30px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .row-item .elem-item{ color: #ff1000; flex: 1 0 auto; font-weight: 600; font-size: 16px; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .row-item .elem-item span{ color: #f2f2f2; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .row-item .elem-item+.elem-item{ text-align: right; }
.content-inner .table-responsive{ padding: 20px 30px 30px; width: 100%;}
.content-inner .table-responsive .table{ width: 100%;}
.table>:not(caption)>*>*{ background-color: #172027; color: #f2f2f2; border-color: #212b35; }
.table tbody tr td{ vertical-align: middle; }
.table thead tr th+th,
.table tbody tr td+td{ text-align: right;}
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button img{ width: auto; height: auto; max-width: 100%; max-height: 100%;}
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button.sw-contact{ background-image: url('../images/promo_clan_2.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .btn-mail{ transition: all .3s ease; margin-top: 10px; margin-top: 10px; border-color: #ffc107; color: #ffc107; font-weight: 600; }
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .btn-mail:hover,
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .btn-mail:focus,
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .btn-mail:active,
.content-inner .sw-row .sw-buttons.sub-buttons .sw-button .btn-mail.active{ background-color: #ffc107; color: #fff; }

.content-inner .sw-row .welcome-prompt::before,
.content-inner .sw-row .sw-buttons .sw-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            0deg,
            transparent,
            transparent 30%,
            rgba(0,255,255,0.3)
    );
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}
.content-inner .sw-row .welcome-prompt:hover,
.content-inner .sw-row .sw-buttons .sw-button:hover {
    /*transform: scale(1.05);*/
    box-shadow: 0 0 20px rgba(0,255,255,0.5);
    z-index: 40;
}

.content-inner .sw-row .welcome-prompt:hover::before,
.content-inner .sw-row .sw-buttons .sw-button:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}


.scroll-bar::-webkit-scrollbar {
    width: 10px;
    right: -10px;
}

.scroll-bar::-webkit-scrollbar-thumb {
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.1);
}

.scroll-bar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}


@media screen and (max-width: 1400px) {
    .content-box{ padding: 30px;}

}

@media screen and (max-width: 1300px) {
    .content-inner .sw-row .sw-buttons.sub-buttons .sw-button ul li a .role{ position: relative; top: unset; right: unset; }
    .content-inner .sw-row{ flex-direction: column; }
    .content-inner .sw-row .welcome-prompt{ width: 100%; }
    .content-inner .sw-row .sw-buttons{ height: auto; gap: 15px; max-width: 100%; width: 100%; flex-direction: row; }
    .content-inner .sw-row .sw-buttons:not(.sub-buttons) .sw-button+.sw-button{ margin-top: 0;}
    .content-inner .sw-row .sw-buttons.sub-buttons .sw-button.sw-info{ display: none; }

}

@media screen and (max-width: 700px) {
    .content-inner .sw-row .sw-buttons,
    .content-inner .sw-row .sw-buttons.sub-buttons{ flex-direction: column; }
    .content-box{ display: block; overflow-y: auto; height: 100vh; }
}