/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 =========================================================
 
*/
:root {
    --void-1000: #05030a;
    --void-900: #0a0714;
    --void-800: #110a22;
    --void-700: #1a1130;
    --void-600: #241a44;
    --arcane-700: #3d1a85;
    --arcane-600: #5c2bb5;
    --arcane-500: #7a3fd6;
    --arcane-300: #b78fff;
    --glacial-400: #5cb0ff;
    --gold-600: #c89530;
    --gold-500: #e8b850;
    --gold-400: #f3cf78;
    --silver-700: #5a6371;
    --silver-500: #b3bcc8;
    --silver-400: #d4dae3;
    --silver-300: #e8ecf2;
    --silver-200: #f4f6fa;
    --crimson-500: #c12338;
    --verdant-400: #3fc798;
    --border-subtle: rgba(180, 145, 255, 0.12);
    --border-default: rgba(180, 145, 255, 0.24);
    --border-gold: rgba(232, 184, 80, 0.55);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(180, 145, 255, 0.06) inset;
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(180, 145, 255, 0.08) inset;
    --glow-arcane: 0 0 24px rgba(122, 63, 214, 0.48);
    --glow-gold: 0 0 18px rgba(232, 184, 80, 0.44);
    --font-display: "Cinzel", "Times New Roman", serif;
    --font-smallcaps: "Marcellus SC", "Cinzel", serif;
    --font-serif: "EB Garamond", Georgia, serif;
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    min-width: 0 !important;
    min-height: 100%;
}

body {
    min-width: 320px;
    min-height: 100%;
    height: auto !important;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(36, 26, 68, 0.88) 0%, rgba(17, 10, 34, 0.84) 45%, rgba(5, 3, 10, 0.96) 100%),
        linear-gradient(180deg, rgba(5, 3, 10, 0.16), var(--void-1000) 96%),
        url('../img/background-2600.jpg') center top / cover fixed no-repeat !important;
    color: var(--silver-300);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    top: -220px;
    left: 50%;
    z-index: -1;
    width: min(900px, 125vw);
    aspect-ratio: 1;
    background: url('/assets/brand/marks/rune-circle.svg') center / contain no-repeat;
    opacity: 0.08;
    transform: translateX(-50%);
    animation: panel-rune-spin 150s linear infinite;
    pointer-events: none;
}

a {
    color: var(--arcane-300);
}

a:hover,
a:focus {
    color: var(--gold-400) !important;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

a:focus, a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.form-control {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
	background: rgba(5, 3, 10, 0.62);
	border: 1px solid var(--border-default);
    border-radius: 4px;
	color: var(--silver-200);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.form-control:focus {
	border: 1px solid var(--gold-500);
    box-shadow: var(--glow-gold);
    background: rgba(10, 7, 20, 0.84);
    color: var(--silver-200);
}

/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.thumbnail {
    background-color: rgba(17, 10, 34, 0.92);
    border: 1px solid var(--border-default);
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: var(--gold-500);
}

.btn-primary {
    min-height: 38px;
    color: var(--gold-400);
    background: rgba(17, 10, 34, 0.74);
	border-color: var(--border-gold);
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
	-moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    color: var(--silver-200) !important;
    background: linear-gradient(180deg, var(--arcane-500), var(--arcane-700)) !important;
	border-color: var(--arcane-300) !important;
    box-shadow: var(--glow-arcane);
}

.form-horizontal .control-label {
	text-align: left !important;
}

.form-horizontal .form-group,
.form-group {
    max-width: 100%;
}

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
select,
textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* MuInsignia panel theme */
.global-top-bar {
    background: rgba(10, 7, 20, 0.84);
    border-bottom: 1px solid var(--border-default);
    color: var(--silver-500);
    letter-spacing: 0.12em;
}

.global-top-bar .global-top-bar-content,
#container,
.footer,
.header-info-container {
    width: min(1040px, calc(100% - 40px));
}

.global-top-bar a {
    color: var(--silver-400) !important;
}

.global-top-bar a.logout {
    color: #ff7787 !important;
}

#navbar {
    background: rgba(10, 7, 20, 0.72);
    border-bottom: 1px solid var(--border-default);
    backdrop-filter: blur(16px) saturate(140%);
}

#navbar ul li {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

#navbar ul li a {
    color: var(--silver-500) !important;
    padding: 19px 24px;
}

