@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

html {
    width: 100%;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--hilite) white;
}

html * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: 300 !important;
    scrollbar-width: thin;
    scrollbar-color: var(--hilite) white;
}

@media (max-width: 1600px) {
    html {
        font-size: 0.875rem !important;
    }
}

:root {
    --my-nav-active-bg: #666677;
    --my-primary: #f0f0f0;
    --my-primary-light: #7090d9;
    --my-text-primary: #f0f0f0;
    --my-bg-secondary: #f1f5fd;
    --my-bg-secondary-hover: #f8fafe;
    --my-text-right: #707070;
    --my-tab-inactive: #D6D6D6;
    --dark: #122231;
    --dark2: #324251;
    --dark-bg: #313438;
    --dark-sidebar-bg: #222;
    --dark-primary: #029a7b;
    --dark-primary-text: #f0f0f0;
    --dark-secondary: #cdd5cf;
    --dark-terciary: #5c6e62;
    --dark-secondary-text: #050505;
    --dark-secondary-hover: #d9dfdb;
    --dark-divider: #333;
    --dark-tab-inactive: #f0f0f0;
    --item-color: #324146;

    --metricsbg: #414448;
    --metricsbghover: #616468;
    --metricsfooterbg: #3e4145;
    --border: #666;
    --borderWidth: 3px;
    /* 2024 New set of colors? */
    --hilite: #03CEA4;
    --clear: #cdd5cf;
    --dark: #333343;

    /* 2024 New new set */
    --red: #d42939;
    --blood: #5b1636;
    --yellow: #ed9b2c;

    --info-background: rgba(3, 206, 164, 0.2);
    --info-color: #f0f0f0;
    --error-background: #f7d4d7;
    --graph-title: #03CEA4;

    /* Some standard colors */
    --level1: #99a93d;
    --level2: #a9b94d;
    --level3: #f0ca27;
    --level4: #c88501;
    --level5: #bf3701;

    /* Some Wonderful colors */
    --terracota: #E07A5F;
    --antiquewhite: #F4F1DE;
    --deepslateblue: #3D405B;
    --creme: #d8b26c;
    --mutedsagegreen: #81B29A;
    --darkmaroon: #6E001B;

    /* RPE Colors */
    --rpe1: #ed4024;
    --rpe2: #f18131;
    --rpe3: #f5c546;
    --rpe4: #4ce43f;
    --rpe5: #41dedd;
    --rpe6: #5995ff;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--dark-bg);
    cursor: default;
    border: 1px solid var(--hilite) !important;

}

.form-control,
.form-control:focus {
    color: var(--dark-primary-text);
    border: 1px solid var(--hilite) !important;
    outline: none !important;
}

.dt-length select.form-control {
    background-color: var(--dark-sidebar-bg);
}

.color-primary {
    color: var(--my-primary);
}

textarea:focus,
input:focus {
    outline: none;
}

body {
    background-color: #122231;
    color: var(--my-text-primary) !important;
    font-size: 0.8em !important;
    height: 100%;
}

a,
button {
    cursor: pointer;
}

/* DASHBOARD */
#carouselDashboard {
    width: 100%;
    height: 100%;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    z-index: 3;
}

.carousel-control-prev {
    left: 0.75rem;
}

.carousel-control-next {
    right: 0.75rem;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
}

.db-card {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    height: calc(100vh - 3.375rem - 6rem);
    border-radius: 0.45rem;
    box-shadow: 0 3px 6px #00000029;
}

.db-card .left {
    background-color: #111;
    width: 50%;
    height: 100%;
    border-top-left-radius: 0.45rem;
    border-bottom-left-radius: 0.45rem;
    padding: 1.2rem 1.55rem 1.2rem 1.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: var(--my-primary);
}

.db-card .right {
    background-color: var(--dark-secondary);
    /* color: var(--my-text-right); */
    width: 50%;
    height: 100%;
    border-top-right-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
    padding: 1.2rem 1.55rem 1.2rem 1.55rem;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.db-card .left .title {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 600;

    align-self: flex-start;
}

.db-card .right .title {
    font-size: 0.9rem;
    line-height: 0.9rem;
    align-self: flex-start;
}

.db-card .left .icon,
.db-card .right .icon {
    width: 6.25rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.db-card .left .icon.tall,
.db-card .right .icon.tall {
    width: auto;
    height: 5rem;
}

.db-card .left .data,
.db-card .right .data {
    font-size: 1.2rem;
    line-height: 1.2rem;
    color: var(--my-primary);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 4.4rem));
}

.dashboard-data {
    font-size: 12rem;
    line-height: 12rem;
    color: var(--my-primary);
    position: absolute;
    right: 16px;
    top: 25px;
}

.dashboard-data-timeplayed {
    font-size: 12rem;
    line-height: 12rem;
    color: var(--my-primary);
    position: absolute;
    left: auto;
    top: 25%;
}

@media (max-width:1600px) {

    .dashboard-data,
    .dashboard-data-timeplayed {
        font-size: 10rem;
        line-height: 10rem;
    }
}

@media (max-width:1300px) {

    .dashboard-data,
    .dashboard-data-timeplayed {
        font-size: 8rem;
        line-height: 8rem;
    }
}

.dashboard-gfx-timeplayed {
    width: 80% !important;
    height: auto;
    position: absolute;
    left: auto;
    top: 45%;
}

.hourmin {
    color: #444 !important;
    font-size: 8rem;
    font-weight: bold;
}

.db-card .right ul.list {
    color: #333;
    list-style: none;
    user-select: none;
    overflow-y: auto;
    width: 100%;
}

.db-card .right ul.list li {
    font-size: 0.875rem;
    line-height: 0.875rem;
    margin: auto;
    border-bottom: 2px solid #a0a0a0;
    padding: 0.75rem 0;
    cursor: pointer;
    display: flex;
}

.db-card .right ul.list li a {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
    margin-top: 0.25rem;
}

.db-card .right ul.list li img {
    max-width: 2rem;
    max-height: 2rem;
    margin-right: 0.25rem;
}

.db-card .right ul.list li div.img {
    height: 2rem;
    width: 2rem;
    margin-right: 0.25rem;
    border-radius: 50%;
    background: #ebeaea;
    padding: 1px;
    display: flex;
}

.db-card .right ul.list li div.img img {
    max-width: calc(2rem - 2px);
    max-height: calc(2rem - 2px);
    margin: auto;
}

.db-card .right ul.list li:last-child {
    border: none;
}

.db-card .right ul.list li:hover {
    background-color: var(--dark-secondary-hover);
}

.db-card .right.tab {
    background-color: var(--dark-primary);
    color: var(--dark-primary-text);
    width: 50%;
    height: 100%;
    border-top-right-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
    padding: 0;
}

.db-card .right.tab .title {
    background-color: var(--dark-primary);
    padding: 1.2rem 0 0.625rem 1.55rem;
}

