@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap');

:root {    
    --bs-dark: #222222;
    --bs-light: #444444;
    --bs-secondary: #303030;
    --bs-success: #00ff89;
    
    --bs-dark-dark: #090909;
    --bs-light-dark: #32373b;
    --bs-primary-dark: #0257d5;
    --bs-secondary-dark: #545b62;
    --bs-success-dark: #00cc6e;
    --bs-info-dark: #0aa1c0;
    --bs-warning-dark: #d39e00;
    --bs-danger-dark: #bd2130;
    
    --bs-body-font-family: "Segoe UI", "Roboto";
    --bs-body-font-size: 0.85rem;
    --bs-body-font-weight: 600;
    --bs-body-line-height: 1.5;
    --bs-body-color: #a2afbb;
    --bs-body-bg: var(--bs-secondary);

    --bs-link-color: #ffc107;
    --bs-link-hover-color: #c27d0e;
    
    --bs-border-color: var(--bs-light);
    --bs-border-width: 2px;
    --bs-border-radius: 0.375rem;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
}

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

.scrollbar { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-color: $border-color rgba(255, 255, 255, .075); scrollbar-width: thin; }

a { text-decoration: none; }

.bg-dark { background-color: var(--bs-dark)!important; }
.bg-light { background-color: var(--bs-light)!important; }
.bg-primary { background-color: var(--bs-primary)!important; }
.bg-secondary { background-color: var(--bs-secondary)!important; }
.bg-success { background-color: var(--bs-success)!important; }
.bg-info { background-color: var(--bs-info)!important; }
.bg-warning { background-color: var(--bs-warning)!important; }
.bg-danger { background-color: var(--bs-danger)!important; }

.bg-whiter { background-color: rgba(255, 255, 255, 0.125)!important; }
.bg-blacker { background-color: rgba(0, 0, 0, 0.25)!important; }

.text-normal { color: var(--bs-body-color)!important; }

.text-dark { color: var(--bs-dark)!important; }
.text-light { color: var(--bs-light)!important; }
.text-primary { color: var(--bs-primary)!important; }
.text-secondary { color: var(--bs-secondary)!important; }
.text-success { color: var(--bs-success)!important; }
.text-info { color: var(--bs-info)!important; }
.text-warning { color: var(--bs-warning)!important; }
.text-danger { color: var(--bs-danger)!important; }

.text-bg-dark { color: #fff!important; background-color: var(--bs-dark)!important; }
.text-bg-light { color: #fff!important; background-color: var(--bs-light)!important; }
.text-bg-primary { color: #fff!important; background-color: var(--bs-primary)!important; }
.text-bg-secondary { color: #fff!important; background-color: var(--bs-secondary)!important; }
.text-bg-success { color: #000!important; background-color: var(--bs-success)!important; }
.text-bg-info { color: #fff!important; background-color: var(--bs-info)!important; }
.text-bg-warning { color: #000!important; background-color: var(--bs-warning)!important; }
.text-bg-danger { color: #fff!important; background-color: var(--bs-danger)!important; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0; margin-bottom: 0.5rem;
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
}

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

[data-bs-toggle="collapse"]:hover { cursor: pointer; }

.btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-font-size: 0.8rem;
    --bs-btn-font-weight: var(--bs-body-font-weight);
    --bs-btn-line-height: var(--bs-body-line-height);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);    
    --bs-btn-disabled-opacity: 0.25;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-dark-dark);
    --bs-btn-hover-border-color: var(--bs-dark-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-dark-dark);
    --bs-btn-disabled-border-color: var(--bs-dark-dark);
}

.btn-light {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-light-dark);
    --bs-btn-hover-border-color: var(--bs-light-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-light-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-light-dark);
    --bs-btn-disabled-border-color: var(--bs-light-dark);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary-dark);
    --bs-btn-disabled-border-color: var(--bs-primary-dark);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-dark);
    --bs-btn-hover-border-color: var(--bs-secondary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-secondary-dark);
    --bs-btn-disabled-border-color: var(--bs-secondary-dark);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-info-dark);
    --bs-btn-hover-border-color: var(--bs-info-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-info-dark);
    --bs-btn-disabled-border-color: var(--bs-info-dark);
}

