* {
    user-select:none
}

html, body {
    font-family: inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 100%;
    width:100%
}

body.dark {
    background-color:#000
}

#app {
    height: 100%;
    width:100%
}

:root {
    --banner-bg: #c7ddff;
    --blue: #0167ff;
    --border-color: rgb(239, 243, 244);
    --border-radius: 12px;
    --bs-body-color: #1d1d1f;
    --bs-body-font-weight: 400;
    --bs-secondary-rgb: 110, 110, 115;
    --card-bg: white;
    --dark-border-color: rgb(207, 217, 222);
    --dark-button-hover: rgb(51, 51, 51);
    --disabled-bg-color: white;
    --green: #23f600;
    --highlight-bg-color: rgb(245, 245, 245);
    --input-bg-color: white;
    --light-bg-color: white;
    --light-button-hover: #e7e7e8;
    --navbar-bg-color: rgba(255, 255, 255, 0.8);
    --navbar-border-bottom: 1px solid var(--border-color);
    --purple: #8f00ff;
    --shadow-color: rgba(0, 0, 0, 0.1)
}

.dark {
    --banner-bg: rgb(21, 24, 28);
    --blue: #349aff;
    --border-color: rgba(255, 255, 255, 0.2);
    --bs-body-color: white;
    --bs-secondary-rgb: 110, 110, 115;
    --card-bg: rgb(21, 24, 28);
    --dark-border-color: rgb(83, 100, 113);
    --disabled-bg-color: black;
    --highlight-bg-color: rgb(21, 24, 28);
    --input-bg-color: rgb(32, 35, 39);
    --light-bg-color: rgb(14, 14, 16);
    --navbar-bg-color: rgba(24, 24, 27, 0.8);
    --navbar-border-bottom: none;
    --shadow-color: transparent
}

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

select, textarea, input[type=text], input[type=search], input[type=number] {
    background-color: var(--input-bg-color) !important;
    color:var(--bs-body-color) !important
}

.dark select {
    border-color:transparent
}

.dark textarea, .dark input[type=text], .dark input[type=search], .dark input[type=number] {
    border-color:transparent
}

.MainRouter {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    background-color: var(--light-bg-color);
    color:var(--bs-body-color)
}

.btn-group .btn:focus {
    box-shadow:none
}

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

a:hover {
    color:var(--blue)
}

h1 {
    font-weight:700
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select:none
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size:3.5rem
    }
}

.cursor-pointer {
    cursor:pointer
}

.cursor-default {
    cursor:default
}

.modal {
    display:block
}

.modal-xl {
    width: 90% !important;
    max-width:1600px !important
}

.my-tooltip-inner {
    max-width: 300px;
    color:#fff
}

div.my-tooltip {
    z-index: 3000 !important;
    position: relative;
    background: #343a40;
    padding: 5px;
    border-radius:.25rem
}

div.my-tooltip[data-placement=right] {
    margin-left:10px !important
}

div.my-tooltip[data-placement=right]:after, div.my-tooltip[data-placement=right]:before {
    top: 50%;
    right:100%
}

div.my-tooltip[data-placement=right]:after {
    border-right-color: #343a40;
    margin-top:-10px
}

div.my-tooltip[data-placement=left] {
    margin-right:10px !important
}

div.my-tooltip[data-placement=left]:after, div.my-tooltip[data-placement=left]:before {
    top: 50%;
    left:100%
}

div.my-tooltip[data-placement=left]:after {
    border-left-color: #343a40;
    margin-top:-10px
}

div.my-tooltip[data-placement=bottom] {
    margin-top:10px !important
}

div.my-tooltip[data-placement=bottom]:after, div.my-tooltip[data-placement=bottom]:before {
    bottom: 100%;
    left:50%
}

div.my-tooltip[data-placement=bottom]:after {
    border-bottom-color: #343a40;
    margin-left:-15px
}

div.my-tooltip[data-placement=top] {
    margin-bottom:10px !important
}

div.my-tooltip[data-placement=top]:after, div.my-tooltip[data-placement=top]:before {
    top: 100%;
    left:50%
}

div.my-tooltip[data-placement=top]:after {
    border-top-color: #343a40;
    margin-left:-15px
}

div.my-tooltip:after, div.my-tooltip:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events:none
}

div.my-tooltip:after {
    border-width:10px
}

div.my-dropdown {
    z-index: 3000 !important;
    position: relative;
    padding:5px
}

div.my-dropdown[data-placement=right] {
    margin-left:10px !important
}

div.my-dropdown[data-placement=left] {
    margin-right:10px !important
}

div.my-dropdown[data-placement=bottom] {
    margin-top:10px !important
}