.db-card .right.tab .tab-headers {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.db-card .right.tab .tab-headers span {
    background-color: var(--dark-primary);
    color: var(--dark-tab-inactive);
    width: 100%;
    text-align: center;
    border-top-left-radius: 0.45rem;
    border-top-right-radius: 0.45rem;
    font-size: 0.875rem;
    line-height: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0;
    cursor: pointer;
}


.db-card .right.tab .tab-headers span.active {
    background-color: var(--dark-secondary);
    color: var(--dark-primary);
}

.db-card .right.tab .tab-content {
    width: 100%;
    height: calc(100% - 1.875rem - 2.825rem);
    padding: 0 1rem;
    background-color: var(--dark-secondary);
}

.db-card .right.tab .tab-content .tab-body {
    height: calc(100% - 2rem);
}

.db-card .right.tab .tab-content .tab-body ul.list {
    overflow-y: auto;
    height: 100%;
}

.db-card .right.tab .tab-content .tab-body ul.list li a {
    display: flex;
    flex-direction: column;
}

.db-card .right.tab .tab-content .tab-body ul.list li a span.header {
    margin-bottom: 0.5rem;
}

.db-card .right.tab .tab-content .tab-body ul.list li a div.item {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
}

.db-card .right.tab .tab-content ul.list li a div.item .tab-icon {
    height: 1rem;
    margin-right: 0.5rem;
}

.db-card .right .time_type {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    padding: 0 1rem;
    width: 100%;
    color: var(--my-text-right) !important;
}

.db-card .right .time_type .time_row {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.db-card .right .time_type .time_row .time_title {
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 0.875rem;
}

.db-card .right .time_type .time_row .time_data {
    font-size: 1.25rem;
    line-height: 1.25rem;
}

/* END DASHBOARD */

hr {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

hr.dark {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.img-mini {
    height: 60px;
    max-width: 120px;
    width: auto;
    aspect-ratio: 1 auto;
}

.pointer {
    cursor: pointer !important;
}

.dashboard-gfx {
    height: 60% !important;
    width: auto;
    position: absolute;
    left: auto;
    top: 25%;
}

/************* SWEETALERT2 MODIFIER **********/
.swal2-container {
    z-index: 10000;
}

.swal2-container a {
    color: var(--hilite) !important;
}

.swal2-actions button {
    box-shadow: none !important;
}

.swal2-popup .swal2-close:focus {
    box-shadow: none !important;
}

div:where(.swal2-container) div:where(.swal2-validation-message) {
    background-color: transparent;
    color: white;
}

/************* SELECT2 MODIFIER **********/
.select2-container--default .select2-selection {
    height: 100%;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    background-color: var(--metricsbg);
    color: var(--clear);
    border: 1px solid var(--hilite) !important;
}

.select2-container--default .select2-selection .select2-selection__rendered {
    line-height: 1.5rem;
    color: #f0f0f0;
}

.select2-container--default .select2-selection .select2-selection__arrow {
    height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--default .select2-selection.select2-selection--multiple {
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--dark-primary);
    color: white;
    border-color: var(--hilite);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
}

.select2-container--default .select2-search {
    background-color: var(--metricsbg);
}

.select2-container--default .select2-search input {
    background-color: var(--metricsbg);
    color: var(--clear);
}

.select2-results__option[aria-selected] {
    background-color: var(--metricsbg) !important;
    color: var(--dark-primary-text) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--hilite) !important;
    color: white !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--dark-primary) !important;
    color: white !important;
}


.select2-search {
    background-color: var(--dark-sidebar-bg);
}

.select2-search input {
    background-color: var(--dark-bg);
    color: var(--clear);
}

.modal-container {
    background-color: var(--dark-sidebar-bg) !important;
    color: var(--clear) !important;
}

.modal-container .select2-search {
    background-color: var(--dark-sidebar-bg) !important;
}

.modal-container .select2-search input {
    background-color: var(--dark-sidebar-bg) !important;
    color: var(--clear) !important;
}

.select2-results {
    background-color: var(--metricsbg);
}

.select2-results .select2-disabled,
.select2-results__option[aria-disabled=true] {
    display: none;
}

/************* END SELECT2 MODIFIER **********/

.text-warning {
    color: var(--yellow) !important;
}

.text-success {
    color: var(--hilite) !important;
}

.text-primary {
    color: var(--dark-primary-text) !important;
}


.bg-gradient-primary-login .card-body {
    border-radius: 100%;
    background-color: var(--metricsbg);
    border: 1px solid var(--border);
}

.card-body {
    background-color: var(--metricsbg) !important;
    border: 1px solid var(--border) !important;
}

.bg-gradient-primary {
    background-color: var(--dark-sidebar-bg);
    background-image: url();
}

.login-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.login-logo img {
    width: 3rem;
}

.login-logo>div {
    font-size: 2rem;
    font-weight: bold;
    padding: 10px 15px;
    color: #000;
}

.bg-login-image {
    min-height: 350px;
}

.grey-text {
    color: #858796 !important;
}

.blue-text {
    color: #34bed3 !important;
}

.red-text {
    color: #d34a34 !important;
}

.green-text {
    color: #34d399 !important;
}

.btn-primary {
    background-color: var(--dark-primary);
    border-color: var(--dark-primary);
    color: var(--dark-primary-text);
    transition: all 0.5s ease-out;
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary.disabled {
    background-color: var(--dark-primary);
    border-color: var(--dark-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    filter: brightness(1.15);
    background-color: var(--dark-primary);
    border-color: var(--dark-primary);
}

.btn-outline-primary {
    color: var(--dark-primary) !important;
    border-color: var(--dark-primary) !important;
}

.sidebar-logo img {
    width: 100%;
}

.sidebar-logo>div {
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 15px;
    color: #000;
}

.sidebar.toggled .sidebar-brand .sidebar-logo {
    flex-direction: column;
}

.sidebar.toggled .sidebar-brand .sidebar-logo>div {
    font-size: 0.8rem;
    padding: 2px;
}

.sidebar-dark #sidebarToggle::after {
    color: #fff;
}

.customer-name {
    font-size: 11px;
    text-align: center;
    padding-bottom: 1rem;
    color: var(--dark-primary-text);
}




table.table-custom thead th,
/*table.table-custom tfoot th,*/
table.table-custom tbody td {
    border-bottom: 1px solid #666;
    vertical-align: middle;
    color: #ddd;
}

table.table-custom tfoot th {
    border-top: 1px solid #999;
    vertical-align: middle;
    color: #fff;
    background-color: var(--metricsfooterbg);
}

.page-item .page-link,
.page-item.disabled .page-link {
    background-color: #717384;
    border-color: #6b6d7d;
}

.page-item .page-link {
    color: #fff;
}

.page-item.disabled .page-link {
    color: rgba(255, 255, 255, .3);
}

.page-item.active .page-link {
    color: #fff;
    background-color: #4e4f5b;
    border-color: #6b6d7d;
}

td.actions {
    text-align: center;
}

td.actions a {
    margin: 0 2px;
}

td.action-2 {
    width: 10%;
}

td.action-3 {
    width: 156px;
}

td.order {
    width: 50px;
    text-align: center;
}

td.date {
    width: 150px;
}

.sidebar .sidebar-brand {
    height: auto;
    padding: 1rem;
}

.list-group-item,
.list-group-flush>.list-group-item:last-child {
    border-bottom: 1px solid #fff;
    background-color: transparent;
}

div#content.no-padding .container-fluid {
    padding: 0;
    margin: 0;
}

#div.container-fluid {
    background-color: var(--dark) !important;
}

.container-fluid {
    height: calc(100% - 4.375rem);
}

.hide {
    display: none !important;
}

.hide-form {
    visibility: hidden;
    position: absolute;
}

form#datos {
    height: calc(100% - 4rem);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.has-success .form-control {
    border-bottom: 2px solid var(--hilite);
}

.has-danger .form-control {
    border-bottom: 2px solid var(--red);
}

.form-group .text-help {
    background: var(--red);
    color: white;
    padding: 4px 8px;
    margin-top: 4px;
    border-radius: 4px;
}

#wrapper {
    height: 100%;
}

#wrapper #content-wrapper {
    background-color: var(--dark-bg);
    height: 100%;
    width: calc(100% - 6.5rem);
}

#wrapper #content-wrapper #content {
    height: 100%;
}

.card {
    background-color: var(--dark-sidebar-bg);
    color: var(--dark-primary-text);
    border-color: var(--dark-divider);
}

.card.table-display {
    height: calc(100% - 4rem);
}

#allpanel .card.table-display {
    height: calc(100% - 1rem);
}

.card.table-display .card-body {
    overflow-y: auto;
}

.card.form-display {
    height: 100%;
}

.nav-tabs.custom {
    position: relative;
    z-index: 1;
    border: none;
}

.nav-tabs.custom .nav-item {
    position: relative;
}

.sidebar {
    height: 100%;
    overflow: hidden !important;
}

.sidebar-dark .sidebar-heading {
    color: #666;
}

.sidebar-dark .nav-item .nav-link,
.sidebar-dark .nav-item .nav-link i,
.sidebar .sidebar-card p {
    color: var(--dark-primary-text);
    cursor: pointer;
}

.sidebar-dark .nav-item .nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.sidebar-dark .nav-item .nav-link,
.sidebar.toggled .nav-item .nav-link {
    padding: 0.55rem 0.7rem;
    margin: 0.2rem 0.3rem;
    width: 5.9rem;
}

.sidebar-dark .nav-item .nav-link:hover:not(.active),
.sidebar-dark .nav-item .nav-link:hover:not(.active) i {
    color: var(--hilite);
    fill: var(--hilite) !important;
    background-color: black;
}

.sidebar-dark .nav-item .nav-link.active {
    background-color: #000;
    color: var(--hilite);
    border-radius: 5px;
    border: 1px solid var(--hilite);
}

.sidebar-dark .nav-item.opened .nav-link {
    background-color: #333;
    color: var(--hilite) !important;
    fill: var(--hilite) !important;
}

.sidebar-dark hr.sidebar-divider {
    border-color: #555;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    color: #3a3b45;
    font-weight: normal;
    background-color: #eaecf4;
}

.sidebar .nav-item .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.75rem;

    border-color: #ccc;
    border-width: 0 2px 2px 0;
    padding: 2px;
}

.sidebar .nav-item .arrow.up {
    transform: translateY(-50%) rotate(-135deg) !important;
    -webkit-transform: translateY(-50%) rotate(-135deg) !important;

}

.sidebar .nav-item .arrow.down {
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
}

.nav-tabs.custom .nav-link:not(.add-language) {
    border-radius: 10px;
    min-width: 100px;
    background-color: #3c4043;
    color: #7b7e89;
    text-align: center;
    border: none;
    margin-right: 10px;
}

.nav-tabs.custom .nav-link.active {
    color: #3c4043;
    background-color: #FFF;
}

.nav-tabs.custom .nav-link.add-language {
    border-radius: 30px;
    min-width: 0;
    padding: 7px 12px;
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 10px;
    cursor: pointer;
}

.nav-tabs.custom .delete-language {
    color: #FFF;
    border-radius: 100%;
    text-align: center;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, -50%);
    font-size: 12px;
    background-color: #dc3545;
}

.topbar {
    height: 3.375rem;
    border-bottom: 1px solid var(--dark-divider);
    background-color: var(--dark-sidebar-bg);
}

.topbar .topbar-divider {
    border-right: 1px solid var(--dark-divider);
}

.topbar .nav-item .nav-link {
    height: 3.375rem;
    color: var(--dark-primary-text) !important;
}

.wrap-delete-file {
    display: flex;
    align-items: center;
}

.delete-file,
.delete-file:hover {
    color: #FFF;
    border-radius: 100%;
    text-align: center;
    width: 25px;
    height: 24px;
    margin-left: 10px;
    font-size: 16px;
    line-height: 24px;
    background-color: #dc3545;
    display: inline-block;
}

.dropzone {
    border: 0.0625rem solid #c6ccd6;
    border-radius: 0.5rem;
    background-color: #f9f9fb;
    display: block;
    margin: 40px;
}

.dropzone .dropzone-container {
    padding: 2rem 0;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #8c96a8;
    z-index: 20;
}

.dropzone .dropzone-container .dropzone-title {
    padding-top: 1.5rem;
}

.dropzone .dropzone-container .browse {
    text-decoration: underline;
    color: #007bff;
}

.dropzone .file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}

.file-icon {
    /* Need position to allow stacking of pseudo-elements */
    position: relative;
    width: 4rem;
    height: 5.25rem;
    /* Padding for demo purposes */
    padding: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 2rem;
    color: #007bff;
    /* Second sheet of paper */
}

.file-icon,
.file-icon:before,
.file-icon:after {
    background-color: #ffffff;
    border-radius: 0.25rem;
    border: 0.125rem solid #b8bec9;
}

.file-icon:before,
.file-icon:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.125rem solid #ccd0d8;
}