#navbar ul li a:hover,
#navbar ul li a:focus {
    color: var(--silver-200) !important;
    background: rgba(122, 63, 214, 0.16);
    box-shadow: inset 0 -1px 0 var(--gold-500);
}

#header {
    position: relative;
    padding: 64px 20px 24px;
}

#header::after {
    content: "";
    display: block;
    width: min(520px, 82vw);
    height: 22px;
    margin: 22px auto 0;
    background: url('/assets/brand/marks/divider-diamond.svg') center / contain no-repeat;
    opacity: 0.88;
}

.webengine-mu-logo {
    width: min(360px, 72vw);
    height: auto;
    filter: drop-shadow(0 0 46px rgba(122, 63, 214, 0.62));
}

#container {
    background: rgba(17, 10, 34, 0.94);
    border: 1px solid var(--border-default);
    border-radius: 6px 6px 0 0;
    box-shadow: var(--shadow-3);
    color: var(--silver-300);
}

#content {
    display: flow-root;
    overflow: visible;
}

.footer {
    background: rgba(5, 3, 10, 0.84);
    border: 1px solid var(--border-default);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    color: var(--silver-700);
    box-shadow: var(--shadow-2);
}

.footer hr {
    border-top-color: var(--border-default);
}

.page-title,
.panel-news .panel-title,
.panel-sidebar > .panel-heading,
.panel-body .panel-title,
.panel-addstats .character-name,
.rankings_menu span {
    color: var(--gold-400);
    font-family: var(--font-display);
}

.page-title {
    font-size: 34px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.header-info-container {
    text-align: right;
}

.header-info-container .header-info {
    background: rgba(17, 10, 34, 0.88);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: var(--shadow-2);
}

.header-info-container .header-info .header-info-block,
.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate {
    color: var(--silver-500);
}

.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime {
    color: var(--silver-200);
}

.header-info-container .header-info .header-info-block .online-count {
    color: var(--verdant-400);
}

.webengine-online-bar {
    background: rgba(5, 3, 10, 0.92);
    border-color: var(--border-default);
}

.webengine-online-bar .webengine-online-bar-progress {
    background: linear-gradient(90deg, var(--arcane-500), var(--glacial-400));
}

.panel,
.panel-news,
.panel-general,
.panel-addstats,
.panel-downloads,
.panel-sidebar {
    background: rgba(17, 10, 34, 0.92);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--silver-300);
    box-shadow: var(--shadow-2);
}

.panel-heading,
.panel-sidebar > .panel-heading,
.panel-news .panel-heading {
    background: rgba(10, 7, 20, 0.78) !important;
    border: 0;
    border-bottom: 1px solid var(--border-gold);
    border-radius: 6px 6px 0 0;
}

.panel-title,
.panel-news .panel-title {
    color: var(--gold-400) !important;
}

.panel-sidebar .panel-heading .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.panel-sidebar .panel-heading .btn-xs {
    float: none !important;
    max-width: 100%;
    height: auto;
    min-height: 28px;
    margin-left: auto;
    padding: 6px 10px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}

.panel-body,
.panel-news .panel-body {
    color: var(--silver-300);
}

.panel-news .panel-footer {
    background: rgba(10, 7, 20, 0.78);
    border-top: 1px solid var(--border-subtle);
    color: var(--silver-700);
}

