@charset "utf-8";
/* ==========================================================================
   MU Online "blue" theme for DragonMU CMS
   Loaded after bootstrap.min.css and custom.css - this file owns the layout,
   the chrome and the light content skin. The old dark style.css is not used.
   ========================================================================== */

/* --- 0. fonts ----------------------------------------------------------- */
@font-face { font-family:"Lato"; font-style:normal; font-weight:400; font-display:swap;
    src:url("../fonts/lato-regular.woff2") format("woff2"), url("../fonts/lato-regular.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:700; font-display:swap;
    src:url("../fonts/lato-bold.woff2") format("woff2"), url("../fonts/lato-bold.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:900; font-display:swap;
    src:url("../fonts/lato-black.woff2") format("woff2"), url("../fonts/lato-black.woff") format("woff"); }

/* --- 1. base ------------------------------------------------------------ */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-width: 1140px;
    background: #000206 url("../mu/contents/bg_main_season21.jpg") center 40px no-repeat;
    font-family: "Lato", "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}
body, body * { font-family: "Lato", "Segoe UI", Arial, Helvetica, sans-serif; }
a { color: #3773bd; text-decoration: none; }
a:hover, a:focus { color: #2b5f9f; text-decoration: none; }
img { border: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: #222; }
p { margin: 0 0 12px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.clearfix:after { content: ""; display: block; clear: both; }

/* --- 2. layout ---------------------------------------------------------- */
.wrapper_web { width: 1140px; margin: 0 auto; position: relative; }
.container_web { overflow: hidden; background: #fff; }
.content { float: left; width: 840px; min-height: 520px; padding: 34px 30px 60px 40px; }
.sidebar { float: right; width: 300px; padding: 34px 40px 60px 20px; }

/* --- 3. global top bar -------------------------------------------------- */
#gnb_wrap { position: relative; z-index: 1100; height: 32px; background: #111417; }
.gnb_inner { width: 1140px; margin: 0 auto; overflow: hidden; }
.gnb_inner ul { float: left; }
.gnb_inner ul.right { float: right; }
.gnb_inner li { float: left; }
.gnb_inner li a { display: block; padding: 0 12px; height: 32px; line-height: 32px; color: #9aa3ad; font-size: 12px; }
.gnb_inner li a:hover { color: #fff; }
.gnb_inner li.on a { color: #ffd200; }
.gnb_inner li + li { background: url("../mu/common/bg_bar02.gif") 0 11px no-repeat; }
.gnb_inner ul.right li:first-child { background: none; }

/* --- 4. main navigation ------------------------------------------------- */
.lnb_wrp { position: relative; height: 190px; background: none; }
/* the dark band under the menu is painted edge to edge, not only across the
   1140px container - otherwise there is a hard vertical seam where it stops */
.lnb_wrp:before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(50% - 50vw); width: 100vw; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,2,6,.88) 0%, rgba(0,2,6,.45) 55%, rgba(0,2,6,0) 100%); }
.lnb_bx { width: 1140px; margin: 0 auto; position: relative; z-index: 1; height: 190px; }
/* 100vw counts the scrollbar, so clip the couple of stray pixels - only while
   the 1140px layout fits, so narrow screens keep their normal scrolling */
@media (min-width: 1160px) { body { overflow-x: hidden; } }
.lnb_logo { position: absolute; left: 50%; top: 15px; display: block; width: 200px; height: 141px;
    margin-left: -100px; background: url("../mu/common/img_logo03.png?s22b") no-repeat center top; z-index: 1002; }
.lnb_nav > li { position: absolute; top: 46px; text-align: center; }
.lnb_nav > li > a { display: block; color: #eaeaea; font-size: 17px; font-weight: 700; }
.lnb_nav > li > a:hover, .lnb_nav > li.on > a { color: #ffd200; }
.lnb_nav .lnb_sub_list { display: none; padding-top: 10px; }
.lnb_nav li:hover .lnb_sub_list { display: block; }
.lnb_nav .sell { padding-bottom: 4px; }
.lnb_nav .sell a { display: inline-block; padding: 1px 2px; color: #99a4ae; font-size: 12px; }
.lnb_nav .sell a:hover { color: #3773bd; }
.lnb_nav li.cnum0 { left: 14px;   width: 110px; }
.lnb_nav li.cnum1 { left: 134px;  width: 120px; }
.lnb_nav li.cnum2 { left: 264px;  width: 130px; }
.lnb_nav li.cnum3 { left: 700px;  width: 90px;  }
.lnb_nav li.cnum4 { left: 800px;  width: 120px; }
.lnb_nav li.cnum5 { left: 930px;  width: 100px; }
.lnb_nav li.cnum6 { left: 1040px; width: 86px;  }

/* --- 5. hero (home only) ------------------------------------------------ */
.hero { position: relative; padding-bottom: 0; background: url("../mu/contents/bg_main01.png") 0 100% repeat-x; }
.hero:after { content: ""; display: block; clear: both; }
.roll_main_wrap { float: left; width: 840px; position: relative; }
.roll_main_wrap ul li img { display: block; width: 840px; height: 350px; }
.roll_main_wrap .bx-pager { position: absolute; left: 60px; bottom: 22px; z-index: 20; font-size: 0; line-height: 0; }
.roll_main_wrap .bx-pager div { display: inline; }
.roll_main_wrap .bx-pager div a { margin-left: 4px; display: inline-block; width: 22px; height: 0; padding-top: 17px;
    overflow: hidden; background: url("../mu/contents/bul_page01_off.png") 0 0 no-repeat; vertical-align: top; }
.roll_main_wrap .bx-pager div a.active { background: url("../mu/contents/bul_page01_on.png") 0 0 no-repeat; }
.btn_downLoad { float: right; width: 300px; padding-top: 122px; }
.btn_downLoad a { position: relative; left: -46px; display: block; width: 300px; height: 0;
    padding-top: 228px; overflow: hidden;
    background: url("../mu/contents/btn_gameStatr01_off.png") 0 0 no-repeat; }
.btn_downLoad a:hover { background: url("../mu/contents/btn_gameStatr01_on.png") 0 0 no-repeat; }

/* --- 6. sub page title band --------------------------------------------- */
.page_head { position: relative; z-index: 10; padding: 10px 0 34px; }
.page_head h1 { color: #fff; font-size: 34px; font-weight: 700; line-height: 1.1; }
.page_head p { margin: 10px 0 0; color: #b9c7d8; font-size: 13px; }
/* season art in the title band (guides set page_art) - sits left of the online counter */
.page_head--art:after { content: ""; position: absolute; top: 0; right: 96px; bottom: 0; width: 230px; z-index: -1;
    background: var(--art) no-repeat right center / cover; opacity: .92;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 65%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 65%); }

/* --- 7. sidebar --------------------------------------------------------- */
.side_box { margin-bottom: 18px; }
.side_title { margin-bottom: 9px; padding-bottom: 7px; border-bottom: 2px solid #16293f;
    color: #16212e; font-size: 14px; font-weight: 700; }
.side_title span { float: right; color: #9aa3ad; font-size: 12px; font-weight: 400; }

/* server status */
.server { overflow: hidden; padding: 9px 0; border-bottom: 1px dotted #e2e6ea; }
.server_status-icon { float: left; width: 34px; }
.server_status-icon img { width: 30px; height: auto; }
.server_status-info { overflow: hidden; }
.status_info-name { color: #333; font-size: 13px; font-weight: 700; }
.status_info-name span { color: #2a9b6e; font-weight: 400; }
.status_info-progress { height: 6px; margin: 6px 0 5px; background: #e6eaee; }
.status_info-progress span { display: block; height: 6px; background: #3773bd; }
.status_info-status span { display: inline-block; margin-right: 10px; color: #8a929b; font-size: 11px; }
.status_info-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2a9b6e; }
.status_info-status i.offline { background: #d04545; }

/* login / account */
.login-form { padding: 16px; border: 1px solid #e3e3e3; background: #fafbfc; }
.login-title { margin-bottom: 12px; color: #222; font-size: 16px; font-weight: 700; }

/* compact account panel - sentence case, nothing forced to capitals */
.lk-form { padding: 11px 12px; border: 1px solid #dfe5ec; border-top: 3px solid #16293f; background: #fff; }
.lk-title { margin-bottom: 8px; padding: 0 0 7px; border-bottom: 1px solid #eef1f5;
    text-align: left; color: #16212e; font-size: 13px; font-weight: 700;
    text-transform: none; letter-spacing: 0; }
.login-title span { float: right; color: #9aa3ad; font-size: 12px; font-weight: 400; }
.login-form p { margin: 0 0 10px; }
.login-form input[type=text], .login-form input[type=password] {
    width: 100%; padding: 9px 10px; border: 1px solid #ccc; background: #fff; color: #444; font-size: 13px; }
.login-button, .btn_blue {
    display: block; width: 100%; margin-top: 6px; padding: 11px 0; border: 0;
    background: #3773bd; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.login-button:hover, .btn_blue:hover { background: #2b5f9f; color: #fff; }
.lost-pass { display: block; margin-top: 10px; color: #8a929b; font-size: 12px; text-align: center; }
.lk-coins { overflow: hidden; padding: 4px 0; border-bottom: 1px dotted #e7ebf0; font-size: 12px; line-height: 1.4; }
.lk-coins .coins { float: right; color: #16293f; font-weight: 700; }
.lk-coins .username { color: #8b95a1; font-size: 12px; text-transform: none; letter-spacing: 0; }
.lk-form ul { margin-top: 8px; }
.lk-form ul li { padding: 0; border-bottom: 1px solid #f1f4f7; }
.lk-form ul li:last-child { border-bottom: 0; }
.lk-form ul li a { display: block; padding: 5px 7px; color: #3f4a56; font-size: 12px; font-weight: 600; }
.lk-form ul li a:hover { background: #f4f7fb; color: #16293f; }
.lk-form ul li.lk-out a { color: #a4533f; }
.lk-form ul li.lk-out a:hover { background: #fdf1ee; color: #8d3f2d; }
/* custom.css decorates this menu for the old dark theme - drop the dark rule
   above each item, its arrow bullet and its navy hover block */
.lk-form ul li a { border-top: 0; }
.lk-form ul li:before, .lk-form ul li:last-child:before { content: none; display: none; }
.lk-form ul li:hover { background: none; box-shadow: none; }
.lk-coins .coins { margin: 0; }

/* search */
.side_search { position: relative; margin-bottom: 26px; }
.side_search input { width: 100%; padding: 9px 34px 9px 10px; border: 1px solid #ccc; background: #fff; font-size: 13px; }
.side_search button { position: absolute; right: 1px; top: 1px; width: 32px; height: 32px; border: 0;
    background: url("../mu/common/btn_search01.gif") no-repeat center center; text-indent: -999em; cursor: pointer; }

/* top players widget */
.player-info { overflow: hidden; padding: 8px 0; border-bottom: 1px dotted #e2e6ea; }
.player-info .top-number { float: left; width: 24px; color: #cf8d00; font-weight: 700; }
.player-info .top-ava { float: left; width: 34px; }
.player-info .top-ava img { width: 28px; height: auto; }
.player-info .top-ava .bloor-ava { display: none; }
.player-info .top-name { overflow: hidden; color: #333; font-size: 13px; font-weight: 700; }
.player-info .top-r { clear: both; padding-left: 58px; color: #8a929b; font-size: 11px; }

/* events + quick banners */
#serverEvents .eventBody li { padding: 8px 0; border-bottom: 1px dotted #e2e6ea; color: #666; font-size: 12px; }
.side_banners li { margin-bottom: 10px; }
.side_banners img { display: block; width: 100%; height: auto; }

/* --- 8. news feed (home) ------------------------------------------------ */
.news_head { position: relative; margin-bottom: 18px; padding-bottom: 10px;
    border-bottom: 2px solid #3773bd; color: #222; font-size: 18px; font-weight: 700; }
.news_head .all { position: absolute; right: 0; top: 4px; color: #888; font-size: 12px; font-weight: 400; }
.news_head .all:hover { color: #3773bd; }
.cat { display: inline-block; margin-bottom: 7px; padding: 2px 8px; background: #eef3fa; color: #3773bd;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cat.maint  { background: #eaf1fb; color: #2b5f9f; }
.cat.patch  { background: #e9f6f0; color: #2a9b6e; }
.cat.event  { background: #fdf3e2; color: #b07a12; }
.cat.notice { background: #fdecec; color: #c73c3c; }
.news_b .tabs { overflow: hidden; margin-bottom: 6px; border-bottom: 2px solid #3773bd; }
.news_b .tabs li { float: left; }
.news_b .tabs li a { display: block; padding: 0 20px; height: 36px; line-height: 36px;
    color: #8a929b; font-size: 13px; font-weight: 700; }
.news_b .tabs li a:hover { color: #3773bd; }
.news_b .tabs li.on a { background: #3773bd; color: #fff; }
.news_b .list li { overflow: hidden; padding: 18px 0; border-bottom: 1px dotted #e2e6ea; }
.news_b .list li:hover { background: #f7f9fb; }
.news_b .list .thumb { float: left; width: 132px; margin-right: 20px; }
.news_b .list .thumb img { display: block; width: 132px; height: 88px; }
.news_b .list .body { overflow: hidden; padding-right: 10px; }
.news_b .list h3 { margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.news_b .list h3 a { color: #26313d; }
.news_b .list h3 a:hover { color: #3773bd; }
.news_b .list p { margin-bottom: 8px; color: #78828d; font-size: 12px; line-height: 1.6; }
.news_b .list .date { color: #a7afb8; font-size: 12px; }

/* --- 9. footer ---------------------------------------------------------- */
.footer { clear: both; padding: 40px 0 0; background: #efefef; }
.footer .sitemap { overflow: hidden; padding: 0 60px 40px; }
.footer .sitemap .map { float: left; width: 145px; }
.footer .sitemap .map strong { display: block; margin-bottom: 8px; }
.footer .sitemap .map strong a { color: #444; font-size: 13px; }
.footer .sitemap .map li { padding-bottom: 5px; }
.footer .sitemap .map li a { color: #888; font-size: 12px; }
.footer .sitemap .map li a:hover { color: #3773bd; }
.footer .siteInfo { padding: 26px 60px 34px; border-top: 1px solid #d3d3d3; background: #e7e7e7; }
.footer .siteInfo ul { overflow: hidden; margin-bottom: 12px; }
.footer .siteInfo ul li { float: left; padding: 0 14px; background: url("../mu/common/bg_bar02.gif") 0 1px no-repeat;
    font-size: 11px; line-height: 1.1; }
.footer .siteInfo ul li:first-child { padding-left: 0; background: none; }
.footer .siteInfo ul li a { color: #888; }
.footer .siteInfo ul li a strong { color: #444; font-size: 12px; }
.footer .siteInfo .cp { color: #8a8a8a; font-size: 11px; }
.footer .siteInfo .disclaimer { color: #9a9a9a; font-size: 11px; }
.footer .soc-links { padding-bottom: 14px; }
.footer .soc-links a { display: inline-block; margin-right: 10px; color: #777; font-size: 12px; }

/* ==========================================================================
   10. COMPONENT SKIN  -  light page, navy data bars, gold accents
   The ~90 views inherited from the old DragonMU theme render inside the white
   content panel. The old sheet (custom.css) pins its dark colours down with
   !important, so the overrides here have to carry !important too. Nothing in
   those views had to be edited.

   Palette:  ink #16212e   muted #5d6b7a   line #dfe5ec
             navy #16293f  gold #c8a24a    wash #f6f8fb
   ========================================================================== */

/* --- typography --------------------------------------------------------- */
.content h1 { margin-bottom: 16px; color: #16212e; font-size: 24px; }
.content h2 { margin-bottom: 14px; color: #16212e; font-size: 20px; }
.content h3 { margin-bottom: 12px; color: #16212e; font-size: 17px; }
.content h4 { margin-bottom: 10px; color: #16212e; font-size: 15px; }
.content p  { color: #5d6b7a; }
/* bullets only for prose lists inside cards / articles - the generic version
   was putting discs in front of the tab bar and the news list */
.box p + ul, .box p + ol, .box ul.bullets, .box ol.bullets { margin: 0 0 14px 18px; }
.box p + ul li, .box p + ol li, .box ul.bullets li, .box ol.bullets li { margin-bottom: 5px; list-style: disc; color: #5d6b7a; }
.news_b .tabs, .news_b .tabs li, .news_b .list, .news_b .list > li,
.class_top, .pagination li, .dropdown-menu li, .nav-tabs li, .lk-form ul li { list-style: none; }
.content hr { border: 0; border-top: 1px solid #dfe5ec; margin: 22px 0; }
.content a { color: #16293f; }
.content a:hover { color: #c8a24a; }

/* --- cards -------------------------------------------------------------- */
.content-wrapper { margin-bottom: 10px; }
.content-wrapper .box, .box {
    margin-bottom: 18px !important; padding: 20px 22px 22px !important;
    border: 1px solid #dfe5ec !important; border-top: 3px solid #16293f !important;
    background: #fff !important; color: #5d6b7a !important; }
.content-wrapper .box .box, .box .box {
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.box h2 {
    margin: 0 0 15px !important; color: #16212e !important; font-size: 16px !important;
    font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.box h2:after { content: ""; display: block; width: 46px; height: 3px; margin-top: 8px; background: #c8a24a; }
.box h2 .pull-right, .box h2 .pull-right * { text-transform: none; letter-spacing: 0; }
.box h3 { color: #16212e !important; }

/* --- tables ------------------------------------------------------------- */
.content table, .table, .account-table, .ticket {
    width: 100%; margin-bottom: 0 !important; border-collapse: collapse; background: transparent !important; }
.table-bordered { border: 0 !important; background: transparent !important; }
.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td, .table-bordered > thead > tr > th,
.table > tbody > tr > td, .table > tbody > tr > th { border: 0 !important; }

.table > thead > tr > th, .table-striped tr:first-child th, .ticket tr:first-child th {
    padding: 12px 14px !important; background: #16293f !important; color: #fff !important;
    border: 0 !important; font-size: 11px !important; font-weight: 700 !important;
    text-align: left; text-transform: uppercase; letter-spacing: .09em; }
.table > tbody > tr > td, .ticket td {
    padding: 12px 14px !important; border-bottom: 1px solid #dfe5ec !important;
    color: #5d6b7a !important; font-size: 13px !important; vertical-align: middle !important; }
.table-striped > tbody > tr:nth-of-type(odd)  { background: #fff !important; }
.table-striped > tbody > tr:nth-of-type(even) { background: #f6f8fb !important; }
.table-striped > tbody > tr:first-child, .table-striped > tbody > tr:first-child:hover { background: transparent !important; }
.table-striped > tbody > tr:hover, .table-hover > tbody > tr:hover { background: #eef3f9 !important; }
.table td a:not(.btn) { color: #16293f !important; font-weight: 700; }
.table td a:not(.btn):hover { color: #c8a24a !important; }

/* label column (account information style tables) */
.account-table tr:first-child th, .account-table tr:first-child td { border-top: 0 !important; }
.account-table tr th, .account-table tr td { padding: 12px 14px !important; border-bottom: 1px solid #dfe5ec !important; }
.account-table:not(.table-striped) tr th {
    width: 170px; background: #f6f8fb !important; color: #16212e !important;
    font-size: 12px !important; font-weight: 700 !important; }
.grandResetLabel { vertical-align: super; color: #c8a24a !important; font-size: 9px; font-weight: 700; }

/* ranking tables keep the same bar */
.table-red-heading thead tr, .table-red-heading thead tr th,
.rankings-table thead tr, .rankings-table thead tr th {
    background: #16293f !important; color: #fff !important; border: 0 !important; }
.table-red-heading tr td img { width: auto; max-height: 22px; box-shadow: none; vertical-align: middle; }
.rankings-player-class-img img { max-width: 34px; height: auto; }
.ticket { border: 0 !important; background: transparent !important; }
.ticket td, .ticket tr.even td { background: transparent !important; }
.ticket th:first-child { padding-left: 14px !important; }
.ticket tr { text-align: left; }

/* --- buttons ------------------------------------------------------------ */
.btn, .btn-primary, .btn-danger, .btn-default, .btn-danger-rounded {
    display: inline-block; width: auto !important; height: auto !important;
    padding: 9px 20px !important; border: 0 !important; border-radius: 2px !important;
    background: #16293f !important; color: #fff !important;
    font-size: 11px !important; font-weight: 700 !important; line-height: 1.5 !important;
    letter-spacing: .08em; text-transform: uppercase; text-align: center;
    text-shadow: none !important; box-shadow: none !important; cursor: pointer; }
.btn:hover, .btn:focus, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-default:hover, .btn-danger-rounded:hover, .btn-danger-rounded:focus, .btn-danger-rounded:active {
    background: #c8a24a !important; color: #16212e !important; }
.btn-xs { padding: 6px 14px !important; font-size: 10px !important; }
.btn-sm { padding: 7px 16px !important; font-size: 10px !important; }
.btn-group .btn + .btn { margin-left: 4px; }
.caret { margin-left: 4px; }

/* --- forms -------------------------------------------------------------- */
.form-group { margin-bottom: 14px; }
.box label, .control-label, .contro-label {
    display: block; margin-bottom: 5px; color: #16212e !important;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.box .checkbox label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: #5d6b7a !important; }
.form-control, .box .form-control, select.form-control, textarea.form-control {
    width: 100%; height: auto !important; padding: 10px 12px !important;
    border: 1px solid #cfd6de !important; border-radius: 2px !important;
    background: #fff !important; color: #16212e !important; font-size: 13px; box-shadow: none !important; }
.form-control:focus, .box .form-control:focus { border-color: #16293f !important; box-shadow: none !important; }
.input-group-addon { border: 1px solid #cfd6de !important; border-radius: 2px !important;
    background: #f6f8fb !important; color: #16212e !important; }
.help_text, .help-block { color: #8a939d; font-size: 12px; }
.registration-form p { margin-bottom: 10px; color: #5d6b7a; }
.registration-form ul { margin: 0 0 16px 18px; }
.registration-form ul li { list-style: disc; color: #5d6b7a; font-size: 13px; }
.registration-form form { margin-top: 18px; }

/* --- alerts ------------------------------------------------------------- */
.alert { margin-bottom: 18px; padding: 13px 16px; border: 1px solid; border-left-width: 3px; border-radius: 2px; font-size: 13px; }
.alert-danger  { border-color: #e9c3c3; background: #fdeded; color: #a13333; }
.alert-success { border-color: #bfe0cf; background: #eef8f2; color: #1f7a55; }
.alert-info    { border-color: #cddfef; background: #eef4fb; color: #1e4a7a; }
.alert-warning { border-color: #eddcb6; background: #fdf6e7; color: #8a6412; }
.label { border-radius: 2px !important; padding: 4px 9px !important; font-size: 10px !important; letter-spacing: .06em; }
.label-danger { background: #c0392b !important; }
.label-success { background: #2f9e6b !important; }

/* --- dropdowns, tabs, pagination ---------------------------------------- */
.dropdown-menu { border: 1px solid #dfe5ec; border-radius: 2px; box-shadow: 0 6px 14px rgba(0,0,0,.09); }
.dropdown-menu > li > a, .dropdown-item { padding: 8px 14px; color: #4a545f; font-size: 13px; }
.dropdown-menu > li > a:hover, .dropdown-item:hover { background: #f6f8fb; color: #16293f; }
.nav-tabs { border-bottom: 2px solid #16293f; }
.nav-tabs > li > a { border: 0; border-radius: 0; color: #8a939d; font-weight: 700; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border: 0; background: #16293f; color: #fff; }
.pagination { margin: 22px 0 0; }
.pagination > li > a, .pagination > li > span { border-color: #dfe5ec; border-radius: 0 !important; color: #5d6b7a; }
.pagination > li > a:hover { border-color: #16293f; background: #f6f8fb; color: #16293f; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    border-color: #16293f; background: #16293f; color: #fff; }

/* --- popdown modals (account actions; the shops load their own dark skin) - */
#popdown-dialog { background: #fff !important; border: 1px solid #dfe5ec; border-top: 3px solid #16293f; border-radius: 2px; box-shadow: 0 18px 50px rgba(10,20,35,.28); }
.popdown-content .header h2 { color: #16212e; }
.popdown-content .body { color: #5d6b7a; }
.popdown-content h3 { margin: 5px 0 10px; padding-bottom: 8px; border-bottom: 1px solid #dfe5ec; color: #16212e; font-size: 16px; }
.popdown-content label { margin-bottom: 4px; color: #16212e; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.popdown-content .checkbox label { text-transform: none; letter-spacing: 0; font-size: 13px; color: #5d6b7a; }
.popdown-content hr { border-color: #dfe5ec; }

/* --- VIP table (the view ships its own dark inline CSS) ------------------ */
.vip-tbl th { color: #fff !important; background: #16293f !important; border-bottom: 0 !important;
    padding: 12px 14px !important; letter-spacing: .09em; }
.vip-tbl td { color: #5d6b7a !important; border-bottom: 1px solid #dfe5ec !important; padding: 12px 14px !important; }
.vip-tbl td:first-child { color: #16212e !important; }
.vip-tbl tbody tr:hover td { background: #eef3f9 !important; }
.vip-current-row td { background: #fdf6e7 !important; }
.vip-pp-req { color: #9aa3ad !important; }
.vip-buff { color: #1e4a7a !important; }
.vip-reward { color: #5d6b7a !important; }
.vip-reward .new-item { color: #2f9e6b !important; }
.vip-reward .new-cmd { color: #1f7a55 !important; }
.vip-badge { background: linear-gradient(135deg,#c9a227,#f0c040) !important; color: #1a1100 !important; }

/* --- widgets reused inside views ---------------------------------------- */
.content .sidebar-title, .sidebar .sidebar-title {
    width: auto; height: auto; line-height: 1.3; margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 2px solid #16293f; background: none; color: #16212e; font-size: 15px; text-transform: none; }
.tab-links { margin: 10px 0; }
.tab-links a, .rank-tab-links { display: inline-block; margin-right: 6px; padding: 5px 12px;
    border: 1px solid #dfe5ec; color: #5d6b7a; font-size: 12px; }
.tab-links a:hover, .rank-tab-links:hover { border-color: #16293f; color: #16293f; }

/* inventory / item grids keep the game plate */
.grid-item-inv, .item-slot { background-color: #10181f; border: 1px solid #cfd6de; }
.hover_inv { border-color: #c8a24a; }
.select-imitation { background-color: #f6f8fb; border-top: 3px solid #16293f; border-bottom: 3px solid #16293f;
    box-shadow: 0 -1px 0 #16293f; color: #16212e; }
.select-imitation-list { background: #fff; border: 1px solid #dfe5ec; }

/* countdown */
.countdown-block { margin: 18px 0; padding: 16px; border: 1px solid #dfe5ec; border-top: 3px solid #c8a24a; background: #fff; text-align: center; }
.countdown-block .timer-n { margin-bottom: 8px; color: #a8801f; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.countdown-timer { color: #16212e; font-size: 22px; font-weight: 700; }

/* back-to-top */
.toTop-fon { position: fixed; right: 24px; bottom: 24px; z-index: 900; }
.toTop { width: 40px; height: 40px; background: rgba(22,41,63,.9); cursor: pointer; }
.toTop:after { content: "\25B2"; display: block; color: #fff; font-size: 12px; line-height: 40px; text-align: center; }

/* --- 10b. top-of-class widget (sidebar) ---------------------------------- */
.class_top { border-top: 1px solid #eef1f5; }
.class_top-row { display: flex; align-items: center; gap: 8px; padding: 4px 3px;
    border-bottom: 1px solid #f1f4f7; color: #3f4a56; }
.class_top-row:hover { background: #f4f7fb; }
.class_top-ico { flex: 0 0 30px; width: 30px; height: 30px; overflow: hidden;
    border: 1px solid #dfe5ec; background: #0f1822; }
.class_top-ico img { display: block; width: 100%; height: 100%; }
.class_top-body { flex: 1 1 auto; min-width: 0; }
.class_top-name { display: block; color: #16212e; font-size: 12px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.class_top-name .f16 { margin-right: 3px; vertical-align: -2px; }
.class_top-name i.on { display: inline-block; width: 6px; height: 6px; margin-left: 4px;
    border-radius: 50%; background: #2f9e6b; vertical-align: middle; }
.class_top-class { display: block; color: #98a3b0; font-size: 11px;
    text-transform: none; letter-spacing: 0; }
.class_top-res { flex: 0 0 auto; color: #16293f; font-size: 14px; font-weight: 700; }
.class_top-res em { margin-left: 3px; color: #c8a24a; font-size: 9px; font-style: normal;
    font-weight: 700; letter-spacing: .06em; }
.class_top-row:hover .class_top-name { color: #16293f; }
.class_top-empty { padding: 12px 4px; color: #98a3b0; font-size: 12px; }

/* --- 10d. home block tabs (News / Changelogs / Events) --------------------
   Three equal boxes with an icon, a label and a one-line subtitle. The
   active one goes navy with a gold top edge.
   -------------------------------------------------------------------------- */
.news_b .tabs.tabs_block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    overflow: visible; margin-bottom: 14px; border-bottom: 0; }
.news_b .tabs.tabs_block li { float: none; }
.news_b .tabs.tabs_block li a { display: flex; align-items: center; gap: 12px; height: auto;
    padding: 10px 16px; line-height: 1.2; border: 1px solid #dfe5ec; border-top: 3px solid #dfe5ec;
    background: #f8fafc; color: #5d6b7a; text-transform: none; }
.news_b .tabs.tabs_block li a svg { flex: 0 0 20px; width: 20px; height: 20px; color: #9aa5b1; }
.news_b .tabs.tabs_block li a strong { display: block; color: #16212e; font-size: 13px; font-weight: 700; }
.news_b .tabs.tabs_block li a small { display: block; margin-top: 1px; color: #9aa5b1; font-size: 10.5px; letter-spacing: .02em; }
.news_b .tabs.tabs_block li a:hover { border-top-color: #16293f; color: #5d6b7a; }
.news_b .tabs.tabs_block li.on a { background: #16293f; border-color: #16293f; border-top-color: #c8a24a; color: #fff; }
.news_b .tabs.tabs_block li.on a strong { color: #fff; }
.news_b .tabs.tabs_block li.on a small { color: #b9c6d6; }
.news_b .tabs.tabs_block li.on a svg { color: #c8a24a; }

/* --- 10d2. static news: whole article in the list ------------------------ */
.news_b .list li { padding: 22px 0; }
.news_b .list .body { padding-right: 0; }
.news_b .list .body .date { display: block; margin: -2px 0 12px; }
.news_b .list .body p { margin-bottom: 10px; color: #555; font-size: 13px; line-height: 1.8; }
.news_b .list .body h4 { margin: 16px 0 6px; color: #16212e; font-size: 14px; }
.news_b .list .body ul { margin: 0 0 12px 18px; }
.news_b .list .body ul li { margin-bottom: 4px; padding: 0; border: 0; list-style: disc; overflow: visible;
    color: #555; font-size: 13px; line-height: 1.7; }
.news_b .list .body ul li:hover { background: none; }

/* --- 10e. events tab: schedule table -------------------------------------- */
.ev_pane[hidden] { display: none; }
.ev_tbl { width: 100%; border-collapse: collapse; }
.ev_tbl th { padding: 9px 12px; background: #16293f; color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.ev_tbl td { padding: 9px 12px; border-bottom: 1px solid #e3e8ee; color: #5d6b7a; font-size: 13px; }
.ev_tbl tbody tr:nth-child(even) td { background: #f8fafc; }
.ev_tbl td.n { color: #16212e; font-weight: 700; }
.ev_tbl td.t { color: #16293f; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev_tbl td.r { white-space: nowrap; }
.ev_tbl td.tm { color: #9aa5b1; font-size: 12px; }
.ev_tbl td.tm em { font-style: normal; color: #c8a24a; font-weight: 700; }
/* countdown states (custom.js used to inline dark-theme colours here) */
.ev_tbl .ev_h1   { color: #b07a12; }
.ev_tbl .ev_m30  { color: #d0641e; }
.ev_tbl .ev_open { color: #2f9e6b; }

/* --- 10c. item tooltips --------------------------------------------------
   A fully-optioned item (legendary + set options + serials) is taller than
   most screens, so cap the height and scroll the content rather than letting
   the box run off the top of the window.
   -------------------------------------------------------------------------- */
.tippy-tooltip.item-theme { padding: 6px !important; font-size: 12px; line-height: 1.35; }
.tippy-tooltip.item-theme .tippy-content {
    max-height: calc(100vh - 34px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px; }
.tippy-tooltip.item-theme .tippy-content::-webkit-scrollbar { width: 7px; }
.tippy-tooltip.item-theme .tippy-content::-webkit-scrollbar-track { background: #141210; }
.tippy-tooltip.item-theme .tippy-content::-webkit-scrollbar-thumb { background: #4a3b33; border-radius: 4px; }
.tippy-tooltip.item-theme .tippy-content { scrollbar-width: thin; scrollbar-color: #4a3b33 #141210; }

/* --- 11. news article page ---------------------------------------------- */
.news_article .article_head { padding-bottom: 18px; border-bottom: 1px solid #e6eaee; }
.news_article .article_head h2 { margin-bottom: 8px; color: #222; font-size: 22px; }
.news_article .meta { color: #9aa3ad; font-size: 12px; }
.news_article .meta span + span { margin-left: 14px; }
.news_article .article_cover { margin: 22px 0; text-align: center; }
.news_article .article_cover img { max-width: 100%; height: auto; box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }
.news_article .article_body { padding: 22px 0 30px; color: #555; font-size: 13px; line-height: 1.9; }
.news_article .article_body img { max-width: 100%; height: auto; }
.news_article .article_body h3, .news_article .article_body h4 { margin: 22px 0 10px; color: #222; }
.news_article .article_body ul, .news_article .article_body ol { margin: 0 0 14px 18px; list-style: disc; }
.news_article .article_body li { margin-bottom: 5px; list-style: disc; }
.news_article .pager { padding-top: 6px; }

/* ============================================================
   12. ONLINE COUNT BAR   (MuLemuria widget)
   Same widget, same markup, same rules, same 221px scale and pink
   fill.  No panel behind it - it sits transparent on the blue
   artwork, so the ruler graphic and the labels are the light
   version (the graphic is their PNG, recoloured white).
   ============================================================ */
#gnb_wrap { display: none !important; }

.headerInfo {
	position: absolute;
	/* sits at the right end of the client-download panel, centred in the
	   slider band: band = 312..540, widget ~189px tall, ~20px clear each end */
	top: 332px;
	right: 14px;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.online_web { display: flex; flex-wrap: nowrap; background: none; }

.onlineBlock { text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.13); }
.onlineBlock:last-child { border-right: 1px solid rgba(255, 255, 255, 0.13); }

.onlineBlock, .onlineBlock * { font-family: TimesNewRoman,"Times New Roman",Times,serif; }
.onlineBlock { width: 75px; text-transform: uppercase; }

.onlineBlock-scale { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAADdCAYAAAC7blJxAAAAwElEQVR42u3awQnDIBQG4GfJjIFMkB0yQHZwAsEl7a0YSXsoLW3g+0/KQw/vU0+m1lqLLjWXFEPmddm7+jbUDuuniEg1l3g3NZc0r8tjfosP5/83nCKi9T04Q3kVKFCgQIECBQoUKFCgQIECBQoUKFCgQIECBQoUKFCgQIECBQoUKFCgQIECBQoUKFB+gJKGv8nPsnfj7do9/A7KeFBPGt/X3RTPFxQoUKBAgQIFChQoUKBAgQIFChQoUKBAuQ7KHcwq85kidy8SAAAAAElFTkSuQmCC) no-repeat; background-size: 20px 100%; height: 130px; width: 20px; margin: 0 auto; margin-bottom: 10px; display: flex; align-items: flex-end; justify-content: center; }
.onlineBlock-scale span {
	width: 5px; height: 100%; display: block; border-radius: 2px;
	/* load colour: green at the bottom of the scale, red at the top.
	   The gradient is locked to the full 173px ruler and anchored to its
	   bottom, so a given player count always gets the same colour -
	   the bar just reveals more of it as the server fills up. */
	background-image: linear-gradient(to top,
		#20c47a 0%, #6fd13f 30%, #d8d431 52%, #f5a623 72%, #f2612c 87%, #ec2b2b 100%);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 173px;
	box-shadow: 0 0 7px rgba(255, 255, 255, .25);
}

.onlineBloc-title { font-size: 18px; margin-bottom: 6px; color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, .95); }

.onlineBloc-scale { color: #2fd39a; font-size: 12px; text-shadow: 0 1px 4px rgba(0, 0, 0, .95); }

/* inner pages have no hero, only the page title - park it back up under the
   menu and shorten the ruler so it cannot reach the white content panel */
.headerInfo--page { top: 76px; }
.headerInfo--page .onlineBlock-scale { height: 120px; }
.onlineBloc-scale span { text-shadow: 0 1px 4px rgba(0, 0, 0, .95); }

/* narrow screens: back into the flow under the hero, on white,
   so there the original dark ruler and dark labels are used */
@media (max-width: 1180px) {
	.headerInfo { position: static; width: 100%; box-sizing: border-box; justify-content: center; padding: 18px 10px 14px; background-color: #fdfeff; border-bottom: 1px solid rgba(119, 40, 81, .1); }
	.onlineBlock { border-left-color: rgba(119, 40, 81, .1); }
	.onlineBlock:last-child { border-right-color: rgba(119, 40, 81, .1); }
	.onlineBlock-scale { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAADdCAYAAAC7blJxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDA2IDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3ODI3NDVCNzU4NDExMUVDOEYzMTk0M0FFMkZCMkMyNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3ODI3NDVCODU4NDExMUVDOEYzMTk0M0FFMkZCMkMyNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc4Mjc0NUI1NTg0MTExRUM4RjMxOTQzQUUyRkIyQzI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc4Mjc0NUI2NTg0MTExRUM4RjMxOTQzQUUyRkIyQzI0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++YSP5QAAANBJREFUeNrs2iEOwkAQBdAp4SIoDILTkGBqUWhsbTUGLAICp6nAoDhKwdDQhrCGQEneV7PZ7Ih52VWbHTf7PNrZddZxPV+mj3o0GVed7db5rK7rOG0P8S6JhjFbzJt6EB9O/xsO7/NLoiSSPxtAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgfItlFTKZdGgrNZF9d8z/D3Ki0vgg7fnCwoUKFCgQIECBQoUKFCgQIECBQoUKFCg9BflJsAApeWiXY09WJIAAAAASUVORK5CYII=); }
	.onlineBloc-title { color: #5e2a44; text-shadow: none; }
	.onlineBloc-scale, .onlineBloc-scale span { color: #0f986d; text-shadow: none; }
}
@media (max-width: 770px) {
	.onlineBlock-scale { display: none; }
}

/* ============================================================
   13. SEASON GUIDES   (/seasons, /season-N, /season-22)
   Static articles ported from the muonline.us guide pages,
   re-skinned in the variant-B palette (navy bars, gold accents).
   ============================================================ */
.season_guide { color: #33312f; font-size: 14px; line-height: 1.7; }
.sg_crumbs { margin-bottom: 18px; color: #9aa3ad; font-size: 12px; }
.sg_crumbs a { color: #5d6b7a; text-decoration: underline; }
.sg_crumbs a:hover { color: #c8a24a; }

.sg_body p { margin: 0 0 12px; color: #33312f; }
.sg_body p.lead { margin-bottom: 22px; color: #16212e; font-size: 16px; line-height: 1.65; }
.sg_body h2 { margin: 28px 0 10px; padding-left: 12px; border-left: 4px solid #c8a24a;
    color: #16212e; font-size: 19px; font-weight: 700; line-height: 1.3; }
.sg_body h3 { margin: 20px 0 6px; color: #16293f; font-size: 15px; font-weight: 700; }
.sg_body b, .sg_body strong { color: #16212e; }
.sg_body a { color: #1f4f8f; text-decoration: underline !important; }
.sg_body a:hover { color: #c8a24a; }
.sg_crumbs a { text-decoration: underline !important; }
.sg_body ul { margin: 0 0 14px 22px; }
.sg_body li { margin-bottom: 5px; list-style: disc; }
.sg_body code { padding: 1px 5px; background: #f6f8fb; border: 1px solid #dfe5ec; border-radius: 3px; font-size: 13px; }
.sg_body figure { margin: 14px 0 20px; border: 1px solid #dfe5ec; border-radius: 4px; overflow: hidden; background: #f6f8fb; }
.sg_body figure img { display: block; width: 100%; height: auto; }
.sg_body figcaption { padding: 7px 12px; background: #16293f; color: #dfe5ec; font-size: 12px; line-height: 1.5; }
.sg_body .tbl { margin: 6px 0 18px; overflow-x: auto; }
.sg_body .tbl table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
.sg_body .tbl th { padding: 7px 9px; background: #16293f; color: #fff; text-align: left; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sg_body .tbl td { padding: 6px 9px; border-bottom: 1px solid #dfe5ec; vertical-align: top; }
.sg_body .tbl tr:nth-child(even) td { background: #f6f8fb; }
.sg_body .note { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid #c8a24a; background: #fbf7ec; font-size: 13px; }

/* "at a glance" box */
.sg_quick { margin: 26px 0 8px; padding: 16px 20px; border: 1px solid #dfe5ec; border-top: 3px solid #16293f; background: #f6f8fb; border-radius: 3px; }
.sg_quick b { display: block; margin-bottom: 9px; color: #16293f; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sg_quick ul { margin: 0; list-style: none; }
.sg_quick li { position: relative; padding: 4px 0 4px 20px; font-size: 13px; font-weight: 600; list-style: none; }
.sg_quick li:before { content: "\2726"; position: absolute; left: 2px; color: #c8a24a; }

/* call to action row: our server first (gold), the toplist second (outline) */
.sg_cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 6px; }
.sg_btn { flex: 1 1 300px; display: block; padding: 13px 18px; border: 1px solid #16293f; border-radius: 3px;
    color: #16293f; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; transition: all .2s; }
.sg_btn:hover { border-color: #c8a24a; color: #c8a24a; text-decoration: none; }
.sg_btn--main { background: linear-gradient(to top, #b58f38, #d8b45a); border-color: #b58f38; color: #16212e;
    box-shadow: 0 8px 20px -10px rgba(200, 162, 74, .9); }
.sg_btn--main:hover { background: linear-gradient(to top, #c8a24a, #e6c56e); color: #16212e; }

/* prev / all / next */
.sg_pn { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #dfe5ec; font-size: 13px; font-weight: 600; }
.sg_pn a { color: #16293f; }
.sg_pn a:hover { color: #c8a24a; }
.sg_pn .sg_all { color: #9aa3ad; font-weight: 400; }

/* index grid - navy cards with the season art on the right (assets/muonline/guides/season-N/title.png) */
.sg_h { margin: 22px 0 10px; color: #16212e; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.sg_h:after { content: ""; display: block; width: 46px; height: 3px; margin-top: 6px; background: #c8a24a; }
.sg_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 8px; }
.sg_card { position: relative; display: block; overflow: hidden; min-height: 96px; padding: 15px 150px 14px 16px;
    border: 1px solid #dfe5ec; border-top: 3px solid #16293f; border-radius: 3px; background: #fff; transition: all .2s; }
.sg_card:hover { transform: translateY(-2px); border-color: #c8a24a; box-shadow: 0 10px 22px -12px rgba(22, 41, 63, .45); text-decoration: none; }
.sg_card strong { display: block; color: #16212e; font-size: 15px; }
.sg_card .tg { display: block; margin-top: 4px; color: #16293f; font-size: 12px; font-weight: 700; }
.sg_card .yr { display: block; margin-top: 5px; color: #9aa3ad; font-size: 11px; }
.sg_card--art { background: #16293f; border-color: #16293f; border-top-color: #c8a24a; }
.sg_card--art:hover { border-color: #c8a24a; }
.sg_card--art strong { color: #fff; }
.sg_card--art .tg { color: #e6c56e; }
.sg_card--art .yr { color: #9fb0c4; }
.sg_art { position: absolute; top: 0; right: 0; bottom: 0; width: 170px; background: no-repeat right center / cover;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 45%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 45%); }
.sg_card--now { grid-column: 1 / -1; min-height: 110px; padding-right: 230px; border-top-color: #c8a24a;
    background: linear-gradient(90deg, #1b3350, #16293f 60%); }
.sg_card--now strong { font-size: 19px; }
.sg_card--now .sg_art { width: 260px; }
.sg_grid--other .sg_card { padding-right: 16px; }
@media (max-width: 760px) { .sg_grid { grid-template-columns: 1fr; } .sg_cta { flex-direction: column; } }

/* ============================================================
   14. RANKINGS PAGE   (rankings/_nav.twig + rankings/*.twig)
   ============================================================ */
.rk_nav { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid #dfe5ec; }
.rk_nav a { display: inline-block; padding: 6px 12px; border: 1px solid #dfe5ec; border-radius: 3px; background: #f6f8fb;
    color: #5d6b7a !important; font-size: 12px; font-weight: 600; line-height: 1.3; text-decoration: none !important; transition: all .15s; }
.rk_nav a:hover { border-color: #c8a24a; color: #16212e !important; background: #fff; }
.rk_nav a.on { border-color: #16293f; background: #16293f; color: #fff !important; box-shadow: inset 0 -2px 0 #c8a24a; }
.rk_nav .rk_server { margin-left: auto; padding: 5px 8px; border: 1px solid #dfe5ec; border-radius: 3px; background: #fff; color: #16212e; font-size: 12px; font-weight: 600; }
.rk_filter { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 12px; }
.rk_filter .btn, .rk_filter .btn-danger-rounded { padding: 6px 12px !important; border: 1px solid #dfe5ec !important; border-radius: 3px !important;
    background: #f6f8fb !important; color: #16212e !important; font-size: 12px !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.rk_filter .btn:hover, .rk_filter .btn-danger-rounded:hover { border-color: #c8a24a !important; background: #fff !important; }
.rk_filter .dropdown-menu { min-width: 200px; }
.rk_filter .dropdown-menu li a { padding: 6px 12px; font-size: 12px; }
.rk_filter .dropdown-menu img { width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; }

.rankings-table > thead > tr > th { padding: 9px 12px !important; }
.rankings-table > tbody > tr > td { padding: 7px 12px !important; line-height: 1.4; }
.rankings-table tr th:first-child { width: auto; }
.rankings-table th sup, .rankings-table td sup { color: #c8a24a; font-size: 9px; font-weight: 700; margin-left: 1px; }
.rankings-table td .f16 { margin-right: 3px; }
.rankings-table td img { width: auto; max-height: 20px; vertical-align: middle; }
.rk_st { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c9d1da; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.rk_st.on { background: #2ec46f; box-shadow: 0 0 0 3px rgba(46,196,111,.18); }
.rk_q { display: inline-block; min-width: 28px; padding: 2px 7px; border-radius: 10px; background: #16293f; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; }
.rk_q--none { background: #eef1f5; color: #9aa3ad; }
/* downloads page text blocks */
.box h3 { margin: 22px 0 10px !important; font-size: 15px !important; }
.box code { padding: 1px 5px; background: #f6f8fb; border: 1px solid #dfe5ec; border-radius: 3px; color: #16212e; font-size: 12px; }
.box .alert-info { background: #f6f8fb !important; border: 1px solid #dfe5ec !important; border-left: 3px solid #c8a24a !important; color: #33312f !important; }

/* --- 15. language switcher (header, top right) --------------------------- */
.lang_sw { position: absolute; top: 8px; right: 0; z-index: 30; display: flex; gap: 2px; }
.lang_sw a { display: inline-block; padding: 3px 7px; border-radius: 3px; color: #7f8b99; font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.lang_sw a:hover { color: #fff; background: rgba(255,255,255,.08); }
.lang_sw a.on { color: #c8a24a; background: rgba(200,162,74,.14); }