.file-icon:before {
    left: -0.625rem;
    top: 0.5rem;
    z-index: -1;
}

.file-icon:after {
    top: -0.25rem;
    right: -0.25rem;
    left: auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border-width: 0.625rem;
    border-style: solid;
    border-color: #f9f9fb #f9f9fb #b8bec9 #b8bec9;
}

a[href^="http://maps.google.com/maps"] {
    display: none !important
}

a[href^="https://maps.google.com/maps"] {
    display: none !important
}

.gmnoprint a,
.gmnoprint span,
.gm-style-cc {
    display: none;
}

.gm-style-iw {
    color: #565656;
    font-weight: bold;
    font-family: 'Ubuntu', sans-serif;
}

/* The button used to open the sidebar */
.openbtn {
    font-size: 1.25rem;
    cursor: pointer;
    background-color: #111;
    color: white;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

.gm-customcontrol {
    padding: 10px;
    width: 60px;
}

.gm-customcontrol-top {
    padding: 10px;
    height: 60px;
    width: 600px;
}

.gm-customcontrol a {
    height: 40px;
    min-width: 40px;
    padding: 0 5px;
    font-size: 21px;
    border-radius: 3px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.gm-customcontrol-right a {
    display: block;
    margin-bottom: 5px;
}

.gm-customcontrol-top a {
    display: inline-block;
    margin-right: 5px;
}

.gm-customcontrol-top a i {
    color: #ea4335;
}

.gm-customcontrol a.gm-custom-info,
.gm-customcontrol-top a.gm-custom-info {
    color: #565656;
    background-color: #ffffff;
}

.gm-customcontrol a.gm-custom-info:hover,
.gm-customcontrol-top a.gm-custom-info:hover {
    color: #000;
    background-color: #ebebeb;
    text-decoration: none;
}

.gm-customcontrol a.gm-custom-delete,
.gm-customcontrol-top a.gm-custom-delete,
.gm-customcontrol a.gm-custom-delete:hover,
.gm-customcontrol-top a.gm-custom-delete:hover {
    color: #fff;
    background-color: var(--red);
    border: 1px solid var(--red);
}

.gm-customcontrol a.gm-custom-delete i,
.gm-customcontrol a.gm-custom-delete:hover i {
    color: #fff;
}

.pac-input {
    background-color: #fff;
    border: 1px solid black;
    border-radius: 5px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 300;
    height: 42px;
    line-height: 42px;
    padding: 0 11px 0 13px;
    margin-top: 10px;
    margin-left: 10px;
    text-overflow: ellipsis;
    width: 240px;
}

.h3 {
    margin-bottom: 15px !important;
}

@media (max-width: 1600px) {
    .h3 {
        font-size: 1.5rem !important;
    }
}

.h3 .form-cancel,
.h3 .form-save {
    margin-left: 5px;
}


.h3 .form-delete {
    background-color: #be2617;
    border-color: #be2617;
    margin-left: 1.25rem;
}


#form-content .h3 {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    background-color: #1a1a1c;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    margin-bottom: 0;
    z-index: 999;
}

#form-content-nofixed {
    border-radius: 8px;
    background-color: #1a1a1c;
    min-height: 250px;
    position: relative;
}

#form-content-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#form-content-info h1 .btn.float-md-right {
    margin-left: 10px;
}

.daterangepicker {
    color: #000;
    z-index: 10001;
}

/******** GRAFANA ************/

iframe body.app-grafana {
    background: transparent !important;
}

.map-dashboard {
    height: 450px;
    width: 100%;
    position: relative;
    margin-bottom: 50px;
}

.noinfo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.width-100 {
    width: 100%;
}

.loading-data {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
    color: #fff;
    font-size: 3rem;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.myChart {
    width: 100%;
}

.wave {
    display: inline-block;
    border: 5px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    border-style: solid;
    margin: 4px;
}

.waveStrength-0 .wv4.wave,
.waveStrength-0 .wv3.wave,
.waveStrength-0 .wv2.wave,
.waveStrength-0 .wv1.wave {
    border-top-color: #eee;
}

.waveStrength-3 .wv4.wave,
.waveStrength-2 .wv4.wave,
.waveStrength-2 .wv3.wave,
.waveStrength-1 .wv4.wave,
.waveStrength-1 .wv3.wave,
.waveStrength-1 .wv2.wave {
    border-top-color: #eee;
}

.progress {
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
    min-width: 300px;
}

.progress-inner {
    height: 16px;
    line-height: 16px;
    border-radius: 2px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.progress-moved .progress-inner {
    background-color: var(--hilite);
}

.progress-moved .progress-inner.infinite {
    width: 100% !important;
    animation: indeterminateAnimation 1s infinite linear;
    transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
    0% {
        transform: translateX(0) scaleX(0);
    }

    40% {
        transform: translateX(0) scaleX(0.4);
    }

    100% {
        transform: translateX(100%) scaleX(0.5);
    }
}

/* CIRCULAR PROGRESS */
.circular_progress {
    height: 160px;
    width: 160px;
    position: relative;
    margin: auto;
}

.circular_progress .progress-circle {
    transform: rotate(-90deg);
    margin-top: -40px;
    position: absolute;
}

.circular_progress .progress-circle-back {
    fill: none;
    stroke: #D2D2D2;
    stroke-width: 10px;
}

.circular_progress .progress-circle-prog {
    fill: none;
    stroke: var(--hilite);
    stroke-width: 10px;
    stroke-dasharray: 0 999;
    stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.3s linear 0s;
}

.circular_progress .progress-text {
    width: 100%;
    position: absolute;
    top: 60px;
    text-align: center;
    font-size: 2em;
}

/* END CIRCULAR PROGRESS */

#allpanel {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#allpanel a,
#allpanel a:hover {
    color: var(--my-primary);
    text-decoration: none;
}

.table-display a,
.table-display a:hover {
    color: #fff !important;
}

#lpanel {
    position: relative;
    width: 20rem;
    height: calc(100vh - 3.375rem);
    background-color: var(--dark-bg);
    margin: 0;
    padding: 5px 10px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#cpanel .save_stat_name {
    display: inherit;
    background-color: var(--dark-primary);
    color: var(--dark-primary-text) !important;
    border: 1px solid var(--hilite);
}

#cpanel .save_stat_name:hover {
    filter: brightness(1.15);
}

#cpanel {
    height: calc(100vh - 3.375rem);
    background-color: var(--dark-bg);
    padding: 10px 5px 0 5px;
    flex-shrink: 0;
    width: calc(100% - 32rem);
    position: relative;
}

#cpanel.no-rpanel {
    width: calc(100% - 20rem);
    padding-right: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}

#cpanel .stat_name_div {
    display: flex;
    flex-direction: column;
    width: 30rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1300px) {
    #lpanel {
        width: 16rem;
    }

    #cpanel {
        width: calc(100% - 28rem);
    }

    #cpanel.no-rpanel {
        width: calc(100% - 16rem);
        padding-right: 3rem;
    }

    #cpanel.no-rpanel.no-scroll {
        padding-right: 0;
    }

    #cpanel .stat_name_div {
        width: 20rem;
    }
}


#cpanel .stat_name {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

#cpanel .stats_history_div,
#cpanel .stats_ecg_div {
    margin-top: auto;
    margin-right: 1.25rem;
    margin-bottom: 1rem;
    margin-left: auto;
}

#cpanel .stats_ecg_div {
    margin-right: 10px;
}

#cpanel .stats_history,
#cpanel .stats_ecg {
    display: flex;
    background-color: var(--dark-primary);
    color: white !important;
}

#cpanel .team_period_select,
#cpanel .team_cut_select,
#cpanel .player_period_select,
#cpanel .player_cut_select {
    width: fit-content;
    display: flex;
    flex-direction: column;
}

#cpanel .team_period_select,
#cpanel .player_period_select {
    margin-left: 1.25rem;
}

#cpanel .team_period_select label,
#cpanel .team_cut_select label,
#cpanel .player_period_select label,
#cpanel .player_cut_select label {
    font-weight: bold;
}

#cpanel .team_period_select select#team_period,
#cpanel .team_cut_select select#team_cut,
#cpanel .player_period_select select#player_period,
#cpanel .player_cut_select select#player_cut {
    min-width: 200px !important;
}

#cpanel .player_cut_select {
    margin-left: 1rem;
}

#cpanel .period-select {
    display: flex;
    flex-direction: row !important;
}

#cpanel .load_team_period {
    margin-left: 0.5rem;
    margin-top: auto;
    display: flex;
}

.ai-analysis {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 1rem 2rem;
    border: 2px solid var(--hilite);
    border-radius: 0.5rem;
    width: 32rem;
    height: calc(100% - 10rem);
    max-height: calc(100% - 10rem);
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    overflow-y: auto;
    background-color: var(--dark-bg);
    color: white;
    text-align: justify;
    z-index: 99999;
}

#cpanel .ai-analysis {
    bottom: 1rem;
    right: 1rem;
}

.card-body>.ai-analysis {
    bottom: 1.5rem;
    right: 2rem;
}

.ai-analysis.hidden {
    width: 0;
    height: 0;
    padding: 0;
    border: none;
}

.ai-analysis ol,
.ai-analysis ul {
    list-style-position: inside;
}

.ai-analysis ol {
    list-style-type: decimal;
}

.ai-analysis ul {
    list-style-type: circle;
}

.ai-analysis span.bold {
    font-weight: bold !important;
}

