@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    --bs-primary: #f39c12;
    --bs-primary-rgb: 243,156,18;
    
    --bs-success: #2be790;
    --bs-success-rgb: 43,231,144;
    
    --bs-danger: #ff7a87;
    --bs-danger-rgb: 255,122,135;
}

html { width: 100%; height: 100%; }

body {
    --bs-body-bg: #000;
    --bs-body-color: #bdcddb;
    --bs-body-font-size: .85rem;
    --bs-body-font-family: 'Roboto';
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-text-align: start;
    
    --bs-border-width: 2px;
    --bs-border-style: solid;
    --bs-border-color: #000;
    --bs-border-radius: 0.375rem;
    
    --bs-link-color: #f39c12;
    --bs-link-hover-color: #d3860b;

    background-image: url("/static/img/interface/background.jpg"); background-size: cover; background-position: center;
    width: 100%; height: 100%; overflow: auto;
}

#menu {
    position: absolute; top: 48px; bottom:0; left: -100%; z-index: 100;
    width: 100%;
    background: rgba(0, 0, 0, .5);
}

#menu.open { left: 0; }

@media (min-width: 992px) { #menu { top: 48px; left: 0; width: 256px; } }

#menu-content {
    position: absolute; top: 0; bottom:0; left: 0; z-index: 200;
    width: 256px;
    background: var(--bs-gray-800);
}

#menu-top {
    position: absolute; top: 0; bottom: 103px; left: 0; right: 0;
}

#menu-bottom {
    position: absolute; bottom: 0; left: 0; right: 0;
}

#top {
    position: absolute; top: 0; right: 0; left: 0;
    height: 48px;
    background: var(--bs-gray-800);
}

#content {
    position: absolute; top: 48px; bottom: 0; right: 0; left: 0;
}

@media (min-width: 992px) { #content { left: 256px; } }

.content-page {
    margin: 0 auto;
	width: 100%; max-width: 960px;
    position: relative;
}

a { text-decoration: none; }

.small, small { font-size: .75em; }

:focus-visible { outline: none; }

::-webkit-scrollbar { width: .35rem; height: .35rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: .25rem; background: rgba(255, 255, 255, .25); }

.scroll-content {
    overflow-y: auto; overflow-x: hidden;
    scrollbar-color: rgba(255, 255, 255, .075); scrollbar-width: thin;
}

.bg-gray-100 { background-color: var(--bs-gray-100)!important; }
.bg-gray-200 { background-color: var(--bs-gray-200)!important; }
.bg-gray-300 { background-color: var(--bs-gray-300)!important; }
.bg-gray-400 { background-color: var(--bs-gray-400)!important; }
.bg-gray-500 { background-color: var(--bs-gray-500)!important; }
.bg-gray-600 { background-color: var(--bs-gray-600)!important; }
.bg-gray-700 { background-color: var(--bs-gray-700)!important; }
.bg-gray-800 { background-color: var(--bs-gray-800)!important; }
.bg-gray-900 { background-color: var(--bs-gray-900)!important; }

.text-ally { color: #0f0!important; }
.text-free { color: var(--bs-body-color)!important; }
.text-empty { color: transparent!important; }
.text-enemy { color: #f00!important; }
.text-self { color: var(--bs-info)!important; }
.text-normal { color: var(--bs-body-color)!important; }
.text-yellow { color: #ffff00!important; }

.btn {
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-family: var(--bs-body-font-family);
    --bs-btn-font-size: var(--bs-body-font-size);
    --bs-btn-font-weight: var(--bs-body-font-weight);
    --bs-btn-line-height: var(--bs-body-line-height);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-gray-700);
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-bg: var(--bs-gray-800);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--bs-gray-700);
    --bs-btn-active-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: 0.5;
    --bs-btn-focus-box-shadow: none;
}

.btn-transparent {
    --bs-btn-bg: transparent;
}

.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: #f39c12;
    --bs-btn-border-color: #f39c12;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3860b;
    --bs-btn-hover-border-color: #d3860b;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f39c12;
    --bs-btn-active-border-color: #f39c12;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f39c12;
    --bs-btn-disabled-border-color: #f39c12;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5a6168;
    --bs-btn-hover-border-color: #5a6168;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #13663f;
    --bs-btn-hover-border-color: #13663f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #198754;
    --bs-btn-active-border-color: #198754;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c72332;
    --bs-btn-hover-border-color: #c72332;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #dfa700;
    --bs-btn-hover-border-color: #dfa700;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #0babcb;
    --bs-btn-hover-border-color: #0babcb;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0dcaf0;
    --bs-btn-active-border-color: #0dcaf0;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-link {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0;
    --bs-btn-border-width: 0;
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-link-color);
    --bs-btn-disabled-border-color: transparent;
    
    text-decoration: none;
}

.nav {
    --bs-nav-link-padding-x: 0.75rem;
    --bs-nav-link-padding-y: 0.35rem;
    --bs-nav-link-font-weight: var(--bs-body-font-weight);
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: #6c757d;
}

