:root {
    --text-light: #71A8FE;
    --text-light-2: #cbdfff;
    --sc-dark: #171822;
    --sc-light: #303241;
    --table-head-border: #303241;
    --table-body-border: #303241;
    --select-background: #171822;
    --select-background-light: #292b3d;
    --select-text-color: #71A8FE;
}


html {
  font-size: 0.7rem;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

.content {
    background: linear-gradient(to left top, #181A25, #202241, #181A25);
}
body {
    margin-bottom: 60px;
    _background: #181A25;
    background: linear-gradient(to left top, #181A25, #202241, #181A25);
    _background: linear-gradient(304.93deg, #131517 42.31%, #448BFF 99.24%);
}

#menu {
    background: #12131C;
    border-right: 1px solid #22202A;
}

#logo-bg {
    position: fixed;
    _background: url(/images/avb-header.png);
    background-size: 100% 251px;
    width: 1920px;
    min-width: 100vw;
    min-height: 251px;
}


#header {
    color: white;
}
#wrapper, #header, .header-link, .hpanel .panel-body {
    background: transparent;
    background-color: transparent;
    border: none;
}
.header-link {
    background: transparent;
    color: white;
    border: none;
    padding: 0 0 0 12px;
    font-size: 2vmax;
}

.header-link:hover {
    background: transparent;
    color: red;
}

#logo {
    width: 155px;
}
#logo.light-version {
    background-color: transparent;
    border: none;
}

.content {
    padding: 5px 20px 40px 8px;
    min-width: 320px;
}

.hpanel > .panel-heading {
    color: white;
    font-size: 2vmax;
}
.hpanel .panel-body {
    padding-top: 0;
}
.sidebar-item {
}
.sidebar-item a {
    color: var(--text-light);
    text-shadow: 0 0 20px rgb(113, 168, 254, 0.8);
    _position: relative;
}
.sidebar-item a.auth:before {
  content: '🗝';
  content: '🔑';
  opacity: 0.5;
  font-size: 0.8em;
}
.sidebar-item, .sidebar-sub-item {
    padding-left: 5px;
    border: none;
    border-bottom: solid 1px var(--table-body-border);
}

.footer {
    background: #12131C;
    border-top: 1px solid #22202A;
}

.footer a {
    color: #6a6c6f;
    text-decoration: none;
}

.page-table-container {
    overflow-x: auto;
}

.page-table {
    border-spacing: 0 5px;
}
.page-table-tbody, .page-table-thead, .page-table-tfoot {
    font-size: 1.4vmin;
}

.page-table-thead, .page-table-tfoot {
    background: #171822;
    border: 1px solid #303241;
}

.page-table-row > div:not(.empty) {
    margin-top: 5px;
    margin-bottom: 5px;
    display: table-cell;
    padding: 0.5rem;
}
/* table left-right radius */
.page-table-row > div:not(.empty):first-child, .page-table-row > div.first {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.page-table-row > div:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* table borders */
.page-table-tbody.page-table-row > div, 
.page-table-tfoot.page-table-row > div  {
    border-top: 1px solid var(--table-body-border);
    border-bottom: 1px solid var(--table-body-border);
}
.page-table-tbody.page-table-row > div:not(.empty):first-child, 
.page-table-tbody.page-table-row > div.first,
.page-table-tfoot.page-table-row > div:not(.empty):first-child, 
.page-table-tfoot.page-table-row > div.first
{
    border-left: 1px solid var(--table-body-border);
}

.page-table-tbody.page-table-row > div:last-child,
.page-table-tfoot.page-table-row > div:last-child {
    border-right: 1px solid var(--table-body-border);
}

/* table borders */
.page-table-thead.page-table-row > div {
    border-top: 1px solid var(--table-head-border);
    border-bottom: 1px solid var(--table-head-border);
}
.page-table-thead.page-table-row > div:not(.empty):first-child, 
.page-table-thead.page-table-row > div.first {
    border-left: 1px solid var(--table-head-border);
}

.page-table-thead.page-table-row > div:last-child {
    border-right: 1px solid var(--table-head-border);
}

.page-table-row:not(.page-table-thead):hover {
    filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.4));
    background-color: #303241;
}


.page-table-tbody.page-table-row,
.page-table-tfoot.page-table-row
{
    color: #71A8FE;
}
.page-table-thead.page-table-row {
    color: #666873;
}