.ai-analysis h5 {
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.ai-analysis h5:first-child {
    margin-top: 0;
}

.ai-analysis .close-analysis {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    color: var(--hilite);
    font-size: 1.5rem;
}

.ai-analysis-btn {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 1rem 1.5rem;
    border: 2px solid var(--hilite);
    border-radius: 0.5rem;
    width: fit-content;
    background-color: var(--dark-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: normal !important;
    user-select: none;
}

#cpanel .ai-analysis-btn {
    bottom: 1rem;
    right: 1rem;
}

.card-body>.ai-analysis-btn {
    bottom: 1.5rem;
    right: 2rem;
}

.ai-analysis-btn .material-symbols-outlined {
    margin-right: 1rem;
}

.ai-analysis-btn .material-symbols-outlined.loading {
    animation: rotation 1s linear infinite;
}

.ai-analysis-type {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    border: 2px solid var(--hilite);
    border-radius: 0.5rem;
    width: 14rem;
    background-color: var(--dark-primary);
    display: flex;
    align-items: center;
    font-weight: normal !important;
    user-select: none;
    flex-direction: column;
    justify-content: space-around;
}

#cpanel .ai-analysis-type {
    bottom: 5rem;
    right: 1rem;
}

.card-body>.ai-analysis-type {
    bottom: 5.5rem;
    right: 2rem;
}

.ai-analysis-type .options {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.ai-analysis-type .option {
    padding: 0.5rem;
    width: 50%;
    text-align: center;
    cursor: pointer;
}

.ai-analysis-type .option:first-child {
    border-right: 1px solid var(--hilite);
    border-top-left-radius: 0.5rem;
}

.ai-analysis-type .option:last-child {
    border-top-right-radius: 0.5rem;
}


.ai-analysis-type .option:hover {
    background-color: #02735c;
}

.ai-analysis-type .limits {
    width: 100%;
    padding: 0.25rem 1rem;
    border-top: 1px solid var(--hilite);
    text-align: center;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background-color: var(--metricsbg);
}

.ai-analysis-type .limits.rounded {
    border-radius: 0.5rem;
}

#rpanel {
    height: calc(100vh - 3.375rem);
    background-color: var(--dark-bg);
    margin: 0;
    padding: 5px;
    flex-shrink: 0;
    width: 12rem;
}

#rpanel #rpanelt {
    table-layout: auto;
    width: 100%;
}

#player-syncro {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#player-syncro .upload-buttons,
#player-syncro .flex-buttons,
.firmware .upload-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#player-syncro .upload-buttons .item,
.firmware .upload-buttons .item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hilite);
    border-radius: 4px;
    text-align: center;
    margin: 0 1rem;
    padding: 1rem;
    width: 10rem;
    cursor: pointer;
}

#player-syncro .upload-buttons .item:hover,
.firmware .upload-buttons .item:hover {
    background-color: var(--dark-primary);
}

#player-syncro .upload-buttons .item .icon,
.firmware .upload-buttons .item .icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

#player-syncro .tracker_help {
    color: var(--hilite) !important;
}

#player-syncro .sessions_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#player-syncro .sessions_list .session_item {
    padding: 1rem;
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    text-align: right;
    border: 1px solid var(--border);
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
}

#player-syncro .sessions_list .session_item.active {
    background-color: var(--dark-primary);
    color: white;
}

#player-syncro .sessions_list .session_item:not(.active):hover {
    background-color: var(--dark-primary);
}

#player-syncro .copy_player_div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#player-syncro .copy_player_div .field {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin-bottom: 0.5rem;
}

#player-syncro .copy_player_div .field select {
    width: 100% !important;
    margin: auto 0;
}

#player-syncro .copy_player_div .field label {
    margin-bottom: 0.25rem;
}

#player-syncro .copy_player_div .flex {
    display: flex;
    flex-direction: row;
    width: 80%;
    align-items: center;
    justify-content: space-between;
}

#player-syncro .copy_player_div .flex .field {
    width: calc(50% - 1rem)
}

#player-syncro .copy_player_div .flex .field input {
    width: 100%;
}

.create_periods_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.create_periods_div .flex {
    display: flex;
    flex-direction: row;
    width: 80%;
    align-items: center;
}

.create_periods_div .flex .field {
    width: calc(50% - 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}

.create_periods_div .flex .field select {
    width: 100% !important;
    margin: auto 0;
}

.create_periods_div .flex .field label {
    margin-bottom: 0.25rem;
}

.create_periods_div .btn {
    width: 80%;
}

.create_periods_div .delete_period {
    font-size: 2rem;
    margin-top: auto;
    margin-bottom: 0.5rem;
    color: var(--red);
    cursor: pointer;
    user-select: none;
}

#pitch_options {
    float: left;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #333 !important;
}

#pitch-view {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: calc(100% - 5px);
    height: calc(100% - 17rem);
    vertical-align: top;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.metric-container #pitch-view {
    padding: 0 1.25rem;
}

#pitch-view img,
#pitch-view svg {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

#pitch-view.stats img {
    margin: initial;
}

#pitch-view.horizontal {
    width: 100%;
    height: 100%;
}

#pitch-view.horizontal img {
    width: 100%;
    height: auto;
}


.stats_buttons_div {
    padding-left: 1.25rem;
}

.stats_buttons_div label {
    font-weight: bold;
}

.tab_buttons {
    align-items: end;
    display: flex;
    border-bottom: 1px solid var(--hilite);
}

#table_buttons.tab_buttons {
    border-bottom: 0;
}

#heatmap_buttons.tab_buttons {
    border-bottom: 0;
}

.tab_buttons .button {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    padding: 10px;
    color: var(--dark-primary-text) !important;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.tab_buttons .button.active {
    background-color: var(--dark-primary);
    border-color: var(--hilite) var(--hilite) transparent var(--hilite) !important;
}

#svgGrid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#svgMap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#pitch-view-tmp {
    visibility: hidden;
    z-index: -1;
}

#pitch-view #map2dheatmap,
#pitch-view-tmp #map2dheatmap-tmp,
#pitch-view #map2dgrid {
    position: absolute;
    width: calc(100% - 2.5rem);

}

#pitch-view #map2dheatmap #map2dheatmap-content,
#pitch-view-tmp #map2dheatmap-tmp #map2dheatmap-content-tmp,
#pitch-view #map2dgrid #map2dgrid-content {
    height: 100%;
    width: 100%;
}

#pitch-view #map {
    width: 100%;
    height: 100%;
}

.metric-container #pitch-view #map {
    min-height: 400px;
}

.replay-controls {
    user-select: none;
    position: relative;
    width: 290px;
    height: 3.375rem;
    line-height: 3.375rem;
    display: flex;
    flex-direction: row;
}

.replay-controls i {
    align-self: center;
}

.replay-options {
    display: flex;
    flex-direction: row;
    height: 3rem;
    width: calc(100% - 5px);
    justify-content: space-around;
    position: relative;
}

.replay-options label {
    align-self: center;
    font-weight: 500;
}

.replay-options .right {
    position: absolute;
    right: 25%;
}

.replaybar {
    user-select: none;
    position: absolute;
    bottom: 13rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: #ccc;
    height: 0.5rem;
    width: calc(100% - 1rem - 1.25rem);
    margin-left: 10px;
    z-index: 99;
}

.replaybar .replaybar-inner {
    position: absolute;
    bottom: 0rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: var(--dark-terciary);
    height: 0.5rem;
    width: 0;
}

.replaybar .control {
    user-select: none;
    position: absolute;
    bottom: -0.25rem;
    border-radius: 50%;
    border: 2px solid var(--dark-primary);
    background-color: var(--dark-secondary);
    height: 1rem;
    width: 1rem;
    left: -0.5rem;
}


@media (max-width: 1500px) {
    .replay-options .right {
        right: 0;
    }
}

@media (max-width: 1300px) {
    .replaybar {
        height: 1rem;
    }

    .replaybar .replaybar-inner {
        height: 1rem;
    }

    .replaybar .control {
        height: 2rem;
        width: 2rem;
        bottom: -0.5rem;
        left: -1rem;
    }
}

.replay-periods {
    width: calc(100% - 1rem - 1.25rem);
    margin-left: 10px;
    user-select: none;
    position: absolute;
    bottom: 10.5rem;
    height: 2.5rem;
}

.replay-periods .period {
    user-select: none;
    position: absolute;
    bottom: 0;
    height: 2.5rem;
    background-color: var(--dark-primary);
    cursor: pointer;
    border-radius: 0 0 0.25rem 0.25rem;
}

.replay-periods .period:hover {
    background-color: var(--hilite);
}

.replay-periods .period span {
    color: var(--dark-primary-text);
    font-weight: bold;
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    max-width: calc(100% - 1rem);
    max-height: calc(100% - 0.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

#chartData {
    height: 10rem;
    position: absolute;
    bottom: 0;
    width: calc(100% - 1rem);
}

#chartData .statbox-list {
    display: flex;
    flex-direction: row;
}

#chartData .statbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 10px;
    background-color: rgba(0, 0, 0, .5);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    padding: 4px 8px;
}

#chartData .statbox .material-icons {
    font-size: 2rem;
    line-height: 2rem;
}

#chartData .statbox .stats_data {
    margin-left: 4px;
    text-align: right;
}

#chartData .statbox .stats_units {
    margin-left: 4px;
    font-size: 10px;
}

@media (max-width: 1300px) {
    #chartData {
        height: 10rem;
    }

    .replaybar {
        bottom: 13rem;
    }

    .replay-periods {
        bottom: 10.5rem;
    }

    #pitch-view {
        height: calc(100% - 17.5rem);
        width: calc(100% - 10px);
    }
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
    margin-top: 8px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--dark-primary);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--my-primary);
}

input:checked+.slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 18px;
}

.slider.round:before {
    border-radius: 50%;
}

#rpanelt tr {
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 14px;
}

#rpanelt td {
    vertical-align: middle;
}

hr {
    border-color: #000 transparent #474747 transparent;
    border-style: solid;
    height: 0;
}

#rpanel .title {
    color: var(--dark-primary-text);
    font-weight: 600;
    text-align: left;
}

#lpanel .match-name {
    color: var(--hilite);
    border-bottom: 2px solid var(--hilite);
    padding-bottom: 4px;
    margin-top: 0.5rem;
}

#lpanel .team-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--clear);
    margin: 0.5rem 0 5px 0;
}