.btn-success {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-success-dark);
    --bs-btn-hover-border-color: var(--bs-success-dark);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-success-dark);
    --bs-btn-disabled-border-color: var(--bs-success-dark);
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning-dark);
    --bs-btn-hover-border-color: var(--bs-warning-dark);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-warning-dark);
    --bs-btn-disabled-border-color: var(--bs-warning-dark);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger-dark);
    --bs-btn-hover-border-color: var(--bs-danger-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger-dark);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-danger-dark);
    --bs-btn-disabled-border-color: var(--bs-danger-dark);
}

.btn-link {
    --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-border-color: transparent;
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-link-color);
    --bs-btn-disabled-border-color: transparent;

    text-decoration: none;
}

.btn-close {
    width: auto; height: auto;
    padding: 0.25rem 0.25rem; margin: 0;
    color: inherit;
    background: transparent;
    border: 0; border-radius: var(--bs-border-radius);
    opacity: 1;
}

.btn-close:focus {
    box-shadow: none;
    opacity: 1;
}

.form-control {
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-light);
    font-size: 0.8rem;
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    padding: 0.25rem 0.5rem;
    background-color: var(--bs-dark);
    border-radius: var(--bs-border-radius);
}

.form-control:focus {
    color: #fff;
    background-color: var(--bs-dark);
    border-color: var(--bs-warning);
    outline: 0;
    box-shadow: none;
}

.form-control:disabled {
    background-color: var(--bs-dark);
    opacity: .5;
}

.form-check-input {
    margin-top: 0.325em;
}

.form-check-input:focus {
    border-color: var(--bs-warning);
    outline: 0; box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.toast {
    --bs-toast-padding-x: 0.75rem;
    --bs-toast-padding-y: 0.5rem;
    --bs-toast-max-width: auto;
    --bs-toast-spacing: 0;
}

.toast-body {
    padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}

.badge {
    --bs-badge-padding-x: 0.25rem;
    --bs-badge-padding-y: 0.125rem;
    --bs-badge-font-size: 0.875em;
    --bs-badge-font-weight: var(--bs-body-font-weight);
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    
    display: inline-flex; align-items: center;
    border: var(--bs-border-width) solid transparent;
    line-height: 18px;
}

.progress {
    --bs-progress-bg: var(--bs-light);
    --bs-progress-bar-transition: width 0.1s ease;
}

.card {
    --bs-card-spacer-x: 0.5rem;
    --bs-card-spacer-y: 0.75rem;
    --bs-card-title-spacer-y: 0.25rem;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 0.5rem;
    --bs-card-cap-bg: var(--bs-light);
    --bs-card-bg: var(--bs-secondary);
    --bs-card-group-margin: 0.75rem;
}

.dropdown-menu {
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-bg: var(--bs-dark);
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-font-size: var(--bs-body-font-size);
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-divider-margin-y: var(--bs-padding-y);
    --bs-dropdown-box-shadow: none;
    --bs-dropdown-item-padding-x: var(--bs-padding-x);
    --bs-dropdown-item-padding-y: calc(var(--bs-padding-y) / 2);
}

.modal {
    --bs-modal-padding: 0.5rem 0.5rem;
    --bs-modal-bg: var(--bs-secondary);
    --bs-modal-border-color: var(--bs-border-color);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius) - 1px);
    --bs-modal-header-padding: 0.5rem 0.5rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: var(--bs-body-line-height);
    --bs-modal-footer-padding: 0.25rem 0.5rem;
    --bs-modal-footer-border-color: transparent;
    --bs-modal-footer-border-width: var(--bs-border-width);
}

.modal-header {
    background-color: var(--bs-light);
}

.modal-footer {
    padding: var(--bs-modal-footer-padding);
}

.nav {
    --bs-nav-link-padding-x: 0.5rem;
    --bs-nav-link-padding-y: 0.5rem;
    --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-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: transparent;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: transparent transparent transparent;
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-bg: var(--bs-dark);
    --bs-nav-tabs-link-active-border-color: var(--bs-dark) transparent var(--bs-warning);
}

.nav-tabs .nav-link { width: 100%; height: 100%; }

.tab-content > .tab-pane { height: 100%; }

.tooltip {
    --bs-tooltip-font-size: 0.8rem
    --bs-tooltip-color: #fff;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: auto;
    
    font-weight: var(--bs-body-font-weight);
}

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

@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;
}    

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-o-keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-moz-keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rotate {
   -webkit-animation: rotation 2s infinite linear;
   -moz-animation: rotation 2s infinite linear;
   -ms-animation: rotation 2s infinite linear;
   -o-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
}

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