.table,
.myaccount-table,
.general-table-ui {
    background: rgba(5, 3, 10, 0.34);
    border: 1px solid var(--border-default);
    color: var(--silver-300);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
    background: rgba(10, 7, 20, 0.92) !important;
    border-color: var(--border-default) !important;
    color: var(--gold-400) !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table-hover > tbody > tr:hover {
    background-color: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(180, 145, 255, 0.045) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td {
    background: rgba(5, 3, 10, 0.22) !important;
}

.table-hover > tbody > tr:hover > td {
    background: rgba(232, 184, 80, 0.08) !important;
}

.panel-body,
.panel-body table,
.panel-sidebar,
.panel-sidebar table {
    max-width: 100%;
}

.panel-body table,
.panel-sidebar table,
.rankings-table,
.general-table-ui,
.myaccount-table {
    overflow-wrap: anywhere;
    word-break: normal;
}

.panel-sidebar-events td,
.panel-sidebar-events th {
    font-size: 13px;
    line-height: 1.25;
}

.module-info {
    color: var(--silver-300);
}

.module-info .info-lead,
.module-info .info-note {
    color: var(--silver-400);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.55;
}

.module-info .info-note {
    margin: -4px 0 14px;
    font-size: 16px;
}

.module-info h2 {
    margin: 44px 0 14px;
    color: var(--silver-200);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.info-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: var(--shadow-2);
}

.info-table {
    min-width: 720px;
    margin-bottom: 0 !important;
    border: 0 !important;
}

.info-table th,
.info-table td {
    border-color: var(--border-subtle) !important;
    vertical-align: middle !important;
}

.info-table td:first-child {
    color: var(--gold-400);
    font-weight: 700;
}

.table > tbody > tr > td,
.myaccount-table tr td,
.general-table-ui tr td,
.rankings-table tr td {
    border-bottom: 1px solid var(--border-subtle);
    color: var(--silver-300);
}

.myaccount-table tr td:first-child,
.general-table-ui tr:first-child td,
.rankings-table tr:first-child td,
.rankings-table-place {
    color: var(--gold-400);
}

.general-table-ui tr:nth-child(2n+2) td {
    background: rgba(180, 145, 255, 0.06);
}

.rankings_menu a {
    background: rgba(17, 10, 34, 0.84);
    border-color: var(--border-default);
    color: var(--silver-500);
    border-radius: 4px;
}

.rankings_menu a.active,
.rankings_menu a:hover {
    color: var(--gold-400) !important;
    border-color: var(--border-gold);
    box-shadow: var(--glow-gold);
}

.panel-usercp {
    background:
        linear-gradient(180deg, rgba(17, 10, 34, 0.84), rgba(10, 7, 20, 0.92)),
        url('../img/usercp_bg.jpg') top center / cover no-repeat;
}

.panel-usercp ul li a {
    color: var(--silver-300) !important;
}

.panel-usercp ul li a:hover {
    color: var(--gold-400) !important;
}

.sidebar-banner img,
.general-table-ui img,
.rankings-class-image,
.myaccount-character-block img {
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: var(--shadow-2);
}

.myaccount-character-block {
    background: rgba(5, 3, 10, 0.66);
    border-color: var(--border-default);
}

.myaccount-character-block-location,
.myaccount-character-name a,
.rankings-class-filter-selection {
    color: var(--silver-300);
}

.event-schedule-open {
    color: var(--verdant-400);
}

.event-schedule-inprogress {
    color: var(--gold-400);
}

.admincp-button {
    background: var(--gold-500) !important;
    border-color: var(--gold-400) !important;
    color: var(--void-1000) !important;
    border-radius: 4px;
}

a:hover,
a:focus {
    color: var(--gold-400) !important;
    text-decoration: none !important;
}

.btn,
.btn-primary {
    border-radius: 4px !important;
}

@keyframes panel-rune-spin {
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@media (max-width: 1080px) {
    .global-top-bar .global-top-bar-content,
    #container,
    .footer,
    .header-info-container {
        width: calc(100% - 28px);
    }

    #navbar ul li a {
        padding: 16px 14px;
        font-size: 11px;
    }
}

@media (max-width: 760px) {
    .global-top-bar .col-xs-6,
    #content .col-xs-4,
    #content .col-xs-8,
    .footer .col-xs-4,
    .footer .col-xs-8 {
        width: 100%;
        text-align: left;
    }

    #navbar {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #navbar ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        min-width: max-content;
        padding: 0 10px;
        white-space: nowrap;
    }

    #navbar ul li {
        display: inline-flex;
        flex: 0 0 auto;
    }

    #navbar ul li a {
        width: auto;
        min-height: 46px;
        padding: 13px 16px;
    }

    #header {
        padding-top: 38px;
    }

    .header-info-container {
        text-align: left;
    }

    .header-info-container .header-info {
        width: 100%;
    }

    #container {
        padding-top: 12px;
    }

    #content {
        padding: 8px 14px 0;
    }

    #content .row,
    #content .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    #content [class*="col-"] {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .form-control,
    input[type=text],
    input[type=password],
    input[type=number],
    input[type=email],
    select,
    textarea {
        width: 100% !important;
    }

    .page-title {
        font-size: 26px;
    }
}