.regularbox {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background-color: var(--metricsbg);
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.regularbox>div.data {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 5px;
}

.regularbox>div.data>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
}

.regularbox>div.data>div.action {
    display: flex;
    flex-direction: column;
    margin: 5px;
    justify-content: center;
    align-items: center;
    width: 10%;
}


.regularbox>div.filter-time {

    display: flex;
    flex-direction: row;

}

.regularbox>div.filter-time input {

    width: 100%;
    margin: 5px;
    text-align: center;
    cursor: pointer;

}

.regularbox>div>div span {
    width: 100%;
    text-align: center;
}

.regularbox .icon {
    height: 2rem;
    flex-shrink: 0;
    text-align: center;
}

.regularbox #match-duration {
    width: 60px;
    flex-shrink: 0;
}

.statbox-mini {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: repeat(0, 0fr);
}

.statbox-mini .item {
    position: relative;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--metricsbg);
    color: var(--light);
    padding: 0.3rem;
    margin-bottom: 0.5rem;
    line-height: 1rem;
    z-index: 0 !important;
    user-select: none;
}

.statbox-mini .item:hover {
    background-color: var(--clear);
    color: var(--dark);
    cursor: pointer;
    z-index: 1000;
}

.statbox-mini .item.selected_player {
    background-color: var(--clear);
    color: var(--dark);
}

.statbox-mini .item .data {
    width: calc(100% - 50px - 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    margin-left: auto;
}

.statbox-mini .item .stats_name {
    margin-top: 2px;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1rem;
    height: 1rem;
    max-height: 1rem;
    overflow-y: hidden;
}

.statbox-mini .item .stats_position {
    font-size: 0.7rem;
    line-height: 0.7rem;
    vertical-align: middle;
}

.statbox-mini .item .player_image {
    position: relative;
}

.statbox-mini .item .stats_mini_pic {
    width: auto;
    height: 35px;
    border-radius: 50%;
    min-width: 35px;
}

.statbox-mini .item span.stats_dorsal {
    position: absolute;
    text-align: center;
    right: -0.5rem;
    bottom: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-color: black;
    color: white;
    border-radius: 100%;
    line-height: 1.25rem;
    font-size: 10px;
    font-weight: bold;
}

.statbox-mini .item.has_data span.stats_dorsal {
    background-color: var(--hilite);
}

.statbox-mini .item .form-checkbox {
    display: flex;
    align-items: center;
    height: calc(100% + 0.6rem);
    padding-left: 1rem;
    margin-right: -0.3rem;
    padding-right: 0.3rem;
    cursor: default;
}

.statbox-content-horizontal {
    padding: 5px 1.25rem;
}

.statbox-content-horizontal .stats_data {
    font-size: 3rem;
    line-height: 3rem;
    font-weight: bold !important;
    color: var(--dark-primary-text);
    margin-top: 16px !important;
    margin-bottom: 10px !important;
    display: block;
    width: 100%;
}

@media (max-width: 1600px) {
    .statbox-content-horizontal .stats_data {
        font-size: 2.5rem;
    }
}

.statbox-content-horizontal .stats_units {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.85rem;
    line-height: 0.85rem;
    color: var(--dark-primary-text);
    display: block;
}

.statbox-content-horizontal .statbox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: none;
    border-radius: 4px;
    background-color: var(--dark-sidebar-bg);
    text-align: center;
    padding: 12px;
    margin-bottom: 10px;
    height: calc(100% - 10px);
}

.statbox-content-horizontal .statbox .stats_divider {
    width: 6px;
    height: 100%;
    background-color: var(--dark-primary-text);
}

.statbox-content-horizontal .statbox .material-icons,
.statbox-content-horizontal .statbox .material-symbols-outlined {
    font-size: 3em;
    color: var(--red);
}

.statbox-content-horizontal #data-heartrate.statbox .info {
    font-size: 0.8rem;
    position: absolute;
    bottom: 1rem;
}

.statbox-content-horizontal #data-heartrate.statbox .info.avg {
    right: calc(50% + 0.5rem);
}

.statbox-content-horizontal #data-heartrate.statbox .info.max {
    right: 0.5rem;
}

.stats-metric-container-div {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
}

.row:not(.team-stats) .stats-metric-container .table-responsive {
    max-height: 400px;
}

.stats-metric-container {
    margin: auto 1.25rem 0.75rem 1.25rem;
    border-radius: 5px !important;
    border: 1px solid var(--border);
    overflow: hidden;
    padding: 5px 1.25rem;
    background-color: var(--metricsbg);
}

.team_table .flex_chart {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto 1.25rem 0.75rem 1.25rem;
    justify-content: space-between;
}

.team_table .flex_chart .stats-metric-container.half {
    width: calc(50% - 0.5rem);
    margin: 0;
}

@media (max-width: 1300px) {
    .stats-metric-container-div {
        width: 100%;
        margin-bottom: 1rem;
    }

    .stats-metric-container {
        margin: auto 1.25rem 2rem 1.25rem;
    }

    .team_table .flex_chart .stats-metric-container.half {
        width: 100%;
        margin-bottom: 0.75rem;
    }
}

.team-stats .stats-metric-container .table-responsive tbody tr:hover {
    cursor: pointer;
    background-color: var(--dark-bg);
}

.stats-metric-container.data {
    height: calc(100% - 1.25rem);
}

.stats-metric-container.data .graph {
    width: 100%;
}

.stats-metric-container span.title,
.stats-metric-table span.title {
    font-size: 18px;
    color: var(--graph-title);
    display: block;
    text-align: center;
    padding: 10px;
    font-weight: normal;
    position: relative;
}

.stats-metric-container.data span.title {
    padding: 1.5rem !important;
}

.stats-metric-container span.title a {
    background-color: var(--dark-primary);
    position: absolute;
    right: 0;
}

.stats-metric-container .flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.stats-metric-container .flex .field {
    display: flex;
    flex-direction: column;
    margin-right: 0.5rem;
}

.stats-metric-container.half .flex .field {
    width: 40%;
}

.stats-metric-container .flex .field select {
    width: 100% !important;
}

.stats-metric-container .flex .field label {
    margin-bottom: 0.25rem;
}

.stats-metric-container .flex a.btn {
    margin-top: auto;
    background-color: var(--dark-primary);
}

.team-img {
    height: 150px;
}

[hilite] {
    color: var(--hilite);
}

.game_players {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(0, 0fr);
}

@media (max-width: 1600px) {
    .game_players {
        grid-template-columns: repeat(5, 1fr);
    }
}

.game_players .item-player {
    position: relative;
    border: 1px solid var(--dark-divider);
    background-color: var(--clear);
    color: var(--dark-primary);
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    line-height: 16px;
    margin-bottom: 5px;
    margin-right: 5px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
}

.game_players .item-player .stats_pic {
    width: auto;
    min-width: 50%;
    height: 50%;
    max-width: 100%;
    border-radius: 50%;
}

.game_players .item-player .stats_name {
    font-size: 0.7rem;
    display: block;
    line-height: 1rem;
    height: 1rem;
    max-height: 1rem;
    overflow: hidden;
}

.game_players .item-player .stats_position span {
    font-size: 0.7rem;
    line-height: 0.7rem;
    vertical-align: middle;
    color: var(--dark-primary-text);
}

.game_players .item-player.active {
    background-color: var(--dark-primary);
    color: var(--dark-primary-text);
}

.game_players .item-player.active .stats_position span,
.game_players .item-player.active .stats_position svg {
    color: var(--dark-secondary-text);
}

.game_players .item-player .custom-select {
    padding: 0 0.3rem;
    height: 25%;
    margin-top: 0.5rem;
    font-size: 75%;
    line-height: 75%;
}

.game_players .item-player .select2-selection--single {
    padding: 0 0.3rem;
    height: 25%;
    font-size: 75%;
    line-height: 75%;
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(37, 44, 60, .7);
    z-index: 99;
    height: 100%;
    user-select: none;
}

#map2dheatmap-content .loader-container,
#pitch-view .loader-container {
    position: absolute;
}

#pitch-view .loader-container {
    width: calc(100% - 40px);
    left: 1.25rem;
}

/* LOADER */
.newloader {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.newloader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: var(--red);
}

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

    100% {
        -moz-transform: rotate(360deg);
    }
}

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

    100% {
        -webkit-transform: rotate(360deg);
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}


.loader-container .newloader {
    margin: auto;
}

.loader-container .progress {
    margin-bottom: auto;
    margin-top: 1rem;
}

/* END LOADER */