.nav-link {
    border: var(--bs-border-width) solid transparent;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #000;
    --bs-nav-pills-link-active-bg: #f39c12;
}

.nav-pills .nav-link {
    border: var(--bs-border-width) solid transparent;
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: #000;
    --bs-nav-tabs-link-active-bg: #f39c12;
    --bs-nav-tabs-link-active-border-color: #f39c12;
    
    width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    background-color: var(--bs-gray-800);
    border-bottom: 0;
}

.nav-tabs .nav-link {
    margin-bottom: 0;
}

.dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: var(--bs-body-font-size);
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
    --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-box-shadow: none;
    --bs-dropdown-link-color: var(--bs-link-color);
    --bs-dropdown-link-hover-color: #1e2125;
    --bs-dropdown-link-hover-bg: var(--bs-link-hover-color);
    --bs-dropdown-link-active-color: #000;
    --bs-dropdown-link-active-bg: #f39c12;
    --bs-dropdown-link-disabled-color: #6c757d;
    --bs-dropdown-item-padding-x: 0.5rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: #6c757d;
    --bs-dropdown-header-padding-x: 0.5rem;
    --bs-dropdown-header-padding-y: 0.25rem;
}

.dropdown-toggle::after {
    margin-left: 0.5em;
    vertical-align: 0.125em;
}

.form-label {
    margin-bottom: 0.25rem;
}

.form-control {
    padding: 0.35rem 0.75rem;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background-color: #000;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.form-control:focus {
    color: var(--bs-body-color);
    background-color: #000;
    border-color: #f39c12;
    outline: 0;
    box-shadow: none;
}

.form-check-input {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-color: #000;
}
.form-check-input:focus {
    border-color: #f39c12;
    outline: 0;
    box-shadow: none;
}
.form-check-input:checked {
    background-color: #f39c12;
    border-color: #f39c12;
}

.form-text {
    font-size: .875em;
    color: #bdcddb;
}

.card {
    --bs-card-spacer-y: 0.5rem;
    --bs-card-spacer-x: 0.75rem;
    --bs-card-title-spacer-y: 0;
    --bs-card-border-width: 0;
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: none;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 0.75rem;
    --bs-card-cap-bg: var(--bs-gray-700);
    --bs-card-cap-color: var(--bs-body-color);
    --bs-card-color: var(--bs-body-color);
    --bs-card-bg: var(--bs-gray-800);
    --bs-card-img-overlay-padding: 0.5rem;
    --bs-card-group-margin: 0.5rem;
}

.card-header {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius);
}

.card-footer {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius);
}

.list-group {
    --bs-list-group-bg: var(--bs-gray-800);
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-item-padding-x: 0.75rem;
    --bs-list-group-item-padding-y: 0.25rem;
    --bs-list-group-border-width: var(--bs-border-width);
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-border-radius: var(--bs-border-radius);
    --bs-list-group-action-color: var(--bs-link-color);
    --bs-list-group-action-hover-color: var(--bs-link-hover-color);
    --bs-list-group-action-hover-bg: #f8f9fa;
    --bs-list-group-action-active-color: #000;
    --bs-list-group-action-active-bg: #f39c12;
    --bs-list-group-disabled-color: #6c757d;
    --bs-list-group-disabled-bg: #fff;
    --bs-list-group-active-color: #000;
    --bs-list-group-active-bg: #f39c12;
    --bs-list-group-active-border-color: #f39c12;
}

.alert {
    --bs-alert-padding-x: 0.75rem;
    --bs-alert-padding-y: 0.5rem;
    --bs-alert-margin-bottom: 0;
}

.alert-danger, .alert-error {
    --bs-alert-color: #fff;
    --bs-alert-bg: #dc3545;
    --bs-alert-border-color: #dc3545;
}

.badge {
    --bs-badge-font-weight: 400;
}

.tooltip {
    --bs-tooltip-color: var(--bs-body-color);
    --bs-tooltip-font-size: var(--bs-body-font-size);
    --bs-tooltip-padding-y: .5rem;
    --bs-tooltip-padding-x: .75rem;
    --bs-tooltip-max-width: 300px;
}

////////////////////////////////////////////////////////////////////////////////

@keyframes flicker {
    0%   { opacity: .9; }
    50%  { opacity: .1; }
    100% { opacity: .9; }
}
@-o-keyframes flicker {
    0%   { opacity: .9; }
    50%  { opacity: .1; }
    100% { opacity: .9; }
}
@-moz-keyframes flicker {
    0%   { opacity: .9; }
    50%  { opacity: .1; }
    100% { opacity: .9; }
}
@-webkit-keyframes flicker {
    0%   { opacity: .9; }
    50%  { opacity: .1; }
    100% { opacity: .9; }
}

.flicker {
   -webkit-animation: flicker 2s infinite;
   -moz-animation: flicker 2s infinite;
   -ms-animation: flicker 2s infinite;
   -o-animation: flicker 2s infinite;
    animation: flicker 2s infinite;
}    

////////////////////////////////////////////////////////////////////////////////