/* titles */
.extra-title, .extra-title .widget-title {
    font-size: 1.8vmax;
    padding-bottom: 0.3vmax;
    line-height: 1;
    font-weight: 700;
    color: cornflowerblue;
}
.extra-title .widget-subtitle {
    font-size: 1.2vmax;
    padding-bottom: 0.3vmax;
    line-height: 1;
    font-weight: 700;
    color: cornflowerblue;
    color: var(--text-light-2) !important;
}

.small-title {
    font-size: 2vmax;
    font-weight: 700;
    _color: cornflowerblue;
}

.widget-title {
    color: var(--text-light);
    font-size: 1.2vmax;
    font-weight: 600;
    text-shadow: 0 0 20px rgb(113, 168, 254, 0.5);
}

.widget-subtitle {
    color: var(--text-light-2);
    font-size: 1.1vmax;
    font-weight: 600;
    text-shadow: 0 0 20px rgb(113, 168, 254, 0.5);
}

.extra-title {
    color: var(--text-light);
    text-shadow: 0 0 20px rgb(113, 168, 254, 0.5);
}
.extra-title .widget-value-data {
    color: var(--text-light-2);
}

.small-title {
    color: #CCC;
    text-shadow: 0 0 20px rgb(255, 255, 255, 0.5);
}

.widget-card {
    display: table;
    padding: 5px;
}
.widget-card > div {
    display: table-row;
}
.widget-card > div > div {
    display: table-cell;
}

.widget-card .card-value-name {
    color: var(--text-light);
    text-shadow: 0 0 20px rgb(113, 168, 254, 0.5);
    font-weight: 400;
    padding-right: 10px;
}
.widget-card .card-value-text {
    color: var(--text-light-2);
    text-shadow: 0 0 20px rgb(113, 168, 254, 0.5);
}


/* splash */
.splash {
    background: #303241;
    color: gray;
}

input.filter {
    color: var(--select-text-color);
    background: var(--select-background);
    border: 1px solid var(--table-body-border) !important;
}
input.filter:focus {
    color: var(--select-text-color);
    background: var(--select-background);
}


/* INPUTS */
.widget-content .filter-text-control {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.widget-content .filter-text-control input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.widget-content .filter-text-control span {
    display: flex;
    align-items: center;
    color: var(--select-text-color);
    padding: 0 5px;
    background: var(--select-background);
    border: 1px solid var(--table-body-border) !important;
    border-left: 0px;
    cursor: pointer;
    text-align: center;

}
.widget-content .filter-text-control span:hover {
    background-color: $input-group-addon-bg;
}



.select2 {
    font-size: 17px;
}

/* SELECT2 */
span.select2-selection__rendered {
    color: var(--select-text-color) !important;
}
select2-selection--single {
    color: var(--select-text-color) !important;
}
.select2-selection {
    border: none;
    background: var(--select-background);
    outline: none;
    border: 1px solid var(--table-body-border) !important;
}
.select2-selection--multiple {
    _min-height: 2vmax !important;
}
.select2-container--default .select2-selection--multiple {
    background: var(--select-background);
    background: var(--select-background);
}
.select2-container .select2-selection--single {
    border: none !important;
    background: var(--select-background);
    outline: none;
    _font-size: 1.2vmax;
    border: 1px solid var(--table-body-border) !important;
    _height: 1.2vmax;
}

.select2-dropdown {
    background: var(--select-background);
    border: 1px solid var(--table-body-border);
}

.select2-results__option.select2-results__option {
    background-color: var(--select-background) !important;
    color: var(--select-text-color) !important;
}

.select2-results__option.select2-results__option {
    background-color: var(--select-background-light) !important;
    color: var(--select-text-color) !important;
}

.select2-results__option.select2-results__option--highlighted {
    background-color: var(--select-background) !important;
    color: var(--select-text-color) !important;
}

.select2-selection__clear {
    _color: var(--select-text-color);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--select-background-light) !important;
    color: var(--select-text-color);
}

/* select2 - x */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-right: 15px;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-right: -9px;
    margin-top: -3px;
}

.select2-search__field:focus-visible, .select2-selection__rendered:focus-visible, .select2-selection:focus-visible, .select2-selection--single:focus-visible {
    color: var(--select-text-color) !important;
}

/* /select2 */
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--sc-dark) var(--sc-light);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: var(--sc-light);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--sc-dark);
    border-radius: 10px;
    border: 3px solid var(--sc-light);
}


/* apexcharts */
svg.apexcharts-svg {
    background: transparent !important;
}