.stats-loader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.stats-loader span {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* REPLAY ICON */
.replay_icon {
    position: absolute;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 16px;
    background-color: white;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    margin-left: -12px;
    margin-top: -12px;
    cursor: pointer;
    z-index: 9998;
    user-select: none;
    transition-property: left, right, top, bottom;
    transition-timing-function: linear;
}

.player_path {
    transition-property: all;
    transition-timing-function: linear;
}

.blueplayer {
    border: 3px solid #003f8c;
    color: #003f8c;
}

.redplayer {
    border: 3px solid #da2b2b;
    color: #da2b2b;
}

.replay_icon.selected_player {
    border: 3px solid #ffca1a !important;
    color: #ffca1a !important;
    z-index: 9999;
}

.replay_icon.secondary {
    opacity: 0.25;
    z-index: 9997;
}

/* END REPLAY ICON */

.container_button_action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.container_button_action a {
    width: 100%;
    cursor: pointer;
}

.container_button_action a span.material-icons {
    font-size: 35px;
    vertical-align: middle;
}

a.info-button {
    color: var(--dark-primary) !important;
}

.add-input {
    color: var(--dark-primary);
    text-align: center;
    text-decoration: none;
    margin-left: 0.5rem;
}

.add-input:hover {
    cursor: pointer;
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
    display: block;
}

.firmware {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.firmware img {
    width: 25%;
    height: auto;
    z-index: 1;
}

.firmware .cogs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.firmware .status_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.firmware .status_list .item {
    width: calc(33% - 2rem);
    margin: 1rem;
    user-select: none;
    display: flex;
    flex-direction: column;
}

.firmware .status_list .item .icon {
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

ul.config_type {
    list-style: none;
}

ul.config_type li {
    padding: 6px 12px;
    border-radius: 3px;
    background-color: var(--dark-secondary);
    color: var(--dark-secondary-text);
    user-select: none;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

ul.config_type li:hover {
    background-color: var(--dark-secondary-hover);
}

ul.config_type li.active {
    background-color: var(--dark-primary);
    color: var(--dark-primary-text);
    font-weight: bold;
}

.ui-slider-tick-mark {
    display: inline-block;
    width: 2px;
    background: var(--dark-primary-text);
    height: 16px;
    position: absolute;
    top: -7px;
}

.ui-slider-tick-mark-dec {
    display: inline-block;
    width: 2px;
    background: var(--dark-primary-text);
    height: 26px;
    position: absolute;
    top: -13px;
}

.ui-slider-tick-value {
    display: inline-block;
    height: 16px;
    position: absolute;
    color: var(--dark-primary-text);
    top: 9px;
}

.ui-slider-handle {
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 50% !important;
    background: var(--dark-secondary) !important;
    border: solid var(--dark-primary) 2px !important;
    top: -8px !important;
    margin-left: -7px !important;
}

.ui-slider-range {
    top: -2px !important;
    height: 4px !important;
    background: var(--dark-primary) !important;
}

.ui-slider-horizontal {
    height: 1px !important;
    border-radius: 0px !important;
    background: var(--dark-primary-text) !important;
}

/* CHECKBOX & RADIO LIST */
ul.checkboxList,
ul.radioList {
    list-style: none;
    user-select: none;
}

ul.checkboxList li,
ul.radioList li {
    display: inline;
}

ul.checkboxList li label,
ul.radioList li label {
    display: inline-block;
    background-color: var(--dark-secondary);
    border: 2px solid var(--dark-primary);
    color: var(--dark-primary);
    border-radius: 0.75rem;
    white-space: nowrap;
    user-select: none;
    padding: 0.25rem 0.8rem;
    cursor: pointer;
}

ul.checkboxList li input[type="checkbox"]:checked+label,
ul.radioList li input[type="radio"]:checked+label {
    border: 2px solid var(--hilite);
    background-color: var(--dark-primary);
    color: var(--dark-primary-text);
}

ul.checkboxList li input[type="checkbox"],
ul.radioList li input[type="radio"] {
    display: absolute;
    position: absolute;
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {

    ul.checkboxList li input[type="checkbox"]:hover:not([disabled])+label,
    ul.radioList li input[type="radio"]:hover:not([disabled], :checked)+label {
        border: 2px solid var(--hilite);
        background-color: var(--hilite);
        color: var(--dark-primary-text);
    }
}


ul.checkboxList li label::before {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-variant: normal;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    width: 1.25rem;
    height: 17px;
    content: "\f0c8";
}

ul.checkboxList li input[type="checkbox"]:checked+label::before {
    content: "\f00c";
    width: 1.25rem;
    height: 17px;
}

/* END CHECKBOX & RADIO LIST */


/* CUSTOM SWITCH BUTTON */
.switch-button {
    display: flex;
    flex-direction: row;
    height: 2rem;
    width: 200px;
}

.switch-button .option {
    width: 100%;
    background-color: var(--dark-secondary);
    color: var(--dark-primary);
    border: 1px solid var(--hilite);
    cursor: pointer;
    text-align: center;
    line-height: 2rem;
    user-select: none;
}

.switch-button .option:hover {
    background-color: var(--hilite);
    color: var(--dark-primary-text);
}

.switch-button .option.active {
    background-color: var(--dark-primary);
    color: var(--dark-primary-text);
}

.switch-button .option:first-child {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.switch-button .option:last-child {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* END TEST SWITCH BUTTON */

.setup_config_tabs {
    height: calc(100% - 120px);
    overflow-y: auto;
}

.team_config_tabs {
    height: calc(100% - 180px);
    overflow-y: auto;
}

.team_config_tabs.has_img {
    height: calc(100% - 180px - 150px);
}

.config_tabs {
    user-select: none;
}

.config_tabs .title {
    color: var(--my-primary);
    font-size: 1.1rem;
}

.config_tabs .title .unit {
    display: inline;
}

.config_tabs #speed input[id^=setup] {
    padding: 0.5rem !important;
}

.load_template {
    background-color: var(--dark-primary);
    border: 1px solid var(--dark-primary);
    color: var(--dark-primary-text);
}

.load_template:hover {
    filter: brightness(1.15);
}

#team-setup .select2 {
    width: 25% !important;
}

.config_tabs .alerta {
    overflow: hidden;
    border: 1px solid white;
    border-radius: 0.35rem;
}

.config_tabs .alerta .alerta-body {
    padding: 1.25rem;
}

.config_tabs .alerta .alerta-body .alerta-title {
    margin-bottom: 0.75rem;
}

.config_tabs .alerta.warning {
    background-color: #fcf4cd;
    border-color: #f3d024;
    color: #b58b0b;
}

.config_tabs .alerta.warning .alerta-title {
    color: red;
}

.config_tabs .alerta.info {
    border: 2px solid var(--dark-primary);
    background-color: var(--info-background);
    color: var(--info-color);
    width: auto;
}

.config_tabs .alerta.max_error {
    border: 2px solid var(--red);
    background-color: var(--error-background);
    color: var(--red);
}

th.dt-head-center,
td.dt-center {
    text-align: center;
}

th.dt-body-right,
td.dt-body-right {
    text-align: right;
}

td.above-avg,
span.green {
    color: #03CEA4 !important;
}

td.below-avg,
span.red {
    color: #FD9194 !important;
}

.upload_docking,
.create_periods,
.save_periods {
    background-color: var(--dark-primary);
    color: white !important;
    padding: 8px 16px;
    border-radius: 4px;
}

.create_periods {
    margin-left: 0.5rem;
}

.download_player_report {
    background-color: var(--dark-primary);
    color: var(--dark-primary-text) !important;
    padding: 8px 16px;
    border-radius: 4px;
    margin-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.add_period:hover,
.save_periods:hover,
.stats_history:hover {
    filter: brightness(1.15);
}

.add_subperiod {
    color: var(--my-primary) !important;
}

.timeline-div {
    background-color: var(--dark-sidebar-bg);
    border-radius: 5px;
    margin: 1rem auto;
    padding: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
}

.timeline-div>svg {
    width: 100%;
}

.timeline-div .draggable {
    cursor: pointer;
}


.timelines .main-period-name {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 250px;
    align-items: center;
}

.timelines .main-period-name .period-name {
    text-align: center;
    font-weight: bold;
    font-size: 0.875rem;
    border: 0px;
    border-bottom: 1px solid #bbb;
    background-color: transparent;
    color: var(--dark-primary-text);
    width: 250px;
}

.timelines .main-period-name .remove-period {
    color: var(--red);
    cursor: pointer;
    text-align: center;
    margin-top: 0.25rem;
}

.timeline-div .timeline-btn rect {
    fill: #c0c0c0;
}

.timeline-div .timeline-btn.active rect {
    stroke: var(--graph-title) !important;
    fill: var(--dark-primary) !important;
}

.timeline-div .timeline-btn.active text {
    color: white !important;
    fill: white !important;
}

.timeline-div .highcharts-plot-band-label {
    text-align: center;
    width: 200px;
    height: 48px;
    z-index: 20;
}

.timeline-div .remove-period {
    color: var(--red);
    cursor: pointer;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.timeline-div .timeline-period.active {
    fill: rgba(7, 101, 132, 0.6);
}

#timeline .timeline-period {
    cursor: pointer;
}

/* GAME UPLOADS */
.player_list {
    text-align: left;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    padding-right: 40px;
    overflow-y: auto;
}

.player_list .legend {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}

.player_list .legend span {
    width: 25%;
    margin-left: 1rem;
    text-align: right;
}

.player_list .legend span:first-child {
    width: 50%;
    margin-left: 0;
    text-align: left;
}

.player_list .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.player_list .item .player_div {
    display: flex;
    flex-direction: row;
    width: 50%;
}

.player_list .item .player_div img {
    margin: auto 0;
    width: 50px;
    height: auto;
    border-radius: 50%;
}

.player_list .item .player_div .info {
    display: flex;
    flex-direction: column;
    margin: auto 1rem;
}

.player_list .item .input_div {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.player_list .item .input_div.finished {
    display: flex;
    justify-content: center;
    align-items: center;
}

.player_list .item .input_div.rpe {
    width: 25%;
    margin-left: 1rem;
}

.player_list .item .input_div.rpe input {
    width: calc(100% - 2.5rem);
}

.player_list .item .input_div select {
    width: 100% !important;
    margin: auto 0;
}

.player_list .item .input_div .progress-inner,
.progress-inner.slow {
    transition: width 1s ease-in-out;
}


.modal-dropdown {
    z-index: 10000;
}

/* END GAME UPLOADS */
.player_list .item .input_div .rpe_color {
    margin-right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: white;
}

.show_rpe_legend {
    margin-left: 1rem;
    cursor: pointer;
    color: white;
}

.rpe_legend {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.rpe_legend .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.25rem 0;
    color: var(--dark-secondary-text);
    border-radius: 4px;
}

.rpe_legend .item .scale {
    font-size: 2rem;
    font-weight: bold;
    text-wrap: nowrap;
    margin-left: auto;
}

.rpe_legend .item .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-left: 0.5rem;
    border-left: 2px solid var(--dark-secondary-text);
    width: calc(100% - 5rem);
    margin-left: auto;
}

.rpe_legend .item .info .title {
    font-weight: bold;
}

.rpe_legend .item.rpe1 {
    background-color: var(--rpe1);
}

.rpe_legend .item.rpe2 {
    background-color: var(--rpe2);
}

.rpe_legend .item.rpe3 {
    background-color: var(--rpe3);
}

.rpe_legend .item.rpe4 {
    background-color: var(--rpe4);
}

.rpe_legend .item.rpe5 {
    background-color: var(--rpe5);
}

.rpe_legend .item.rpe6 {
    background-color: var(--rpe6);
}

/* EXPORT FORMAT */
.export_format {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.export_format .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* width: calc(18.75rem + 18.75rem + 2.5rem + 1.2rem); */
    width: 41.2rem;
}

.export_format .field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.export_format .field.full {
    /* width: calc(18.75rem + 18.75rem + 2.5rem + 1.2rem); */
    width: 41.2rem;
}

.export_format .flex .field {
    width: 18.75rem;
}

.export_format .field label {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.listbox {
    display: flex;
    flex-direction: row;
    width: 41.2rem;
}

.listbox .list-cnt {
    width: 18.75rem;
    display: flex;
    flex-direction: column;
}

.listbox .list-cnt input {
    background-color: var(--dark-sidebar-bg);
    color: white;
    border: 1px solid var(--hilite);
    border-radius: 4px;
    padding: 10px;
    width: 100%;
}

.listbox .list-cnt .list-title {
    padding: 15px 10px;
    font-size: 120%;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
    border-top: 1px solid #efefef;
    margin-top: 1rem;
}

.listbox .list-cnt ul {
    height: 18.75rem;
    border: 1px solid #ddd;
    overflow-y: auto;
    padding: 0;
    margin-top: 0;
}

.listbox .list-cnt ul li {
    user-select: none;
    display: block;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #efefef;
}

.listbox .list-cnt ul li.selected {
    background-color: var(--dark-primary);
    color: white;
}

.listbox .buttons {
    display: flex;
    flex-direction: column;
    margin: auto;
}

.listbox .buttons button {
    background-color: var(--dark-primary);
    color: white;
    border-radius: 4px;
    width: 2.5rem;
    border: 0;
    box-shadow: none;
    padding: 10px;
    margin-bottom: 5px;
}

.listbox .buttons button:hover {
    background-color: var(--hilite);
}

/* END EXPORT FORMAT */

.bg-dark {
    background-color: var(--bkg1);
}


/* LOGIN PAGE, NUEVAS CLASES */



.statbox-mini .item.selected_player:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1 !important;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

[matchicon] {
    margin-left: 1rem;
    margin-right: 0.25rem;
    font-size: 0.5rem !important;
    color: var(--hilite)
}

.games-tabs {
    width: 20rem;
}

.games-tabs .navbar-nav .nav-item .nav-link {
    color: white !important;
}

.games-tabs .navbar-nav .nav-item .nav-link.active {
    background-color: var(--border) !important;
    border-bottom: 4px solid var(--hilite);
    color: var(--hilite) !important;
}

@media (max-width: 1300px) {
    .games-tabs {
        width: auto;
    }

    #matchdata {
        margin-left: auto;
    }
}

[matchdata] {
    width: auto
}

[matchicon],
[matchdata] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#matchdata {
    display: flex;
    margin-right: auto;
    height: 3rem;
    position: relative;
}

#matchdata .dropdown-list {
    padding: 0;
    border: none;
    overflow: hidden;
}

#matchdata .dropdown-menu {
    border-radius: 0;
    -webkit-border-top-left-radius: 0.35rem;
    -webkit-border-top-right-radius: 0.35rem;
    -moz-border-radius-topleft: 0.35rem;
    -moz-border-radius-topright: 0.35rem;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.6) !important;
}

#matchdata .dropdown-list .dropdown-header {
    background-color: var(--dark-primary);
    border: 1px solid var(--dark-primary);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--dark-primary-text);
}