div.my-dropdown[data-placement=top] {
    margin-bottom:10px !important
}

.text-hash {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block
}

.LinesEllipsis-ellipsis {
    color:var(--blue)
}

.LinesEllipsis-ellipsis:hover {
    cursor: pointer;
    text-decoration:underline
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height:40px
}

.lds-ellipsis div {
    position: absolute;
    top: 13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bs-body-color);
    animation-timing-function:cubic-bezier(0, 1, 1, 0)
}

.lds-ellipsis.white div {
    background:#fff
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation:lds-ellipsis1 .6s infinite
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation:lds-ellipsis2 .6s infinite
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation:lds-ellipsis2 .6s infinite
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation:lds-ellipsis3 .6s infinite
}

@keyframes lds-ellipsis1 {
    0% {
        transform:scale(0)
    }

    100% {
        transform:scale(1)
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform:scale(1)
    }

    100% {
        transform:scale(0)
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform:translate(0, 0)
    }

    100% {
        transform:translate(24px, 0)
    }
}

h1, h2 {
    font-weight:700 !important
}

h4 {
    font-weight:600 !important
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    opacity:.5 !important
}

.btn-group-sm > .btn, .btn-sm {
    border-radius:50rem
}

.btn-outline-secondary, .btn-outline-dark {
    border-color:var(--dark-border-color) !important
}

.dark .btn-outline-dark {
    color:var(--bs-body-color) !important
}

.btn-dark:hover {
    background-color:var(--dark-button-hover) !important
}

.btn-outline-dark:hover {
    background-color: var(--light-button-hover) !important;
    color:var(--bs-body-color) !important
}

.dark .btn-outline-dark:hover {
    background-color:var(--dark-button-hover) !important
}

.text-primary, .link-primary {
    color:var(--blue) !important
}

.bg-primary {
    background-color:var(--blue) !important
}

.bg-success {
    background-color:var(--green) !important
}

.bg-purple {
    background-color:var(--purple) !important
}

.page-item.active .page-link {
    background-color: var(--blue) !important;
    border-color:var(--blue) !important
}

.page-item:last-child .page-link {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius:50rem !important
}

.page-item:first-child .page-link {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius:50rem !important
}

.nav-item {
    font-size: 14px;
    font-weight:600
}

.nav-link {
    padding-left: 10px !important;
    padding-right:10px !important
}

table td {
    border-color: var(--border-color) !important;
    color:var(--bs-body-color)
}

.th {
    font-weight: 400;
    color: rgb(var(--bs-secondary-rgb)) !important;
    background-color: var(--highlight-bg-color) !important;
    border-bottom-color:var(--border-color) !important
}

tbody > tr:last-child {
    border:none !important
}

tbody > tr:last-child td {
    border:none !important
}

.shadow-around {
    box-shadow:0 0 20px -5px var(--shadow-color)
}

.bg-fixed {
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100%;
    background-position: center;
    background-size:cover
}

.progress-bar-global {
    background-image:linear-gradient(90deg, #22f600 0%, #43ea91 23.95%, #82e8ff 85.92%)
}

.progress-bar-personal {
    background-image:linear-gradient(90deg, #0167ff 0%, #6183ff 27.08%, #bd9dff 99.97%)
}

.progress-bar-claimed {
    background-image:linear-gradient(90deg, #ff5c00 0%, #ffb864 27.08%, #ffe600 99.97%)
}

.dark .progress {
    background-color:var(--input-bg-color)
}

.input-rounded {
    border-radius:20px
}

.input-big {
    padding:8px 16px
}

.custom-rounded {
    border-radius:var(--border-radius)
}

.text-sm {
    font-size:12px
}

.text-xs {
    font-size:10px
}

.text-md {
    font-size:14px
}

.text-bold {
    font-weight:600
}

.footer-copyright, a.footer-link {
    color:rgba(255, 255, 255, .8)
}

a.footer-link:hover {
    color:#fff !important
}

.inline-block {
    display:inline-block !important
}

.inline {
    display:inline !important
}

.width-auto {
    width:auto !important
}

.grayscale {
    filter:grayscale(1)
}

.vh-50 {
    height:50vh
}

.card-bg {
    background-color:var(--card-bg)
}

.page-link {
    border-color: var(--border-color);
    background-color:var(--card-bg)
}

.page-item.disabled .page-link {
    border-color: var(--border-color);
    background-color:var(--card-bg)
}

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

.dark .btn-close {
    filter:invert(1)
}

.dark .modal-header {
    border-bottom:none
}

.crisp {
    image-rendering: pixelated
}