@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: 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; height: 190px; }
.lnb_logo { position: absolute; left: 50%; top: 15px; display: block; width: 200px; height: 141px;
    margin-left: -100px; background: url("../mu/common/img_logo03.png") 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 { 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; }

/* --- 7. sidebar --------------------------------------------------------- */
.side_box { margin-bottom: 26px; }
.side_title { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #3773bd;
    color: #222; font-size: 15px; 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, .lk-form { padding: 16px; border: 1px solid #e3e3e3; background: #fafbfc; }
.login-title, .lk-title { margin-bottom: 12px; color: #222; font-size: 16px; font-weight: 700; }
.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: 7px 0; border-bottom: 1px dotted #e2e6ea; font-size: 12px; }
.lk-coins .coins { float: right; color: #bc4402; font-weight: 700; }
.lk-coins .username { color: #777; }
.lk-form ul { margin-top: 12px; }
.lk-form ul li { padding: 5px 0; border-bottom: 1px dotted #e2e6ea; }
.lk-form ul li a { color: #4a545f; font-size: 12px; }
.lk-form ul li a:hover { color: #3773bd; }

/* 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. LIGHT COMPONENT SKIN
   The 90-odd views inherited from the old theme are rendered inside the white
   content panel, so everything they use is restyled here. Nothing in those
   views had to change.
   ========================================================================== */
.content h1 { margin-bottom: 16px; font-size: 24px; }
.content h2 { margin-bottom: 14px; font-size: 20px; }
.content h3 { margin-bottom: 12px; font-size: 17px; }
.content h4 { margin-bottom: 10px; font-size: 15px; }
.content p  { color: #5c666f; }
.content hr { border: 0; border-top: 1px solid #e6eaee; margin: 22px 0; }

.content-wrapper { margin-bottom: 10px; }
.content-wrapper .box, .box {
    margin-bottom: 20px; padding: 18px 20px; border: 1px solid #e6eaee; background: #fafbfc; color: #5c666f; }
.content-wrapper .box .box, .box .box { margin: 0; padding: 0; border: 0; background: none; }
.box h2, .box h3 { color: #222; }
.box .form-control { background: #fff !important; border: 1px solid #ccc !important; color: #444 !important; }

/* tables ---------------------------------------------------------------- */
.content table, .table { width: 100%; border-collapse: collapse; }
.content table th, .table > thead > tr > th {
    padding: 12px 10px; border: 0; border-bottom: 2px solid #3773bd;
    background: #f2f5f9; color: #26313d; font-size: 13px; font-weight: 700; text-align: left; }
.content table td, .table > tbody > tr > td {
    padding: 11px 10px; border: 0; border-bottom: 1px solid #e6eaee; color: #5c666f; font-size: 13px; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfc; }
.table > tbody > tr:hover > td { background: #f2f6fb; }
.table-red-heading thead tr, .rankings-table thead tr { background: #3773bd !important; color: #fff !important; }
.table-red-heading thead tr th, .rankings-table thead tr th { background: #3773bd !important; color: #fff !important; border-bottom: 0 !important; }
.table-red-heading tr td img { width: 50px; height: auto; box-shadow: none; }
.rankings-table tr td a, .downloads-table tr td a { color: #3773bd; }
.rankings-table tr td a:hover, .downloads-table tr td a:hover, .table-striped tr td a:hover { color: #2b5f9f !important; }
.rankings-player-class-img img { max-width: 34px; height: auto; }

/* buttons --------------------------------------------------------------- */
.btn, .btn-danger, .btn-default, .btn-primary {
    display: inline-block; padding: 8px 18px; border: 0; border-radius: 0;
    background: #3773bd; color: #fff !important; font-size: 13px; font-weight: 700;
    text-shadow: none; box-shadow: none; cursor: pointer; }
.btn:hover, .btn:focus, .btn-danger:hover, .btn-default:hover, .btn-primary:hover { background: #2b5f9f; color: #fff !important; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-danger-rounded {
    display: inline-block; width: auto !important; height: auto !important; padding: 9px 22px !important;
    background: #3773bd !important; border: 0 !important; border-radius: 0 !important;
    color: #fff !important; font-size: 13px !important; font-weight: 700; line-height: 1.4 !important;
    text-align: center; text-shadow: none !important; }
.btn-danger-rounded:hover { background: #2b5f9f !important; }
.btn-group .btn + .btn { margin-left: 4px; }

/* forms ----------------------------------------------------------------- */
.form-group { margin-bottom: 14px; }
.control-label, .contro-label { display: block; margin-bottom: 5px; color: #444; font-size: 12px; font-weight: 700; }
.form-control, select.form-control, textarea.form-control {
    width: 100%; height: auto; padding: 9px 10px; border: 1px solid #ccc; border-radius: 0;
    background: #fff; color: #444; font-size: 13px; box-shadow: none; }
.form-control:focus { border-color: #3773bd; box-shadow: none; }
.input-group-addon { border: 1px solid #ccc; border-radius: 0; background: #f2f5f9; color: #5c666f; }
.checkbox { color: #5c666f; }
.help_text, .help-block { color: #8a929b; font-size: 12px; }
.registration-form form { margin-top: 18px; }
.registration-form p { margin-bottom: 10px; }

/* alerts ---------------------------------------------------------------- */
.alert { margin-bottom: 18px; padding: 13px 16px; border: 1px solid; border-radius: 0; font-size: 13px; }
.alert-danger  { border-color: #f0c6c6; background: #fdecec; color: #a33; }
.alert-success { border-color: #bfe3d1; background: #eaf7f0; color: #1f7a55; }
.alert-info    { border-color: #cfe0f2; background: #eef4fb; color: #2b5f9f; }
.alert-warning { border-color: #efdcb4; background: #fdf5e5; color: #8a6412; }

/* dropdowns, tabs, pagination ------------------------------------------- */
.dropdown-menu { border: 1px solid #dbe1e8; border-radius: 0; box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.dropdown-menu > li > a, .dropdown-item { padding: 7px 14px; color: #4a545f; font-size: 13px; }
.dropdown-menu > li > a:hover, .dropdown-item:hover { background: #f2f6fb; color: #3773bd; }
.nav-tabs { border-bottom: 2px solid #3773bd; }
.nav-tabs > li > a { border: 0; border-radius: 0; color: #8a929b; font-weight: 700; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border: 0; background: #3773bd; color: #fff; }
.pagination { margin: 22px 0 0; }
.pagination > li > a, .pagination > li > span {
    border-color: #dbe1e8; border-radius: 0 !important; color: #5c666f; }
.pagination > li > a:hover { border-color: #3773bd; background: #f2f6fb; color: #3773bd; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    border-color: #3773bd; background: #3773bd; color: #fff; }

/* 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 #3773bd; background: none; color: #222; 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 #dbe1e8; color: #5c666f; font-size: 12px; }
.tab-links a:hover, .rank-tab-links:hover { border-color: #3773bd; color: #3773bd; }

/* inventory / item grids (game art on a neutral plate) ------------------- */
.grid-item-inv, .item-slot { background-color: #10181f; border: 1px solid #d6dce3; }
.hover_inv { border-color: #3773bd; }
.select-imitation { background-color: #f2f5f9; border-top: 3px solid #3773bd; border-bottom: 3px solid #3773bd;
    box-shadow: 0 -1px 0 #3773bd; color: #33404d; }
.select-imitation-list { background: #fff; border: 1px solid #dbe1e8; }

/* countdown ------------------------------------------------------------- */
.countdown-block { margin: 18px 0; padding: 16px; border: 1px solid #e6eaee; background: #fafbfc; text-align: center; }
.countdown-block .timer-n { margin-bottom: 8px; color: #cf8d00; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.countdown-timer { color: #222; 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(55,115,189,.85); cursor: pointer; }
.toTop:after { content: "\25B2"; display: block; color: #fff; font-size: 12px; line-height: 40px; text-align: center; }

/* --- 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   (original MuLemuria widget)
   Rules and the ruler graphic come from mulemuria-homepage.html.
   Placed transparently in the top right corner of the main visual;
   below 1180px it drops back into the flow on the white strip.
   ============================================================ */
#gnb_wrap { display: none !important; }

.headerInfo {
	position: absolute;
	top: 56px;
	right: 8px;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	background: none;
}

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

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

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

.onlineBlock-scale { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAADdCAYAAAC7blJxAAAAwklEQVR42u3UQQqDMBAF0LG4zPkET+AlXHoJTxDI+dzHXUlFSiktrfD+KmGYLOYl6WqtWzQpa05xyDCNc1NfDrWH/j4iUllzvJuy5jRM431/iw/n/w/sI2JrZ3CG8ixQoECBAgUKFChQoECBAgUKFChQoECBAgUKFChQoECBAgUKFChQoECBAgUKFChQoPwApau1vtI3N+vl2jP8Dsrxop4Mvq17Kb4vKFCgQIECBQoUKFCgQIECBQoUKFCgQIFyHZQdMWD1XGaLLRgAAAAASUVORK5CYII=) no-repeat; background-size: 20px 100%; height: 140px; width: 20px; margin: 0 auto; margin-bottom: 10px; display: flex; align-items: flex-end; justify-content: center; }
.onlineBlock-scale span { width: 3px; height: 100%; display: block; background-color: #c80666; box-shadow: 0 0 6px rgba(200, 6, 102, 0.6); }

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

.onlineBloc-scale { color: #2fd39a; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.onlineBloc-scale span[style] { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }

/* narrow screens: back into the flow, on the white strip, dark ruler */
@media (max-width: 1180px) {
	.headerInfo {
		position: static;
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		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 { color: #0f986d; text-shadow: none; }
	.onlineBloc-scale span[style] { text-shadow: none; }
}
@media (max-width: 770px) {
	.onlineBlock-scale { display: none; }
}