#matchdata .dropdown-list .dropdown-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: none;
    border-bottom: 1px solid var(--dark-divider);
    background-color: var(--dark-sidebar-bg);
    color: var(--dark-primary-text);
    line-height: 1.3rem;
    font-size: 0.85rem;
}

#matchdata .dropdown-list .dropdown-item span.material-icons {
    font-size: 1.2rem;
}

/* Text sizes */
[smalltext] {
    font-size: 95% !important;
}

[nomargin] {
    margin: 0 !important;
}

.modal {
    z-index: 10000;
}

/* GAME CALENDAR */
.calendar_filters {
    display: flex;
    flex-direction: row;
}

.calendar_filters .filter_teams_div {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    width: 50%;
    align-items: start;
    margin-right: auto;
}

.calendar_filters .search_game_div {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    width: 50%;
    justify-content: end;
    align-items: end;
    margin-left: auto;
}

.calendar_filters .filter_teams_div label,
.calendar_filters .search_game_div label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.calendar_filters .filter_teams_div .filter-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.calendar_filters .filter_teams_div #filter-teams,
.calendar_filters .search_game_div #search-game {
    min-width: 200px !important;
}

.calendar_filters .filter_teams_div #filter-teams {
    width: 80%;
}

#calendar {
    height: calc(100vh - 16rem);
    user-select: none;
}

#calendar.db {
    width: 100%;
    height: 100%;
}

#calendar.db .ec-list .ec-day-head {
    color: var(--dark-primary-text);
}

#calendar .ec-event .e-tooltip {
    position: absolute;
    background-color: var(--hilite);
    color: white;
    bottom: calc(100% + 7px);
    z-index: 999;
    padding: 8px 10px;
    border-radius: 4px;
}

#calendar .ec-event .e-tooltip:before {
    border: 6px solid transparent;
    border-top-color: var(--hilite);
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(50% - 6px);
    margin-bottom: -12px;
}

#calendar .ec-event.active .e-tooltip {
    background-color: #004269 !important;
}

#calendar .ec-event.active .e-tooltip:before {
    border-top-color: #004269 !important;
}

#calendar .calendar-menu {
    position: absolute;
    background-color: white;
    top: 0;
    left: 100%;
    z-index: 999;
    border-radius: 0.25rem;
    width: 8rem;
}

#calendar .ec-day-view .calendar-menu,
#calendar .ec-list .calendar-menu {
    left: initial;
    right: 0;
}

#calendar .calendar-menu .divider {
    width: 100%;
    background-color: var(--dark-secondary);
    height: 1px;
}

#calendar .calendar-menu a {
    color: var(--dark) !important;
    display: flex;
    padding: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

#calendar .calendar-menu a:hover {
    background-color: var(--dark-secondary-hover) !important;
}

#calendar .calendar-menu a span.material-symbols-outlined {
    color: var(--dark-primary) !important;
    margin-right: 0.5rem;
}

#calendar .calendar-menu a.delete_game span.material-symbols-outlined {
    color: var(--red) !important;
}

/* EventCalendar Variables */
#calendar .ec {
    --ec-popup-bg-color: var(--metricsbg);
    --ec-button-active-bg-color: var(--dark-primary);
    --ec-list-day-bg-color: var(--dark-primary);
    --ec-button-active-text-color: var(--dark-primary-text);
}

#calendar.db .ec {
    --ec-popup-bg-color: var(--dark-secondary);
    --ec-button-active-bg-color: var(--dark-primary);
    --ec-list-day-bg-color: var(--dark-primary);
    --ec-border-color: var(--border);
    --ec-button-active-text-color: var(--dark-primary-text);
}

.ec-event {
    user-select: none;
    filter: brightness(100%);
}

.ec-event-title {
    font-size: 0.875rem !important;
}

.ec-title {
    font-size: 1.5rem !important;
}

.ec-event.active {
    background-color: #004269 !important;
}

.ec-button:disabled {
    color: var(--my-tab-inactive) !important;
}

#calendar.db .ec-button:disabled {
    color: black !important;
}

#faq_accordion {
    padding: 2rem;
    max-height: 75vh;
    overflow-y: auto;
}

#faq_accordion.login {
    max-height: calc(100vh - 5rem);
}

#faq_accordion .btn-link {
    text-decoration: none;
    cursor: pointer;
}

#faq_accordion .question_list {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#faq_accordion .question_list .question {
    color: var(--hilite);
    border-top: 1px solid white;
    padding-top: 1rem;
}

#faq_accordion .question_list .question:first-of-type {
    border-top: none;
    padding-top: 0;
}

#faq_accordion .question_list .answer {
    color: white;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}

#faq_accordion .question_list .answer ul {
    margin-left: 2rem;
}

#faq_accordion .btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
}

#faq_accordion .btn:focus {
    border: none;
    box-shadow: none;
}

#faq_accordion .btn[aria-expanded=false] {
    color: var(--dark-primary);
    background-color: white;
}

#faq_accordion .btn[aria-expanded=true] {
    color: white;
    background-color: var(--dark-primary);
}

#faq_accordion .card-header {
    padding: 0;
    border-bottom: none;
    background-color: var(--dark-bg);
}

/* CHECKBOX */
/* CHECKBOX */
.form-checkbox .tgl {
    display: none;
}

.form-checkbox .tgl,
.form-checkbox .tgl:after,
.form-checkbox .tgl:before,
.form-checkbox .tgl *,
.form-checkbox .tgl *:after,
.form-checkbox .tgl *:before,
.form-checkbox .tgl+.tgl-btn {
    box-sizing: border-box;
}

.form-checkbox .tgl::-moz-selection,
.form-checkbox .tgl:after::-moz-selection,
.form-checkbox .tgl:before::-moz-selection,
.form-checkbox .tgl *::-moz-selection,
.form-checkbox .tgl *:after::-moz-selection,
.form-checkbox .tgl *:before::-moz-selection,
.form-checkbox .tgl+.tgl-btn::-moz-selection,
.form-checkbox .tgl::selection,
.form-checkbox .tgl:after::selection,
.form-checkbox .tgl:before::selection,
.form-checkbox .tgl *::selection,
.form-checkbox .tgl *:after::selection,
.form-checkbox .tgl *:before::selection,
.form-checkbox .tgl+.tgl-btn::selection {
    background: none;
}

.form-checkbox .tgl+.tgl-btn {
    outline: 0;
    display: block;
    width: 3em;
    height: 1.5em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-checkbox.disabled .tgl+.tgl-btn {
    cursor: default;
}

.form-checkbox .tgl+.tgl-btn:after,
.form-checkbox .tgl+.tgl-btn:before {
    position: absolute;
    top: 0;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.form-checkbox .tgl+.tgl-btn:after {
    left: 0;
}

.form-checkbox .tgl+.tgl-btn:before {
    display: none;
}

.form-checkbox .tgl:checked+.tgl-btn:after {
    left: 50%;
}

.form-checkbox .tgl-light+.tgl-btn {
    background: var(--deepslateblue);
    border-radius: 1.5em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid var(--hilite);
}

.form-checkbox .tgl-light+.tgl-btn:after {
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}

.form-checkbox.disabled .tgl-light+.tgl-btn {
    filter: brightness(0.75);
}

.form-checkbox .tgl-light:checked+.tgl-btn {
    background: var(--hilite);
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
}

.checkbox-list .item {
    display: flex;
    margin-bottom: 0.5rem;
}

.checkbox-list .form-checkbox .tgl+.tgl-btn {
    width: 2.5em;
    height: 1.25em;
}

.checkbox-list label[formlabel] {
    margin-left: 0.5rem;
    line-height: normal !important;
    cursor: pointer;
    user-select: none;
}

/* END CHECKBOX */

.speed-unit,
.distance-unit {
    font-size: 85% !important;
}

[miniicon] {
    font-size: 1.5rem !important;
}

[timeplayed] {
    font-size: 2.75rem !important;
}

@media (max-width: 1600px) {
    [timeplayed] {
        font-size: 2.3rem !important;
    }
}

.unitsinfo {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: fit-content;
    height: 1rem;
    line-height: 1rem;
}

pre {
    color: white !important;
}

div.dt-container div.dt-scroll-body {
    border-bottom: 1px solid #666;
}

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

.pagination {
    --bs-pagination-font-size: inherit;
}

.overview {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.overview .team {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 50px - 0.5rem);
    margin-bottom: 2rem;
}

.overview .img-cnt {
    aspect-ratio: 1;
    width: 45px;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: radial-gradient(var(--border), var(--dark-bg));
}

.overview .team>.title {
    width: calc(100% - 1rem);
    background-color: var(--dark-primary);
    color: white;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.overview .team>.title .img-cnt {
    width: 45px;
    margin-right: 1rem;
}

.overview .team .list {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.overview .team .list .item {
    width: calc(20% - 1rem);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.25rem;
    border: 1px solid var(--border);
    overflow: hidden;
}

.overview .team .list .item .img-cnt {
    width: 50px;
}

.overview .team .list .item .title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem;
}

.overview .team .list .item .data {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: auto;
}

.overview .team .list .item .data .stat {
    width: 33%;
    background-color: var(--border);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    padding: 6px;
}

.overview .team .list .item .data .stat .material-symbols-outlined {
    background-color: #222;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    font-size: 1.8rem;
}

.overview .team .list .item .data .stat div {
    width: 100%;
    height: 3rem;
    margin: auto;
    display: flex;
    position: relative;
}

.overview .team .list .item .data .stat .value {
    margin: auto;
    font-size: 0.9rem;
}

.overview .team .list .item .data .stat .unit {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.7rem;
}

.overview .tab_buttons .button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

.overview .tab_buttons .button .img-cnt {
    width: 50px;
    margin-right: 0.5rem;
}

.overview table {
    width: 100%;
}

.overview .team_table {
    padding-top: 0.5rem;
}

#switch_view .material-symbols-outlined {
    font-size: 1.2rem;
}

.filters {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 0.5rem;
}

.filters .field {
    width: 20%;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.filters .field.small {
    width: auto;
}

.filters .field label {
    font-size: 1rem;
}

.filters .field select {
    width: 100%;
}

.filters .select2-container {
    position: absolute;
    top: 100%;
    z-index: 9999;
}

.filters .select2-selection {
    background-color: var(--metricsbg);
}


.ev_report {
    height: calc(100% - 4.5rem);
}

.ev_report .tabs {
    height: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0.5rem;
}

.ev_report .tabs .tab {
    height: 100%;
}

.ev_report .table_flex {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.ev_report .table_flex .flex_column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ev_report .table_flex .col1 {
    width: 65%;
    overflow-y: auto;
    overflow-x: hidden;
}

.ev_report .table_flex .col2 {
    width: calc(35% - 0.5rem);
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--hilite);
}

.ev_report .table_flex table#evGames tbody td {
    padding: 0.5rem;
}

.ev_report .table_flex .col2 table tbody td {
    padding: 0.25rem;
}

.ev_report .table_flex .col2 table thead th {
    padding: 0.5rem 0.25rem;
}

.ev_report .table_flex .col2 div {
    overflow-y: auto;
    overflow-x: hidden;
}

.ev_report .table_flex .col2 .r1,
.ev_report .table_flex .col2 .r2 {
    height: calc(35% - 1rem);
    margin-bottom: 1rem;
}

.ev_report .table_flex .col2 .r3 {
    height: 30%;
}

.ev_report .table_flex .col2 #remove_filters {
    width: fit-content;
    display: flex;
    margin-left: auto;
    padding: 0.35rem 0.65rem;
}

.ev_report .table_flex .col2 #remove_filters span {
    font-size: 18px;
}

.ev_report .stats_cnt {
    display: flex;
    width: 100%;
    height: 100%;
}

.ev_report .stats_cnt.stats_flex {
    flex-direction: column;
}

.ev_report .stats_cnt.stats_row {
    flex-direction: row;
}

.ev_report .stats_cnt .chart_div {
    margin-top: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.ev_report .stats_cnt.stats_flex .chart_div {
    width: 100%;
    height: calc(50% - 0.5rem);
}

.ev_report .stats_cnt.stats_row .chart_div {
    width: calc(50% - 0.5rem);
    height: 100%;
}

.ev_report .stats_cnt .chart_div .chart {
    margin-top: 0.5rem;
    border: 1px solid var(--hilite);
    border-radius: 0.25rem;
    height: 100%;
}

.ev_report .highcharts-tooltip {
    z-index: 99999;
}

.ev_report .highcharts-tooltip b {
    font-weight: bold !important;
}

.ev_report .highcharts-tooltip hr {
    margin: 0.25rem 0;
}

/* HINT */
.hint {
    cursor: pointer !important;
}

.hint--top-left:before {
    border-top-color: var(--hilite);
}

.hint--top-right:before {
    border-top-color: var(--hilite);
}

.hint--top:before {
    border-top-color: var(--hilite);
}

.hint--bottom-left:before {
    border-bottom-color: var(--hilite);
}

.hint--bottom-right:before {
    border-bottom-color: var(--hilite);
}

.hint--bottom:before {
    border-bottom-color: var(--hilite);
    z-index: 9999 !important;
}

.hint--left:before {
    border-left-color: var(--hilite);
}

.hint--right:before {
    border-right-color: var(--hilite);
}

[class*="hint--"][aria-label]::after {
    font-size: 0.8rem;
}

/* END HINT */

/* DATATABLES */
table.dataTable td.dt-control {
    user-select: none;
}

table.dataTable td.dt-control::before {
    border-left-color: var(--hilite);
    margin-right: 0.5rem;
}

table.dataTable tr.dt-hasChild td.dt-control::before {
    border-top-color: var(--hilite);
    margin-right: 0.5rem;
}

table#evGames tr.child td.data {
    cursor: pointer;
}

table#evGames tr.child td.data:hover {
    background-color: var(--metricsbghover);
}

table#evGames tbody tr:not(.child) {
    background-color: #03CEA450;
}

table thead th .dt-column-title {
    text-wrap: nowrap;
}

table td div.cell-flex {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 9999px;
    color: #000000;
    font-weight: 500;
    font-size: 0.8rem;
}

/* Green badge for active status */
table td div.cell-flex.active {
    background-color: #86efac; /* Soft green (or use #4caf50 for vibrant green) */
}

/* Red badge for inactive status */
table td div.cell-flex.inactive {
    background-color: #fca5a5; /* Soft red (or use #f44336 for vibrant red) */
}

/* END DATATABLES */

.toast_div {
    position: absolute;
    bottom: 16px;
    right: 32px;
    width: 398px;
    height: fit-content;
    border-radius: 5px;
    line-height: 80px;
    margin-top: 16px;
    padding-left: 32px;
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.toast_alert {
    color: var(--red);
    border: solid 1px var(--red);
    background-color: var(--error-background);
}

.toast_info {
    color: var(--info-color);
    background-color: var(--info-background);
    border: solid 1px var(--info-background);
}

.toast_ok {
    background-color: var(--hilite) !important;
    border: 1px solid var(--dark-primary);
    color: white;
}

[toasticon] {
    margin-right: 20px !important;
    font-size: 48px !important;
}

.queue_status {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 22rem;
    height: fit-content;
    border-radius: 0.25rem;
    line-height: 4.5rem;
    margin-top: 1rem;
    padding-left: 1rem;
    backdrop-filter: blur(0.25rem);
    z-index: 99999;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--info-color);
    background-color: var(--info-background);
    border: solid 1px var(--info-background);
}

.queue_status .icon {
    margin-right: 1.25rem !important;
    font-size: 2.5rem !important;
}

.queue_status .loading {
    animation: rotation 1s linear infinite;
}

.queue_status .time {
    margin-left: auto;
    margin-right: 1rem;
}

.form-display fieldset {
    border: 1px solid var(--hilite) !important;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    margin-top: 1rem;
}

.form-display fieldset legend {
    float: initial !important;
    padding: 0 10px;
    font-weight: normal !important;
    font-size: 110%;
    width: initial !important;
}